/* ============================================================
   Highway Rental — style.css
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#C9A84C; --gold-lt:#F0D89A; --gold-dk:#8B6914;
  --ink:#0F0E0B;  --ink6:rgba(15,14,11,.6); --ink2:rgba(15,14,11,.12); --ink1:rgba(15,14,11,.06);
  --cream:#F8F5EF; --cream2:#EDE8DC; --W:#fff;
  --G:#1A6B3C; --Gbg:#EAF4EF;
  --R:#A32020;  --Rbg:#FCEAEA;
  --A:#8B5E00;  --Abg:#FFF4DC;
  --B:#1A4D8B;  --Bbg:#EAF0FB;
  --r:12px; --sb:240px;
  --fd:'Cormorant Garamond',serif;
  --fs:'DM Sans',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--fs);font-size:15px;line-height:1.6}

/* util */
.hidden{display:none!important}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:.71rem;font-weight:500}
.bg{background:var(--Gbg);color:var(--G)} .br{background:var(--Rbg);color:var(--R)}
.ba{background:var(--Abg);color:var(--A)} .bb{background:var(--Bbg);color:var(--B)}
.bk{background:var(--ink1);color:var(--ink6)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.dg{background:var(--G)} .dr{background:var(--R)} .da{background:var(--A)}

/* buttons */
.btn{padding:9px 20px;border-radius:8px;border:none;cursor:pointer;font-family:var(--fs);font-size:.85rem;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-dk{background:var(--ink);color:#fff} .btn-dk:hover{background:#252422}
.btn-gd{background:var(--gold);color:var(--ink)} .btn-gd:hover{background:var(--gold-lt)}
.btn-gh{background:none;border:1px solid var(--ink2);color:var(--ink6)} .btn-gh:hover{background:var(--ink1);color:var(--ink)}
.btn-sm{padding:6px 14px;font-size:.78rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* forms */
input,select,textarea{width:100%;background:#fff;border:1px solid var(--ink2);border-radius:8px;padding:10px 13px;font-family:var(--fs);font-size:.88rem;color:var(--ink);outline:none;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{resize:vertical;min-height:80px}
label{display:block;font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--ink6);margin-bottom:5px}
.fr{margin-bottom:1rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}

/* card / table */
.card{background:#fff;border-radius:var(--r);border:1px solid var(--ink2);padding:1.5rem}
table{width:100%;border-collapse:collapse}
th{font-size:.71rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink6);font-weight:500;padding:10px 12px;text-align:left;border-bottom:1px solid var(--ink2);white-space:nowrap;writing-mode:horizontal-tb;text-orientation:mixed}
td{padding:11px 12px;border-bottom:1px solid var(--ink1);font-size:.85rem;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--cream)}

/* loading */
#screen-loading{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:1rem}
.ll{font-family:var(--fd);font-size:2rem;font-weight:500;color:#fff}
.ll span{color:var(--gold-lt)}
.ls{width:28px;height:28px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* toast */
.notif{position:fixed;top:1rem;right:1rem;z-index:9999;padding:11px 17px;border-radius:10px;font-size:.83rem;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.18);transform:translateY(-80px);transition:transform .3s;max-width:300px;pointer-events:none}
.notif.show{transform:translateY(0)}
.notif.ok{background:var(--G);color:#fff}
.notif.err{background:var(--R);color:#fff}
.notif.info{background:var(--ink);color:#fff}
.sp{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}

/* wa float */
.wa{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;background:#25D366;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.2);text-decoration:none;transition:transform .2s}
.wa:hover{transform:scale(1.1)}

/* ── AUTH ── */
#screen-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--ink)}
.auth-bg{position:fixed;inset:0;background:url('images/site/hero-bg.jpg') center/cover no-repeat;opacity:.12;z-index:0}
.auth-card{position:relative;z-index:1;background:#fff;border-radius:16px;padding:2.5rem 2rem;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.auth-logo{font-family:var(--fd);font-size:1.6rem;font-weight:600;text-align:center;margin-bottom:.25rem;display:flex;align-items:center;justify-content:center;gap:10px}
.auth-logo span{color:var(--gold-dk)}
.auth-logo img{width:48px;height:48px;object-fit:contain;border-radius:8px;flex-shrink:0}
.auth-sub{text-align:center;font-size:.82rem;color:var(--ink6);margin-bottom:1.75rem}
.auth-tabs{display:flex;border-bottom:1px solid var(--ink2);margin-bottom:1.5rem}
.auth-tab{flex:1;padding:.6rem;text-align:center;font-size:.82rem;font-weight:500;cursor:pointer;color:var(--ink6);border:none;border-bottom:2px solid transparent;background:none;font-family:var(--fs);transition:all .2s}
.auth-tab.on{color:var(--ink);border-bottom-color:var(--gold)}
.auth-err{background:var(--Rbg);color:var(--R);border-radius:7px;padding:9px 13px;font-size:.81rem;margin-bottom:1rem}
.auth-hint{background:var(--cream);border-radius:8px;padding:10px 13px;font-size:.78rem;color:var(--ink6);margin-top:1rem;line-height:1.6}
.auth-link{font-size:.79rem;color:var(--ink6);text-align:center;margin-top:1rem}
.auth-link a{color:var(--gold-dk);cursor:pointer;text-decoration:underline}

/* ── PUBLIC NAV ── */
#screen-public nav{position:sticky;top:0;z-index:100;background:rgba(248,245,239,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink2);padding:0 2rem}
.nav-in{max-width:1100px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--fd);font-size:1.4rem;font-weight:600;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.nav-logo span{color:var(--gold)}
.nav-logo img{width:44px;height:44px;object-fit:contain;border-radius:8px;flex-shrink:0}
.nav-links{display:flex;gap:1.8rem;list-style:none;align-items:center}
.nav-links a{font-size:.79rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink6);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--gold-dk)}
.nav-right{display:flex;gap:.5rem;align-items:center}

/* ── HERO ── */
.hero{min-height:88vh;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--ink);padding:4rem 2rem}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.7) saturate(.85)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,14,11,.45),rgba(15,14,11,.82));z-index:1}
.hero-content{position:relative;text-align:center;max-width:680px;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.35);color:var(--gold-lt);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 15px;border-radius:100px;margin-bottom:1.5rem}
.hero h1{font-family:var(--fd);font-size:clamp(2.8rem,6vw,5rem);font-weight:500;line-height:1.05;color:#fff;margin-bottom:.5rem}
.hero h1 em{font-style:italic;color:var(--gold-lt)}
.hero-sub{font-size:1rem;color:rgba(255,255,255,.62);margin:0 auto 2.5rem;line-height:1.75;max-width:480px}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-ph{background:var(--gold);color:var(--ink);padding:13px 30px;border-radius:8px;font-weight:500;font-size:.92rem;text-decoration:none;transition:all .2s;display:inline-block}
.btn-ph:hover{background:var(--gold-lt)}
.btn-oh{border:1px solid rgba(255,255,255,.32);color:#fff;padding:13px 30px;border-radius:8px;font-weight:500;font-size:.92rem;text-decoration:none;transition:all .2s;display:inline-block}
.btn-oh:hover{border-color:var(--gold);color:var(--gold-lt)}
.hero-stats{display:flex;gap:3rem;justify-content:center;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}
.hs-n{font-family:var(--fd);font-size:2rem;font-weight:600;color:var(--gold-lt);display:block}
.hs-l{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.42)}
@media(max-width:768px){
  .hero-video{display:none}
  .hero::before{content:'';position:absolute;inset:0;background:url('images/site/hero-bg.jpg') center/cover no-repeat;z-index:0}
}

/* ── PUBLIC SECTIONS ── */
section{padding:4.5rem 2rem}
.si{max-width:1100px;margin:0 auto}
.sl{font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-dk);font-weight:500;margin-bottom:.6rem}
.st{font-family:var(--fd);font-size:clamp(1.8rem,3.5vw,2.7rem);font-weight:500;line-height:1.15;margin-bottom:.75rem}
.sd{font-size:.93rem;color:var(--ink6);max-width:500px;line-height:1.75}

/* fleet */
.fleet-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2.5rem;gap:1rem;flex-wrap:wrap}
.filt-row{display:flex;gap:.5rem;flex-wrap:wrap}
.fb{background:none;border:1px solid var(--ink2);padding:5px 14px;border-radius:100px;font-family:var(--fs);font-size:.77rem;cursor:pointer;transition:all .2s;color:var(--ink6)}
.fb.on,.fb:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.4rem}
.vc{background:var(--cream);border-radius:var(--r);overflow:hidden;border:1px solid var(--ink2);transition:transform .25s,box-shadow .25s}
.vc:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(15,14,11,.09)}
.vc-img{aspect-ratio:16/9;overflow:hidden;background:#e8e3d9;position:relative}
.vc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.vc:hover .vc-img img{transform:scale(1.04)}
.vc-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--ink2)}
.av-badge{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:100px;font-size:.68rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:4px}
.vc-body{padding:1.1rem 1.2rem 1.4rem}
.vc-tier{font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dk);font-weight:500;margin-bottom:.3rem}
.vc-name{font-family:var(--fd);font-size:1.3rem;font-weight:600;color:var(--ink);margin-bottom:.6rem;line-height:1.2}
.vc-specs{display:flex;gap:.7rem;margin-bottom:.9rem;flex-wrap:wrap}
.vc-spec{font-size:.75rem;color:var(--ink6)}
.vc-pr{display:flex;align-items:center;justify-content:space-between}
.vc-price{font-family:var(--fd);font-size:1.45rem;font-weight:600}
.vc-price span{font-size:.8rem;font-weight:400;color:var(--ink6);font-family:var(--fs)}
.ret-note{font-size:.72rem;color:var(--ink6);margin-bottom:.55rem}

