/* CITA checkout preview V3 -- hierarchy layer for the protection step (2026-09-22, tier rename pass).
   Same facts as V2 (checkout-preview-v2.js / protection-coverage-v2.js), different emphasis:
   Basic = included but exposed, Comfort = a reduction, Zen (RECOMMENDED) = the lowest exposure.
   Append-only. Every selector anchored under #preview-protection-choices, #pricing-preview (mileage
   pane) or dialog.protection-compare / .protection-tip, because pricing-strategy-v39.css loads earlier
   -- this file loads after it in checkout-preview-v3.html, and every rule below also carries the
   higher #id-anchored specificity as a second guard, matching the pattern proven in
   checkout-preview-v2.css. */

/* Defensive fix, NOT an edit to checkout-selected.css (owned by another agent, left untouched).
   Same root cause V2 already documented in checkout-preview-v2.css: that file carries two
   same-specificity ".has-checkout-preview .preview-layout" rules -- a real 2-column one and a stray
   3-column one -- so the receipt column (2nd track, min 0) can collapse to near-0px whenever
   .preview-content's intrinsic content width grows, exactly what the taller V3 protection cards
   trigger (reproduced live: the receipt column collapsed to a single-character-wide ransom-note
   column when this file omitted the fix). V3 does not load checkout-preview-v2.css, so the fix is
   repeated here, verbatim, loading after that file, plus !important as a second guard since the
   conflicting rules share specificity. Scoped to min-width:901px, the exact breakpoint
   checkout-preview.css already uses to switch .preview-layout to a single column below 900px. */
@media(min-width:901px){
 .has-checkout-preview .preview-layout{grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr) !important}
}

#preview-protection-choices{align-items:stretch}

#preview-protection-choices .protection-choice.v3-card{
 position:relative;display:flex;flex-direction:column;height:100%;overflow:visible;
 padding:22px 20px 20px;border:1px solid #3d525c;border-radius:14px;background:#192932;
 transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;
}
#preview-protection-choices .protection-choice.v3-card:hover{transform:translateY(-2px);border-color:#5c7883}
#preview-protection-choices .protection-choice.v3-card.is-selected{
 border-color:#bfe3d1;background:#1f333c;box-shadow:inset .22rem 0 #bfe3d1,0 18px 36px -24px #000c;
}

/* Zen: most visually prominent card -- accent border, gentle lift, RECOMMENDED ribbon. */
#preview-protection-choices .protection-choice.v3-card.v3-card-featured{
 border-color:#c9b57e;transform:translateY(-6px);box-shadow:0 22px 46px -24px #000c;
}
#preview-protection-choices .protection-choice.v3-card.v3-card-featured:hover{transform:translateY(-8px)}
#preview-protection-choices .protection-choice.v3-card.v3-card-featured.is-selected{
 border-color:#bfe3d1;box-shadow:inset .22rem 0 #bfe3d1,0 22px 46px -24px #000c;
}
/* Static, not absolute: the badge must sit INSIDE the card, as the first visible element above the
   title, never floating over the top border (owner requirement 2026-09-22). Card is display:flex;
   flex-direction:column, so this becomes the first flex child; align-self:flex-start keeps it a
   compact pill instead of stretching the card's full width. */
#preview-protection-choices .v3-badge{
 display:inline-block;align-self:flex-start;margin:0 0 14px;padding:5px 12px;border-radius:999px;
 background:linear-gradient(135deg,#e7dab3,#c9b57e);color:#20180a;font-size:10.5px;font-weight:800;
 letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 14px #00000066;
}

#preview-protection-choices .v3-head{display:flex;align-items:flex-start;gap:12px}
#preview-protection-choices .v3-head input[type="radio"]{width:20px;height:20px;min-width:20px;flex:none;margin:3px 0 0;accent-color:#bfe3d1}
#preview-protection-choices .v3-title-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#preview-protection-choices .v3-overline{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fa6b0}
#preview-protection-choices .v3-title{font-size:24px;line-height:1.05;font-weight:600;color:#f4f7f6;letter-spacing:-.01em}
#preview-protection-choices .v3-tag{
 align-self:flex-start;margin-top:2px;padding:3px 9px;border-radius:5px;background:#26363f;
 color:#b6c4cb;font-size:10.5px;letter-spacing:.03em;font-weight:600;
}

#preview-protection-choices .v3-position{margin:10px 0 0;font-size:13px;line-height:1.5;color:#aebfca}

