@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ===========================================================================
   Kartivo checkout skin — the Premium "ink and paper" design system, applied
   to the older templates.
   ---------------------------------------------------------------------------
   WHY THIS IS A STYLESHEET AND NOT A REWRITE
   ---------------------------------------------------------------------------
   Templates 1-4 are live checkout pages that take money. Their markup is
   wired to checkout.js, payValidation.js and subscription.js by id and by
   class: #payBtn, #submit, #number, #email, #first_name, #card_number,
   #card_expiry, #card_cvc, #spinner, #button-text, #payment-message,
   .product_price, .item-name, .item-price, the coupon nodes and the India-GST
   state field. A redesign that moved markup around would risk the worst bug
   this codebase has: "Complete Payment does nothing", which has already been
   caused once by an empty required GST state field silently gating the
   gateway, and once by checkout.js injecting rows whose classes a stylesheet
   did not match.
   So this file changes NO markup and NO selector a script depends on. Each
   template gains exactly two things: this stylesheet, and `kv-skin` on its
   <body>. Everything below restyles primitives those pages already use.
   Remove the class and the page reverts exactly.
   ---------------------------------------------------------------------------
   SCOPE: every rule is under body.kv-skin. Nothing here can affect a page
   that has not opted in, including the Premium template itself, which carries
   its own copy of these tokens inline and must not be double-styled.
   =========================================================================== */

body.kv-skin {
    /* ── ink ──────────────────────────────────────────────────────────── */
    --ink:            #141b2d;
    --ink-soft:       #5b647a;
    --ink-faint:      #8b93a5;
    /* ── paper (warm-biased so it sits with the flame, not against it) ── */
    --paper:          #f5f2ed;
    --surface:        #ffffff;
    --surface-sunk:   #fbf9f5;
    --rule:           #e5e0d6;
    --rule-soft:      #efebe3;
    /* ── the one accent ───────────────────────────────────────────────── */
    --flame:          #e2560c;
    --flame-deep:     #bc4208;
    --flame-wash:     #fdf2ea;
    /* ── seal green: secure / saved / done ────────────────────────────── */
    --seal:           #0d6b50;
    --seal-wash:      #eaf5f0;
    --alarm:          #c2341d;
    --alarm-wash:     #fdf1ef;

    --shadow-sm: 0 1px 2px rgba(20, 27, 45, .05);
    --shadow-md: 0 1px 2px rgba(20, 27, 45, .05), 0 6px 18px -8px rgba(20, 27, 45, .12);
    --radius-sm: 9px;
    --radius-md: 13px;
    --radius-lg: 18px;
    --font-heading: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-family: var(--font-body);
    /* A hairline of flame at the very top edge — the page is branded before a
       single pixel of content loads. Same device as the Premium template. */
    background:
        linear-gradient(var(--flame), var(--flame)) top center / 100% 3px no-repeat,
        var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap's own page-tint utilities would fight the paper ground.
   pay_subscriptions.php ships <body class="bg-light h-100">. */
body.kv-skin.bg-light { background-color: transparent; }

/* ── type ───────────────────────────────────────────────────────────────── */
body.kv-skin h1, body.kv-skin h2, body.kv-skin h3,
body.kv-skin h4, body.kv-skin h5, body.kv-skin h6 {
    font-family: var(--font-heading);
    color: var(--ink);
    letter-spacing: -.01em;
    text-wrap: balance;
}
body.kv-skin .text-muted { color: var(--ink-faint) !important; }
body.kv-skin label,
body.kv-skin .form-label,
body.kv-skin .kv-field-label {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink-soft);
    letter-spacing: .005em;
}
/* Uppercase section labels read as labels, not shouting. */
body.kv-skin .text-uppercase {
    letter-spacing: .08em;
    font-size: 12px;
    color: var(--ink-faint);
}

