/* ============================================================
   ASSETS/CSS/CONTACT.CSS — Contact Us page + Book a Call (Contact phase)
   ============================================================
   Loaded only on CMS pages that use a contact section, on the booking
   confirmation page and on "My Call Bookings".
    1. Shared (Xpera One blue, anchors, inputs, honeypot)
    2. Hero
    3. Support + Track Order cards (reuse the footer .promo-card design)
    4. Contact information + message form
    5. Book a Call
    6. Confirmation page + status pills
   HI: Sirf Contact page aur booking pages par load hota hai.
   ============================================================ */

@layer components {

    /* ---------- 1. Shared ---------- */
    :root {
        --xo-blue-gradient: linear-gradient(135deg, #071b5c 0%, #123fc4 55%, #0879ed 100%);
        --xo-blue: #123fc4;
        --xo-blue-dark: #0b2a8a;
    }
    /* The sticky header never covers the section a button scrolls to. */
    #contact-form, #book-a-call { scroll-margin-top: calc(var(--header-height) + 12px); }

    .contact-main .form-input, .contact-booking .form-input { border-radius: 12px; }
    .contact-main .form-input:focus, .contact-booking .form-input:focus {
        border-color: var(--xo-blue);
        box-shadow: 0 0 0 4px rgba(18, 63, 196, .16);
    }
    .contact-main .form-input.is-invalid, .contact-booking .form-input.is-invalid { border-color: var(--danger); }
    .contact-main textarea.form-input, .contact-booking textarea.form-input { min-height: 120px; resize: vertical; line-height: 1.55; }
    .contact-main select.form-input:disabled, .contact-booking select.form-input:disabled { background: var(--surface-alt); color: var(--muted); }
    .form-input--file { padding: 9px 12px; font-size: .9375rem; }
    .form-input--file::file-selector-button {
        margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 9px;
        background: #eef3ff; color: var(--xo-blue-dark); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
    }

    .req { color: var(--danger); }
    .optional { color: var(--muted); font-weight: 400; }
    .hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

    .contact-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; }
    .contact-form__grid .form-group { margin: 0; min-width: 0; }
    @media (min-width: 640px) {
        .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .contact-form__grid .span-2 { grid-column: 1 / -1; }
    }

    .check-row { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--text-soft); line-height: 1.55; cursor: pointer; }
    .check-row input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--xo-blue); }
    .check-row a { color: var(--xo-blue); text-decoration: underline; text-underline-offset: 2px; }

    .contact-submit { width: 100%; background: var(--xo-blue-gradient); color: #fff; box-shadow: 0 12px 26px -12px rgba(18, 63, 196, .65); }
    .contact-submit:hover { color: #fff; box-shadow: 0 16px 30px -12px rgba(18, 63, 196, .75); }
    @media (min-width: 640px) { .contact-submit { width: auto; min-width: 220px; } }

    .contact-alert { margin-bottom: 20px; }
    .contact-alert:focus { outline: none; }
    .contact-alert svg { flex-shrink: 0; margin-top: 1px; }

    .contact-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--xo-blue); }

    /* ---------- 2. Hero ---------- */
    .contact-hero {
        position: relative; overflow: hidden; color: #fff; text-align: center;
        padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5.5vw, 68px);
        background:
            radial-gradient(520px 260px at 12% 0%, rgba(255, 255, 255, .14), transparent 70%),
            radial-gradient(460px 260px at 92% 100%, rgba(8, 121, 237, .55), transparent 70%),
            var(--xo-blue-gradient);
    }
    .contact-hero__inner { position: relative; max-width: 780px; display: flex; flex-direction: column; align-items: center; }
    .contact-hero__badge {
        display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
        padding: 7px 16px; border-radius: 999px;
        background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24);
        font-size: .8125rem; font-weight: 600; line-height: 1.4; color: #fff;
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .contact-hero__dot { position: relative; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .25); }
    .contact-hero__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(52, 211, 153, .6); animation: contact-pulse 2s ease-out infinite; }
    .contact-hero__badge.is-offline .contact-hero__dot { background: #cbd5e1; box-shadow: 0 0 0 4px rgba(203, 213, 225, .2); }
    .contact-hero__badge.is-offline .contact-hero__dot::after { display: none; }
    @keyframes contact-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

    .contact-hero__title {
        margin: 20px 0 14px; color: #fff;
        font-size: clamp(2rem, 1.35rem + 3.2vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
        overflow-wrap: anywhere;
    }
    .contact-hero__text { max-width: 640px; color: rgba(255, 255, 255, .86); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.65; }
    .contact-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; width: 100%; }
    .contact-hero .btn-white { color: var(--xo-blue-dark); }
    .contact-hero .btn-white:hover { color: var(--xo-blue-dark); }
    .contact-hero .btn-ghost-light { border-color: rgba(255, 255, 255, .4); }
    @media (max-width: 479px) {
        .contact-hero__actions { flex-direction: column; align-items: stretch; }
        .contact-hero__actions .btn { width: 100%; }
    }

    /* ---------- 3. Support + Track Order cards (same design as the footer cards) ---------- */
    .contact-cards-section { padding: clamp(20px, 3vw, 32px) 0 0; }
    .contact-cards { display: grid; gap: 16px; }
    @media (min-width: 768px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
    .contact-cards .promo-card { box-shadow: var(--shadow); }
    .contact-cards .promo-card__text { min-width: 0; flex-basis: 180px; }
    .contact-cards .btn-white { color: var(--primary-dark); }
    @media (max-width: 479px) { .contact-cards .promo-card .btn { width: 100%; } }

    /* ---------- 4. Contact information + message form ---------- */
    .contact-main { padding: clamp(24px, 4vw, 48px) 0 clamp(16px, 3vw, 28px); }
    .contact-main__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
    @media (min-width: 1024px) { .contact-main__grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 28px; } }

    .contact-info-card, .contact-card, .booking-card {
        background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -22px rgba(15, 23, 42, .22);
        min-width: 0;
    }
    .contact-info-card { padding: clamp(20px, 3.5vw, 30px); }
    @media (min-width: 1024px) { .contact-info-card { position: sticky; top: calc(var(--header-height) + 20px); } }
    .contact-info-card__title { margin-top: 8px; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
    .contact-info-card__text { margin-top: 10px; color: var(--text-soft); line-height: 1.65; }
    .contact-info-list { list-style: none; display: grid; gap: 12px; margin: 20px 0 0; padding: 0; }
    .contact-info-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .contact-info-list__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #eef3ff; color: var(--xo-blue); }
    .contact-info-list li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
    .contact-info-list small { font-size: .75rem; color: var(--muted); }
    .contact-info-list a { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
    .contact-info-list a:hover { color: var(--xo-blue); }

    .contact-hours { margin-top: 22px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, #f3f6ff, #eef7ff); border: 1px solid #dbe5ff; }
    .contact-hours__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
    .contact-hours__head h3 { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 700; }
    .contact-hours__head h3 svg { color: var(--xo-blue); }
    .contact-hours__list { display: grid; gap: 2px; margin: 0; }
    .contact-hours__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-bottom: 1px dashed #cfdbf7; font-size: .9375rem; }
    .contact-hours__row:last-child { border-bottom: 0; }
    .contact-hours__row dt { color: var(--text-soft); }
    .contact-hours__row dd { margin: 0; font-weight: 700; color: var(--text); }
    .contact-hours__row.is-closed dd { color: var(--danger); letter-spacing: .06em; }
    .contact-hours__note { margin-top: 8px; font-size: .8125rem; color: var(--muted); }

    .contact-card { padding: clamp(20px, 4vw, 36px); }
    .contact-card__title { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
    .contact-card__text { margin: 6px 0 22px; color: var(--muted); }
    .contact-agree { margin: 18px 0 20px; }

    /* ---------- 5. Book a Call ---------- */
    .contact-booking { padding: clamp(16px, 3vw, 28px) 0 clamp(8px, 2vw, 16px); }
    .booking-card { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
    @media (min-width: 1024px) { .booking-card { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }
    .booking-card__aside {
        position: relative; color: #fff; padding: clamp(22px, 4vw, 36px);
        background: radial-gradient(360px 220px at 100% 100%, rgba(8, 121, 237, .6), transparent 70%), var(--xo-blue-gradient);
    }
    .booking-card__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #bfd6ff; margin-bottom: 6px; }
    .booking-card__title { color: #fff; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
    .booking-card__text { margin-top: 8px; color: rgba(255, 255, 255, .85); line-height: 1.6; }
    .booking-facts { list-style: none; display: grid; gap: 14px; margin: 24px 0 0; padding: 0; }
    .booking-facts li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
    .booking-facts__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); color: #fff; }
    .booking-facts li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
    .booking-facts strong { font-size: .9375rem; }
    .booking-facts small { font-size: .8125rem; color: rgba(255, 255, 255, .8); line-height: 1.5; overflow-wrap: anywhere; }
    .booking-card__form { padding: clamp(20px, 4vw, 36px); min-width: 0; }
    .booking-form .contact-submit { margin-top: 20px; }
    .booking-form__note { margin-top: 10px; }

    /* ---------- 6. Confirmation page + status pills ---------- */
    .booked-page { padding: clamp(28px, 6vw, 72px) 0; background: linear-gradient(180deg, #f3f6ff, var(--bg, #fff)); }
    .booked-card {
        max-width: 640px; margin: 0 auto; text-align: center;
        background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
        box-shadow: 0 18px 44px -24px rgba(15, 23, 42, .3); padding: clamp(22px, 5vw, 44px);
    }
    .booked-card__icon { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--success-bg); color: var(--success); }
    .booked-card__title { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; }
    .booked-card__lead { margin-top: 8px; color: var(--text-soft); font-size: 1.0625rem; line-height: 1.6; }
    .booked-details { margin: 24px 0 0; padding: 6px 18px; border-radius: 16px; background: #f5f8ff; border: 1px solid #dbe5ff; text-align: left; }
    .booked-details > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid #e3eafc; }
    .booked-details > div:last-child { border-bottom: 0; }
    .booked-details dt { color: var(--muted); }
    .booked-details dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
    .booked-details small { color: var(--muted); font-weight: 400; }
    .booked-card__note { margin-top: 18px; color: var(--text-soft); overflow-wrap: anywhere; }
    .booked-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
    .booked-card__actions .btn-primary { background: var(--xo-blue-gradient); }
    @media (max-width: 479px) { .booked-card__actions { flex-direction: column; } .booked-card__actions .btn { width: 100%; } }
    .booked-card__guest { margin-top: 14px; }
    .icon-flip { transform: scaleX(-1); }

    .call-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-soft); }
    .call-pill--pending   { background: var(--warning-bg); color: #92400e; border-color: #fde68a; }
    .call-pill--confirmed { background: #eef3ff; color: var(--xo-blue-dark); border-color: #c7d7fe; }
    .call-pill--completed { background: var(--success-bg); color: #047857; border-color: #a7f3d0; }
    .call-pill--cancelled { background: var(--danger-bg); color: #b91c1c; border-color: #fecaca; }
    .call-cancel-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

    @media (prefers-reduced-motion: reduce) { .contact-hero__dot::after { animation: none; } }
}