/* booking */
.book-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:start}
.book-form{background:var(--cream);border-radius:16px;padding:1.75rem;border:1px solid var(--ink2)}
.tog-row{display:flex;gap:.5rem;flex-wrap:wrap}
.tog{flex:1;min-width:90px;background:#fff;border:1px solid var(--ink2);border-radius:7px;padding:8px 10px;font-family:var(--fs);font-size:.8rem;cursor:pointer;color:var(--ink6);transition:all .2s;text-align:center}
.tog.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.price-box{background:#fff;border:1px solid var(--gold);border-radius:8px;padding:1rem;margin-top:.75rem}
.pev{font-family:var(--fd);font-size:1.7rem;font-weight:600}
.perk{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1rem}
.perk-i{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--cream2);display:flex;align-items:center;justify-content:center;font-size:.95rem}

/* rates */
.rates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:2rem}
.rc{background:#fff;border-radius:var(--r);padding:1.3rem;border:1px solid var(--ink2)}
.rc.hl{border-color:var(--gold)}
.rtag{display:inline-block;background:var(--cream2);color:var(--gold-dk);font-size:.69rem;font-weight:500;padding:3px 9px;border-radius:100px;margin-top:.6rem}

/* docs */
.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1rem;margin-top:1.75rem}
.dc{background:#fff;border-radius:var(--r);padding:1.2rem;border:1px solid var(--ink2);text-align:center}

/* points banner */
.pts-banner{background:var(--ink);padding:2.5rem 2rem}
.pts-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.pts-title{font-family:var(--fd);font-size:1.8rem;font-weight:500;color:#fff;margin-bottom:.4rem}
.pts-title em{color:var(--gold-lt);font-style:italic}
.pts-chips{display:flex;gap:1rem;flex-wrap:wrap}
.pchip{text-align:center;background:rgba(255,255,255,.06);border-radius:10px;padding:.9rem 1.25rem}
.pchip-n{font-family:var(--fd);font-size:1.6rem;font-weight:600;color:var(--gold-lt);display:block}
.pchip-l{font-size:.73rem;color:rgba(255,255,255,.45)}

/* contact */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.cmap{border-radius:var(--r);overflow:hidden;height:280px;border:1px solid var(--ink2)}
.cmap iframe{width:100%;height:100%;border:none}
.ci{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1rem}
.cico{width:34px;height:34px;flex-shrink:0;background:var(--cream2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem}

footer{background:var(--ink);color:rgba(255,255,255,.42);padding:1.75rem;text-align:center;font-size:.79rem}
footer a{color:rgba(255,255,255,.52);text-decoration:none}

/* ── PORTAL SHELL ── */
.portal{display:flex;min-height:100vh}
.sidebar{width:var(--sb);background:var(--ink);flex-shrink:0;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:200;transition:transform .28s ease}
.sb-logo{padding:1.4rem 1.25rem 1rem;font-family:var(--fd);font-size:1.2rem;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sb-logo span{color:var(--gold-lt)}
.sb-logo img{width:38px;height:38px;object-fit:contain;border-radius:6px;flex-shrink:0}
.sb-role{font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.32);margin-top:2px;width:100%}
.sb-nav{padding:1rem 0;flex:1}
.sb-sec{padding:.7rem 1.25rem .3rem;font-size:.63rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.28)}
.sb-link{display:flex;align-items:center;gap:10px;padding:9px 1.25rem;font-size:.84rem;color:rgba(255,255,255,.52);cursor:pointer;transition:all .15s;border:none;background:none;width:100%;text-align:left;font-family:var(--fs)}
.sb-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.sb-link.on{color:#fff;background:rgba(201,168,76,.14);border-right:2px solid var(--gold)}
.sb-ic{font-size:1rem;width:18px;flex-shrink:0}
.sb-foot{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
.sb-user{display:flex;align-items:center;gap:.75rem}
.sb-av{width:34px;height:34px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:var(--ink);flex-shrink:0}
.sb-un{font-size:.81rem;color:rgba(255,255,255,.68);font-weight:500}
.sb-lo{font-size:.71rem;color:rgba(255,255,255,.32);cursor:pointer;background:none;border:none;font-family:var(--fs);padding:0}
.sb-lo:hover{color:var(--gold-lt)}
.port-main{margin-left:var(--sb);flex:1;background:var(--cream);min-height:100vh}
.port-top{background:#fff;border-bottom:1px solid var(--ink2);padding:0 2rem;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.port-title{font-size:.97rem;font-weight:500}
.port-body{padding:1.75rem}
.psec{display:none}
.psec.on{display:block}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1.75rem}
.mc{background:#fff;border-radius:var(--r);padding:1.2rem;border:1px solid var(--ink2)}
.mc-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink6);margin-bottom:.5rem}
.mc-val{font-family:var(--fd);font-size:1.9rem;font-weight:600;line-height:1;margin-bottom:3px}
.mc-sub{font-size:.74rem;color:var(--ink6)}

/* table wrap */
.tw{background:#fff;border-radius:var(--r);border:1px solid var(--ink2);overflow:hidden}
.tw-hd{padding:.9rem 1.2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink2);gap:1rem;flex-wrap:wrap}
.tw-ttl{font-weight:500;font-size:.93rem}
.act{display:flex;gap:.4rem;flex-wrap:wrap}

/* status pills */
.sp-row{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center}
.sp{padding:4px 10px;border-radius:100px;font-size:.7rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;font-family:var(--fs);white-space:nowrap;writing-mode:horizontal-tb;text-orientation:mixed;transform:none}
.sp-a{background:var(--Gbg);color:var(--G);border-color:rgba(26,107,60,.2)}
.sp-l{background:var(--Abg);color:var(--A);border-color:rgba(139,94,0,.2)}
.sp-u{background:var(--Rbg);color:var(--R);border-color:rgba(163,32,32,.2)}
.sp-off{background:var(--ink1);color:var(--ink6)}

/* customer portal */
.cp-welcome{background:var(--ink);border-radius:var(--r);padding:1.4rem;color:#fff;margin-bottom:1.4rem}
.cp-wname{font-family:var(--fd);font-size:1.4rem;font-weight:500;margin-bottom:3px}

/* points */
.pts-card{background:var(--ink);border-radius:var(--r);padding:1.5rem;color:#fff;position:relative;overflow:hidden;margin-bottom:1rem}
.pts-card::before{content:'★';position:absolute;right:-10px;top:-10px;font-size:8rem;color:rgba(201,168,76,.07)}
.pts-curr{font-family:var(--fd);font-size:3rem;font-weight:600;color:var(--gold-lt);line-height:1}
.pts-prog{height:6px;background:rgba(255,255,255,.1);border-radius:3px;margin:.9rem 0 .4rem;overflow:hidden}
.pts-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .5s ease}
.pts-lbl{display:flex;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.38)}

/* timeline */
.tl{position:relative;padding-left:1.5rem}
.tl::before{content:'';position:absolute;left:7px;top:4px;bottom:4px;width:1px;background:var(--ink2)}
.tl-item{position:relative;margin-bottom:1.4rem}
.tl-dot{position:absolute;left:-1.5rem;top:4px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--ink2)}
.tl-dot.a{background:var(--G)} .tl-dot.p{background:var(--A)} .tl-dot.d{background:var(--ink2)}
.tl-card{background:#fff;border:1px solid var(--ink2);border-radius:var(--r);padding:1rem}

/* agreement */
.agr-box{background:var(--cream);border:1px solid var(--ink2);border-radius:var(--r);padding:1.4rem;margin-bottom:1rem;max-height:280px;overflow-y:auto;font-size:.81rem;line-height:1.8;color:var(--ink6)}
.sig-area{border:2px dashed var(--ink2);border-radius:8px;padding:1.75rem;text-align:center;color:var(--ink6);font-size:.84rem;margin-bottom:1rem;cursor:pointer;transition:all .2s}
.sig-area:hover{border-color:var(--gold);color:var(--gold-dk)}
.sig-area.signed{border-color:var(--G);background:var(--Gbg);color:var(--G)}

/* condition */
.cond-entry{background:#fff;border:1px solid var(--ink2);border-radius:var(--r);padding:1.2rem;margin-bottom:.9rem}
.cond-hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.7rem;gap:1rem;flex-wrap:wrap}

/* messages */
.msg{border-radius:10px;padding:.7rem 1rem;font-size:.83rem;margin-bottom:.6rem;line-height:1.6;max-width:72%}
.msg.sent{background:var(--ink);color:#fff;margin-left:auto}
.msg.recv{background:var(--cream2)}
.msg-meta{font-size:.69rem;color:var(--ink6);margin-bottom:2px}
.msg-meta.r{text-align:right}

/* upload */
.up-area{border:2px dashed var(--ink2);border-radius:8px;padding:1.5rem;text-align:center;color:var(--ink6);font-size:.82rem;cursor:pointer;transition:all .2s}
.up-area:hover{border-color:var(--gold);color:var(--gold-dk);background:var(--cream)}
.up-prev{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.up-thumb{width:64px;height:64px;border-radius:6px;object-fit:cover;border:1px solid var(--ink2)}

/* ── MOBILE SIDEBAR ── */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199}
.sb-overlay.on{display:block}
.mob-bar{display:none;position:sticky;top:0;z-index:198;background:var(--ink);padding:0 1rem;height:52px;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}
.mob-logo{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:1.1rem;font-weight:600;color:#fff}
.mob-logo img{width:32px;height:32px;object-fit:contain;border-radius:5px}
.mob-logo span{color:var(--gold-lt)}
.ham{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px;border-radius:6px}
.ham span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .25s}
.ham.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.on span:nth-child(2){opacity:0}
.ham.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .mob-bar{display:flex}
  .port-top{display:none}
  .sidebar{transform:translateX(-100%)}
  .sidebar.on{transform:translateX(0)}
  .port-main{margin-left:0}
  .port-body{padding:1rem}
  .metrics{grid-template-columns:1fr 1fr}
  .tw{overflow-x:auto}
  table{min-width:580px}
  td,th{padding:8px;font-size:.8rem}
  .sp-row{flex-wrap:wrap}
  .f2,.f3{grid-template-columns:1fr}
  .tw-hd{flex-direction:column;align-items:flex-start}
  #admin-messages>div{grid-template-columns:1fr!important;height:auto!important}
  #admin-msg-list{max-height:200px;overflow-y:auto}
  .card{padding:1rem}
  #condition-form,#add-booking-form,#add-payment-form,#send-agr-form{max-width:100%!important}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hero-stats{gap:1.5rem}
  .fleet-hdr{flex-direction:column;align-items:flex-start}
  .book-layout,.contact-layout{grid-template-columns:1fr}
  .pts-in{flex-direction:column}
}
@media(max-width:480px){
  .metrics{grid-template-columns:1fr 1fr}
  .sidebar{width:85vw}
  .pts-curr{font-size:2.2rem}
}

/* ── FLEET TABLE FIX ── */
#admin-fleet-tbody td:nth-child(4){min-width:220px}
#admin-fleet-tbody td:nth-child(5) input,
#admin-fleet-tbody td:nth-child(6) input,
#admin-fleet-tbody td:nth-child(7) input{width:100%;min-width:100px}

/* ══ FLEET TABLE & STATUS PILLS — FINAL FIX ══ */
th { white-space: nowrap !important; writing-mode: horizontal-tb !important; }
td { white-space: normal; }
.sp-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; }
.sp { writing-mode: horizontal-tb !important; text-orientation: mixed !important; transform: none !important; white-space: nowrap !important; display: inline-block !important; padding: 4px 8px !important; border-radius: 100px !important; font-size: .7rem !important; font-weight: 500 !important; cursor: pointer !important; border: 1px solid transparent !important; }