/* ── surfaces ───────────────────────────────────────────────────────────── */
body.kv-skin .card,
body.kv-skin .bg-white {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
/* Bootstrap's .border + .rounded pairs are used as sub-panels on these
   pages; make them the sunk surface rather than another floating card. */
body.kv-skin .border.rounded,
body.kv-skin .card .card {
    background: var(--surface-sunk) !important;
    border-color: var(--rule-soft) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none;
}
body.kv-skin .shadow-sm { box-shadow: var(--shadow-md) !important; }
body.kv-skin hr { border-color: var(--rule-soft); opacity: 1; }

/* ── fields ─────────────────────────────────────────────────────────────── */
body.kv-skin .form-control,
body.kv-skin .form-select,
body.kv-skin select.form-control,
body.kv-skin .kv-stripe-field {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 15px;
    /* NO padding here, deliberately. checkout_fourth prefixes its inputs with
       an icon and reserves room via padding-left: 38px; overriding it drove
       the icon straight through the placeholder ("rst Name*", "mail*").
       Padding is layout and each template sets its own — this skin restyles
       colour, border, radius and focus only. Verified 2026-11-05 by
       measuring computed padding-left with and without the skin. */
    box-shadow: none;
    transition: border-color .18s cubic-bezier(.4, 0, .2, 1),
                box-shadow .18s cubic-bezier(.4, 0, .2, 1);
}
body.kv-skin .form-control::placeholder { color: var(--ink-faint); }
body.kv-skin .form-control:focus,
body.kv-skin .form-select:focus,
body.kv-skin .kv-stripe-field.StripeElement--focus {
    border-color: var(--flame);
    box-shadow: 0 0 0 3px var(--flame-wash);
    outline: none;
}
/* Validation states. jquery-validate adds .error; Bootstrap adds .is-invalid.
   Both must read as the same thing. */
body.kv-skin .form-control.error,
body.kv-skin .form-control.is-invalid,
body.kv-skin .kv-stripe-field.StripeElement--invalid {
    border-color: var(--alarm);
    background: var(--alarm-wash);
}
body.kv-skin label.error,
body.kv-skin .invalid-feedback,
body.kv-skin .text-danger { color: var(--alarm) !important; }

/* ── the one CTA ────────────────────────────────────────────────────────── */
/* Every template names its pay button differently — #payBtn, #submit, and a
   .btn-danger / .btn-primary / .btn-success depending on vintage. They are
   all the same button to the buyer, so they all get the flame. */
body.kv-skin #payBtn,
body.kv-skin #submit,
body.kv-skin .btn-primary,
body.kv-skin .btn-danger,
body.kv-skin .btn-success {
    background: var(--flame);
    border: 1px solid var(--flame);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    border-radius: var(--radius-sm);
    padding: 13px 20px;
    box-shadow: var(--shadow-sm);
    transition: background .18s cubic-bezier(.4, 0, .2, 1),
                border-color .18s cubic-bezier(.4, 0, .2, 1);
}
body.kv-skin #payBtn:hover,
body.kv-skin #submit:hover,
body.kv-skin .btn-primary:hover,
body.kv-skin .btn-danger:hover,
body.kv-skin .btn-success:hover {
    background: var(--flame-deep);
    border-color: var(--flame-deep);
    color: #fff;
}
body.kv-skin #payBtn:focus-visible,
body.kv-skin #submit:focus-visible,
body.kv-skin .btn:focus-visible {
    outline: 2px solid var(--flame-deep);
    outline-offset: 2px;
}
/* A disabled pay button must not look clickable — this is the state the
   buyer sees while the gateway is working. */
body.kv-skin #payBtn:disabled,
body.kv-skin #submit:disabled,
body.kv-skin .btn:disabled {
    background: var(--ink-faint);
    border-color: var(--ink-faint);
    opacity: 1;
    cursor: not-allowed;
}
body.kv-skin .btn-outline-secondary,
body.kv-skin .btn-secondary {
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    border-radius: var(--radius-sm);
    font-weight: 600;
}
body.kv-skin .btn-link { color: var(--flame); }

/* ── money ──────────────────────────────────────────────────────────────── */
/* Figures that line up in a column must line up. */
body.kv-skin .product_price,
body.kv-skin .item-price,
body.kv-skin .total_price,
body.kv-skin .kv-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}

/* ── trust / success / badges ───────────────────────────────────────────── */
body.kv-skin .text-success { color: var(--seal) !important; }
body.kv-skin .badge-success,
body.kv-skin .bg-success { background: var(--seal) !important; color: #fff; }
body.kv-skin .alert-success {
    background: var(--seal-wash);
    border: 1px solid color-mix(in srgb, var(--seal) 25%, transparent);
    color: var(--seal);
    border-radius: var(--radius-sm);
}
body.kv-skin .alert-danger {
    background: var(--alarm-wash);
    border: 1px solid color-mix(in srgb, var(--alarm) 25%, transparent);
    color: var(--alarm);
    border-radius: var(--radius-sm);
}

/* ── order bumps ────────────────────────────────────────────────────────── */
/* A bump is an offer, not an error — it gets the accent wash when selected
   so a buyer can see what they just added. */
body.kv-skin .form-check-input:checked {
    background-color: var(--flame);
    border-color: var(--flame);
}
body.kv-skin .form-check-input:focus {
    border-color: var(--flame);
    box-shadow: 0 0 0 3px var(--flame-wash);
}

/* ── links ──────────────────────────────────────────────────────────────── */
body.kv-skin a { color: var(--flame); text-decoration: none; }
body.kv-skin a:hover { color: var(--flame-deep); text-decoration: underline; }
/* A button that happens to be an <a> must not pick up link underlines. */
body.kv-skin a.btn:hover { text-decoration: none; color: #fff; }
body.kv-skin a.btn-outline-secondary:hover,
body.kv-skin a.btn-secondary:hover { color: var(--ink); }

/* ── phone gutter at small widths ───────────────────────────────────────── */
@media (max-width: 575.98px) {
    body.kv-skin { font-size: 15px; }
    body.kv-skin .card,
    body.kv-skin .bg-white { border-radius: var(--radius-md); }
    body.kv-skin #payBtn,
    body.kv-skin #submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    body.kv-skin *,
    body.kv-skin *::before,
    body.kv-skin *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}