/* ═══════════════════════════════════════════════════════════════════════════
   Angira Jyotish — Quick Order theme
   ═══════════════════════════════════════════════════════════════════════════

   Quick Order is a self-contained module: it does not load the site bootstrap,
   so it cannot include public/includes/header.php or use aj_url()/e()/AJ_LANG.
   Rather than couple the two, the site's design language is reproduced here in
   the module's own terms.

   Two layers:

     1. The site's own tokens, copied verbatim from public/assets/css/home.css.
        Same values, so both halves of the site render the same colours. If the
        site's palette ever changes, this block is the one place to update.

     2. A --qo-* semantic layer mapping the checkout's original palette onto
        those tokens. The module's markup is full of inline style="" attributes
        — 192 of them carry a colour — and a stylesheet cannot override an
        inline style without !important everywhere. Custom properties do work
        inside inline styles, so every hard-coded hex was replaced with a
        var(--qo-*) reference instead. That is why this layer exists: it is what
        those references resolve against.

   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Site tokens (mirror of public/assets/css/home.css) ─────────────── */
    --conch: #fbf8f0;
    --paper: #f3ebdd;
    --cotton: #e4d7c5;
    --sand: #cbbca7;
    --stone: #70665c;
    --basalt: #171918;
    --vermilion: #b94a2f;
    --vermilion-deep: #8f341f;
    --copper: #8a5a30;
    --copper-hover: #704820;
    --brass: #a07030;
    --brass-text: #7a5520;
    --peacock: #174c50;
    --peacock-deep: #0d3336;
    --white: #fffdf8;
    --success: #326346;
    --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Constantia, serif;
    --body: "Trebuchet MS", Candara, "Segoe UI", sans-serif;
    --devanagari: "Noto Sans Devanagari", "Mangal", "Rajdhani", "Lohit Devanagari", sans-serif;
    --data: Consolas, "Courier New", monospace;
    --shadow: 0 24px 70px rgba(61, 45, 29, 0.12);
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* ── Quick Order semantic layer ─────────────────────────────────────── */

    /* Was #800000 / #5a0000 — the checkout's maroon, now the site's vermilion. */
    --qo-primary: var(--vermilion);
    --qo-primary-deep: var(--vermilion-deep);

    /*
     * Was #f1c40f. This one is never a standalone accent: every occurrence sits
     * ON the primary colour — the logo, the continue button's label, borders on
     * the maroon header. Mapping it to --brass (#a07030) would put a dark gold
     * on a mid-red and lose the text. It becomes a light brass instead, which
     * keeps the checkout's gold-on-maroon character and still reads cleanly.
     */
    --qo-on-primary: #f0d9a8;

    /* Was #e67e22 / #d35400 — the secondary orange. */
    --qo-accent: var(--copper);
    --qo-accent-deep: var(--copper-hover);

    /* Was #d4af37 — gold rules and borders sitting on cream. */
    --qo-gold: var(--brass);

    /* Surfaces: was #fdf8e4 cream, #fff, #fafafa / #fcfcfc. */
    --qo-surface: var(--paper);
    --qo-surface-soft: var(--conch);
    --qo-white: var(--white);

    /* Lines: was #ccc / #ddd / #eee / #ead8bf. */
    --qo-line: var(--cotton);
    --qo-line-soft: var(--sand);

    /* Text: was #333 / #444 / #555 / #777. */
    --qo-text: var(--basalt);
    --qo-text-soft: var(--stone);

    /* Status: was #27ae60 green, #2980b9 blue, #e74c3c red. */
    --qo-success: var(--success);
    --qo-success-soft: #eef4f0;
    --qo-info: var(--peacock);
    --qo-info-soft: #eaf0f0;
    --qo-danger: #a3352b;
    --qo-danger-soft: #fbeeeb;
    --qo-warning: var(--brass-text);
    --qo-warning-soft: #f7eedb;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE CHROME
   The furniture every page of the main site carries. Values are taken from
   public/assets/css/home.css so both halves feel like one site.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Pointer marker. Created by assets/qo-chrome.js only on a fine pointer and
 * only when reduced motion is not requested, so it is absent rather than hidden
 * on touch devices. The native cursor is never replaced — this rides on top.
 */
