/* SJ Car Services LLC - booking widget. Loaded only on / and /booking/.
   Built from the tokens in style.css so the widget reads as native. */

.booking-widget{position:relative;z-index:5;width:100%;text-align:left}
.booking-widget noscript{display:block;padding:22px;border:1px solid rgba(15,154,154,.28);border-radius:var(--radius);background:var(--cream)}
.bw-card{position:relative;border:1px solid rgba(15,154,154,.26);border-radius:var(--radius);background:linear-gradient(180deg,var(--white),var(--cream));box-shadow:var(--shadow)}
.bw-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,var(--teal-500),var(--orange),var(--yellow))}
.bw-body{padding:26px 26px 24px}
.bw-hero .bw-body{padding:22px 22px 20px}

/* progress rail */
.bw-steps{display:flex;align-items:center;gap:12px;padding:24px 26px 0}
.bw-step{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;font-weight:850;text-transform:uppercase;white-space:nowrap}
.bw-step i{display:inline-flex;width:32px;height:32px;flex:none;align-items:center;justify-content:center;border-radius:50%;background:var(--teal-100);color:var(--teal-900);font-style:normal;font-size:14px;font-weight:850;transition:.2s}
.bw-step.is-active{color:var(--teal-900)}
.bw-step.is-active i{background:var(--teal-500);color:#fff;box-shadow:0 8px 18px rgba(15,154,154,.28)}
.bw-step.is-done i{background:var(--teal-700);color:#fff}
.bw-rail{flex:1;height:2px;min-width:12px;border-radius:2px;background:var(--line)}
.bw-rail.is-done{background:var(--teal-500)}

.bw-lede{margin-bottom:18px;color:var(--muted);font-size:15px;font-weight:700}
.bw-hero .bw-lede{margin-bottom:14px}

/* segmented toggles */
.bw-toggles{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.bw-seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.bw-seg button{min-height:40px;padding:8px 17px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:15px;font-weight:820;line-height:1;cursor:pointer;transition:.16s}
.bw-seg button:hover{color:var(--teal-900)}
.bw-seg button.is-active{background:var(--teal-500);color:#fff;box-shadow:0 8px 18px rgba(15,154,154,.24)}
.bw-seg button:focus-visible{outline:2px solid rgba(15,154,154,.5);outline-offset:2px}

/* fields */
.bw-fields{display:grid;gap:16px;align-items:end;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,.82fr) minmax(0,.82fr) auto}
.bw-fields.bw-fields-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
.bw-field{position:relative;display:flex;min-width:0;flex-direction:column;gap:7px}
.bw-field[hidden]{display:none}
.bw-field>label{display:block}
.bw-field>span,.bw-field>label>span{display:block;color:var(--teal-900);font-size:12px;font-weight:850;text-transform:uppercase}
.bw-input{width:100%;min-height:52px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink);font:inherit;font-weight:700;line-height:1.3}
.bw-input::placeholder{color:#9aa8b4;font-weight:600}
.bw-input:focus{border-color:var(--teal-500);outline:2px solid rgba(15,154,154,.38);outline-offset:1px}
select.bw-input{appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--teal-700) 50%),linear-gradient(135deg,var(--teal-700) 50%,transparent 50%);background-position:calc(100% - 19px) 23px,calc(100% - 14px) 23px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}
textarea.bw-input{min-height:96px;resize:vertical;font-weight:600;line-height:1.5}
.bw-submit-field{align-self:end}
.bw-submit-field .btn{width:100%;min-height:52px;white-space:nowrap}

/* autocomplete */
.bw-list{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:max(100%,270px);max-height:286px;overflow-y:auto;padding:6px;border:1px solid var(--teal-200);border-radius:var(--radius);background:var(--white);box-shadow:0 20px 44px rgba(24,33,43,.2)}
.bw-list[hidden]{display:none}
.bw-list li+li{margin-top:2px}
.bw-opt{display:flex;width:100%;align-items:flex-start;gap:10px;padding:10px 12px;border:0;border-radius:6px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.bw-opt:hover,.bw-opt.is-active{background:var(--teal-100)}
.bw-opt svg{flex:none;margin-top:2px;color:var(--teal-500)}
.bw-opt strong{display:block;overflow:hidden;color:var(--ink);font-size:15px;font-weight:820;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.bw-opt span{display:block;overflow:hidden;margin-top:2px;color:var(--muted);font-size:13px;font-weight:600;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.bw-opt em{display:block;overflow:hidden;min-width:0;flex:1;font-style:normal}

/* messages */
.bw-error{display:flex;align-items:center;gap:9px;margin-top:16px;padding:12px 14px;border:1px solid rgba(219,84,84,.34);border-radius:var(--radius);background:#fdecec;color:#8f2020;font-size:14px;font-weight:760}
.bw-error[hidden]{display:none}
.bw-flags{display:grid;gap:10px;margin-top:18px}
.bw-flag{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--orange-200);border-radius:var(--radius);background:var(--orange-100);color:var(--ink);font-size:14px;font-weight:720;line-height:1.45}
.bw-flag b{flex:none;color:var(--orange)}
.bw-foot{margin-top:16px;color:var(--muted);font-size:13.5px;font-weight:700}
.bw-foot a{color:var(--teal-700);font-weight:850;text-decoration:underline}
.bw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.bw-actions .btn{min-width:210px}
.bw-back{border:0;background:transparent;color:var(--teal-700);font-size:15px;font-weight:820;cursor:pointer;text-decoration:underline;padding:6px 2px}
.bw-back:hover{color:var(--teal-900)}

/* quote step */
.bw-quote{display:grid;gap:28px;grid-template-columns:minmax(0,1fr) minmax(290px,.88fr)}
.bw-panel{padding:22px;border:1px solid rgba(15,154,154,.24);border-radius:var(--radius);background:linear-gradient(180deg,var(--teal-100),var(--cream))}
.bw-panel h3{font-size:14px;font-weight:850;text-transform:uppercase;color:var(--teal-900)}
.bw-dl{display:grid;gap:14px;margin-top:16px}
.bw-dl>div{display:grid;gap:3px}
.bw-dl dt{color:var(--muted);font-size:12px;font-weight:850;text-transform:uppercase}
.bw-dl dd{margin:0;color:var(--ink);font-size:16px;font-weight:780;line-height:1.35;overflow-wrap:anywhere}
.bw-lines{display:grid;margin-top:6px}
.bw-lines li{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px dashed rgba(15,154,154,.3);color:var(--ink);font-size:14.5px;font-weight:700;line-height:1.4}
.bw-lines li em{font-style:normal}
.bw-lines li b{flex:none;font-weight:850}
.bw-total{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-top:18px}
.bw-total span{color:var(--muted);font-size:13px;font-weight:850;text-transform:uppercase}
.bw-total strong{color:var(--teal-900);font-size:40px;font-weight:850;line-height:1}
.bw-tax{margin-top:8px;color:var(--muted);font-size:13px;font-weight:700}
.bw-manual{padding:20px;border:1px dashed rgba(15,154,154,.45);border-radius:var(--radius);background:var(--teal-100);color:var(--teal-900);font-weight:760}

/* loading + success */
.bw-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:190px;color:var(--teal-900);font-size:17px;font-weight:800}
.bw-spin{width:20px;height:20px;flex:none;border:2.5px solid rgba(15,154,154,.28);border-top-color:var(--teal-500);border-radius:50%;animation:bw-spin .7s linear infinite}
.btn .bw-spin{border-color:rgba(255,255,255,.42);border-top-color:#fff}
@keyframes bw-spin{to{transform:rotate(360deg)}}
.bw-done{padding:12px 0 6px;text-align:center}
.bw-done-mark{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;border-radius:50%;background:var(--teal-500);color:#fff;box-shadow:0 14px 30px rgba(15,154,154,.32)}
.bw-done h3{margin-top:20px;font-size:28px}
.bw-done>p{max-width:520px;margin:12px auto 0}
.bw-done .bw-panel{margin-top:24px;text-align:left}
.bw-done .bw-actions{justify-content:center}

/* home hero placement */
.hero-booking{overflow:visible;min-height:auto;padding:170px 0 64px}
.hero-booking .hero-content{width:100%}
.hero-booking h1{max-width:880px;margin-inline:auto;padding:0 16px}
.hero-booking .hero-copy{padding:0 16px}
.hero-booking .booking-widget{margin-top:32px;max-width:1060px;width:100%}
.hero-booking .hero-stats{margin-top:34px}
.hero-call{margin-top:22px;color:rgba(255,255,255,.9);font-size:15px;font-weight:740}
.hero-call a{color:#fff;font-weight:850;text-decoration:underline;text-underline-offset:3px}
.hero-call a:hover{color:var(--yellow-200)}

/* booking page section. scroll-margin clears the 136px fixed header when the
   hero hands off to /booking/#book */
.booking-section{background:linear-gradient(135deg,var(--teal-100),var(--yellow-100) 55%,var(--orange-100));scroll-margin-top:150px}
.booking-section .booking-widget{margin-top:34px}
.booking-assurance{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.booking-assurance li{padding:16px 18px;border:1px solid rgba(15,154,154,.22);border-radius:var(--radius);background:rgba(255,255,255,.72);color:var(--ink);font-size:14px;font-weight:760;line-height:1.4}
.booking-assurance li strong{display:block;margin-bottom:4px;color:var(--teal-900);font-size:15px}

@media(max-width:1050px){
  .bw-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bw-submit-field{grid-column:1/-1}
  .bw-quote{grid-template-columns:1fr}
  .booking-assurance{grid-template-columns:repeat(2,1fr)}
  .hero-booking{padding:150px 0 54px}
}
@media(max-width:860px){
  .bw-body{padding:22px 20px 22px}
  .bw-steps{gap:8px;padding:20px 20px 0}
  .bw-step span{display:none}
  .bw-step i{width:30px;height:30px}
  .bw-total strong{font-size:34px}
  .hero-booking{padding:118px 0 46px}
  .hero-booking .booking-widget{margin-top:26px}
}
@media(max-width:560px){
  .bw-fields,.bw-fields.bw-fields-stack{grid-template-columns:1fr}
  .bw-seg{width:100%}
  .bw-seg button{flex:1;padding:8px 10px;font-size:14px}
  .bw-toggles{flex-direction:column;align-items:stretch}
  .bw-actions{flex-direction:column-reverse;align-items:stretch}
  .bw-actions .btn{width:100%;min-width:0}
  .bw-done h3{font-size:23px}
  .booking-assurance{grid-template-columns:1fr}
  .hero-booking .hero-stats{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-booking .hero-content{align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
  .bw-spin{animation-duration:2s}
  .bw-seg button,.bw-step i{transition:none}
}