#preview-protection-choices .v3-price-row{
 display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
 margin:16px 0;padding:13px 0;border-top:1px solid #2a3d47;border-bottom:1px solid #2a3d47;
}
#preview-protection-choices .v3-price{font-size:17px;font-weight:650;color:#f0f4f5;white-space:nowrap}
#preview-protection-choices .v3-trip{font-size:12px;color:#93a7b1}

/* Zen's secondary price line ("Only +EUR7/day vs Comfort") -- sits right under the price row,
   right-aligned like the trip total above it, in the same gold accent as the featured card. */
#preview-protection-choices .v3-price-note{margin:-12px 0 16px;font-size:11.5px;color:#c9b57e;text-align:right}

#preview-protection-choices .v3-resp{margin-bottom:18px}
#preview-protection-choices .v3-resp-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b9cbd5;margin-bottom:7px}
#preview-protection-choices .v3-resp-amount{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#preview-protection-choices .v3-amount-single,
#preview-protection-choices .v3-amount-after{font-size:30px;font-weight:700;letter-spacing:-.02em;color:#f4f7f6}
#preview-protection-choices .v3-amount-before{font-size:17px;font-weight:500;color:#7d8f99;text-decoration:line-through;text-decoration-thickness:1.5px}
#preview-protection-choices .v3-arrow{font-size:18px;color:#8fa6b0}
#preview-protection-choices .v3-card.v3-card-featured .v3-amount-after{color:#e7dab3}

#preview-protection-choices .v3-points{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
#preview-protection-choices .v3-point{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45;color:#dbe6ea}
#preview-protection-choices .v3-point-icon{flex:none;width:16px;margin-top:1px;font-size:13px;text-align:center}
#preview-protection-choices .v3-point.is-check .v3-point-icon{color:#9fd8c3}
#preview-protection-choices .v3-point.is-warn .v3-point-icon{color:#e3c179}
#preview-protection-choices .v3-point.is-cross .v3-point-icon{color:#93a3ad}
#preview-protection-choices .v3-point-text{flex:1;min-width:0}

#preview-protection-choices .v3-explain{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:#aebfca}

#preview-protection-choices .v3-footnote{
 display:flex;align-items:flex-start;gap:6px;margin:auto 0 12px;padding-top:10px;
 border-top:1px dashed #2a3d47;font-size:11px;line-height:1.5;color:#7d8f99;opacity:.9;
}
#preview-protection-choices .v3-footnote-icon{flex:none;margin-top:1px;font-size:11px}
#preview-protection-choices .v3-footnote-text{flex:1;min-width:0}

#preview-protection-choices .v3-details-link{margin-top:auto;align-self:flex-start;padding-top:2px}

#preview-protection-choices .v3-info{
 flex:none;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
 margin-left:1px;padding:0;border:1px solid #52606d;border-radius:50%;background:transparent;
 color:#9fb0ba;font-size:11px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
#preview-protection-choices .v3-info:hover{color:#e9f0f4;border-color:#a7caff}
#preview-protection-choices .v3-info[aria-expanded="true"]{background:#2a3d47;color:#e9f0f4;border-color:#a7caff}

@media(min-width:960px){
 #preview-protection-choices .protection-choice.v3-card{overflow:visible}
}

@media(max-width:720px){
 #preview-protection-choices .v3-title{font-size:21px}
 #preview-protection-choices .v3-amount-single,
 #preview-protection-choices .v3-amount-after{font-size:26px}
 #preview-protection-choices .protection-choice.v3-card.v3-card-featured{transform:translateY(-2px)}
 #preview-protection-choices .protection-choice.v3-card.v3-card-featured:hover{transform:translateY(-2px)}
 #preview-protection-choices .v3-badge{font-size:10px;padding:4px 10px;margin-bottom:12px}
}

/* Shared accessible tooltip popup, appended to <body> (outside #preview-protection-choices), fixed
   position, positioned and clamped in JS so it never causes horizontal scroll on a 390px viewport. */
.protection-tip{
 position:fixed;z-index:9999;max-width:min(300px,calc(100vw - 24px));padding:12px 14px;
 background:#0f171d;border:1px solid #3d525c;border-radius:10px;color:#dbe6ea;
 font-size:12.5px;line-height:1.55;box-shadow:0 18px 40px -12px #000000b0;
}