.aj-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 1px solid var(--vermilion);
    border-radius: 50%;
    pointer-events: none;
    opacity: .65;
    transform: translate3d(-100px, -100px, 0);
    transition: width .18s ease, height .18s ease, margin .18s ease, opacity .18s ease;
}

.aj-cursor-dot.is-link {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    opacity: .95;
}

@media (prefers-reduced-motion: reduce) {
    .aj-cursor-dot { display: none; }
}

/*
 * Paper grain. z-index sits above the page background and below the header
 * (90) and every dialog, and pointer-events:none keeps it from ever swallowing
 * a click on the form underneath.
 */
.site-grain {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: .17;
    background-image:
        repeating-radial-gradient(circle at 25% 15%, rgba(23, 25, 24, .09) 0 .35px, transparent .5px 3px),
        repeating-radial-gradient(circle at 75% 85%, rgba(166, 106, 63, .08) 0 .4px, transparent .6px 4px);
    background-size: 5px 5px, 7px 7px;
    mix-blend-mode: multiply;
}

/* Keyboard users land here first; invisible until focused. */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 10px 16px;
    color: var(--white);
    background: var(--basalt);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 700;
    transform: translateY(-150%);
    transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

/*
 * No-JavaScript notice. This matters more here than anywhere on the main site:
 * the checkout loads each step by fetch and re-runs the injected scripts, so
 * with scripting off the visitor sees step one and nothing ever happens. Better
 * to say so, and give them a way to reach a human.
 */
.qo-noscript {
    margin: 0;
    padding: 16px 5%;
    border-bottom: 1px solid var(--vermilion);
    background: var(--qo-danger-soft);
    color: var(--vermilion-deep);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

.qo-noscript strong { display: block; margin-bottom: 4px; font-size: 15px; }

/* WhatsApp action, in the site's green so it reads as the same button. */
.aj-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 116px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #168c4b;
    color: #fff;
    font-family: var(--body);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(22, 140, 75, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}

.aj-whatsapp i { font-size: 1.05rem; }

.aj-whatsapp:hover,
.aj-whatsapp:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(22, 140, 75, .4);
}

@media (prefers-reduced-motion: reduce) {
    .aj-whatsapp:hover,
    .aj-whatsapp:focus-visible { transform: none; }
}

/* The consultation widget's own button sits above this one on the contact
   page; keep them from colliding on small screens. */
@media (max-width: 600px) {
    .aj-whatsapp { right: 12px; bottom: 12px; min-width: 0; padding: 11px 14px; }
}

/* Header compaction, applied by qo-chrome.js past 48px of scroll. */
header.qo-header.is-compact {
    background: rgba(251, 248, 240, .97);
    box-shadow: 0 10px 30px rgba(61, 45, 29, .06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   The checkout loaded Mukta and Yatra One from Google Fonts. The site uses
   system stacks and self-hosts nothing, so those two requests are gone and the
   same stacks apply here — one less third-party dependency on a payment page.
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--body);
    color: var(--qo-text);
}

h1, h2, h3, h4, h5, h6,
.page-header h1,
.step-title,
.logo a {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: .01em;
}

/*
 * The checkout is Hindi-first and switches to English with a body class, so the
 * Devanagari stack is applied to the Hindi spans rather than by html[lang], the
 * way the main site does it.
 */
