/* The old launchclass.in checkout's own styles (checkout.php <style>), carried as they were.
   Additions for WooCommerce's markup are at the end, marked. */
/* Tokens + reset + base body live in /css/design-system.css.
       Page-specific overrides only below. */

    /* ── LIGHT CHECKOUT (2026-07-05) ──────────────────────────────────
       Payment pages convert best bright + high-trust with a clear focal
       card. We re-point the dark design-system tokens to a light palette
       for THIS page only, then fix the few hardcoded dark spots + swap
       gradients for solid fills (depth = shadow/hover). Markup + all
       payment/tracking JS is untouched — this is presentation only. */
    :root{
      --bg:        #EAEEF6;   /* light page ground */
      --bg2:       #FFFFFF;
      --bg3:       #FFFFFF;
      --bg-cell:   #FFFFFF;   /* white cards */
      --border:    #E7EBF3;
      --border2:   #DEE4EF;
      --border-hot:#BFD0FF;
      --text:      #0A1228;
      --text-muted:#5B6478;
      --text-dim:  #98A1B5;
      /* blue / green / red families inherit from design-system.css */
    }

    body{
      padding-bottom:140px;
      background: var(--bg);
    }
    /* Faint dot grid for texture — dark dots on the light ground */
    body::before{
      content:'';
      position:fixed; inset:0;
      background-image: radial-gradient(rgba(10,18,40,0.035) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events:none;
      z-index:0;
    }

    /* ── Header ── */
    .header{
      position:sticky; top:0; z-index:100;
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .header__inner{
      max-width:640px; margin:0 auto;
      padding:14px 20px;
      display:flex; align-items:center; gap:16px;
    }
    .header__back{
      color:var(--text-muted); text-decoration:none;
      display:flex; align-items:center; gap:4px;
      font-size:14px;
      transition: color .2s;
    }
    .header__back:hover{ color: var(--text); }
    .header__brand{
      flex:1; display:flex; align-items:center; justify-content:center;
    }
    .header__brand img{height:26px; width:auto; display:block; opacity:0.95;}
    .header__secure{
      display:flex; align-items:center; gap:5px;
      font-size:12px; color: var(--green);
      font-weight:500;
      font-family:'TASA Orbiter', sans-serif;
    }

    /* ── Container ── */
    .container{
      max-width:640px; margin:0 auto;
      padding:24px 20px;
      position:relative; z-index:1;
    }

    /* ── Error banner ── */
    .error-banner{
      display:none;
      background: #FDECEC;
      color: #B91C1C;
      border: 1px solid #F5C2C2;
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 14px;
      margin-bottom: 16px;
    }
    .error-banner.show{ display:block; }

    /* ── Card ── */
    .card{
      background: var(--bg-cell);
      border: 1px solid var(--border);
      border-radius: 14px;
      margin-bottom: 14px;
      overflow:hidden;
      box-shadow: 0 1px 2px rgba(10,18,40,0.04), 0 12px 28px rgba(10,18,40,0.09);
    }
    .card__header{
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      font-family:'TASA Orbiter', sans-serif;
      font-size: 18px;
      letter-spacing: -0.01em;
      display:flex; align-items:center; gap:10px;
    }
    .card__header .step{
      width:22px; height:22px;
      background: var(--blue-soft);
      color: var(--blue);
      border-radius: 50%;
      display:inline-flex; align-items:center; justify-content:center;
      font-family:'TASA Orbiter', sans-serif;
      font-size: 12px;
      font-weight: 600;
    }
    .card__body{ padding: 18px; }

    /* ── Product summary ── */
    .product-row{
      display:flex; justify-content:space-between; align-items:baseline;
      gap: 14px;
      padding: 2px 0 12px;
    }
    .product-row__main{ min-width:0; }
    .product-row__name{
      font-family:'TASA Orbiter', sans-serif;
      font-size: 19px;
      letter-spacing:-0.01em;
      line-height:1.2;
      margin-bottom: 4px;
    }
    /* Clamped to 2 lines — the full pitch already happened on the landing
       page; here it is reassurance, not persuasion, and an unclamped 4-line
       paragraph pushed the bump and total below the first scroll on mobile. */
    .product-row__desc{
      font-size: 12.5px;
      color: var(--text-muted);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-row__price{
      text-align:right;
      white-space: nowrap;
      position: relative;
      min-width: 130px;
    }
    /* Animated strike-through on MRP */
    .price-strike{
      position: relative;
      display: inline-block;
      color: var(--text-dim);
      font-size: 14px;
      font-family:'TASA Orbiter', sans-serif;
      opacity: 0;
      animation: priceFadeIn 0.45s 0.3s cubic-bezier(.22,1,.36,1) forwards;
      padding: 0 2px;
    }
    .price-strike::after{
      content: '';
      position: absolute;
      left: 0; right: 0;
      top: 52%;
      height: 2px;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left center;
      animation: strikeDraw 0.55s 1.05s cubic-bezier(.7,0,.3,1) forwards;
      box-shadow: 0 0 8px rgba(239,68,68,0.6);
    }
    /* Now price with reveal pop */
    .price-now{
      font-family:'TASA Orbiter', sans-serif;
      font-size: 30px;
      color: var(--text);
      display:block;
      margin-top: 2px;
      opacity: 0;
      transform: scale(0.82);
      animation: priceReveal 0.55s 1.55s cubic-bezier(.22,1,.36,1) forwards;
    }
    /* Floating discount bubble */
    .discount-tag{
      position: absolute;
      top: -14px;
      right: -6px;
      background: #EF4444;
      color: #fff;
      font-family:'TASA Orbiter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      padding: 4px 9px;
      border-radius: 999px;
      letter-spacing: 0.04em;
      box-shadow: 0 4px 14px rgba(239,68,68,0.45), inset 0 1px 0 rgba(255,255,255,0.28);
      opacity: 0;
      transform: scale(0.4) rotate(-8deg);
      animation: tagPop 0.45s 2.05s cubic-bezier(.34,1.56,.64,1) forwards, tagPulse 2.4s 2.6s infinite;
      transform-origin: center center;
      pointer-events: none;
    }
    @keyframes priceFadeIn{
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes strikeDraw{
      to { transform: scaleX(1); }
    }
    @keyframes priceReveal{
      0%   { opacity: 0; transform: scale(0.82); color: var(--blue); text-shadow: 0 0 20px var(--blue-glow); }
      60%  { opacity: 1; transform: scale(1.12); color: var(--blue); text-shadow: 0 0 20px var(--blue-glow); }
      100% { opacity: 1; transform: scale(1);    color: var(--text); text-shadow: none; }
    }
    @keyframes tagPop{
      0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
      60%  { opacity: 1; transform: scale(1.18) rotate(4deg); }
      100% { opacity: 1; transform: scale(1) rotate(-4deg); }
    }
    @keyframes tagPulse{
      0%,100% { box-shadow: 0 4px 14px rgba(239,68,68,0.45), inset 0 1px 0 rgba(255,255,255,0.28); }
      50%     { box-shadow: 0 4px 22px rgba(239,68,68,0.75), inset 0 1px 0 rgba(255,255,255,0.28); }
    }

    /* Launch Week ribbon on product card */
    /* Offer tag — replaces the blue LAUNCH WEEK ribbon (removed 2026-08-31, HG).
       Sits inline at the top of the summary instead of overhanging the corner,
       so the card needs no extra top padding to clear it. */
    .offer-tag{
      display:inline-block;
      background: var(--green);
      color: #04250F;
      padding: 3px 9px;
      font-family:'TASA Orbiter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      border-radius: 3px;
      margin: 14px 18px -4px;
    }
    .card--product{ position: relative; }
    /* Compact summary: no description, no Subtotal row, no Launch-Week row —
       roughly half the height it was. */
    .card--product .card__body{ padding: 14px 18px 16px; }
    .card--product .price-row{ padding: 7px 0; }
    /* The price column reserved 130px, which squeezed "Logo Design Worksheet"
       onto two lines and cost a whole row of height on mobile. */
    .card--product .product-row__price{ min-width: 104px; }
    .card--product .price-row.total{ padding-top: 10px; padding-bottom: 2px; margin-top: 2px; }

    /* Coupon moved below the details card */
    .coupon-block{ margin: -4px 0 14px; padding: 0 2px; }

    /* ── Price rows ── */
    .price-row{
      display:flex; justify-content:space-between; align-items:center;
      padding: 8px 0;
      font-size: 14px;
      color: var(--text-muted);
    }
    .price-row + .price-row{ border-top: 1px dashed var(--border); }

    /* Order bump — deliberately the one dashed, tinted block in the
       summary. It has to read as an offer rather than another line item,
       or nobody ticks it; but it must not shout louder than the Pay
       button, so it borrows the accent at low alpha instead of a fill. */
    /* The bump IS a card (2026-08-31): the whole surface is the label, so the
       entire card is one tap target. Inherits .card's radius / shadow / margin
       and overrides only the border + fill so it still reads as an add-on. */
    .card--bump{
      display:flex; gap:11px; align-items:flex-start; cursor:pointer;
      padding:14px 16px;
      border:1.5px dashed var(--blue);
      background:rgba(47,107,255,.05); transition:background .18s, border-color .18s;
    }
    .card--bump:hover{ background:rgba(47,107,255,.09); }
    .card--bump:has(input:checked){ background:rgba(47,107,255,.12); border-style:solid; }
    .card--bump input{ width:17px; height:17px; margin:1px 0 0; accent-color:var(--blue); flex-shrink:0; cursor:pointer; }

    /* ── Itemised inclusions ── */
    .incl{ list-style:none; margin:2px 0 4px; padding:10px 0 0; border-top:1px dashed var(--border); }
    .incl__row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:4px 0; font-size:13px; }
    .incl__label{ color:var(--text-muted); display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-width:0; }
    .incl__val{ color:var(--text-dim); white-space:nowrap; font-size:12.5px; }
    .incl__chip{
      background:var(--green); color:#04250F;
      font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
      padding:2px 6px; border-radius:3px; white-space:nowrap;
    }
    .bump__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
    .bump__head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
    .bump__title{ font-size:13.5px; font-weight:600; color:var(--text); }
    .bump__price{ font-size:13.5px; font-weight:700; color:var(--blue); }
    /* 3 lines, not 2: the bump is its own card now so there is room, and a
       2-line clamp was truncating the pitch mid-sentence ("…designing, selling
       an…") so the reader never reached the payoff. Copy still needs to land
       inside 3 lines — it is DB-driven (products.bump_description). */
    .bump__desc{
      font-size:12.5px; color:var(--text-muted); line-height:1.45;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .price-row.total{
      border-top: 1px solid var(--border2) !important;
      padding-top: 14px;
      margin-top: 6px;
      color: var(--text);
      font-size: 15px;
    }
    .price-row.total strong{
      font-family:'TASA Orbiter', sans-serif;
      font-size: 28px;
      font-weight: 600;
      display: inline-block;
      transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .35s;
    }
    .price-row.total strong.flash{
      animation: totalFlash 0.6s cubic-bezier(.22,1,.36,1);
    }
    @keyframes totalFlash{
      0%   { transform: scale(1);    color: var(--text); }
      40%  { transform: scale(1.18); color: var(--blue); text-shadow: 0 0 16px var(--blue-glow); }
      100% { transform: scale(1);    color: var(--text); text-shadow: none; }
    }
    .price-row__discount{ color: var(--green); }
    .price-row__discount-tag{
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .price-row__discount-tag .pct-pill{
      background: rgba(16,185,129,0.18);
      color: #047857;
      font-family:'TASA Orbiter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.04em;
    }

    /* Launch row — limited-time pulse */
    #launch-discount-row{
      position: relative;
    }
    #launch-discount-row::before{
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px; height: 4px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--green);
      animation: blink 1.6s infinite;
    }

    /* ── Savings bar ── */
    .savings{
      margin-top: 14px;
      background: #E9F8F0;
      border: 1px solid #BBE9CF;
      color: #047857;
      border-radius: 10px;
      padding: 11px 14px;
      font-size: 13px;
      display:flex; align-items:center; gap: 10px;
      font-family:'TASA Orbiter', sans-serif;
      position: relative;
      overflow: hidden;
      transition: all .35s cubic-bezier(.22,1,.36,1);
    }
    .savings::before{
      content: '';
      position: absolute;
      top: 0; left: -80%;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(16,185,129,0.15), transparent);
      animation: savingsShimmer 3.2s 2.5s infinite;
    }
    @keyframes savingsShimmer{
      0%   { left: -80%; }
      100% { left: 180%; }
    }
    .savings .pct-badge{
      background: var(--green);
      color: #053426;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    /* ── Form ── */
    .form-group{ margin-bottom: 14px; }
    .form-group:last-child{ margin-bottom: 0; }
    .form-label{
      display:block;
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
      font-family:'TASA Orbiter', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .form-input{
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 14px 16px;
      font-size: 16px;
      color: var(--text);
      font-family:'TASA Orbiter', sans-serif;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .form-input::placeholder{ color: var(--text-dim); }
    .form-input:focus{
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 0 3px var(--blue-soft);
      background: var(--bg2);
    }
    .form-hint{
      font-size: 12px;
      color: var(--text-dim);
      margin-top: 5px;
    }

    /* ── Coupon ── */
    .coupon-row{
      display:flex; gap: 8px;
      align-items: center;
      background: var(--bg);
      border: 1px dashed var(--border2);
      border-radius: 10px;
      padding: 12px 14px;
      margin-top: 14px;
      font-size: 13px;
    }
    .coupon-row__code{
      font-family:'TASA Orbiter', sans-serif;
      color: var(--blue);
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .coupon-row__label{ color: var(--text-muted); flex: 1; }
    .coupon-applied{
      background: rgba(16,185,129,0.08);
      border-color: rgba(16,185,129,0.35);
    }
    .coupon-applied .coupon-row__code{ color: #047857; }
    .coupon-toggle{
      color: var(--text-muted);
      background: none; border: none;
      font-size: 13px;
      cursor: pointer;
      padding: 4px 0;
      margin-top: 10px;
      font-family: inherit;
      text-decoration: underline;
    }
    .coupon-toggle:hover{ color: var(--text); }
    .coupon-input-row{
      display: none;
      gap: 8px; margin-top: 10px;
    }
    .coupon-input-row.show{ display: flex; }
    .coupon-input{
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border2);
      border-radius: 8px;
      padding: 10px 12px;
      color: var(--text);
      font-family:'TASA Orbiter', sans-serif;
      font-size: 13px;
      text-transform: uppercase;
    }
    .coupon-apply-btn{
      background: var(--blue-soft);
      color: var(--blue);
      border: 1px solid var(--border-hot);
      border-radius: 8px;
      padding: 10px 16px;
      cursor: pointer;
      font-family:'TASA Orbiter', sans-serif;
      font-size: 12px;
      font-weight: 600;
    }

    /* ── Trust / payment methods ── */
    .payment-logos{
      display: flex;
      justify-content: center;
      margin-top: 18px;
    }
    .payment-logos img{
      width: 100%;
      max-width: 320px;
      height: auto;
      opacity: .9;
    }

    /* ── Sticky pay bar ── */
    .paybar{
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(14px);
      border-top: 1px solid var(--border);
      box-shadow: 0 -6px 24px rgba(10,18,40,0.08);
      padding: 14px 20px;
      z-index: 90;
    }
    .paybar__inner{
      max-width: 640px;
      margin: 0 auto;
      display: flex; align-items: center; gap: 14px;
    }
    .paybar__price{
      display:flex; flex-direction:column;
    }
    .paybar__price-now{
      font-family:'TASA Orbiter', sans-serif;
      font-size: 24px;
      color: var(--text);
      line-height: 1;
    }
    .paybar__price-sub{
      font-size: 11px;
      color: var(--text-muted);
      font-family:'TASA Orbiter', sans-serif;
      margin-top: 3px;
    }
    /* 3D blue Pay button, matches landing */
    .btn-pay{
      flex: 1;
      padding: 15px 20px;
      background: var(--blue);
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      border: 1px solid var(--blue-deep);
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: 0.01em;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        0 2px 0 #1F4DBA,
        0 4px 0 #1F4DBA,
        0 10px 22px rgba(47,107,255,0.38);
      transition: transform .12s cubic-bezier(.4,0,.2,1), background .15s, box-shadow .25s;
    }
    .btn-pay:hover{
      transform: translateY(-2px);
      background: #5E98FF;
    }
    .btn-pay:active{ transform: translateY(0); }
    .btn-pay:disabled{
      opacity: .7;
      cursor: not-allowed;
      transform: none;
    }

    /* ── Savings strip · sticky directly under the header ──
       Single-page checkout (was a 2-step wizard until 2026-08-30, where the
       entire offer sat on step 2 behind the form and 9/9 ad visitors left
       without typing a character). This keeps the value proposition on
       screen the whole time the buyer is filling in their details. */
    .savings-strip{
      position: sticky; top: 57px; z-index: 90;
      max-width: 640px; margin: 0 auto 14px;
      background: #E9F8F0;
      border: 1px solid #BBE9CF;
      color: #047857;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      display: flex; align-items: center; gap: 10px;
      font-family:'TASA Orbiter', sans-serif;
      overflow: hidden;
    }
    .savings-strip .pct-badge{
      background: var(--green);
      color: #053426;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }

    /* ── Footer microprint ── */
    .micro{
      text-align:center;
      font-size: 11px;
      color: var(--text-dim);
      margin-top: 24px;
      font-family:'TASA Orbiter', sans-serif;
    }
    .micro a{ color: var(--text-muted); text-decoration: underline; }

    /* ── Responsive ── */
    @media (max-width: 480px){
      .container{ padding: 16px 14px; }
      .card__body{ padding: 14px; }
      .card--product .card__body{ padding: 12px 14px 14px; }
      .offer-tag{ margin: 12px 14px -4px; }
      .product-row__name{ font-size: 18px; }
      .price-now{ font-size: 22px; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ animation: none !important; transition: none !important; }
    }

/* ── WooCommerce's markup in the old design (added for WordPress, Oct 2026) ───────────────────── */
:root{color-scheme:light}
#customer_details .woocommerce-billing-fields h3{display:none}
#customer_details .form-row{margin:0 0 14px;padding:0;display:block}
#customer_details .form-row:last-child{margin-bottom:0}
#customer_details .form-row label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;font-family:'TASA Orbiter',sans-serif}
#customer_details .form-row label .required{display:none}
#customer_details .form-row .optional{display:none}
#customer_details .woocommerce-input-wrapper{display:block}
#customer_details .input-text{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--border2);border-radius:10px;padding:13px 14px;font-size:16px;color:var(--text);font-family:inherit;transition:border-color .2s, box-shadow .2s}
#customer_details .input-text:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.15)}
#customer_details .form-row .description{display:block;font-size:12px;color:var(--text-dim);margin-top:6px;position:static;background:none;padding:0;border:0}
#customer_details .woocommerce-invalid .input-text{border-color:#EF4444}
/* The summary above is the order review; WooCommerce's own table and gateway list stay for its script only. */
#order_review .woocommerce-checkout-review-order-table{display:none}
#order_review #payment{background:none;border:0;margin:0;padding:0}
#order_review .wc_payment_methods{list-style:none;margin:0;padding:0}
#order_review .wc_payment_methods li:only-child{display:none}
#order_review .wc_payment_method label{font-size:13px}
#order_review .place-order{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.woocommerce-NoticeGroup-checkout,.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-error,.woocommerce-message,.woocommerce-info{list-style:none;margin:0 0 14px;padding:12px 16px;border-radius:10px;font-size:14px;background:#FDECEC;color:#B91C1C;border:1px solid #F5C2C2}
.woocommerce-message,.woocommerce-info{background:#EEF4FF;color:#1a4ccc;border-color:#BFD0FF}
.error-banner a{color:inherit;text-decoration:underline}
.blockUI.blockOverlay{background:rgba(255,255,255,.55)!important}

/* ── Order-pay: "Complete your payment" (woocommerce/checkout/order-receipt.php, 11 Oct 2026) ── */
.lc-pay{animation:lc-pay-in .45s cubic-bezier(.16,1,.3,1) both}
@keyframes lc-pay-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lc-pay .card__body{padding:26px 24px 22px}
.lc-pay__eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);font-family:'TASA Orbiter',sans-serif}
.lc-pay__title{margin:0 0 18px;font-family:'TASA Orbiter',sans-serif;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.lc-pay__items{list-style:none;margin:0;padding:0}
.lc-pay__item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.lc-pay__item:first-child{border-top:0;padding-top:0}
.lc-pay__thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg);border:1px solid var(--border)}
.lc-pay__name{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text);line-height:1.3}
.lc-pay__tag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:600;vertical-align:1px}
.lc-pay__price{font-size:15px;color:var(--text-muted);white-space:nowrap}
.lc-pay__total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 18px;padding-top:14px;border-top:1px dashed var(--border2);font-size:14px;color:var(--text-muted)}
.lc-pay__total strong{font-family:'TASA Orbiter',sans-serif;font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.lc-pay__gateway p{margin:0}
.lc-pay__gateway p:has(#btn-razorpay){display:flex;flex-direction:column;align-items:stretch;gap:6px}
.lc-pay__btn{width:100%;display:block}
.lc-pay__cancel{align-self:center;background:none;border:0;padding:8px;font:inherit;font-size:13px;color:var(--text-dim);cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.lc-pay__cancel:hover{color:var(--text-muted)}
.lc-pay #msg-razorpay-success{margin:0 0 12px!important;padding:12px 14px!important;border:1px solid var(--border-hot)!important;border-radius:10px!important;background:#EEF4FF!important;color:#1a4ccc!important;font-size:14px}
.lc-pay__note{margin:14px 0 0;text-align:center;font-size:12px;line-height:1.6;color:var(--text-dim)}
@media (max-width:480px){.lc-pay .card__body{padding:20px 16px 18px}.lc-pay__title{font-size:23px}}
@media (prefers-reduced-motion:reduce){.lc-pay{animation:none}}