/* Mileage step (Part B, 2026-09-22): totals-only presentation, id-anchored under #pricing-preview so
   it never leaks onto V2 (which builds its own separate mileage markup in checkout-preview-v2.js and
   never carries these classes). */
#pricing-preview [data-pane="mileage"] .v3-mileage-hero{
 display:flex;flex-direction:column;align-items:center;gap:10px;margin:22px 0 28px;padding:30px 24px;
 border:1px solid #3d525c;border-radius:14px;background:linear-gradient(160deg,#1f333c,#182932);
 text-align:center;
}
#pricing-preview [data-pane="mileage"] .v3-mileage-hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#9fd8c3;text-transform:uppercase}
#pricing-preview [data-pane="mileage"] .v3-mileage-hero-value{font-size:clamp(2.1rem,5vw,2.8rem);font-weight:700;letter-spacing:-.02em;color:#f4f7f6;font-variant-numeric:tabular-nums}
#pricing-preview [data-pane="mileage"] .v3-mileage-hero-points{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font-size:12.5px;color:#b9cbd5}
#pricing-preview [data-pane="mileage"] .v3-mileage-hero-points li{display:flex;align-items:center;gap:5px}

#pricing-preview [data-pane="mileage"] .mileage-packages legend{color:#8fa6b0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

#pricing-preview [data-pane="mileage"] .v3-mileage-contact{
 display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
 margin-top:14px;padding:14px 16px;border:1px dashed #3d525c;border-radius:10px;color:#aebfca;font-size:12.5px;
}
#pricing-preview [data-pane="mileage"] .v3-mileage-contact p{margin:0}
#pricing-preview [data-pane="mileage"] .v3-mileage-contact strong{color:#f4f7f6;font-variant-numeric:tabular-nums}
#pricing-preview [data-pane="mileage"] .v3-mileage-contact button{
 flex:none;padding:9px 16px;border:1px solid #5c737d;border-radius:6px;background:transparent;
 color:#e9f0f4;font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;
}
#pricing-preview [data-pane="mileage"] .v3-mileage-contact button:hover{border-color:#a7caff;background:#20313a}
#pricing-preview [data-pane="mileage"] .v3-mileage-contact button[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

@media(max-width:720px){
 #pricing-preview [data-pane="mileage"] .v3-mileage-hero{padding:22px 16px}
 #pricing-preview [data-pane="mileage"] .v3-mileage-contact{flex-direction:column;align-items:flex-start}
}

