:root{--red:#ff493f;--red2:#e52f28;--bg:#101216;--panel:#1a1d22;--panel2:#20242a;--line:#343840;--muted:#9fa5ae;--white:#fff}
*{box-sizing:border-box}html,body{margin:0;background:#0b0d10;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}body{min-height:100vh}button,input{font:inherit}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);box-shadow:0 0 40px #0005}
.screen{display:none;min-height:100vh;padding-bottom:86px}.screen.active{display:block}.hero-login{padding:56px 26px 26px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,73,63,.22),transparent 38%),linear-gradient(#11141a,#0f1115)}
.logo{width:215px;max-height:90px;object-fit:contain}.hero-login h1{font-size:34px;margin:20px 0 8px}.hero-login p{color:var(--muted);margin:0 auto;max-width:330px}
.card{margin:18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}.auth-card{margin-top:12px}label{display:block;color:#c6cad1;font-size:13px;font-weight:700;margin-bottom:14px}input{width:100%;margin-top:7px;padding:14px 15px;background:#12151a;color:#fff;border:1px solid #3a3f47;border-radius:10px;outline:none}input:focus{border-color:var(--red)}
.primary,.ghost{width:100%;border:0;border-radius:10px;padding:15px 18px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff}.ghost{background:transparent;color:#fff;border:1px solid #4a4f58;margin-top:10px}
.app-header,.simple-header{min-height:70px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#0e1014;position:sticky;top:0;z-index:5}.header-logo{width:180px;max-height:46px;object-fit:contain}.icon-btn,.back{background:transparent;border:0;color:#fff;font-size:28px}.simple-header h2{font-size:20px;margin:0}.simple-header span{width:32px}
main{padding:18px}.welcome{display:flex;justify-content:space-between;align-items:end}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:900}.welcome h2{font-size:30px;margin:6px 0}.welcome p{color:var(--muted);margin-top:0}
.new-booking{width:100%;display:flex;justify-content:space-between;align-items:center;margin:12px 0 18px;background:linear-gradient(135deg,var(--red),#ff3434);border:0;color:#fff;border-radius:14px;padding:18px;font-size:18px;font-weight:900}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick{background:var(--panel);border:1px solid var(--line);border-radius:14px;color:#fff;padding:18px 12px;text-align:center}.quick b{font-size:24px;display:block;color:#fff}.quick span{display:block;font-weight:850;margin-top:7px}.quick small{color:var(--muted)}
.panel{margin-top:20px;background:#15181d;border:1px solid var(--line);border-radius:15px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line)}.panel-head h3{margin:0}.text-btn{background:none;border:0;color:var(--red);font-weight:800}
.booking-row{padding:15px 16px;border-bottom:1px solid #2e3238}.booking-row:last-child{border-bottom:0}.booking-row strong{display:block}.booking-row small{color:var(--muted)}.status{float:right;background:#164f2d;color:#8ef0ac;border-radius:20px;padding:3px 8px;font-size:11px}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);height:72px;background:#0d0f13;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;z-index:10}.bottom-nav button{border:0;background:transparent;color:#8f959e;font-size:19px}.bottom-nav button span{display:block;font-size:10px}.bottom-nav button.active{color:var(--red)}.bottom-nav .plus{width:56px;height:56px;border-radius:50%;background:var(--red);color:#fff;font-size:28px;align-self:center;justify-self:center}
.form-wrap{padding:16px}.steps{display:flex;justify-content:space-between;margin:10px 42px 18px;position:relative}.steps:before{content:"";position:absolute;top:14px;left:0;right:0;height:2px;background:#3a3e45;z-index:-1}.steps span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#383c43;font-size:12px}.steps .on{background:var(--red)}
.card h3{margin:6px 0 14px}.vehicle-list{padding:14px}.vehicle{width:100%;display:grid;grid-template-columns:42px 1fr 20px;align-items:center;text-align:left;gap:12px;background:#171a1f;color:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px}.vehicle span{font-size:28px}.vehicle b,.vehicle small{display:block}.vehicle small{color:var(--muted);margin-top:3px}.vehicle i{font-style:normal;font-size:24px;color:#aaa}
.summary-map,.tracking-map{height:175px;border-radius:16px;background:radial-gradient(circle at 65% 35%,rgba(255,73,63,.25),transparent 24%),linear-gradient(135deg,#23323c,#142027);display:grid;place-items:center;font-weight:900;color:#fff;margin-bottom:16px;border:1px solid #44515a}.summary{margin:0 0 16px}.summary-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #30343b}.summary-row:last-child{border-bottom:0}.summary-row span{color:var(--muted)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.tabs button{background:#181b20;color:#aaa;border:1px solid #363a42;border-radius:9px;padding:10px}.tabs .active{color:#fff;border-color:var(--red)}
.timeline{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}.timeline>div{display:grid;grid-template-columns:36px 1fr;gap:12px;min-height:82px;position:relative}.timeline>div:after{content:"";position:absolute;left:17px;top:31px;bottom:-5px;width:2px;background:#3a3e46}.timeline>div:last-child:after{display:none}.timeline b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid #777}.timeline .done b{background:#12b866;border-color:#12b866}.timeline .current b{background:#1d75ff;border-color:#1d75ff}.timeline strong,.timeline small{display:block}.timeline small{color:var(--muted);margin-top:4px}
.support a{display:block;color:#fff;text-decoration:none;padding:12px 0;border-bottom:1px solid #333}.support a:last-child{border-bottom:0}.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);background:#fff;color:#111;padding:12px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:50;font-weight:800}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:481px){body{padding:20px 0}.screen{min-height:calc(100vh - 40px)}}

.booking-btn{display:block;width:100%;background:transparent;color:#fff;border:0;text-align:left}
.tracking-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.tracking-top{display:flex;justify-content:space-between;align-items:center}.tracking-top small,.tracking-grid small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.tracking-top strong{font-size:22px}.route-line{display:flex;justify-content:space-between;align-items:center;background:#12151a;border:1px solid #30343a;border-radius:12px;padding:14px;margin:16px 0}
.progress{height:9px;background:#2a2e35;border-radius:20px;overflow:hidden;margin-bottom:18px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--red),#ff7a45);border-radius:20px}
.tracking-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.tracking-grid>div{background:#14171b;border:1px solid #30343a;border-radius:10px;padding:12px}.tracking-grid .full{grid-column:1/-1}.tracking-grid strong{display:block;margin-top:4px}
.saved-address{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:13px 0;border-bottom:1px solid #333}.saved-address span{color:var(--muted);font-size:13px}.saved-address button{grid-row:1/3;grid-column:2;background:transparent;border:1px solid #555;color:#fff;border-radius:8px;padding:8px}




.day-rate-option{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:700}
.day-rate-option[hidden]{display:none !important}
.account-feature-card{margin-top:18px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03)}
.switch-line{display:flex;align-items:center;gap:10px;margin-top:10px}


.mileage-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03);margin:12px 0}
.mileage-card>div{display:flex;flex-direction:column;gap:4px}.mileage-label{font-size:12px;color:#9aa0a6;text-transform:uppercase;letter-spacing:.04em}
#mileageValue{font-size:18px}.mileage-btn{border:0;border-radius:8px;padding:10px 12px;background:#e31b23;color:#fff;font-weight:700;white-space:nowrap}.mileage-btn:disabled{opacity:.6}
@media(max-width:560px){.mileage-card{align-items:stretch;flex-direction:column}.mileage-btn{width:100%}}


.extra-stops-card{margin:14px 0}
.extra-stops-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.extra-stops-head h3{margin:0 0 4px}.extra-stops-head small{color:#9aa0a6}.extra-stops-head span{font-weight:800}
.extra-stop-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.secondary-stop-btn{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;border-radius:8px;padding:10px;font-weight:700}
.secondary-stop-btn:disabled{opacity:.45}
.extra-stop-row{display:flex;align-items:flex-end;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.extra-stop-row>div{flex:1}.extra-stop-row small{display:block;color:#9aa0a6;margin-bottom:4px}
.remove-stop{width:42px;height:42px;border:0;border-radius:8px;background:#72242a;color:#fff;font-size:24px}
.quote-estimate-card{display:flex;flex-direction:column;gap:5px;padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);margin:12px 0}
.quote-estimate-card>span{font-size:12px;text-transform:uppercase;color:#9aa0a6}.quote-estimate-card>strong{font-size:20px}.quote-estimate-card>small{color:#9aa0a6}
.day-rate-option{display:flex!important;align-items:center;gap:8px;padding:12px;border-radius:9px;background:#2d220f;border:1px solid #5a3a00;font-weight:800}
.day-rate-option[hidden]{display:none!important}
@media(max-width:520px){.extra-stop-actions{grid-template-columns:1fr}}

.summary-row b{max-width:60%;white-space:normal;overflow-wrap:anywhere}


textarea{
  width:100%;
  margin-top:7px;
  padding:14px 15px;
  background:#12151a;
  color:#fff;
  border:1px solid #3a3f47;
  border-radius:10px;
  outline:none;
  resize:vertical;
  min-height:104px;
  font:inherit;
}
textarea:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(255,73,63,.10)}
textarea::placeholder,input::placeholder{color:#777e88}

.info-entry-card{
  margin:16px 0;
  padding:16px;
  background:linear-gradient(180deg,#1d2026,#181b20);
  border:1px solid #393e46;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.info-entry-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:10px}
.info-entry-head h3{margin:0 0 4px;font-size:16px}
.info-entry-head small{display:block;color:var(--muted);line-height:1.35}
.info-entry-icon{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,73,63,.14);
  border:1px solid rgba(255,73,63,.45);
  color:var(--red);font-weight:900;
}
.info-entry-card textarea{margin-top:0;background:#111419}

.stop-modal[hidden]{display:none!important}
.stop-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.stop-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.stop-modal-panel{
  position:relative;
  width:min(480px,100%);
  max-height:92vh;
  overflow:auto;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  background:#15181d;
  border:1px solid #3c4149;
  border-bottom:0;
  border-radius:22px 22px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.55);
  animation:stopSlideUp .18s ease-out;
}
@keyframes stopSlideUp{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}
.stop-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.stop-modal-head h3{font-size:22px;margin:4px 0 0}
.stop-modal-close{
  width:38px;height:38px;border-radius:50%;border:1px solid #454a52;
  background:#20242a;color:#fff;font-size:25px;line-height:1;
}
.stop-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.stop-modal-actions .ghost{margin-top:0}

.extra-stop-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:10px;
  margin-top:10px;
  padding:14px;
  border:1px solid #373c44;
  border-radius:12px;
  background:#14171c;
}
.extra-stop-row>div{min-width:0}
.extra-stop-row small{display:block;color:#9aa0a6;margin:0 0 5px}
.extra-stop-row strong{display:block;font-size:15px}
.extra-stop-row .stop-extra-preview{margin-top:5px;color:#8f959e;font-size:12px;line-height:1.35}
.extra-stop-row .remove-stop{align-self:center}

.permission-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0;
  padding:15px 16px;
  background:linear-gradient(180deg,#1d2026,#181b20);
  border:1px solid #393e46;
  border-radius:14px;
}
.permission-option-copy{display:flex;flex-direction:column;gap:3px}
.permission-option-copy strong{font-size:15px}
.permission-option-copy small{color:var(--muted);line-height:1.35}
.switch{position:relative;width:48px;height:28px;flex:0 0 48px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#343942;border-radius:999px;cursor:pointer;transition:.18s}
.slider:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s}
.switch input:checked + .slider{background:var(--red)}
.switch input:checked + .slider:before{transform:translateX(20px)}



/* v10.18 permission visibility fix */
.vehicle[hidden]{display:none !important;}

/* v11 customer-specific rate / Tail Lift additions */
.booking-price-selector select{width:100%;margin-top:7px;padding:14px 15px;background:#12151a;color:#fff;border:1px solid #3a3f47;border-radius:10px}
#paymentReference:disabled{opacity:.6;cursor:not-allowed;background:#20242a}
#tailLiftWrap[hidden]{display:none!important}


/* ===== J&S premium customer portal v13 ===== */
@media(min-width:761px){#app{max-width:none;width:100%;box-shadow:none}.screen{padding-bottom:0}}
.premium-home{max-width:1540px;margin:auto;padding:0 28px 34px}
.premium-hero{min-height:300px;margin-top:18px;border:1px solid #263442;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(90deg,#07111b 0%,#08131d 42%,rgba(8,19,29,.18) 72%),url('dashboard-hero.png') right center/auto 100% no-repeat;box-shadow:0 20px 50px #0006}
.premium-hero-copy{padding:36px;max-width:660px}.premium-hero h2{font-size:54px;line-height:.95;margin:6px 0 12px}.premium-hero h2 span{color:#ff3540}.premium-hero p{font-size:19px;color:#d7dee5}
.premium-trust{display:flex;gap:34px;margin-top:28px}.premium-trust>span{display:flex;align-items:center;gap:10px;color:#ff3540;font-size:23px}.premium-trust b{font-size:12px;line-height:1.15;color:#fff}
.premium-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}.premium-action{min-height:100px;display:grid;grid-template-columns:46px 1fr 18px;align-items:center;gap:12px;text-align:left;background:linear-gradient(180deg,#13202b,#0e1821);border:1px solid #2b3947;border-radius:11px;color:#fff;padding:16px;cursor:pointer}.premium-action b{font-size:28px}.premium-action strong,.premium-action small{display:block}.premium-action small{color:#bfc8d1;margin-top:4px}.premium-action i{font-style:normal;font-size:24px}.premium-action.primary-action{background:linear-gradient(135deg,#ff2638,#e5162c);border-color:#ff3444}
.premium-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.premium-stats>div{position:relative;min-height:88px;padding:15px 16px;background:#101b25;border:1px solid #283644;border-radius:10px}.premium-stats span{float:right;color:#ff3944;font-size:23px}.premium-stats small,.premium-stats strong{display:block}.premium-stats small{color:#c7d0d8}.premium-stats strong{font-size:26px;margin-top:6px}
.premium-lower{display:grid;grid-template-columns:1.65fr 1fr;gap:16px}.premium-card{background:#0d1721;border:1px solid #273542;border-radius:12px;padding:18px}.premium-card-head{display:flex;justify-content:space-between;align-items:center}.premium-card h3{margin:0 0 14px}.premium-recent-table .customer-activity-item{grid-template-columns:16px 110px 140px 1fr}.premium-side{display:grid;gap:14px}.quick-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-links-grid button,.quick-links-grid a{display:grid;grid-template-columns:28px 1fr 12px;gap:9px;align-items:center;text-align:left;text-decoration:none;background:#121d27;border:1px solid #2a3845;border-radius:8px;color:#fff;padding:13px}.quick-links-grid small{display:block;color:#aeb8c1;margin-top:3px}.quick-links-grid i{font-style:normal}.premium-help{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:16px;background:linear-gradient(90deg,#35131a,#5b121c);border:1px solid #6d2530;border-radius:11px}.premium-help>span{font-size:25px;color:#ff3a43}.premium-help b small{display:block;color:#d6bfc2}.premium-help a{color:#fff;text-decoration:none;font-size:12px}

.premium-booking,.premium-summary{max-width:1500px;margin:auto;padding:22px 28px 50px}.booking-hero{position:relative;min-height:190px;padding:30px;border-radius:14px;margin-bottom:16px;background:linear-gradient(90deg,#08121c 0%,#08121ccc 48%,#08121c22),url('dashboard-hero.png') right center/auto 100% no-repeat;border:1px solid #263442}.booking-hero.compact{min-height:155px}.booking-hero h1{font-size:48px;margin:4px 0 8px}.booking-hero p{color:#d1d8df;font-size:17px}.booking-back{position:absolute;right:22px;top:22px;border:1px solid #43505d;background:#101b25;color:#fff;border-radius:8px;padding:10px 14px}
.booking-section{background:#09141d;border:1px solid #273744;border-radius:14px;padding:16px;margin-bottom:14px}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:14px}.section-title>b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ff2638;color:#fff;font-size:20px}.section-title h2{font-size:19px;margin:0}.section-title h2 small{font-weight:500;color:#aeb7c0}.section-title>span{margin-left:auto;color:#aeb7c0}.section-help{color:#aeb7c0;margin:-7px 0 14px 50px}
.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-card{margin:0!important;cursor:pointer}.service-card input{position:absolute;opacity:0}.service-card>span{display:block;min-height:78px;padding:17px 18px;border:1px solid #2d3c48;border-radius:10px;background:#0f1b25}.service-card strong,.service-card small{display:block}.service-card small{color:#b9c2ca;margin-top:5px}.service-card:has(input:checked)>span{border-color:#ff3041;background:linear-gradient(135deg,#3b1018,#151922);box-shadow:inset 0 0 0 1px #ff3041}
.vehicle-cards{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.vehicle-cards>label{position:relative;margin:0!important;min-height:150px;padding:12px 10px;border:1px solid #293946;border-radius:10px;background:#0f1b25;text-align:center;cursor:pointer}.vehicle-cards input[type=radio]{position:absolute;opacity:0}.vehicle-cards>label:has(input:checked){border-color:#ff3041;box-shadow:inset 0 0 0 1px #ff3041;background:#24131a}.vehicle-art{display:grid;place-items:center;height:62px;font-size:44px}.luton-art{font-size:55px}.vehicle-cards strong,.vehicle-cards small{display:block}.vehicle-cards small{color:#c1c9d0;margin-top:5px}.more-vehicle-card select{width:100%;margin-top:7px;background:#111b24;color:#fff;border:1px solid #40505e;border-radius:7px;padding:7px}.hidden-functional-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}
.booking-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field-pair,.toggle-row,.between-time-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px}.booking-section label{color:#e7ebef}.booking-section input,.booking-section textarea{background:#0b1720;border-color:#344653}.toggle-row .asap-option{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid #2d3c48;border-radius:9px;background:#0d1821}.toggle-row .asap-option input{width:auto;margin:0}
.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.attachment-picker>input{display:none}.attachment-picker>span{display:block;margin-top:7px;padding:20px;border:1px dashed #496071;border-radius:10px;background:#0b1720;text-align:center;font-weight:800}.attachment-picker>small{display:block;color:#9da8b2;margin-top:5px}.attachment-file{display:block;color:#dce2e7;font-size:12px;margin-top:5px}
.booking-final-row{display:grid;grid-template-columns:1fr 360px;gap:14px;align-items:stretch}.booking-final-row .quote-estimate-card{margin:0;border-color:#d91e31;background:linear-gradient(90deg,#241017,#0b151e)}.booking-final-row .quote-estimate-card strong{font-size:28px}.continue-quote{height:100%;min-height:100px;font-size:17px}
.summary-progress{display:grid;grid-template-columns:repeat(3,1fr);max-width:760px;margin:0 auto 18px}.summary-progress>span{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;color:#89939d}.summary-progress>span:before{content:"";height:2px;background:#3b4650;position:absolute}.summary-progress span{font-size:18px}.summary-progress small{font-size:12px}.summary-progress .done{color:#fff}.summary-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.summary-edit{margin-left:auto;border:1px solid #43505d;background:#101b25;color:#fff;border-radius:8px;padding:9px 12px}.confirm-panel{align-self:start}.confirm-check{display:flex!important;gap:10px;align-items:center;padding:15px;background:#0e1a24;border:1px solid #30414e;border-radius:10px}.confirm-check input{width:auto;margin:0}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.confirm-actions .ghost{margin:0}

@media(max-width:1000px){.premium-actions{grid-template-columns:1fr 1fr}.premium-lower,.summary-layout{grid-template-columns:1fr}.vehicle-cards{grid-template-columns:repeat(4,1fr)}.info-grid{grid-template-columns:1fr 1fr}.premium-help{grid-template-columns:36px 1fr}.premium-help a{grid-column:2}}
@media(max-width:760px){.premium-home,.premium-booking,.premium-summary{padding:12px 12px 92px}.premium-hero{min-height:350px;background:linear-gradient(180deg,#07111bee,#07111b88),url('dashboard-hero.png') center/cover}.premium-hero-copy{padding:22px}.premium-hero h2,.booking-hero h1{font-size:38px}.premium-trust{gap:12px;flex-wrap:wrap}.premium-actions,.premium-stats,.booking-two-col,.service-cards,.booking-final-row,.summary-layout{grid-template-columns:1fr}.premium-stats{grid-template-columns:1fr 1fr}.premium-lower{grid-template-columns:1fr}.quick-links-grid,.info-grid{grid-template-columns:1fr}.vehicle-cards{grid-template-columns:1fr 1fr}.booking-hero{min-height:220px}.booking-back{position:static;margin-top:14px}.field-pair,.toggle-row{grid-template-columns:1fr}.customer-desktop-header{display:none!important}}

/* v13.1 — historic booking/payment-reference dashboard */
.premium-stats{grid-template-columns:repeat(6,1fr)}
.premium-stat{position:relative;min-height:88px;padding:15px 16px;background:#101b25;border:1px solid #283644;border-radius:10px;color:#fff;text-align:left;cursor:pointer;font:inherit}
.premium-stat span{float:right;color:#ff3944;font-size:23px}
.premium-stat small,.premium-stat strong{display:block}
.premium-stat small{color:#c7d0d8}
.premium-stat strong{font-size:26px;margin-top:6px}
.premium-stat-awaiting{border-color:#5c3a24;background:linear-gradient(180deg,#211812,#121a22)}
.premium-stat-awaiting:hover{border-color:#ff493f}
@media(max-width:1000px){.premium-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.premium-stats{grid-template-columns:1fr 1fr}}

/* ===== v13.3 approved booking screen ===== */
.premium-booking-screen{background:radial-gradient(circle at 80% 0,#211015 0,#07121a 36%,#050d13 100%)}
.premium-booking{max-width:1560px}
.premium-booking .booking-hero{min-height:250px;border-radius:0;margin:0 0 12px;background:linear-gradient(90deg,#07111bf2 0%,#07111bc7 42%,#07111b22 68%),url('dashboard-hero.png') right center/cover no-repeat;border-color:#251b20;border-bottom:2px solid #e52032}
.premium-booking .booking-section{background:linear-gradient(180deg,#07141c,#081219);border-color:#20323e;box-shadow:0 8px 22px #0003}
.premium-booking .section-title>b{background:linear-gradient(135deg,#ff2638,#e30e25);box-shadow:0 0 18px #ff263855}
.premium-booking .service-card>span,.premium-booking .vehicle-cards>label{background:linear-gradient(180deg,#0d1b24,#0a151d)}
.premium-booking .service-card:has(input:checked)>span,.premium-booking .vehicle-cards>label:has(input:checked){background:linear-gradient(135deg,#381016,#101820);box-shadow:inset 0 0 0 1px #ff2638,0 0 18px #ff263822}
.premium-option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.premium-toggle-option{display:flex!important;align-items:center;justify-content:space-between;gap:14px;margin:0!important;padding:15px;border:1px solid #263a46;border-radius:10px;background:#0c1922}
.premium-toggle-option span strong,.premium-toggle-option span small{display:block}
.premium-toggle-option span small{color:#9fabb5;margin-top:4px}
.premium-toggle-option input{appearance:none;width:42px!important;height:23px!important;border:0!important;border-radius:20px!important;background:#334553!important;padding:0!important;margin:0!important;position:relative;cursor:pointer}
.premium-toggle-option input:after{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.18s}
.premium-toggle-option input:checked{background:#ff2638!important}
.premium-toggle-option input:checked:after{left:22px}
.premium-booking .quote-estimate-card{border:1px solid #b71d2b!important;box-shadow:0 0 20px #e31a2e18}
.premium-booking .continue-quote{background:linear-gradient(135deg,#ff2438,#e30d24);box-shadow:0 0 22px #ff263833}
@media(max-width:760px){.premium-option-grid{grid-template-columns:1fr}}


/* ===== J&S Customer Tracking Redesign v13.5 ===== */
#trackingScreen{background:radial-gradient(circle at 80% 0,rgba(229,47,40,.08),transparent 28%),#071019;min-height:100vh}
#trackingScreen .simple-header{background:linear-gradient(180deg,#0b1722,#09131d);border-bottom:1px solid #263442}
.tracking-page-wrap{max-width:1500px;margin:0 auto;padding:26px 28px 46px}
#trackingDetails{width:100%}
.tracking-card-premium{margin:0;background:linear-gradient(180deg,rgba(16,27,37,.98),rgba(10,19,27,.98));border:1px solid #2a3947;border-radius:18px;padding:0;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.tracking-hero-row{padding:24px 26px 18px;background:linear-gradient(110deg,#101d29,#0c1721 65%,rgba(229,47,40,.12));border-bottom:1px solid #263542}
.tracking-hero-row small{color:#ff4a52!important;font-weight:900!important;letter-spacing:1.4px!important}
.tracking-hero-row strong{font-size:30px!important;letter-spacing:-.5px}
.tracking-hero-row .status{float:none;padding:7px 12px;font-size:12px;font-weight:850}
.tracking-route{margin:18px 26px 12px;padding:20px 22px;background:#0a141d;border:1px solid #2b3a47;border-radius:14px;display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:14px;align-items:center}
.tracking-route span{font-size:20px;font-weight:850;overflow-wrap:anywhere}.tracking-route span:last-child{text-align:right}.tracking-route b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e52f28;color:#fff;font-size:22px;justify-self:center}
.tracking-card-premium>.card{margin:12px 26px;background:#0d1822;border-color:#2a3947}
.tracking-progress-bar{margin:0 26px 20px;height:7px;background:#27333e}.tracking-progress-bar i{background:linear-gradient(90deg,#ff3340,#ff675f)}
.tracking-card-premium .tracking-prices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 26px 14px}
.tracking-card-premium .booking-price{background:#0d1822;border:1px solid #293846;border-radius:12px;padding:15px 16px;display:flex;justify-content:space-between;gap:15px;align-items:center}
.tracking-card-premium .booking-price span{color:#aeb8c2;font-size:12px;text-transform:uppercase;letter-spacing:.55px}.tracking-card-premium .booking-price strong{font-size:18px;text-align:right}.tracking-card-premium .booking-price.current{border-color:rgba(255,73,63,.42);background:linear-gradient(135deg,#151c23,#20171b)}
.tracking-info-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 26px 20px}
.tracking-info-grid>div,.tracking-info-grid .full{grid-column:auto;background:#0d1822;border:1px solid #293846;border-radius:12px;padding:15px 16px;min-height:78px}
.tracking-info-grid small{color:#8fa0ae!important;font-weight:800}.tracking-info-grid strong{font-size:16px;margin-top:7px!important;overflow-wrap:anywhere}
.tracking-info-grid .full{grid-column:span 2}
.tracking-card-premium .attachment-panel{margin:0 26px 20px;background:#0b151e;border:1px solid #293846;border-radius:14px;padding:18px}
.tracking-card-premium .timeline{margin:0 26px 20px;background:#0b151e;border-color:#293846}
.tracking-card-premium>.booking-actions{margin:0 26px 26px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tracking-card-premium>.booking-actions:has(> :only-child){grid-template-columns:1fr}
.tracking-card-premium .missing-po-panel{margin:0 26px 20px}
@media (max-width:1000px){.tracking-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tracking-info-grid .full{grid-column:span 1}}
@media (max-width:760px){
 .tracking-page-wrap{padding:14px 12px 92px}.tracking-card-premium{border-radius:14px}
 .tracking-hero-row{padding:18px}.tracking-hero-row strong{font-size:24px!important}
 .tracking-route{margin:14px 14px 10px;padding:16px 14px;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:7px}.tracking-route span{font-size:15px}.tracking-route b{width:32px;height:32px;font-size:17px}
 .tracking-card-premium>.card,.tracking-progress-bar,.tracking-card-premium .tracking-prices,.tracking-info-grid,.tracking-card-premium .attachment-panel,.tracking-card-premium .timeline,.tracking-card-premium>.booking-actions,.tracking-card-premium .missing-po-panel{margin-left:14px;margin-right:14px}
 .tracking-card-premium .tracking-prices{grid-template-columns:1fr}.tracking-info-grid{grid-template-columns:1fr 1fr;gap:9px}.tracking-info-grid>div,.tracking-info-grid .full{grid-column:auto;min-height:72px;padding:12px}.tracking-info-grid .full{grid-column:1/-1}
 .tracking-card-premium .attachment-head{align-items:flex-start;gap:8px}.tracking-card-premium .attachment-upload-form{grid-template-columns:1fr}.tracking-card-premium>.booking-actions{grid-template-columns:1fr}
}
@media (max-width:430px){.tracking-info-grid{grid-template-columns:1fr}.tracking-info-grid .full{grid-column:auto}.tracking-route span{font-size:14px}}


/* ============================================================
   J&S v13.9 — NON-THEME TRUE AUTO-FIT
   Uses CSS container queries: layout reacts to the actual
   dashboard width, not the monitor/browser width.
   ============================================================ */

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) #homeScreen{
  width:100%;
  min-width:0;
  max-width:none;
  overflow-x:hidden;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-home{
  width:100%;
  max-width:none !important;
  min-width:0;
  margin:0 !important;
  padding:clamp(12px,1.5vw,28px) clamp(12px,1.8vw,34px) 30px;
  container-type:inline-size;
  container-name:customerDashboard;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-home > *,
body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-actions > *,
body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-stats > *,
body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-lower > *,
body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .quick-links-grid > *{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-hero{
  width:100%;
  min-width:0;
  min-height:clamp(260px,28cqw,390px);
  background-position:right center;
  background-size:auto 100%;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-hero-copy{
  width:min(650px,52cqw);
  max-width:100%;
  padding:clamp(24px,2.5cqw,42px);
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1cqw,16px);
  width:100%;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-action{
  width:100%;
  min-width:0;
  grid-template-columns:clamp(34px,3cqw,46px) minmax(0,1fr) 18px;
  gap:clamp(7px,1cqw,12px);
  padding:clamp(11px,1.2cqw,16px);
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-action strong,
body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-action small{
  min-width:0;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-stats{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(8px,.8cqw,12px);
  width:100%;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-stats > div{
  width:100%;
  min-width:0;
  padding:clamp(11px,1cqw,16px);
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-lower{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
  gap:clamp(12px,1cqw,18px);
  width:100%;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-card,
body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-side{
  width:100%;
  min-width:0;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-recent-table{
  width:100%;
  min-width:0;
  overflow-x:auto;
}

body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .quick-links-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
}

/* Actual dashboard width <= 1180px */
@container customerDashboard (max-width:1180px){
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-lower{
    grid-template-columns:1fr;
  }
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-hero-copy{
    width:min(650px,64cqw);
  }
}

/* Actual dashboard width <= 820px */
@container customerDashboard (max-width:820px){
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-actions{
    grid-template-columns:1fr;
  }
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .quick-links-grid{
    grid-template-columns:1fr;
  }
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-hero{
    min-height:360px;
    background-size:cover;
    background-position:center;
  }
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-hero-copy{
    width:78cqw;
  }
}

/* Actual dashboard width <= 560px */
@container customerDashboard (max-width:560px){
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-stats{
    grid-template-columns:1fr 1fr;
  }
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-hero-copy{
    width:100%;
  }
}

@media (max-width:760px){
  body:not(.theme-halloween):not(.theme-bonfire):not(.theme-christmas) .premium-home{
    padding:12px 12px 92px;
  }
}