/* TWINS Rent Car — shared visual identity across catalog, booking and customer pages. */
:root,:root[data-theme="light"]{--brand:#ff7900;--brand-strong:#ff7900;--brand-ink:#a84400;--brand-soft:#fff1e2;--on-brand:#181818;--ink:#202020;--muted:#686868;--grey:#c7c7c7;--line:#efdfce;--deco:#dcdcdc;--canvas:#fff7ee;--card:#fff;--inverse:#1b1b1b;--on-inverse:#fff;--tile:#fff3e5;--note:#fff1e2;--note-ink:#733300}


.topbar{background:#fff;color:#242424;border-bottom:3px solid #ff7900;box-shadow:0 3px 18px #a34c0008}
.topbar .wrap{height:100px}
.topbar #logoLink img{width:108px;height:88px;object-fit:contain;max-width:none}
.topbar .pill-btn,.topbar .circle{background:#fff3e5;color:#703500;border:1px solid #ffd4ac}
.topbar .pill-btn:hover,.topbar .circle:hover,.topbar .top-link:hover{background:#ffe5cc}
.topbar .count{background:#ff7900;color:#141414}
.topbar :focus-visible{outline-color:#ff9a3c}
#searchForm .search-eyebrow{color:#a84400}
#searchForm .search-go{background:#ff7900;color:#151515;box-shadow:0 3px 8px #ff790026;font-weight:700}
#searchForm .search-go:hover{background:#ff922e}
#searchForm .seg:focus-within{outline-color:#d76200}
#searchForm .seg:hover,#searchForm .seg:focus-within{background:#fff5eb}
#heroBand .paylater{background:linear-gradient(115deg,#fff5e8,#f3f3f3);border-color:#ffcc983b;box-shadow:0 8px 28px #1919191a}
#heroBand .paylater b{color:#222}
#heroBand .pay-promo-note{color:#626262}
.confidence-intro{background:linear-gradient(135deg,#ff7900,#ffa32c);color:#242424}
.confidence-intro .section-eyebrow{color:#512500}
.confidence-signature{border-color:#74350040}
.signature-logo{width:80px;height:66px;object-fit:contain;background:#fff;border-radius:8px;flex-shrink:0}
.reason-icon,.review-avatar{background:#fff0df;color:#a84400}
body>footer{background:#fff3e5;color:#292929;border-top:4px solid #ff7900}
.footer-brand{display:inline-flex!important;width:160px;padding:10px!important;border-radius:14px;background:#fff;margin-bottom:16px}
.footer-brand img{width:140px;height:115px;object-fit:contain}
.btn-brand{color:#171717;background:#ff7900}
.btn-brand:hover{background:#ff922e}
.twins-customer{color:#242424;background:#fff8f0}
.twins-customer>header{max-width:none;background:#fff;color:#242424;padding:8px max(24px,calc((100vw - 1112px)/2));border-bottom:3px solid #ff7900;min-height:100px}
.twins-customer .customer-brand{line-height:0;flex-shrink:0}
.twins-customer .customer-brand img{display:block;width:108px;height:88px;object-fit:contain}
.twins-customer>header a:last-child{color:#703500;background:#fff3e5;border-color:#ffd4ac;text-align:center}
.twins-customer .primary{background:#ff7900;color:#171717;border-color:#ff7900;font-weight:700}
.twins-customer .primary:hover{background:#ff922e}
.twins-customer .login-welcome{background:linear-gradient(135deg,#ff922e,#ffb65b)}
.twins-customer .login-welcome li:before,.twins-customer .customer-eyebrow{color:#a84400}
.twins-customer .login-road{color:#fff0dd}
.twins-customer .customer-price-panel,.twins-customer .customer-note{background:#f6f6f6;border-color:#e1e1e1}
.twins-customer .customer-card{border-color:#e3e3e3}
.twins-customer .customer-notice:not(.error):not(:empty){background:#fff0df}
.twins-customer .customer-card input:focus{outline-color:#bd5300}
.twins-customer .customer-history li:before{background:#d76200}
@media(max-width:600px){.topbar .wrap{height:88px;gap:10px}.topbar #logoLink img{width:92px;height:76px}.topbar .top-actions{gap:6px}.twins-customer>header{padding:6px 16px;min-height:88px}.twins-customer .customer-brand img{width:92px;height:76px}}
#bookOv .btn-brand{background:#ff7900;color:#171717}
#bookOv .btn-brand:hover{background:#ff922e}
.receipt-primary{background:#ff7900;color:#171717}
.receipt-symbol{background:#fff0df;color:#a84400}
.topbar .wrap{padding-block:4px}
body>footer .foot-bottom #themeBtn{color:#292929!important}

/* Apply the orange identity to every customer-facing section, not only CTAs. */
.topbar .top-link{color:#984200}
#heroBand .paylater{background:linear-gradient(110deg,#fff0dd,#fff9f3);border:1px solid #ffc287}
#searchForm{border-top:3px solid #ff7900}
#searchForm .search-fields,#searchForm .search-date-placeholder{background:#fff5e9}
#searchForm .search-field-title svg{color:#b75000}
#searchForm .seg{border-right-color:#f0d9c1}
.filters{background:var(--card);border-bottom:1px solid var(--line)}
.cat[aria-pressed="true"]{background:var(--brand-soft);border-radius:10px 10px 0 0;color:var(--brand-ink)}
.card .media{border:1px solid var(--line)}
.card .info{padding-top:10px}
.card .info .p b{color:var(--brand-ink)}
.card:hover .media{border-color:#ff9c43}
.confidence-section{background:var(--canvas)}
.confidence-intro h2{color:#202020}
.confidence-intro>p,.confidence-signature div>span{color:#512b0b}
.confidence-cta{background:#fff;color:#8a3900;box-shadow:0 4px 14px #9d45001a}
.reason-card{border-top:3px solid #ff7900}
.reason-icon,.review-avatar{background:#ff7900;color:#202020}
.guest-reviews .section-eyebrow,.section-eyebrow{color:var(--brand-ink)}
.guest-review-card{border-top:3px solid #ffad5c}
.review-stars{color:#b75000}
.google-review-link,.google-review-link:hover{background:#ff7900;color:#202020}
.reviews-arrow{border-color:#ffc78e;color:var(--brand-ink);background:var(--brand-soft)}
.panel{border-top:3px solid #ff7900}
#bookOv .sheet-head,#bookOv .sheet-foot{background:var(--brand-soft)}
#bookOv .booking-aside,.receipt-next{border-top:3px solid #ff7900}
.btn-inv,.btn-brand,#bookOv .btn-brand,.receipt-primary{background:#ff7900;color:#202020}
.payment-option.selected{border-color:#cf5b00;box-shadow:0 0 0 1px #cf5b00}
.calendar-day.selected span,.calendar-day.selected:not(:disabled):hover span{color:#202020;background:#ff7900}
.cash-amount{background:#fff0df;border-color:#ffd0a0}
.cash-amount strong{color:#934000}
.cash-amount>div>span,.cash-amount-note{color:#705033}
.cash-dialog .cash-submit{background:#ff7900;color:#202020}
.cash-dialog .cash-submit:disabled{background:#eee6dd;color:#8b8176}
.cash-dialog [data-cash-copy]{background:#fff0df;color:#934000}
.cash-memo{background:#fff8f0;border-color:#dda976}
.cash-dialog .cash-confirm input{accent-color:#cb5b00}
.cash-confirm:has(input:checked){background:#fff4e6;border-color:#ffae5f}
.cash-dialog :focus-visible{outline-color:#c45a00}
.twins-customer .login-welcome li:before,.twins-customer .login-welcome .customer-eyebrow{color:#572a00}
.twins-customer .customer-price-panel,.twins-customer .customer-note{background:#fff3e5;border-color:#f1d5b6}
.twins-customer .customer-card{border-top:3px solid #ff7900}

/* The header lives inside the video hero so the footage continues behind it. */
#heroBand .hero-topbar{position:relative;top:auto;z-index:auto;background:transparent;border:0;box-shadow:none;color:#fff}
#heroBand .hero-topbar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;height:160px;min-height:0;padding-top:18px;padding-bottom:0;gap:16px}
#heroBand .hero-topbar #logoLink{grid-column:2;grid-row:1;justify-self:center;mix-blend-mode:screen;display:block;flex:none}
#heroBand .hero-topbar #logoLink img{width:166px;height:138px;object-fit:contain}
#heroBand .hero-topbar .top-actions{grid-column:1;grid-row:1;justify-self:start;display:flex;gap:8px;padding-top:4px}
#heroBand .hero-topbar #topWa{display:none}
#heroBand .hero-reservations{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:10px 16px;border:1px solid #ffffff73;border-radius:999px;background:#ffffffeb;color:#2b2b2b;text-decoration:none;font-size:13px;font-weight:650;margin-top:4px;white-space:nowrap;box-shadow:0 2px 12px #00000012}
#heroBand .hero-topbar .pill-btn,#heroBand .hero-topbar .circle{color:#fff;background:#ffffff1f;border-color:#ffffff73;backdrop-filter:blur(8px)}
#heroBand .hero-topbar .pill-btn:hover,#heroBand .hero-topbar .circle:hover{background:#ffffff38}
#heroBand .hero-reservations:hover{background:#fff0df;border-color:#ffb268}
#heroBand .hero{padding-top:8px}
.filters{top:env(safe-area-inset-top,0px)}
@media(max-width:760px){
 #heroBand .hero-topbar .wrap{grid-template-columns:1fr 1fr;grid-template-rows:44px 138px;height:198px;gap:8px 12px;padding-top:12px}
 #heroBand .hero-topbar #logoLink{grid-column:1/-1;grid-row:2;align-self:center}
 #heroBand .hero-topbar #logoLink img{width:166px;height:138px}
 #heroBand .hero-topbar .top-actions{grid-column:1;grid-row:1;padding-top:0;gap:6px}
 #heroBand .hero-reservations{grid-column:2;grid-row:1;padding:10px 12px;font-size:12px;gap:6px;margin-top:0}
 #heroBand .hero-topbar .pill-btn{font-size:12px;padding-inline:10px}
 #heroBand .hero-topbar .pill-btn svg{display:none}
 #heroBand .hero-topbar .circle{width:40px;height:40px}
 #heroBand .hero{padding-top:4px}
}


/* White travel planner and matching neutral payment banner. */
#heroBand .hero-topbar #logoLink{mix-blend-mode:normal}
#heroBand .hero-topbar #logoLink img{filter:invert(1) hue-rotate(180deg)}
.filter-right{grid-template-columns:minmax(0,1fr)}
#grid .badge{top:12px}
#heroBand #searchForm{max-width:980px;padding:18px;border:1px solid #ffffffd9;border-radius:20px;background:#fff;box-shadow:0 16px 40px #00000025;backdrop-filter:none;-webkit-backdrop-filter:none;color:#252525}
#heroBand #searchForm .search-heading{margin:0 0 14px;padding:0;gap:10px}
#heroBand #searchForm .search-heading::before{display:grid;place-items:center;content:'↗';width:28px;height:28px;margin:0;border-radius:9px;background:#f1f2f3;box-shadow:none;color:#333;font-size:19px;flex:none}
#heroBand #searchForm .search-heading h2{color:#252525;font-size:16px;letter-spacing:-.025em;line-height:22px;font-weight:650}
#heroBand #searchForm .search-fields{background:none;border:0;gap:10px;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) auto}
#heroBand #searchForm .seg{background:#fff;border:1px solid #e3e4e6;border-radius:12px;min-height:70px;padding:10px 14px;gap:5px}
#heroBand #searchForm .seg:hover{background:#f8f9fa;border-color:#c2c5ca}
#heroBand #searchForm .seg:focus-within{background:#fff;border-color:#333;outline:1px solid #333;outline-offset:0}
#heroBand #searchForm .search-field-title svg{color:#797d83}
#heroBand #searchForm .seg-label{color:#70747a;font-size:10px;text-transform:uppercase;letter-spacing:.07em;line-height:14px}
#heroBand #searchForm .seg input,#heroBand #searchForm .seg select{color:#252525;color-scheme:light;font-weight:500}
#heroBand #searchForm .seg select{background-image:linear-gradient(45deg,transparent 50%,#666 50%),linear-gradient(135deg,#666 50%,transparent 50%)}
#heroBand #searchForm .seg select option{color:#252525;background:#fff}
#heroBand #searchForm .search-date-placeholder{background:transparent;color:#555;font-size:16px}
#heroBand #searchForm .search-date.is-empty:not(:focus-within) input{color:transparent}
#heroBand #searchForm .search-date.is-empty:not(:focus-within) input::-webkit-datetime-edit{visibility:hidden}
#heroBand #searchForm .search-go{height:70px;width:70px;min-height:70px;margin:0;border-radius:12px;background:#f4f5f6;color:#242424;border:1px solid #dedfe2;box-shadow:none}
#heroBand #searchForm .search-go:hover{background:#e9eaed;border-color:#9c9fa5}
#heroBand .paylater{display:grid;grid-template-columns:1fr 1.2fr;gap:6px 24px;align-items:center;width:min(660px,100%);max-width:660px;padding:16px 24px;border-radius:18px;background:#fff;border:1px solid #e7e8ea;box-shadow:0 8px 28px #00000016;text-align:left}
#heroBand .paylater b{grid-column:1;grid-row:1;font-size:16px;line-height:1.3;text-align:left;color:#242424;letter-spacing:-.02em}
#heroBand .paylater .pay-promo-note{grid-column:1;grid-row:2;text-align:left;font-size:10px;line-height:1.5;color:#71757b;max-width:none}
#heroBand .paylogos{grid-column:2;grid-row:1/3;border-left:1px solid #e7e8ea;padding:0 0 0 20px;gap:16px;max-width:100%;min-width:0}
#heroBand .paylogos .payment-badge{height:36px}
@media(max-width:760px){
 #heroBand #searchForm{max-width:460px;padding:16px;border-radius:18px}
 #heroBand #searchForm .search-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #heroBand #searchForm .seg{min-height:68px;padding:10px 12px}
 #heroBand #searchForm .seg-location{grid-column:1/-1}
 #heroBand #searchForm .search-go{grid-column:1/-1;width:100%;min-height:46px;height:46px;margin:0;background:#fff;border:1px solid #aeb1b6;border-radius:10px}
 #heroBand .paylater{width:min(460px,100%);max-width:460px;grid-template-columns:1fr;padding:16px 20px;gap:8px;border-radius:18px;text-align:center}
 #heroBand .paylater b{grid-column:1;grid-row:1;text-align:center;font-size:15px}
 #heroBand .paylogos{grid-column:1;grid-row:2;border-left:0;border-top:1px solid #eceef0;padding:8px 0 0;gap:16px}
 #heroBand .paylater .pay-promo-note{grid-column:1;grid-row:3;text-align:center;font-size:9px;max-width:none}
}
/* Trip-ticket concept: destination, connected dates and a dedicated orange action. */
#heroBand #searchForm{max-width:820px;padding:8px 12px 8px 24px;border-radius:24px;border:1px solid #fff;background:#fff;box-shadow:0 18px 48px #00000024}
#heroBand #searchForm .search-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0}
#heroBand #searchForm .search-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 174px;gap:0 20px;background:none;border:0;border-radius:0;align-items:stretch}
#heroBand #searchForm .seg{position:relative;border:0;border-radius:0;background:transparent;box-shadow:none;padding:14px 0;min-height:72px;gap:6px}
#heroBand #searchForm .seg-location{grid-column:1/3;grid-row:1;border-bottom:1px dashed #d9dce0;padding-left:52px;min-height:78px}
#heroBand #searchForm .seg-location .search-field-title svg{position:absolute;left:0;top:20px;width:34px;height:34px;padding:8px;box-sizing:content-box;background:#f2f3f5;border-radius:50%;stroke-width:1.5}
#heroBand #searchForm .seg-location .search-field-title svg{width:22px;height:22px;padding:8px}
#heroBand #searchForm .seg-label{font-size:10px;letter-spacing:.08em;color:#767b82;font-weight:600}
#heroBand #searchForm .seg select{font-size:17px;font-weight:600}
#heroBand #searchForm .seg[for="sStart"]{grid-column:1;grid-row:2;padding-right:20px}
#heroBand #searchForm .seg[for="sEnd"]{grid-column:2;grid-row:2;padding-left:8px}
#heroBand #searchForm .seg[for="sStart"]::after{content:'→';position:absolute;right:-14px;top:30px;color:#959aa1;font-size:18px;line-height:24px;pointer-events:none}
#heroBand #searchForm .seg:hover{background:transparent}
#heroBand #searchForm .seg:focus-within{outline:2px solid #b8bec5;outline-offset:3px;border-color:#d9dce0;border-radius:8px}
#heroBand #searchForm .search-go{grid-column:3;grid-row:1/3;align-self:center;display:flex;flex-direction:column;justify-content:center;gap:12px;width:100%;height:128px;min-height:0;margin:0;padding:18px;border:0;border-radius:18px;background:#ff7900;color:#202020;box-shadow:0 5px 14px #ff790024}
#heroBand #searchForm .search-go:hover{background:#ff9027}
#heroBand #searchForm .search-go .go-label{position:static;clip:auto;clip-path:none;width:auto;height:auto;overflow:visible;white-space:normal;line-height:1.35;font-size:14px;font-weight:700}
#heroBand #searchForm .search-go svg{width:24px;height:24px}
@media(max-width:760px){
 #heroBand #searchForm{max-width:460px;padding:6px 18px 16px;border-radius:22px}
 #heroBand #searchForm .search-fields{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
 #heroBand #searchForm .seg-location{grid-column:1/-1;grid-row:1;min-height:76px;padding-left:48px}
 #heroBand #searchForm .seg-location .search-field-title svg{top:19px}
 #heroBand #searchForm .seg select{font-size:16px}
 #heroBand #searchForm .seg[for="sStart"]{padding-right:8px}
 #heroBand #searchForm .seg[for="sEnd"]{padding-left:8px}
 #heroBand #searchForm .seg[for="sStart"]::after{right:-14px}
 #heroBand #searchForm .search-go{grid-column:1/-1;grid-row:3;flex-direction:row;gap:10px;height:48px;width:100%;margin:4px 0 0;padding:12px;border-radius:12px}
 #heroBand #searchForm .search-go svg{width:18px;height:18px}
 #heroBand #searchForm .seg{min-height:76px}
}
/* Extend the hero into iPhone safe areas while keeping navigation below the notch. */
html:has(.hero-topbar){background:#17232b}
body:has(.hero-topbar){min-height:100dvh}
#heroBand .hero-topbar .wrap{padding-top:calc(18px + env(safe-area-inset-top,0px));height:calc(160px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(max-width:760px){#heroBand .hero-topbar .wrap{padding-top:calc(12px + env(safe-area-inset-top,0px));height:calc(198px + env(safe-area-inset-top,0px))}}

/* Paint the viewport edge immediately, including launch and elastic overscroll. */
html.hero-page{min-height:100%;background:#17232b url('/media/fifix-hero-poster.jpg') center top/cover fixed no-repeat}
html.hero-page body{margin:0;min-height:100svh;background:transparent}
html.hero-page #top{margin:0;padding-top:0;background:var(--card)}
html.hero-page #heroBand{margin-top:0;border-top:0}
@media(display-mode:standalone){
 html.hero-page #heroBand{min-height:100svh}
 html.hero-page body{overscroll-behavior-y:none}
 html.hero-page .hero{padding-bottom:max(40px,env(safe-area-inset-bottom,0px))}
}