.hi-text,
body:not(.lang-en) h1,
body:not(.lang-en) h2,
body:not(.lang-en) h3,
body:not(.lang-en) .step-title,
body:not(.lang-en) label {
    font-family: var(--devanagari);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — reshaped to match the site's .site-header
   The original was a solid maroon bar with a 32px gold wordmark. The site uses
   a translucent cream bar with a blurred backdrop and the monogram lockup.
   ═══════════════════════════════════════════════════════════════════════════ */

.top-bar {
    background: var(--peacock-deep);
    color: var(--white);
    padding: 8px 5%;
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
}

.live-time {
    background: rgba(255, 253, 248, .1);
    border: 1px solid rgba(255, 253, 248, .28);
    font-family: var(--data);
    font-size: 12px;
    letter-spacing: .04em;
}

.site-header,
header.qo-header {
    position: sticky;
    top: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 5%;
    border-bottom: 1px solid rgba(112, 102, 92, .18);
    background: rgba(251, 248, 240, .92);
    backdrop-filter: blur(16px);
    box-shadow: none;
}

header.qo-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

header.qo-header .aj-monogram img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

header.qo-header .brand-type img {
    display: block;
    width: 154px;
    height: 26px;
    object-fit: contain;
}

.qo-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2147483647;
}

.header-contact-btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--cotton);
    border-radius: 2px;
    background: transparent;
    color: var(--basalt);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}

