/* =====================================================================
   PARKING WAYS help center - theme v3 (7-Oct-2026)
   /faqs, /help/receipt, /help/modify, /help/modify-pay, /help/cancellation,
   /help/contactus, /cancellation-confirm.
   APR help-center rhythm: photo hero, breadcrumb, tab row, "choose a topic"
   sidebar + accordion list; form pages = clean cards + side notes.
   pw-theme.css + pw-widgets.css ke BAAD load hoti hai (site.css/pages.css/
   pw-airport.css ab in pages par nahi). JS jo classes banata hai (pw-res-*,
   pw-note, pw-cmp*, pw-quote, pw-bk, pw-help-msg ...) sab yahin styled hain.
   ===================================================================== */

.hc { --danger: #b3261e; --danger-tint: #fdecea; --ok-ink: #2f5a0f; }

/* ---------------- hero (photo + overlay) ---------------- */
.hc-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; min-height: 232px; padding: 40px 0;
    /* photo aane tak usi photo ke rangon ka gradient (column averages): teal -> photo wala jhatka nahi */
    background: #605f5a linear-gradient(90deg, #3a3e37 5%, #52544e 15%, #5b5a55 25%, #6d6a66 35%, #7a7671 45%, #75716c 55%, #74716c 65%, #5e5b57 75%, #50514b 85%, #5c5d54 95%);
    color: var(--off); text-align: center;
}
.hc-hero-pic { position: absolute; inset: 0; z-index: -2; }
.hc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hc-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(14, 36, 43, .55) 0%, rgba(14, 36, 43, .62) 60%, rgba(14, 36, 43, .72) 100%);
}
.hc-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 .875rem/1.25rem var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
    color: var(--lime); margin-bottom: 10px;
}
.hc-hero h1 {
    font: 700 2rem/2.375rem var(--font); text-transform: uppercase; color: #fff;
    text-wrap: balance; text-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}
.hc-lead {
    font: 400 1rem/1.5rem var(--font); color: var(--off);
    max-width: 62ch; margin: 12px auto 0; text-wrap: pretty; text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
@media (min-width: 768px) {
    .hc-hero { min-height: 320px; }
    .hc-hero h1 { font-size: 3rem; line-height: 3.5rem; }
    .hc-lead { font-size: 1.125rem; line-height: 1.625rem; }
}
@media (min-width: 1024px) {
    .hc-hero { min-height: 408px; padding: 56px 0; }
    .hc-hero h1 { font-size: 4rem; line-height: 4.5rem; }
    .hc-lead { font-size: 1.25rem; line-height: 1.75rem; }
    .hc-kicker { font-size: 1rem; }
    .hc-hero--compact { min-height: 320px; }
    .hc-hero--compact h1 { font-size: 3.25rem; line-height: 3.75rem; }
}

/* ---------------- breadcrumb + tab row ---------------- */
.hc .ap-crumbs { padding: 20px 0 4px; }
@media (min-width: 1024px) { .hc .ap-crumbs { padding: 32px 0 8px; } }
.hc .ap-crumbs a:hover { color: var(--teal); }

.hc-tabs { border-bottom: 1px solid var(--line); background: #fff; }
.hc-tabs ul {
    display: flex; gap: 0 28px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); scroll-padding: 0 var(--gut);
}
.hc-tabs ul::-webkit-scrollbar { display: none; }
.hc-tabs .ap-wrap { position: relative; }
/* phone: edge fades = "aur tabs hain, swipe karo" (JS .fade-l/.fade-r sirf jab us taraf kuch chhupa ho) */
@media (max-width: 1023.98px) {
    .hc-tabs .ap-wrap::before, .hc-tabs .ap-wrap::after, .hc-cats::before, .hc-cats::after {
        content: ""; position: absolute; top: 0; bottom: 0; width: 32px; pointer-events: none; z-index: 1;
        opacity: 0; transition: opacity .15s;
    }
    .hc-tabs .ap-wrap::before, .hc-cats::before { left: 0; background: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 80%); }
    .hc-tabs .ap-wrap::after, .hc-cats::after { right: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 80%); }
    .hc-tabs .ap-wrap::before, .hc-tabs .ap-wrap::after { bottom: 1px; }
    .hc-tabs.fade-l .ap-wrap::before, .hc-tabs.fade-r .ap-wrap::after,
    .hc-cats.fade-l::before, .hc-cats.fade-r::after { opacity: 1; }
}
.hc-tabs li { flex: 0 0 auto; scroll-snap-align: start; }
/* phone: 3rd+ tab active ho to row pehli layout me hi us par (CSS, koi JS jhatka nahi); jahan support nahi wahan
   body ke aakhir wala chhota script yahi karta hai */