/* 2026-09-22 finish-the-chain: deposit vs responsibility vs real debit, summary facts, live payment door */
.preview-deposit.preview-responsibility{margin-top:-12px;padding-top:0;border-top:0}
.preview-charged{display:grid;grid-template-columns:1fr auto;gap:9px;padding:16px 18px;margin:0 0 20px;border-radius:8px;background:#20333c;border:1px solid #3d5360}
.preview-charged span{font-size:14px;color:#dbe6ec}
.preview-charged b{font-size:20px;letter-spacing:-.03em}
.preview-charged small{grid-column:1/-1;color:#aebfca;font-size:12px}
.final-mileage-summary .summary-km-total strong{font-size:30px;letter-spacing:-.04em}
.final-protection-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0 26px;padding:18px;border:1px solid #344a56;border-radius:8px}
.final-protection-summary span{display:block;font-size:12px;color:#aebfca;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.final-protection-summary strong{font-size:18px;letter-spacing:-.02em}
.checkout-ref{color:#b9cbd5;font-size:14px;margin:14px 0 6px}
.checkout-pay{display:inline-block;text-decoration:none;text-align:center;margin:14px 0 8px;min-width:280px}
#checkout-status{min-height:1.4em;margin:14px 0}
#checkout-status.is-error{color:#ffb4a8}

/* 2026-09-22: mileage rows on the dark theme (pricing-strategy-v39.css paints them white) */
#mileage-package-choices .mileage-choice{background:#1b2630;border-color:#2f3d49;color:#f5f2eb;border-radius:8px;margin-bottom:.6rem}
#mileage-package-choices .mileage-choice strong{color:#f5f2eb}
#mileage-package-choices .mileage-choice b{color:#c9a24b;font-weight:600}
#mileage-package-choices .mileage-choice:hover{border-color:#5d7285;background:#202d38}
#mileage-package-choices .mileage-choice.is-selected,#mileage-package-choices .mileage-choice:has(input:checked){background:#213240;border-color:#c9a24b;box-shadow:inset .2rem 0 #c9a24b}
#mileage-package-choices .mileage-choice input{accent-color:#c9a24b}

/* 2026-09-23 owner reference "insurance.png": clean structured cards. Anchored on the container id so
   pricing-strategy-v39.css (loaded later) never wins. Inner classes are v4-*, the old v3-* rules stay inert. */
#preview-protection-choices{display:grid;gap:18px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:960px){#preview-protection-choices{grid-template-columns:repeat(3,minmax(0,1fr))}}
#preview-protection-choices .protection-choice.v3-card{position:relative;display:flex;flex-direction:column;gap:0;padding:26px 24px 22px;border:1px solid #2f4450;border-radius:14px;background:linear-gradient(180deg,#152029,#111a22);color:#eef3f0;cursor:pointer;transform:none;box-shadow:none;overflow:visible}
#preview-protection-choices .protection-choice.v3-card:hover{border-color:#4f6b78;transform:none}
#preview-protection-choices .protection-choice.v3-card.is-selected{border-color:#7fa9b8;box-shadow:0 0 0 1px #7fa9b8 inset}
#preview-protection-choices .protection-choice.v3-card.v3-card-featured{border-color:#d9b64a;box-shadow:0 0 0 1px #d9b64a inset;transform:none}
#preview-protection-choices .protection-choice.v3-card.v3-card-featured:hover{transform:none}
#preview-protection-choices .protection-choice.v3-card.v3-card-featured.is-selected{box-shadow:0 0 0 2px #d9b64a inset}
#preview-protection-choices .v4-badge{display:inline-block;align-self:flex-start;margin:0 0 14px;padding:6px 14px;border-radius:999px;background:#f0c94a;color:#1b1f13;font-size:12px;font-weight:700;letter-spacing:.08em}
#preview-protection-choices .v4-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
#preview-protection-choices .v4-title{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:#fff}
#preview-protection-choices .v4-tagline{display:block;margin-top:8px;font-size:16px;color:#c2cfd4}
#preview-protection-choices .v4-head input[type="radio"]{appearance:none;-webkit-appearance:none;flex:none;width:28px;height:28px;margin:2px 0 0;border:2px solid #7d919a;border-radius:50%;background:transparent;cursor:pointer}
#preview-protection-choices .v4-head input[type="radio"]:checked{border-color:#f0c94a;background:radial-gradient(circle,#f0c94a 0 40%,transparent 44%)}
#preview-protection-choices .v4-head input[type="radio"]:focus-visible{outline:3px solid #a7caff;outline-offset:3px}
#preview-protection-choices .v4-price-row{display:flex;align-items:baseline;gap:8px;margin:22px 0 0}
#preview-protection-choices .v4-price{font-size:34px;font-weight:600;letter-spacing:-.02em;color:#fff}
#preview-protection-choices .v4-per{font-size:22px;color:#e6edf0}
#preview-protection-choices .v4-trip{margin:4px 0 0;font-size:13px;color:#95a7ae}
#preview-protection-choices .v4-price-note{margin:6px 0 0;font-size:13px;color:#e7dab3}
#preview-protection-choices .v4-lines{list-style:none;margin:18px 0 0;padding:20px 0 18px;border-top:1px solid #2c4049;border-bottom:1px solid #2c4049;display:grid;gap:13px}
#preview-protection-choices .v4-line{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;font-size:15.5px;line-height:1.35;color:#e6edf0}
#preview-protection-choices .v4-line-icon svg{width:20px;height:20px;display:block;margin-top:2px}
#preview-protection-choices .v4-line.is-check .v4-line-icon{color:#8fd3b2}
#preview-protection-choices .v4-line.is-cross{color:#9fb0b7}
#preview-protection-choices .v4-line.is-cross .v4-line-icon{color:#8a9aa2}
#preview-protection-choices .v4-shield{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;margin:20px 0 0;font-size:15px;line-height:1.4;color:#dbe4e7}
#preview-protection-choices .v4-shield-icon{color:#a9c3cc}
#preview-protection-choices .protection-choice.v3-card.v3-card-featured .v4-shield-icon{color:#f0c94a}
#preview-protection-choices .v4-details{margin:18px 0 0;align-self:flex-start;font-size:16px;color:#f2f6f4;text-decoration:underline;text-underline-offset:5px}
#preview-protection-choices .v4-details:hover{color:#fff}