/* ─────────────────────────────────────────────────────────────────────
   payment.css — Design system pages Payment / Subscription (Sprint S5 2026-08-01)
   Extrait des <style> inline de :
     payment, taxi_payment, subscription_form, subscription_confirmation,
     subscriptions_overview.

   Scoping : chaque section est scopée par body.<page>-page.
   Tokens --tk-* viennent de main.css.
   ───────────────────────────────────────────────────────────────────── */

/* ── Mobile polish global pour toutes les pages payment (< 768px) ─── */
@media (max-width: 767px) {
  body.payment-page,
  body.taxi-payment-page,
  body.subscription-form-page,
  body.subscription-confirmation-page,
  body.subscriptions-overview-page {
    /* Éviter le collapse safari sur min-height:80vh problematique */
  }
  body.subscription-form-page .page-title h1,
  body.payment-page .page-title h1,
  body.subscription-confirmation-page .page-title h1 {
    font-size: 1.35rem !important;
    line-height: 1.2;
  }
  /* Forcer les sections cards resserrées sur mobile */
  body.payment-page main .card,
  body.taxi-payment-page main .card,
  body.subscription-form-page main .card,
  body.subscription-confirmation-page main .card {
    padding: 1rem !important;
    border-radius: 14px !important;
  }
}

/* Paragraphes justify (règle DA TouKidou) */
body.payment-page p,
body.taxi-payment-page p,
body.subscription-form-page .section-body p,
body.subscription-confirmation-page p,
body.subscriptions-overview-page p {
  text-align: justify;
  hyphens: none;
}
body.payment-page .btn p,
body.subscription-form-page .btn p,
body.subscription-form-page label p,
body.subscription-form-page .price-tag p,
body.subscription-confirmation-page .btn p { text-align: inherit; hyphens: none; }


/* ═══════════════════════════════════════════════════════════════
   EXTRACTED PAGE-SPECIFIC STYLES (Sprint S5 2026-08-01)
   Chaque section est scopée par body.<page>-page.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── accounts/payment.html → body.payment-page ─────────── */