.hc-tabs li:nth-child(n+3):has(> a[aria-current="page"]) { scroll-initial-target: nearest; scroll-snap-align: center; }
.hc-tabs a {
    position: relative; display: inline-flex; align-items: center; min-height: 52px;
    font: 700 1rem/1.5rem var(--font); color: #4b5b60; white-space: nowrap; text-decoration: none;
}
.hc-tabs a:hover { color: var(--teal); text-decoration: none; }
.hc-tabs a[aria-current="page"] { color: var(--teal); }
.hc-tabs a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--teal); border-radius: 3px 3px 0 0;
}
@media (min-width: 1024px) { .hc-tabs a { min-height: 60px; } }

/* ---------------- body ---------------- */
/* sirf upar/neeche - .ap-wrap ka side gutter bacha rahe */
.hc-body { padding-top: 28px; padding-bottom: 56px; }
@media (min-width: 1024px) { .hc-body { padding-top: 48px; padding-bottom: 88px; } }

/* FAQ page: topic sidebar + accordion list */
.hc-body--faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1024px) {
    .hc-body--faq { grid-template-columns: 300px minmax(0, 1fr); column-gap: 116px; }
}
.hc-cats-title { font: 700 1.5rem/2rem var(--font); color: var(--ink); margin-bottom: 18px; }
.hc-cats ul { display: grid; gap: 2px; }
.hc-cats a {
    position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 0;
    font: 700 1rem/1.5rem var(--font); color: #4b5b60; text-decoration: none;
}
.hc-cats a i { font-size: .7rem; transition: transform .15s; }
.hc-cats a:hover { color: var(--teal); text-decoration: none; }
.hc-cats a:hover i { transform: translateX(2px); }
.hc-cats a.is-active { color: var(--teal); }
.hc-cats a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--teal); }
.hc-cats-count { font: 400 .875rem/1 var(--font); color: var(--muted); }
@media (min-width: 1024px) {
    .hc-cats { position: sticky; top: 104px; align-self: start; }
    .hc-cats-count { display: none; }
}
@media (max-width: 1023.98px) {
    /* phone/tablet: topics = sticky chip row under the 56px header */
    .hc-cats {
        position: sticky; top: 56px; z-index: 20; background: #fff;
        margin: 0 calc(-1 * var(--gut)); padding: 10px 0; border-bottom: 1px solid var(--line);
    }
    .hc-cats-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
    .hc-cats ul {
        display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        padding: 0 var(--gut); scroll-padding: 0 var(--gut);
    }
    .hc-cats ul::-webkit-scrollbar { display: none; }
    .hc-cats li { flex: 0 0 auto; }
    .hc-cats a {
        min-height: 44px; padding: 0 16px; gap: 8px; border: 1px solid var(--line-2); border-radius: 999px;
        font: 600 .9375rem/1 var(--font-ui); color: var(--ink); white-space: nowrap; background: #fff;
    }
    .hc-cats a i { display: none; }
    .hc-cats a.is-active { background: var(--teal); border-color: var(--teal); color: var(--off); }
    .hc-cats a.is-active .hc-cats-count { color: var(--lime); }
    .hc-cats a.is-active::after { content: none; }
}

.hc-group { scroll-margin-top: 136px; }
.hc-group + .hc-group { margin-top: 44px; }
@media (min-width: 1024px) { .hc-group { scroll-margin-top: 104px; } .hc-group + .hc-group { margin-top: 56px; } }
.hc-group-title { font: 700 1.375rem/1.875rem var(--font); color: var(--ink); margin-bottom: 14px; }
@media (min-width: 1024px) { .hc-group-title { font-size: 1.5rem; line-height: 2rem; margin-bottom: 18px; } }
.hc-faq summary { padding: 17px 0; align-items: center; }
.hc-faq summary:hover .hc-q { color: var(--teal); }
.hc-faq details { scroll-margin-top: 136px; }
@media (min-width: 1024px) { .hc-faq details { scroll-margin-top: 104px; } }
.hc-q { font: inherit; color: inherit; margin: 0; }
.hc-faq .ap-faq-a { padding: 0 32px 20px 0; max-width: 72ch; }
.hc-faq .ap-faq-a a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.hc-faq details[open] summary .hc-q { color: var(--teal); }

