/* Inner pages (fleet, car-detail, booking, bookings, profile, auth) — loaded after each page's own styles */
:root{--art:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 170' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='300' cy='60' r='34' fill='%23FFB81C'/%3E%3Cpath d='M0 100Q100 70 200 95T400 85V170H0Z' fill='%234E9B72'/%3E%3Cpath d='M0 130Q120 105 240 125T400 118V170H0Z' fill='%231F6B4F'/%3E%3Cpath d='M300 150V112M300 124L282 112M300 120L322 108' stroke='%23062A20' stroke-width='3' fill='none'/%3E%3Cg fill='%23062A20'%3E%3Cellipse cx='278' cy='108' rx='22' ry='6'/%3E%3Cellipse cx='326' cy='104' rx='24' ry='6'/%3E%3Cellipse cx='300' cy='100' rx='28' ry='7'/%3E%3Crect y='156' width='400' height='14'/%3E%3C/g%3E%3C/svg%3E")}
body{background:var(--bg)}
/* page header: light and formal */
.page-header{background:#fff;border-bottom:1px solid var(--border);padding:40px 48px 32px}
.page-header-bg{display:none}
.page-header h1{color:var(--ink2);font-size:40px;letter-spacing:-.4px}
.page-header p{color:var(--gray);font-size:17px}
.breadcrumb a,.breadcrumb span{color:var(--gray)}.breadcrumb a:hover{color:var(--leaf)}.breadcrumb .current{color:var(--ink);font-weight:600}
/* readable labels: sentence case, 13px+ */
.filter-title,.spec-label,.date-field label,.booking-car-brand{text-transform:none!important;letter-spacing:0!important;font-size:14px!important}
.filter-title{font-family:var(--display);font-size:17px!important;color:var(--ink2)}
.filter-count,.car-feat-tag,.booking-ref,.tab-count,.profile-badge,.stat-box-label,.reviewer-date,.addon-text p,.addon-info p,.notif-info p,.addon-price span{font-size:13px!important}
.review-text,.price-row,.summary-row,.filter-option label,.spec-value,.addon-info h4,.addon-text h4,.notif-info h4,.booking-detail,.nav-menu-item span{font-size:15px!important}
.review-text{line-height:1.65}
/* surfaces */
.filters-panel,.booking-card,.summary-card,.form-card,.content-panel,.profile-card,.nav-menu,.car-card-list,.tabs-row,.booking-steps,.modal{border-color:var(--border)!important;box-shadow:var(--shadow-sm)}
.spec-item,.price-breakdown,.review-card,.addon-card,.date-field,.feature-chip,.car-feat-tag{background:var(--bg)!important;border-color:var(--border)}
/* buttons: pills, same as the homepage */
.book-now-btn,.confirm-btn,.auth-submit,.save-btn,.apply-filters,.filter-toggle-btn,.btn-sm,.clear-filters,.social-btn{border-radius:999px!important}
.book-now-btn,.confirm-btn,.auth-submit,.save-btn{color:var(--ink)!important;background:var(--gold)}
.book-now-btn:hover,.confirm-btn:hover,.auth-submit:hover,.save-btn:hover{background:var(--gold2)}
.apply-filters,.btn-sm-primary,.filter-toggle-btn{background:var(--ink2)!important;color:#fff!important}
.tab.active,.step-tab.active{background:#fff;color:var(--ink2)}
.step-tab.active::after,.tab.active::after{height:3px}
.view-btn.active,.view-btn:hover{background:var(--ink2);border-color:var(--ink2)}
.active-tag{background:var(--gold-glow);border-color:rgba(255,184,28,.5)}
.toggle-sw input:checked~.toggle-track{background:var(--leaf)}
.addon-card.selected,.pay-opt.selected{border-color:var(--leaf)!important;background:rgba(31,107,79,.07)!important}
.nav-menu-item.active{background:rgba(31,107,79,.08);border-left-color:var(--leaf)}.nav-menu-item.active svg,.spec-value svg,.feature-chip svg,.booking-detail svg,.form-card h3 svg,.panel-title svg{stroke:var(--leaf)}
.modal-overlay,.success-overlay{background:rgba(14,59,46,.78)!important}
.price-big{font-size:38px}.booking-total,.profile-name,.stat-box-num{font-family:var(--display)}
/* car detail: landscape panel behind the vehicle */
.car-visual{background:var(--ink2) var(--art) bottom/cover no-repeat;border-radius:20px}
.car-visual-bg{display:none}
/* auth: light page, green panel with the landscape */
body .auth-page{background:var(--bg)}
body:has(.auth-page){background:var(--bg)}
.auth-container{box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.auth-left{background:var(--ink2) var(--art) bottom/100% auto no-repeat}
.auth-left-bg{display:none}
.auth-left h2{font-size:34px}
.auth-tabs{background:var(--bg2)}.auth-tab.active{color:var(--ink2)}
.auth-switch a,.forgot-link{color:var(--leaf)}
/* profile */
.profile-hero{background:var(--ink2) var(--art) bottom/cover no-repeat;padding-bottom:56px}
.profile-badge{color:#fff!important;background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.3)!important}
@media(max-width:600px){.page-header{padding:28px 20px 24px}.page-header h1{font-size:30px}}
/* shared chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.chip{background:#fff;border:1.5px solid var(--border);color:var(--ink);padding:9px 18px;border-radius:999px;font:600 15px var(--body);cursor:pointer}
.chip:hover{border-color:var(--ink)}.chip.active{background:var(--ink2);border-color:var(--ink2);color:#fff}
/* FLEET: open filter rail, sticky results bar, photo-led cards */
.fleet-layout{max-width:1360px;grid-template-columns:250px 1fr;gap:40px;padding:32px 40px 72px}
.filters-panel{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;top:92px}
.filter-section{border-color:var(--border)!important}
.results-header{position:sticky;top:68px;z-index:5;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:22px}
.results-count{font-size:16px}.sort-select{border-radius:999px;padding:10px 18px;font-size:14px}
.cars-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px}
.car-img{height:220px}.car-card-list .car-img{width:260px}
@media(max-width:900px){.fleet-layout{padding:20px}}
/* CAR DETAIL: bigger photo panel, three-column specs */
.detail-layout{max-width:1260px;grid-template-columns:1fr 410px;gap:44px}
.car-visual{height:430px}.spec-grid{grid-template-columns:repeat(3,1fr)}
.detail-section h2{font-size:26px}.price-big{font-size:42px}
@media(max-width:900px){.detail-layout{grid-template-columns:1fr}.car-visual{height:260px}.spec-grid{grid-template-columns:1fr 1fr}}
/* BOOKING / BOOKINGS / PROFILE: wider, calmer */
.booking-layout{max-width:1260px;grid-template-columns:1fr 410px;gap:44px}
.form-card{padding:32px}.form-card h3{font-size:22px}
.bookings-layout{max-width:980px}.booking-body{align-items:center}.booking-car-img{width:180px;height:110px}
.profile-layout{max-width:1200px;grid-template-columns:320px 1fr;gap:36px}
@media(max-width:900px){.booking-layout{grid-template-columns:1fr}}
/* CAR DETAIL: title block, photo first, key facts before the description */
#pageHeader{padding:28px 48px 8px;border-bottom:none;background:var(--bg)}
#pageHeader h1{font-size:46px;letter-spacing:-.6px}
#pageHeader p{font-size:17px;font-weight:600;color:var(--leaf)}
.detail-layout{padding-top:20px}
.car-visual{background-image:var(--art)!important;background-size:cover!important;background-position:bottom!important;aspect-ratio:16/9;height:auto;max-height:520px;margin-bottom:28px}
.car-thumb-row{display:none}
.spec-grid{grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.spec-item{background:#fff!important;border-radius:0;padding:18px 20px;border-right:1px solid var(--border)}.spec-item:last-child{border-right:none}
.spec-label{color:var(--gray)}.spec-value{font:700 17px var(--display)}
.detail-section{border-color:var(--border)}
.booking-card{padding:30px;box-shadow:var(--shadow)!important}
.book-now-btn{padding:17px;font-size:17px}
.book-note{text-align:center;font-size:14px;color:var(--gray);margin-top:12px}
@media(max-width:900px){#pageHeader{padding:20px 20px 4px}#pageHeader h1{font-size:32px}.spec-grid{grid-template-columns:1fr 1fr}.spec-item:nth-child(2n){border-right:none}.spec-item{border-bottom:1px solid var(--border)}}
/* BOOKING: progress pills, calmer forms, summary rail */
.booking-steps{background:transparent!important;border:none!important;box-shadow:none!important;gap:10px;margin-bottom:28px;overflow:visible}
.step-tab{background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:12px 14px;font-size:15px}
.step-tab.active{background:var(--ink2)!important;border-color:var(--ink2);color:#fff!important}.step-tab.active::after{display:none}
.step-tab.active .step-num-circle{background:var(--gold);color:var(--ink)}
.step-tab.done{border-color:var(--green);background:rgba(31,122,77,.08)}
.form-card{border-radius:18px}.form-card h3{font-size:23px;margin-bottom:22px}
.summary-card{padding:26px;box-shadow:var(--shadow)!important}.summary-car-img{height:170px}
.summary-row.total{font:700 20px var(--display)}
.mpesa-card{border-radius:16px}
@media(max-width:700px){.booking-steps{flex-direction:column}}
/* BOOKINGS: ticket cards, pill filters */
.bookings-layout{max-width:1000px}
.tabs-row{background:transparent!important;border:none!important;box-shadow:none!important;gap:10px;overflow:visible;margin-bottom:24px}
.tab{flex:none;padding:10px 20px;border:1.5px solid var(--border);border-radius:999px;background:#fff;font-size:15px}
.tab.active{background:var(--ink2);border-color:var(--ink2);color:#fff}.tab.active::after{display:none}
.tab.active .tab-count{background:var(--gold);color:var(--ink)}
.booking-card{display:grid;grid-template-columns:96px 1fr auto;align-items:stretch;border-radius:18px;margin-bottom:16px}
.bk-when{background:var(--ink2);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 8px}
.bk-when b{font:700 40px/1 var(--display)}.bk-when span{font-size:15px;font-weight:600;color:var(--gold);margin-top:4px}
.bk-main{padding:20px 24px}.bk-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.bk-status{padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700}
.booking-car-name{font-size:24px;margin-bottom:8px}.bk-line{font-size:15px;color:var(--gray);margin-top:3px}
.bk-side{padding:20px 24px;border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between;gap:14px;align-items:flex-end}
.bk-total{text-align:right;font:700 22px var(--display)}.bk-total small{display:block;font:500 13px var(--body);color:var(--gray)}
.booking-actions{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){.booking-card{grid-template-columns:1fr}.bk-when{flex-direction:row;gap:8px;justify-content:flex-start;padding:12px 20px}.bk-side{border-left:none;border-top:1px solid var(--border);align-items:stretch}.bk-total{text-align:left}.booking-actions{justify-content:flex-start}}
/* PROFILE: account header on top, pill menu, one content column */
.profile-layout{grid-template-columns:1fr!important;max-width:1000px;gap:22px}
.profile-card{display:grid;grid-template-columns:1fr auto;align-items:stretch}
.profile-hero{text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center;padding:28px 32px}
.profile-hero .profile-avatar{grid-row:span 3;margin:0}
.profile-hero>*{margin:0}.profile-name{font-size:26px}.profile-badge{justify-self:start;margin-top:8px!important}
.stats-row{display:flex;gap:0;background:#fff;align-items:stretch}
.stat-box{display:flex;flex-direction:column;justify-content:center;padding:0 32px;border-left:1px solid var(--border)}
.nav-menu{display:flex;overflow-x:auto;gap:8px;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0}
.nav-menu-item{border:1.5px solid var(--border)!important;border-radius:999px;background:#fff;padding:10px 18px;white-space:nowrap}
.nav-menu-item.active{background:var(--ink2)!important;border-color:var(--ink2)!important;border-left-width:1.5px}
.nav-menu-item.active span{color:#fff}.nav-menu-item.active svg{stroke:var(--gold)}
@media(max-width:700px){.profile-card{grid-template-columns:1fr}.stats-row{border-top:1px solid var(--border)}.stat-box{padding:14px;flex:1}.profile-hero{padding:22px 20px}}
/* AUTH: logo on the green panel, wider panel copy */
.auth-left .nav-logo-icon{background:var(--gold)}.auth-left .nav-logo-icon svg{stroke:var(--ink2)}
.auth-left{justify-content:flex-start;min-height:560px}.auth-left h2{font-size:38px;letter-spacing:-.4px}
.auth-perks{margin-top:24px}.auth-container{max-width:960px;border-radius:24px}