/* =====================================================================================================================
   THE BOOKING START (parts/book-wizard.php) - step 1 of 4: the tune cards. Martin 10 Oct 2026: "more depth and volume",
   "the Choose button pulsing", and Choose goes straight to the big month diary (step 2 on the portal).
   A deep layered card per tune - one of our own dyno-cell photos fading in from the right, a lit top edge, a heavy lip and a
   long shadow; kicker, name, one line, the price and a big cyan Choose key that PULSES (the two keys a beat apart). Press:
   the card sinks onto its lip. Words >= 14.5 px, every tap target >= 48 px. Phone first; all scoped to .bw / .bw-*.
   The portal's steps 2-4 wear the same look (portal public/assets/booking-2026.css).
   ===================================================================================================================== */
.bw{position:relative;width:100%;max-width:640px;display:grid;gap:10px;color:var(--text);
  --acc:#00aeef;--acc-rgb:0,174,239;--acc-hi:#6adaff;--acc-lo:#0095cf;--acc-hov:#8ae3ff;--acc-rim:#9be4ff;--acc-lip:#004a68;--ice:#7fd9ff;--ice-rgb:127,217,255;--on-acc:#00121b}
/* the Bosch tune's accent (Martin 10 Oct): warm amber - its card here, and the whole row on a Bosch vehicle page; the portal's
   steps carry the same colours (booking-2026.css .bk26-bosch) */
.bw--bosch,.bw-tune[data-type="bosch"]{--acc:#f0a020;--acc-rgb:240,160,32;--acc-hi:#ffcf6e;--acc-lo:#c97f10;--acc-hov:#ffdc94;--acc-rim:#ffe2a8;--acc-lip:#6a4300;--ice:#ffd27a;--ice-rgb:255,210,122;--on-acc:#1d1200}

/* ---- the numbered steps (1 lit, the rest to come) - the same row the portal's pages carry ---- */
.bw-steps{position:relative;display:flex;margin:0;padding:0;list-style:none}
.bw-steps::before{content:"";position:absolute;left:12%;right:12%;top:15px;height:2px;background:rgba(160,190,220,.22)}
.bw-steps li{position:relative;flex:1 1 0;min-width:0;display:grid;justify-items:center;gap:5px;font:700 12px/1.1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#a3b6c9}
.bw-steps li em{font-style:normal;white-space:nowrap}
.bw-steps li > span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font:700 15px/1 var(--f-ui);color:#b4c6d8;
  background:#0b1016;box-shadow:inset 0 0 0 2px rgba(160,190,220,.34)}
.bw-steps li.is-on{color:#fff}
.bw-steps li.is-on > span{color:var(--on-acc);background:linear-gradient(180deg,var(--acc-hi),var(--acc));box-shadow:0 0 0 4px rgba(var(--acc-rgb),.25),0 0 18px rgba(var(--acc-rgb),.6)}

/* ---- the card that holds the tunes ---- */
.bw-card{display:grid;gap:10px;padding:14px;border-radius:22px;background:linear-gradient(180deg,rgba(26,36,48,.94),rgba(10,15,21,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(var(--ice-rgb),.2),0 26px 50px -24px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bw-ask{margin:0;font:400 28px/1 var(--f-display);letter-spacing:.03em;color:#fff}
.bw-tunes{display:grid;gap:12px}

/* ---- a tune ---- */
.bw-tune{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:3px;margin:0;padding:14px 14px 13px;border-radius:20px;
  color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(100deg,#1d2a39 0%,#16212d 52%,rgba(16,24,33,.55) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1.5px rgba(var(--ice-rgb),.42),0 6px 0 #03060a,0 22px 34px -14px rgba(0,0,0,.95);
  transition:transform .16s cubic-bezier(.3,.7,.4,1.4),box-shadow .2s ease}
.bw-tune__pic{position:absolute;inset:0 0 0 38%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.bw-tune__pic img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:.5;filter:saturate(.85);transition:opacity .25s ease,transform .6s ease}
.bw-tune__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,18,.15),rgba(8,12,18,.65))}
.bw-tune__badge{justify-self:start;align-self:start;margin:0 0 3px;padding:3px 12px 2px;border-radius:10px;font:400 30px/1 var(--f-display);letter-spacing:.04em;
  color:var(--on-acc);background:linear-gradient(180deg,var(--acc-hi),var(--acc));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 var(--acc-lip),0 0 22px rgba(var(--acc-rgb),.45)}
.bw-tune__k{font:700 12px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.bw-tune__nm{font:400 25px/1.02 var(--f-display);letter-spacing:.02em;text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.bw-tune__ds{font:400 14.5px/1.35 var(--f-text);color:#dbe6f0;text-shadow:0 1px 8px rgba(0,0,0,.8);max-width:30em}
.bw-tune__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.bw-tune__pr{font:400 26px/1 var(--f-display);letter-spacing:.03em;white-space:nowrap;text-shadow:0 0 20px rgba(var(--acc-rgb),.5),0 2px 8px rgba(0,0,0,.7)}
/* the Choose key - pulses (the second card's a beat behind), so it is plainly the thing to press */
.bw-tune__go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px 0 18px;border-radius:999px;
  font:700 17px/1 var(--f-ui);color:var(--on-acc);background:linear-gradient(180deg,var(--acc-hi),var(--acc) 60%,var(--acc-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px var(--acc-rim),0 4px 0 var(--acc-lip);animation:bw-pulse 1.8s ease-in-out infinite}
.bw-tune + .bw-tune .bw-tune__go{animation-delay:.9s}
.bw-tune__go svg{width:20px;height:20px}
@keyframes bw-pulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px var(--acc-rim),0 4px 0 var(--acc-lip),0 0 0 0 rgba(var(--acc-rgb),.75)}
  60%{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px var(--acc-rim),0 4px 0 var(--acc-lip),0 0 0 14px rgba(var(--acc-rgb),0)}}
/* press: the card sinks onto its lip */
.bw-tune:active{transform:translateY(5px);transition-duration:.06s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 1.5px rgba(var(--ice-rgb),.6),0 1px 0 #03060a,0 8px 14px -8px rgba(0,0,0,.9)}
.bw-tune:active .bw-tune__go{animation:none}
.bw-tune:focus-visible{outline:3px solid var(--ice);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .bw-tune:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 2px rgba(var(--ice-rgb),.95),0 8px 0 #03060a,0 26px 40px -14px rgba(0,0,0,.95),0 0 30px rgba(var(--acc-rgb),.4)}
  .bw-tune:hover .bw-tune__pic img{opacity:.68;transform:scale(1.04)}
  .bw-tune:hover .bw-tune__go{background:linear-gradient(180deg,var(--acc-hov),var(--acc))}
}
.bw-note{margin:0;font:400 14px/1.4 var(--f-text);color:#b3c3d3;text-align:center}
/* the tune chosen before (Back from the diary lands on /book/?type=...): a ring in its accent, nothing moves */
.bw-tune.is-chosen{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 2.5px var(--acc-rim),0 6px 0 #03060a,0 22px 34px -14px rgba(0,0,0,.95),0 0 28px rgba(var(--acc-rgb),.5)}
/* reduced motion (Windows animations off): the Choose pulse is guidance, so it becomes a still glow ring, never nothing */
@media (prefers-reduced-motion:reduce){
  .bw-tune__go{animation:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px var(--acc-rim),0 4px 0 var(--acc-lip),0 0 0 5px rgba(var(--acc-rgb),.5)}
  .bw-tune,.bw-tune__pic img{transition:none}
}

/* ---- short phones (Safari with both bars, 360 x 740 and smaller) ---- */
@media (max-width:699px) and (max-height:760px){
  .bw{gap:8px}
  .bw-steps li em{display:none}
  .bw-steps li > span{width:30px;height:30px}
  .bw-card{padding:12px}
  .bw-ask{font-size:25px}
  .bw-tune{padding:11px 12px}
  .bw-tune__k{display:none}
  .bw-tune__badge{font-size:26px}
  .bw-note{display:none}
  .bw-tune__row{margin-top:4px}
}
@media (max-width:374px){.bw-tune__nm{font-size:22px}.bw-tune__ds{font-size:14px}.bw-tune__pr{font-size:23px}.bw-tune__go{padding:0 16px 0 12px;font-size:16px}}

/* ---- tablets and computers: two cards side by side, the price above a full-width Choose key ---- */
@media (min-width:700px){
  .bw{gap:14px;max-width:880px}
  .bw-steps li{font-size:13px}
  .bw-steps li > span{width:36px;height:36px;font-size:16px}
  .bw-steps::before{top:17px}
  .bw-card{padding:20px 22px;gap:14px}
  .bw-ask{font-size:34px}
  .bw-tunes{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .bw-tune:only-child{grid-column:1 / -1}
  .bw-tune{display:flex;flex-direction:column;align-items:flex-start;padding:18px}
  .bw-tune__pic{inset:0}
  .bw-tune__pic img{opacity:.38}
  .bw-tune__nm{font-size:30px}
  .bw-tune__row{align-self:stretch;flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding-top:10px}
  .bw-tune__pr{font-size:30px}
}
@media (min-width:1100px) and (max-height:830px){.bw{gap:10px}.bw-card{padding:16px 18px}.bw-tune__ds{font-size:14px}}

/* ---- the diary on a website screen (p26bw_diary - the vehicle page's Book screen): a frame that fills its space, the portal's
   own month diary inside, the screen's picture showing through ---- */
.bw-diary{position:relative;width:100%;height:100%;min-height:0;border-radius:24px;overflow:hidden}
.bw-diary__frame{display:block;width:100%;height:100%;border:0;background:transparent;color-scheme:normal}
.bw-diary__open{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:999px;font:700 17px/1 var(--f-ui);color:var(--on-acc);background:var(--acc)}

/* ---- iPhone SE-size screens with Safari's bars (375 x 600 and shorter): the cards' heading goes (step 1 is lit above) and
   the Bosch card's long line shows three lines ---- */
@media (max-width:699px) and (max-height:640px){
  .bw-ask{display:none}
  .bw-steps li > span{width:28px;height:28px;font-size:14px}
  .bw-card{padding:10px}
  .bw-tunes{gap:9px}
  .bw-tune__nm{font-size:22px}
  .bw-tune__ds{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px}
  .bw-tune__pr{font-size:23px}
  .bw-tune__go{min-height:48px}
}