/* "still need help" box under the list */
.hc-more {
    display: grid; gap: 16px; margin-top: 56px; padding: 24px; border-radius: var(--r);
    background: var(--bg-soft); border: 1px solid var(--line);
}
.hc-more h2 { font: 700 1.25rem/1.75rem var(--font); color: var(--ink); margin-bottom: 4px; }
.hc-more p { color: var(--ink); }
.hc-more-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 768px) { .hc-more { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 32px; } }
@media (max-width: 479.98px) { .hc-more-actions .ap-btn { width: 100%; } }

/* ---------------- form pages: card + side notes ---------------- */
.hc-body--form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) {
    .hc-body--form { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
    .hc-aside { position: sticky; top: 104px; }
}
.hc-main { min-width: 0; }
.hc-aside { display: grid; gap: 16px; align-content: start; }

.pw-help-card {
    background: #fff; border: 1px solid rgba(0, 0, 0, .125); border-radius: var(--r);
    padding: 24px 16px; scroll-margin-top: 80px;
}
.pw-help-card + .pw-help-card, #failed + .pw-help-card, .pw-help-card + #failed:not(:empty), #done:not(:empty) { margin-top: 20px; }
@media (min-width: 768px) { .pw-help-card { padding: 32px; } }
@media (min-width: 1024px) { .pw-help-card { scroll-margin-top: 104px; } }
.hc-card-title { font: 700 1.5rem/2rem var(--font); color: var(--ink); margin-bottom: 8px; text-wrap: balance; }
@media (min-width: 1024px) { .hc-card-title { font-size: 1.75rem; line-height: 2.25rem; } }
.pw-help-lead { color: var(--ink); font-size: 1rem; line-height: 1.5rem; margin: 0 0 24px; max-width: 64ch; }

.hc-side { background: var(--bg-soft); border-radius: var(--r); padding: 24px; }
.hc-side h2 { display: flex; align-items: center; gap: 10px; font: 700 1.125rem/1.5rem var(--font); color: var(--ink); margin-bottom: 12px; }
.hc-side h2 i { color: var(--teal); font-size: 1rem; }
.hc-side p { font-size: .9375rem; line-height: 1.5rem; }
.hc-side p + p { margin-top: 8px; }
.hc-side a:not(.ap-btn) { color: var(--link); }
.hc-checks { display: grid; gap: 10px; }
.hc-checks li { position: relative; padding-left: 28px; font-size: .9375rem; line-height: 1.5rem; }
.hc-checks li::before {
    content: "\f00c"; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--teal); color: var(--lime); font: 900 .6rem/18px "Font Awesome 6 Free"; text-align: center;
}
.hc-links li + li { border-top: 1px dotted var(--teal); }
.hc-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0;
    font-size: .9375rem; line-height: 1.375rem; color: var(--link); text-decoration: none;
}
.hc-links a i { color: var(--teal); font-size: .7rem; flex: 0 0 auto; }
.hc-links a:hover { text-decoration: underline; }
.hc-side--teal { background: var(--teal); color: var(--off); }
.hc-side--teal h2, .hc-side--teal p { color: var(--off); }
.hc-side--teal h2 i { color: var(--lime); }
.hc-side--teal a:not(.ap-btn) { color: var(--lime); }
.hc-side-more { margin-top: 14px; }
.hc-side-more a { font-weight: 700; }
.hc-side-more i { font-size: .75em; margin-left: 4px; }
.hc-side-actions { display: grid; gap: 10px; margin-top: 16px; }
.hc-side-actions .ap-btn { width: 100%; }