.header-contact-btn:hover {
    border-color: var(--vermilion);
    background: var(--vermilion);
    color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE FRAME
   ═══════════════════════════════════════════════════════════════════════════ */

.container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.page-header {
    border-bottom: 1px solid var(--cotton);
    background: transparent;
    padding-top: 8px;
    padding-bottom: 22px;
    border-radius: 0;
}

.page-header h1 {
    color: var(--basalt);
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.15;
    text-shadow: none;
}

.page-header p {
    color: var(--stone);
    font-weight: 400;
    font-size: 16px;
}

/* Language switch, in the site's flat style rather than a gold pill. */
.lang-toggle-box {
    border: 1px solid var(--cotton);
    border-radius: 2px;
    background: var(--white);
    box-shadow: none;
    overflow: hidden;
}

.lang-toggle-box label {
    font-family: var(--body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--stone);
    padding: 8px 20px;
}

.lang-toggle-box input[type="radio"]:checked + label {
    background: var(--vermilion);
    color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT STEPS
   Structure is untouched — only the surface treatment changes. The original
   used rounded cards with coloured drop shadows; the site uses square corners,
   hairline rules and a single soft shadow.
   ═══════════════════════════════════════════════════════════════════════════ */

.checkout-step {
    border: 1px solid var(--cotton);
    border-radius: 3px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(61, 45, 29, .04);
    margin-bottom: 18px;
}

.checkout-step.active {
    border: 1px solid var(--vermilion);
    box-shadow: 0 14px 40px rgba(61, 45, 29, .09);
}

.checkout-step.completed {
    border: 1px solid var(--cotton);
}

.step-header {
    background: var(--conch);
    padding: 16px 22px;
}

.checkout-step.active .step-header {
    background: var(--white);
    border-bottom: 1px solid var(--cotton);
}

.checkout-step.completed .step-header {
    background: var(--conch);
}

.step-number {
    background: var(--sand);
    color: var(--white);
    border-radius: 50%;
    font-family: var(--data);
    font-weight: 700;
}

.checkout-step.active .step-number { background: var(--vermilion); }
.checkout-step.completed .step-number { background: var(--success); }

.step-title { color: var(--stone); font-weight: 600; }
.checkout-step.active .step-title { color: var(--basalt); }
.checkout-step.completed .step-title { color: var(--success); }

.step-edit-btn {
    border: 1px solid var(--cotton);
    border-radius: 2px;
    color: var(--stone);
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 6px 14px;
}

.step-edit-btn:hover {
    background: var(--vermilion);
    border-color: var(--vermilion);
    color: var(--white);
}

.selected-service-badge {
    background: var(--paper);
    border: 1px solid var(--cotton);
    border-radius: 2px;
    color: var(--brass-text);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: none;
    text-shadow: none;
    padding: 5px 14px;
}

/* ── Service picker ──────────────────────────────────────────────────── */

.qo-service-item {
    background: var(--white);
    border: 1px solid var(--cotton);
    border-radius: 3px;
    padding: 14px 18px;
}

.qo-service-item:hover {
    border-color: var(--sand);
    background: var(--conch);
}

.qo-service-item:has(input:checked) {
    border: 1px solid var(--vermilion);
    background: var(--conch);
}

.qo-service-item i { color: var(--copper); }
.qo-service-item:has(input:checked) i { color: var(--vermilion); }
.qo-service-text h3 { color: var(--basalt); font-family: var(--body); font-weight: 700; font-size: 16px; }
.qo-service-item:has(input:checked) h3 { color: var(--vermilion); }
.qo-service-text p { color: var(--stone); }
.qo-service-item input[type="radio"] { accent-color: var(--vermilion); }

.aj-service-blocked {
    border-color: var(--cotton) !important;
    background: var(--conch) !important;
}

.aj-lock-badge {
    background: var(--white);
    color: var(--brass-text);
    border: 1px solid var(--brass);
    border-radius: 2px;
    font-family: var(--body);
    font-weight: 700;
    box-shadow: none;
}

/* ── Primary action, matching .button--primary on the site ───────────── */

.btn-continue,
.qo-kp-action-btn {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--vermilion);
    border: 1px solid var(--vermilion);
    border-radius: 2px;
    color: var(--white);
    font-family: var(--body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: none;
    transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.btn-continue:hover,
.qo-kp-action-btn:hover {
    background: var(--vermilion-deep);
    border-color: var(--vermilion-deep);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: none;
}

.qo-kp-action-btn:disabled {
    background: var(--conch);
    border-color: var(--cotton);
    color: var(--stone);
}

/* ── Progress ribbon ─────────────────────────────────────────────────── */

.qo-progress-item {
    background: var(--white);
    border: 1px solid var(--cotton);
    border-radius: 3px;
    color: var(--stone);
    box-shadow: none;
}

.qo-progress-dot {
    background: var(--paper);
    color: var(--stone);
    font-family: var(--data);
}

.qo-progress-copy strong { color: var(--basalt); font-weight: 700; }
.qo-progress-item.active { border-color: var(--vermilion); background: var(--conch); }
.qo-progress-item.active .qo-progress-dot { background: var(--vermilion); color: var(--white); }
.qo-progress-item.active .qo-progress-copy strong { color: var(--vermilion); }
.qo-progress-item.done { border-color: var(--success); background: var(--qo-success-soft); }

.qo-secure-note {
    background: var(--conch);
    border: 1px solid var(--cotton);
    border-radius: 3px;
    color: var(--stone);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS — inside the fetched step fragments
   ═══════════════════════════════════════════════════════════════════════════

   Every rule below carries a leading `body`, which looks redundant and is not.

   Steps 2-4 arrive as HTML fragments that qo.php drops into the document with
   innerHTML, and each fragment brings its own <style> block. Those blocks land
   in the DOM after this file, so on equal specificity they win and the theme
   loses — labels came out vermilion instead of stone, inputs kept their 6px
   corners. The extra element in the selector raises specificity just enough to
   settle it in the theme's favour, without reaching for !important.

   Only use !important below where a fragment sets the property inline.
   ═══════════════════════════════════════════════════════════════════════════ */

body .c-col label,
body .c-col-full label {
    color: var(--stone);
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

body .c-col input,
body .c-col select,
body .c-col textarea,
body .c-col-full textarea {
    border: 1px solid var(--cotton);
    border-radius: 2px;
    background: var(--white);
    font-family: var(--body);
    color: var(--basalt);
}

body .c-col input:focus,
body .c-col select:focus,
body .c-col textarea:focus,
body .c-col-full textarea:focus {
    border-color: var(--vermilion);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(185, 74, 47, .1);
}

/* The fragments set these two as inline style attributes, so nothing but
   !important reaches them. */
body .qo-person-box,
body .qo-special-box {
    background: var(--conch) !important;
    border: 1px solid var(--cotton) !important;
    border-radius: 3px !important;
}

body .qo-person-box h3 {
    color: var(--basalt) !important;
    border-bottom: 1px solid var(--cotton) !important;
    font-family: var(--display) !important;
}

body .qo-instruction,
body .focused-instruction-box {
    background: var(--qo-warning-soft) !important;
    border-left: 2px solid var(--brass) !important;
    border-radius: 0;
    color: var(--brass-text) !important;
}

body .qo-advanced-toggle-btn {
    background: var(--white);
    border: 1px solid var(--cotton);
    border-radius: 2px;
    color: var(--stone);
    font-family: var(--body);
    letter-spacing: .04em;
}

body .qo-advanced-toggle-btn:hover { background: var(--conch); color: var(--basalt); }

body .qo-advanced-section {
    background: var(--white);
    border: 1px solid var(--cotton);
    border-radius: 3px;
}

body .qo-kp-radio-group label {
    background: var(--white);
    border: 1px solid var(--cotton);
    border-radius: 2px;
    color: var(--stone);
    font-family: var(--body);
    font-weight: 700;
    box-shadow: none;
}

body .qo-kp-radio-group input[type="radio"]:checked + label {
    background: var(--vermilion);
    border-color: var(--vermilion);
    color: var(--white);
    transform: none;
}

body .qo-map-link {
    background: var(--peacock);
    border: 1px solid var(--peacock);
    border-radius: 2px;
    font-family: var(--body);
}

body .qo-map-link:hover { background: var(--peacock-deep); transform: none; }

/* Steps 3 and 4 reuse these for the model cards, delivery options and the
   order summary. */
body .qo-model-card,
body .qo-option-box,
body .qo-summary-box,
body .qo-price-box {
    border: 1px solid var(--cotton) !important;
    border-radius: 3px !important;
    background: var(--white) !important;
}

body .qo-model-card.selected,
body .qo-option-box.selected {
    border-color: var(--vermilion) !important;
    background: var(--conch) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — the site's .site-footer treatment
   ═══════════════════════════════════════════════════════════════════════════ */

footer.qo-footer {
    margin-top: 60px;
    padding: 44px 20px 34px;
    border-top: 1px solid var(--cotton);
    background: var(--paper);
    color: var(--stone);
    text-align: center;
}

footer.qo-footer .qo-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

footer.qo-footer .qo-footer-brand img { display: block; object-fit: contain; }

footer.qo-footer .qo-footer-note {
    max-width: 520px;
    margin: 0 auto 20px;
    color: var(--stone);
    font-size: 14px;
    line-height: 1.6;
}

footer.qo-footer .qo-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    justify-content: center;
    margin-bottom: 22px;
}

footer.qo-footer .qo-footer-links a {
    color: var(--stone);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}

footer.qo-footer .qo-footer-links a:hover { color: var(--vermilion); }

footer.qo-footer .qo-footer-bottom {
    padding-top: 18px;
    border-top: 1px solid var(--cotton);
    color: var(--stone);
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   The module used to serve two different layouts chosen by a User-Agent regex.
   There is one layout now, and these are its breakpoints.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .container { margin: 24px auto; padding: 0 16px; }
}

@media (max-width: 640px) {
    header.qo-header { padding: 12px 16px; }
    header.qo-header .brand-type img { width: 118px; height: 20px; }
    header.qo-header .aj-monogram img { width: 34px; height: 34px; }
    .header-contact-btn { min-height: 36px; padding: 7px 12px; font-size: 12px; }
    .top-bar { font-size: 11px; letter-spacing: .05em; padding: 7px 14px; }
    .live-time { position: static; margin-left: 10px; }
    .page-header h1 { font-size: 24px; }
    .step-header { padding: 13px 14px; }
    .btn-continue { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-continue:hover,
    .qo-kp-action-btn:hover { transform: none; }
}