body.payment-page{
 background: linear-gradient(160deg,#eef3ff 0%,#f4f9ff 60%,#f0fdf4 100%) !important; }
body.payment-page .pay-shell {
 min-height:80vh; display:flex; align-items:flex-start; justify-content:center; padding:2.5rem 1rem 3rem; }
body.payment-page .pay-card {
 width:100%; max-width:540px; background:rgba(255,255,255,.92); border:1px solid rgba(63,99,217,.13); border-radius:28px; box-shadow:0 24px 60px rgba(24,46,104,.1); overflow:hidden; }
body.payment-page .pay-header {
 padding:1.75rem 2rem 1.25rem; background: radial-gradient(circle at top left,rgba(72,114,255,.13),transparent 40%), radial-gradient(circle at bottom right,rgba(49,204,149,.09),transparent 35%), rgba(255,255,255,.5); border-bottom:1px solid rgba(63,99,217,.09); text-align:center; }
body.payment-page .pay-header-icon {
 width:58px; height:58px; border-radius:18px; background:linear-gradient(135deg,#15803d,#16a34a); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem; margin:0 auto .9rem; box-shadow:0 10px 24px rgba(22,163,74,.28); }
body.payment-page .pay-header-eyebrow {
 font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#15803d; margin-bottom:.25rem; }
body.payment-page .pay-header h1 {
 font-size:1.25rem; font-weight:800; color:#14213d; margin:0; }
body.payment-page .pay-body {
 padding:1.5rem 2rem; }
body.payment-page .pay-section-label {
 font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; margin:1rem 0 .65rem; }
body.payment-page .pay-row {
 display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:.55rem 0; border-bottom:1px solid rgba(20,33,61,.06); font-size:.87rem; }
body.payment-page .pay-row:last-of-type {
 border-bottom:none; }
body.payment-page .pay-row-lbl {
 color:#667085; font-weight:500; flex-shrink:0; }
body.payment-page .pay-row-val {
 font-weight:600; color:#14213d; text-align:right; }
body.payment-page .pay-instructions {
 background:rgba(22,163,74,.06); border:1px solid rgba(22,163,74,.18); border-radius:14px; padding:1rem 1.25rem; margin:.75rem 0; }
body.payment-page .pay-instructions-title {
 font-weight:800; color:#15803d; font-size:.9rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
body.payment-page .pay-amount {
 display:flex; justify-content:space-between; align-items:center; font-size:1.1rem; font-weight:800; color:#14213d; padding:.6rem 0 0; margin-top:.5rem; border-top:1.5px solid rgba(22,163,74,.2); }
body.payment-page .pay-btn {
 display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.82rem 1.5rem; background:linear-gradient(135deg,#15803d,#16a34a); color:#fff; border:none; border-radius:12px; font-size:.95rem; font-weight:700; cursor:pointer; transition:opacity .13s; box-shadow:0 6px 20px rgba(22,163,74,.28); margin-top:1.25rem; }
body.payment-page .pay-btn:hover {
 opacity:.9; }
body.payment-page .pay-trust {
 display:flex; align-items:center; justify-content:center; gap:1.25rem; flex-wrap:wrap; padding:.9rem 1.5rem; border-top:1px solid rgba(20,33,61,.07); font-size:.73rem; color:#9ca3af; }
body.payment-page .pay-trust span {
 display:flex; align-items:center; gap:.3rem; }


/* ─────────── accounts/taxi_payment.html → body.taxi-payment-page ─────────── */
body.taxi-payment-page{
 background: linear-gradient(160deg, #eef3ff 0%, #f4f9ff 60%, #f0fdf4 100%) !important; }
body.taxi-payment-page .pay-shell {

  min-height: 80vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2.5rem 1rem 3rem;
}
body.taxi-payment-page .pay-card {

  width: 100%; max-width: 560px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(63,99,217,.13);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(24,46,104,.1);
  overflow: hidden;
}
body.taxi-payment-page .pay-header {

  padding: 1.75rem 2rem 1.25rem;
  background:
    radial-gradient(circle at top left, rgba(72,114,255,.13), transparent 40%),
    radial-gradient(circle at bottom right, rgba(49,204,149,.09), transparent 35%),
    rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(63,99,217,.09);
  text-align: center;
}
body.taxi-payment-page .pay-header-icon {

  width: 58px; height: 58px; border-radius: 18px;
  background: linear-gradient(135deg, #2856d8, #2e87ef);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem;
  margin: 0 auto .9rem;
  box-shadow: 0 10px 24px rgba(46,102,224,.28);
}
body.taxi-payment-page .pay-header-eyebrow {

  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: #2856d8; margin-bottom: .25rem;
}
body.taxi-payment-page .pay-header h1 {
 font-size: 1.3rem; font-weight: 800; color: #14213d; margin: 0; }
body.taxi-payment-page .pay-body {
 padding: 1.5rem 2rem; }
body.taxi-payment-page .pay-section-label {

  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #9ca3af; margin: 1.1rem 0 .65rem;
}
body.taxi-payment-page .pay-section-label:first-child {
 margin-top: 0; }
body.taxi-payment-page .pay-row {

  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: .55rem 0;
  border-bottom: 1px solid rgba(20,33,61,.06);
  font-size: .85rem;
}
body.taxi-payment-page .pay-row:last-of-type {
 border-bottom: none; }
body.taxi-payment-page .pay-row-lbl {
 color: #667085; font-weight: 500; flex-shrink: 0; }
body.taxi-payment-page .pay-row-val {
 font-weight: 600; color: #14213d; text-align: right; }
body.taxi-payment-page .pay-price-box {

  background: rgba(40,86,216,.05);
  border: 1px solid rgba(40,86,216,.14);
  border-radius: 14px; padding: 1rem 1.25rem;
  margin: 1rem 0;
}
body.taxi-payment-page .pay-price-line {

  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: #374151; padding: .3rem 0;
}
body.taxi-payment-page .pay-price-total {

  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.05rem; font-weight: 800; color: #14213d;
  padding: .5rem 0 0; margin-top: .35rem;
  border-top: 1.5px solid rgba(40,86,216,.18);
}
body.taxi-payment-page .pay-btn {

  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .78rem 1.5rem;
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: #fff; border: none; border-radius: 12px;
  font-size: .95rem; font-weight: 700;
  cursor: pointer; transition: opacity .13s;
  box-shadow: 0 6px 20px rgba(22,163,74,.28);
  margin-top: 1.25rem;
}
body.taxi-payment-page .pay-btn:hover {
 opacity: .9; }
body.taxi-payment-page .pay-trust {

  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  flex-wrap: wrap;
  padding: .9rem 1.5rem;
  border-top: 1px solid rgba(20,33,61,.07);
  font-size: .73rem; color: #9ca3af;
}
body.taxi-payment-page .pay-trust span {
 display: flex; align-items: center; gap: .3rem; }


/* ─────────── accounts/subscription_form.html → body.subscription-form-page ─────────── */
body.subscription-form-page .sub-plan-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
body.subscription-form-page .sub-plan-grid {
 grid-template-columns: 1fr; }
 }
body.subscription-form-page .sub-plan-card {

  border-radius: 20px;
  border: 2px solid var(--tk-border);
  padding: 1.5rem 1.25rem;
  background: #fff;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
body.subscription-form-page .sub-plan-card:hover {

  transform: translateY(-4px);
  box-shadow: var(--tk-sh-hover);
}
body.subscription-form-page .sub-plan-card.is-selected {

  border-color: var(--tk-blue);
  background: linear-gradient(180deg, var(--tk-blue-50) 0%, #fff 60%);
  box-shadow: var(--tk-sh-blue);
}
body.subscription-form-page .sub-plan-card.is-selected.is-yellow {
 border-color: var(--tk-yellow); background: linear-gradient(180deg,rgba(249,193,59,.07) 0%,#fff 60%); box-shadow: var(--tk-sh-yellow); }
body.subscription-form-page .sub-plan-card.is-selected.is-green {
 border-color: var(--tk-green);  background: linear-gradient(180deg,rgba(16,188,105,.07) 0%,#fff 60%); box-shadow: var(--tk-sh-green); }
body.subscription-form-page .sub-plan-check {

  position: absolute;
  top: 12px; right: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--tk-border);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
body.subscription-form-page .sub-plan-card.is-selected .sub-plan-check {
 background: var(--tk-blue);   border-color: var(--tk-blue);   }
body.subscription-form-page .sub-plan-card.is-selected.is-yellow .sub-plan-check {
 background: var(--tk-yellow); border-color: var(--tk-yellow); }
body.subscription-form-page .sub-plan-card.is-selected.is-green  .sub-plan-check {
 background: var(--tk-green);  border-color: var(--tk-green);  }
body.subscription-form-page .sub-plan-card.is-selected .sub-plan-check::after {
 content: "✓"; color: #fff; font-size: .72rem; font-weight: 900; }
body.subscription-form-page .sub-plan-icon {

  width: 52px; height: 52px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
body.subscription-form-page .sub-plan-icon.blue {
 background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%); box-shadow: var(--tk-sh-blue); }
body.subscription-form-page .sub-plan-icon.yellow {
 background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-d) 100%); box-shadow: var(--tk-sh-yellow); }
body.subscription-form-page .sub-plan-icon.green {
 background: linear-gradient(135deg, var(--tk-green) 0%, var(--tk-green-d) 100%); box-shadow: var(--tk-sh-green); }
body.subscription-form-page .sub-plan-name {

  font-weight: 800;
  color: var(--tk-navy);
  font-size: .97rem;
  letter-spacing: -.02em;
}
body.subscription-form-page .sub-plan-price {

  font-size: 1.35rem;
  font-weight: 800;
  color: var(--tk-navy);
  line-height: 1;
}
body.subscription-form-page .sub-plan-price small {
 font-size: .8rem; font-weight: 500; color: var(--tk-muted); }
body.subscription-form-page .sub-plan-features {

  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .35rem;
  flex: 1;
}
body.subscription-form-page .sub-plan-features li {

  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .83rem; color: #374151; line-height: 1.45;
}
body.subscription-form-page .sub-plan-features li i {
 color: var(--tk-green); font-size: .9rem; margin-top: .1rem; flex-shrink: 0; }
body.subscription-form-page .sub-trip-option {

  border: 2px solid var(--tk-border);
  border-radius: 14px;
  padding: .85rem 1rem .85rem 2.6rem;
  flex: 1 1 140px;
  transition: border-color .15s, background .15s;
  cursor: pointer;
  background: #fff;
}
body.subscription-form-page .sub-trip-option:has(input:checked) {

  border-color: var(--tk-blue);
  background: var(--tk-blue-50);
}
body.subscription-form-page .sub-preview-box {

  border: 1.5px solid rgba(48,137,197,.25);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, var(--tk-blue-50) 0%, #fff 100%);
}
body.subscription-form-page .sub-price-summary {

  border: 1px solid var(--tk-border);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(180deg, #fff 0%, var(--tk-blue-50) 100%);
}
body.subscription-form-page .sub-price-row {

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem 0;
  font-size: .92rem;
  color: var(--tk-muted);
}
body.subscription-form-page .sub-price-row strong {
 color: var(--tk-navy); }
body.subscription-form-page .sub-price-row.total {

  font-weight: 800;
  font-size: 1.05rem;
  border-top: 2px solid var(--tk-border);
  margin-top: .6rem;
  padding-top: .65rem;
  color: var(--tk-navy) !important;
}
body.subscription-form-page .sub-price-row.total strong {

  color: var(--tk-blue);
  font-size: 1.18rem;
}
body.subscription-form-page .sub-cta-btn {

  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: 1rem 2rem;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--tk-sh-blue);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
}
body.subscription-form-page .sub-cta-btn:hover:not(:disabled) {

  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(48,137,197,.32);
  color: #fff;
}
body.subscription-form-page .sub-cta-btn:disabled {
 opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
body.subscription-form-page .sub-all-children-box {

  background: linear-gradient(135deg, var(--tk-blue-50) 0%, #fff 100%);
  border: 1.5px solid rgba(48,137,197,.28);
  border-radius: 16px;
  padding: 1rem 1.2rem;
}
body.subscription-form-page .sub-section-label {

  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tk-blue-d);
  margin-bottom: .85rem;
}
body.subscription-form-page .sub-section-label::before {

  content: '';
  width: 20px; height: 2px;
  background: var(--tk-blue);
  border-radius: 1px;
}
body.subscription-form-page .sub-plan-popular {

  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tk-yellow);
  color: var(--tk-navy);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .22rem .85rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(249,193,59,.35);
}
body.subscription-form-page .sub-compare-toggle {

  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; color: var(--tk-blue-d);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(48,137,197,.3);
  text-underline-offset: 3px;
}
body.subscription-form-page .sub-compare-toggle:hover {
 color: var(--tk-blue); }
body.subscription-form-page .sub-compare-wrap {

  border: 1px solid var(--tk-border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: .85rem;
}
body.subscription-form-page .sub-compare-wrap table {
 width: 100%; border-collapse: collapse; font-size: .83rem; }
body.subscription-form-page .sub-compare-wrap thead th {

  padding: .75rem 1rem; font-weight: 700; text-align: center;
  background: var(--tk-navy); color: #fff; white-space: nowrap;
}
body.subscription-form-page .sub-compare-wrap thead th:first-child {
 text-align: left; border-radius: 0; }
body.subscription-form-page .sub-compare-wrap thead th.is-highlight {

  background: var(--tk-yellow); color: var(--tk-navy);
}
body.subscription-form-page .sub-compare-wrap tbody tr {
 border-bottom: 1px solid var(--tk-border); }
body.subscription-form-page .sub-compare-wrap tbody tr:last-child {
 border-bottom: none; }
body.subscription-form-page .sub-compare-wrap tbody tr:nth-child(even) td {
 background: var(--tk-blue-50); }
body.subscription-form-page .sub-compare-wrap tbody td {
 padding: .65rem 1rem; color: var(--tk-navy); }
body.subscription-form-page .sub-compare-wrap tbody td:not(:first-child) {
 text-align: center; }
body.subscription-form-page .sub-compare-wrap tbody td.is-highlight {
 background: rgba(249,193,59,.07) !important; font-weight: 700; }
body.subscription-form-page .modal-content {
 border-radius: 20px; overflow: hidden; }


/* ─────────── accounts/subscription_confirmation.html → body.subscription-confirmation-page ─────────── */
body.subscription-confirmation-page .sc-hero {

  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-d) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 2.25rem 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(48,137,197,.28);
}
body.subscription-confirmation-page .sc-hero::after {

  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events: none;
}
body.subscription-confirmation-page .sc-hero-badge {

  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  padding: .35rem .9rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  margin-bottom: .9rem;
}
body.subscription-confirmation-page .sc-hero h1 {
 font-weight: 800; font-size: 1.55rem; margin: 0 0 .55rem; line-height: 1.25; }
body.subscription-confirmation-page .sc-hero p {
 font-size: .98rem; margin: 0; opacity: .95; line-height: 1.55; max-width: 620px; }
body.subscription-confirmation-page .sc-section {

  background: #fff; border: 1px solid var(--tk-border); border-radius: 18px;
  padding: 1.5rem 1.35rem; margin-bottom: 1rem;
}
body.subscription-confirmation-page .sc-section-title {

  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  color: var(--tk-blue-d); text-transform: uppercase;
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem 0;
}
body.subscription-confirmation-page .sc-section-title::before {

  content: ""; width: 3px; height: 16px; background: var(--tk-blue); border-radius: 3px;
}
body.subscription-confirmation-page .sc-step-list {
 list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
body.subscription-confirmation-page .sc-step {

  display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start;
}
body.subscription-confirmation-page .sc-step-num {

  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tk-yellow), var(--tk-yellow-d));
  color: #0D2237; font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--tk-sh-yellow);
}
body.subscription-confirmation-page .sc-step-body h4 {
 font-weight: 700; font-size: .95rem; color: var(--tk-navy); margin: .3rem 0 .25rem; }
body.subscription-confirmation-page .sc-step-body p {
 font-size: .85rem; color: var(--tk-muted); margin: 0; line-height: 1.5; }
body.subscription-confirmation-page .sc-recap-row {

  display: grid; grid-template-columns: 1fr auto; gap: .5rem;
  padding: .7rem 0; border-bottom: 1px dashed var(--tk-border);
}
body.subscription-confirmation-page .sc-recap-row:last-child {
 border-bottom: 0; }
body.subscription-confirmation-page .sc-recap-label {
 font-size: .85rem; color: var(--tk-muted); }
body.subscription-confirmation-page .sc-recap-value {
 font-size: .9rem; font-weight: 700; color: var(--tk-navy); text-align: right; }
body.subscription-confirmation-page .sc-recap-total {

  font-size: 1.05rem; color: var(--tk-blue-d);
}
body.subscription-confirmation-page .sc-cta-row {
 display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
body.subscription-confirmation-page .sc-cta-primary {

  flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, var(--tk-blue), var(--tk-blue-d));
  color: #fff; font-weight: 800; font-size: .95rem;
  box-shadow: 0 8px 22px rgba(48,137,197,.35);
  transition: transform .15s, box-shadow .15s;
}
body.subscription-confirmation-page .sc-cta-primary:hover {
 transform: translateY(-1px); box-shadow: 0 12px 26px rgba(48,137,197,.42); color: #fff; }
body.subscription-confirmation-page .sc-cta-secondary {

  flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 14px; text-decoration: none;
  background: #fff; color: var(--tk-navy); font-weight: 700; font-size: .95rem;
  border: 1.5px solid var(--tk-border);
  transition: background .15s, border-color .15s;
}
body.subscription-confirmation-page .sc-cta-secondary:hover {
 background: var(--tk-blue-50); border-color: var(--tk-blue); color: var(--tk-navy); }


/* ─────────── accounts/subscriptions_overview.html → body.subscriptions-overview-page ─────────── */
body.subscriptions-overview-page .so-row {

  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1rem;
  border: 1px solid var(--tk-border);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  margin-bottom: .6rem;
  transition: box-shadow .15s, transform .15s;
}
body.subscriptions-overview-page .so-row:hover {
 box-shadow: var(--tk-sh-hover); transform: translateY(-1px); }
body.subscriptions-overview-page .so-row-icon {

  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
body.subscriptions-overview-page .so-icon-active {
 background: rgba(16,188,105,.1);  color: var(--tk-green-d); }
body.subscriptions-overview-page .so-icon-pending {
 background: rgba(249,193,59,.12); color: var(--tk-yellow-d); }
body.subscriptions-overview-page .so-icon-past {
 background: rgba(92,115,138,.1);  color: var(--tk-muted); }
body.subscriptions-overview-page .so-icon-refused {
 background: rgba(220,53,69,.08);  color: #dc3545; }
body.subscriptions-overview-page .so-main {
 min-width: 0; }
body.subscriptions-overview-page .so-title {
 font-weight: 700; color: var(--tk-navy); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.subscriptions-overview-page .so-sub {
 font-size: .79rem; color: var(--tk-muted); margin-top: .15rem; }
body.subscriptions-overview-page .so-badge {

  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .75rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
body.subscriptions-overview-page .so-badge-active {
 background: rgba(16,188,105,.12); color: var(--tk-green-d); }
body.subscriptions-overview-page .so-badge-pending {
 background: rgba(249,193,59,.14); color: var(--tk-yellow-d); }
body.subscriptions-overview-page .so-badge-past {
 background: rgba(92,115,138,.1);  color: var(--tk-muted); }
body.subscriptions-overview-page .so-badge-refused {
 background: rgba(220,53,69,.1);   color: #dc3545; }
body.subscriptions-overview-page .so-arrow {
 flex-shrink: 0; color: #9ca3af; }
@media (max-width: 479px) {
body.subscriptions-overview-page .so-row {
 grid-template-columns: 40px 1fr auto; }
body.subscriptions-overview-page .so-badge {
 display: none; }

}