/* ---------------- form controls (theme inputs) ---------------- */
.pw-help-legend { display: block; font: 700 .875rem/1.25rem var(--font); color: var(--ink); margin-bottom: 8px; }
.pw-choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 24px; }
@media (min-width: 560px) { .pw-choice { grid-template-columns: 1fr 1fr; } }
.pw-choice label {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px;
    border: 1px solid var(--field); border-radius: var(--r); background: #fff; cursor: pointer;
    font: 400 1rem/1.25rem var(--font); color: var(--ink); transition: border-color .15s, background-color .15s;
}
.pw-choice label:hover { border-color: var(--teal); }
.pw-choice label:has(input:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--lime-tint); }
.pw-choice input { accent-color: var(--teal); width: 18px; height: 18px; flex: 0 0 auto; }

.pw-field-block { margin-bottom: 16px; }
.pw-field-block label { display: block; font: 400 .875rem/1.25rem var(--font); color: var(--ink); margin-bottom: 4px; }
.pw-field-block label small { font-size: .8125rem; color: var(--muted); }
.pw-field-block input, .pw-field-block select, .pw-field-block textarea,
.pw-co-input, .pw-co-stripe {
    width: 100%; min-height: 48px; border: 1px solid var(--field); border-radius: var(--r); background: #fff;
    font: 400 1rem/1.5rem var(--font); color: var(--ink); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pw-field-block input, .pw-field-block select { height: 48px; padding: 0 16px; }
.pw-field-block input[type="date"] { padding-right: 12px; }
.pw-field-block select {
    -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230e242b' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.pw-field-block textarea { min-height: 140px; padding: 12px 16px; resize: vertical; }
.pw-field-block input::placeholder, .pw-field-block textarea::placeholder, .pw-co-input input::placeholder { color: #6b7a7f; }
.pw-field-block input:focus, .pw-field-block select:focus, .pw-field-block textarea:focus,
.pw-co-input:focus-within, .pw-co-stripe.StripeElement--focus {
    border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 71, 90, .15);
}
.pw-field-block.is-bad input, .pw-field-block.is-bad select, .pw-field-block.is-bad textarea { border-color: var(--danger); }
.pw-field-err { display: none; margin-top: 6px; font-size: .8125rem; line-height: 1.25rem; font-weight: 700; color: var(--danger); }
.pw-field-block.is-bad .pw-field-err { display: block; }
.pw-field-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
@media (min-width: 640px) { .pw-field-pair { grid-template-columns: 1fr 1fr; } }

.pw-help-or {
    display: flex; align-items: center; gap: 14px; margin: 8px 0 20px;
    font: 600 .8125rem/1.25rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.pw-help-or::before, .pw-help-or::after { content: ""; flex: 1; border-top: 1px dotted var(--teal); }

.pw-help-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 48px; margin-top: 8px; padding: 0 24px; border: 0; border-radius: var(--r);
    background: var(--lime); color: var(--teal); cursor: pointer;
    font: 600 1rem/1.5rem var(--font-ui); letter-spacing: .02em; text-transform: uppercase;
    transition: background-color .15s;
}
.pw-help-submit:hover:not(:disabled) { background: var(--lime-2); }
.pw-help-submit:active:not(:disabled) { outline: 4px solid var(--lime); }
.pw-help-submit:disabled { opacity: .6; cursor: wait; }
.pw-help-hint { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: .875rem; line-height: 1.375rem; color: var(--muted); }
.pw-help-hint i { color: var(--teal); margin-top: 4px; }
.pw-help-hint a, .pw-note a { color: var(--link); text-decoration: underline; }

/* status messages (JS sets .show + ok/err/info) */
.pw-help-msg { display: none; margin-top: 16px; padding: 12px 16px; border-left: 4px solid; border-radius: var(--r-sm); font-size: .9375rem; line-height: 1.5rem; }
.pw-help-msg.show { display: block; }
.pw-help-msg.ok { background: var(--lime-tint); border-color: #7fb23a; color: var(--ok-ink); }
.pw-help-msg.err { background: var(--danger-tint); border-color: var(--danger); color: #7a1a12; }
.pw-help-msg.info { background: var(--teal-tint); border-color: var(--teal); color: var(--teal); }
.pw-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 16px; border-left: 4px solid; border-radius: var(--r-sm); font-size: .9375rem; line-height: 1.5rem; }
.pw-note i { margin-top: 4px; }
.pw-note.bad { background: var(--danger-tint); border-color: var(--danger); color: #7a1a12; }
.pw-note.good { background: var(--lime-tint); border-color: #7fb23a; color: var(--ok-ink); }
.pw-note.info { background: var(--teal-tint); border-color: var(--teal); color: var(--teal); }

/* lookup results */
.pw-res-list { display: grid; gap: 12px; margin-top: 16px; }
.pw-res-list:empty { display: none; }
.pw-res-row {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
    padding: 16px; border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: var(--r); background: var(--off);
}
.pw-res-row .no, .pw-bk .eb, .pw-cmp-side .cap {
    display: block; font: 600 .75rem/1rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.pw-res-row .uuid { font: 700 1.25rem/1.75rem var(--font); color: var(--ink); margin: 2px 0 6px; word-break: break-all; }
.pw-res-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .875rem; line-height: 1.375rem; color: var(--ink); }
.pw-res-meta i { color: var(--teal); margin-right: 6px; }
.pw-res-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-res-btn, .pw-btn-solid, .pw-btn-quiet {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 0; border-radius: var(--r); cursor: pointer; text-decoration: none !important; white-space: nowrap;
    font: 600 .9375rem/1.25rem var(--font-ui); letter-spacing: .02em; text-transform: uppercase;
    transition: background-color .15s, color .15s, border-color .15s;
}
.pw-res-btn, .pw-btn-solid { background: var(--lime); color: var(--teal); }
.pw-res-btn:hover, .pw-btn-solid:hover:not(:disabled) { background: var(--lime-2); color: var(--teal); }
.pw-btn-solid { min-height: 48px; padding: 0 24px; font-size: 1rem; }
.pw-res-btn.ghost, .pw-btn-quiet { background: transparent; color: var(--teal); border: 2px solid var(--teal); }
.pw-res-btn.ghost:hover, .pw-btn-quiet:hover { background: transparent; color: var(--teal-2); border-color: var(--teal-2); }
.pw-btn-quiet { min-height: 48px; padding: 0 22px; font-size: 1rem; }
.pw-res-btn.danger { background: var(--danger); color: #fff; }
.pw-res-btn.danger:hover { background: #8f1d17; color: #fff; }
.pw-res-btn:disabled, .pw-btn-solid:disabled { opacity: .6; cursor: wait; }
.pw-skel-row { height: 84px; border-radius: var(--r); background: linear-gradient(100deg, #eef2f3 40%, #f8fafa 50%, #eef2f3 60%); background-size: 200% 100%; animation: hcsheen 1.2s linear infinite; }
@keyframes hcsheen { to { background-position: -200% 0; } }

/* modify: steps, current booking, compare, quote */
.pw-mod-head { display: flex; align-items: center; gap: 12px; font: 700 1.375rem/1.875rem var(--font); color: var(--ink); margin-bottom: 12px; }
.pw-mod-head .step {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--teal);
    font: 700 1.05rem/1 var(--font); display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) { .pw-mod-head { font-size: 1.5rem; line-height: 2rem; } }
/* step number H2 ke bahar (heading text sirf "Find your booking"), h2 wrapper ka font le */
.pw-mod-head > h2 { font: inherit; color: inherit; margin: 0; }
.pw-hidden { display: none !important; }
.pw-bk {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 20px; align-items: center;
    padding: 16px; margin-bottom: 12px; border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: var(--r); background: var(--off);
}
@media (min-width: 640px) { .pw-bk { grid-template-columns: auto minmax(0, 1fr) auto; } }
.pw-bk .ref { font: 700 1.25rem/1.75rem var(--font); color: var(--ink); word-break: break-all; }
.pw-bk .lot b { display: block; color: var(--teal); }
.pw-bk .lot span { font-size: .875rem; color: var(--muted); }
.pw-bk .paid b { font-size: 1.125rem; color: var(--ink); }
.pw-cur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 20px; font-size: .9375rem; color: var(--ink); }
.pw-cur i { color: var(--teal); }
.pw-cur small { color: var(--muted); font-size: .875rem; }
.pw-mod-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.pw-cmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 16px; }
@media (min-width: 640px) { .pw-cmp { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; } }
.pw-cmp-side { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; background: #fff; }
.pw-cmp-side.is-new { border-color: var(--teal); background: var(--lime-tint); }
.pw-cmp-side .cap { margin-bottom: 6px; }
.pw-cmp-leg { display: grid; gap: 2px; padding: 6px 0; border-top: 1px dotted var(--teal); }
.pw-cmp-leg:first-of-type { border-top: 0; }
.pw-cmp-leg small { font-size: .8125rem; color: var(--muted); }
.pw-cmp-leg b { font-size: 1rem; color: var(--ink); }
.pw-cmp-leg .t { font-weight: 400; color: var(--muted); }
.pw-cmp-leg.changed b { color: var(--teal); }
.pw-cmp-arrow { color: var(--teal); text-align: center; }
@media (max-width: 639.98px) { .pw-cmp-arrow { transform: rotate(90deg); } }
.pw-quote .line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dotted var(--teal); font-size: .9375rem; color: var(--ink); }
.pw-quote .diff { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 16px; border-radius: var(--r); font-weight: 700; }
.pw-quote .diff.more { background: var(--teal); color: var(--off); }
.pw-quote .diff.same { background: var(--lime-tint); color: var(--ok-ink); }

/* modify: date fields (range calendar opens as a modal) */
.pw-modify-dates .pwf-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .pw-modify-dates .pwf-row { grid-template-columns: 1fr 1fr; gap: 16px; } }
.pw-modify-dates .pwf-label { display: block; font: 400 .875rem/1.25rem var(--font); color: var(--ink); margin-bottom: 4px; }
.pw-modify-dates .pwf-box {
    position: relative; display: flex; align-items: center; min-height: 48px; cursor: pointer;
    border: 1px solid var(--field); border-radius: var(--r); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.pw-modify-dates .pwf-box:hover { border-color: var(--teal); }
.pw-modify-dates .pwf-box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 71, 90, .15); }
.pw-modify-dates .pwf-box > i:first-child { color: var(--teal); font-size: 1rem; margin: 0 10px 0 16px; }
.pw-modify-dates .pwf-date {
    flex: 1 1 auto; width: 100%; min-width: 0; height: 46px; padding-right: 12px; border: 0; outline: none;
    background: transparent; cursor: pointer; font: 400 1rem/1.2 var(--font); color: var(--ink);
}
.pw-modify-dates .pwf-box .pwf-time { display: none; }
.pw-spin { animation: hcspin 1s linear infinite; }
@keyframes hcspin { to { transform: rotate(360deg); } }

/* range calendar (opened as modal from /help/modify): theme Done button */
.apb-rcal-done { background: var(--lime); color: var(--teal); font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .02em; }
.apb-rcal-done:hover { background: var(--lime-2); }

/* modify-pay: card panel (pw-checkout.css ki jagah) */
.pw-co-cardpanel { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--off); }
.pw-co-cardpanel-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font: 700 .9375rem/1.25rem var(--font); color: var(--ink); }
.pw-co-cardpanel-top i { color: var(--teal); margin-right: 6px; }
.pw-co-cardpanel .paylogos { display: inline-flex; gap: 6px; }
.pw-co-cardpanel .paylogo { width: 40px; height: 26px; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.pw-co-field label { display: block; font: 400 .875rem/1.25rem var(--font); color: var(--ink); margin-bottom: 4px; }
.pw-co-stripe { padding: 13px 16px; }
.pw-co-stripe.StripeElement--invalid { border-color: var(--danger); }
.pw-co-input { display: flex; align-items: center; padding: 0 16px; }
.pw-co-input input { flex: 1; width: 100%; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font: 400 1rem/1.2 var(--font); color: var(--ink); }
.pw-co-row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw-co-row3 > :last-child { grid-column: 1 / -1; }
@media (min-width: 520px) { .pw-co-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pw-co-row3 > :last-child { grid-column: auto; } }
.pw-co-note { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: .875rem; line-height: 1.375rem; color: var(--muted); }
.pw-co-note i { color: var(--teal); margin-top: 4px; }

/* cancellation confirm */
.pw-cancel-box { text-align: center; }
.pw-cancel-box .ic {
    width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; background: var(--lime-tint); color: var(--teal);
    font-size: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
}
.pw-cancel-box .pw-help-lead { margin-left: auto; margin-right: auto; }
.pw-cancel-meta { display: grid; gap: 0; max-width: 460px; margin: 4px auto 8px; text-align: left; border-top: 1px dotted var(--teal); }
.pw-cancel-meta[hidden] { display: none; }
.pw-cancel-meta div { display: flex; gap: 12px; align-items: baseline; padding: 10px 4px; border-bottom: 1px dotted var(--teal); font-size: .9375rem; color: var(--ink); }
.pw-cancel-meta i { width: 16px; color: var(--teal); text-align: center; }
.pw-cancel-box .pw-mod-actions { justify-content: center; }
.pw-cancel-box .pw-mod-actions[hidden] { display: none; }
.pw-cancel-box .pw-help-hint { justify-content: center; text-align: left; }
/* link toota/purana (no uuid / 404): laal icon + heading, error box, "Start again" */
.pw-cancel-box.is-err .ic { background: var(--danger-tint); color: var(--danger); }
.pw-cancel-box .pw-help-lead[hidden], .pw-cancel-again[hidden] { display: none; }
.pw-cancel-box.is-err .pw-help-msg { text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }
.pw-cancel-again { margin-top: 20px; }
/* load: card pehle frame se final shakal me (ref URL se, lot/dates/total jagah par bharte hain).
   Dates ki line ~322px: tang phone par 2 satrein - pehle se jagah, warna text aate hi neeche sab khiskta */
@media (max-width: 429.98px) { .pw-cancel-meta .pw-cm-dates { min-height: 3em; } }

/* modify-pay (<html class=mp-wait>, head script): details wala link -> loading card form jitni jagah (form ~1220px phone / ~900px >=640) taake aside/CTA na khiskein */
.mp-wait #loading { min-height: 1220px; }
@media (min-width: 640px) { .mp-wait #loading { min-height: 900px; } }
/* details ke bina link: <html class=mp-bad> head se - pehle paint se hi error note (HTML me pehle se), loading card nahi */
.pw-mp-nolink { display: none; }
.mp-bad .pw-mp-nolink { display: flex; }
.mp-bad #loading { display: none; }

/* contact: honeypot + security code */
.hc-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pw-captcha-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; }
@media (min-width: 640px) { .pw-captcha-row { grid-template-columns: minmax(0, 1fr) auto; } }
.pw-captcha-img {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; padding: 0 4px 0 2px;
    border: 1px solid var(--field); border-radius: var(--r); background: #fff; overflow: hidden;
}
.pw-captcha-img img { display: block; width: 147px; height: 44px; border-radius: 6px; } /* size tay: code aane tak pw-skeleton.css ki shimmer isi khane me */
.pw-captcha-reload {
    width: 40px; height: 40px; border: 0; border-radius: 6px; background: var(--bg-soft); color: var(--teal);
    font-size: .9rem; cursor: pointer; transition: background-color .15s;
}
.pw-captcha-reload:hover { background: var(--lime-tint); }
.pw-field-block.is-bad .pw-captcha-row input { border-color: var(--danger); }

/* ---------------- closing CTA band (APR "exclusive deals" ki jagah) ---------------- */
.hc-cta .ap-btn { margin-top: 4px; }
.hc-airports { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.hc-airports a {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
    border: 1px solid rgba(251, 252, 249, .55); border-radius: var(--r);
    font: 600 .9375rem/1 var(--font-ui); color: var(--off); text-decoration: none; transition: border-color .15s;
}
.hc-airports a:hover { border-color: var(--lime); text-decoration: none; }
.hc-airports b { font-weight: 600; color: var(--lime); }
@media (max-width: 479.98px) {
    .hc-airports { display: grid; grid-template-columns: 1fr 1fr; }
    .hc-airports a { display: flex; width: 100%; height: 100%; justify-content: center; flex-direction: column; gap: 4px; padding: 8px 10px; }
}

/* reservation ID ka hint (APB format) - input ke theek neeche, error line se pehle */
.pw-id-hint { margin: 6px 0 0; font: 400 .8125rem/1.25rem var(--font); color: var(--muted); }
.pw-id-hint b { color: var(--ink); font-weight: 700; letter-spacing: .02em; }