/* ════════════════════════════════════════════════════════════
   TRU Booking Wizard — module styles
   Renders inside #tru-booking · RTL · monochrome · Cairo
   Depends on site-global :root tokens (--ink, --off, --mg …)
   ════════════════════════════════════════════════════════════ */

#tru-booking{
  --bw-radius:18px;
  --bw-radius-sm:12px;
  --bw-border:rgba(16,16,16,.10);
  --bw-shadow:0 1px 2px rgba(16,16,16,.04), 0 8px 24px rgba(16,16,16,.06);
  --bw-shadow-float:0 2px 6px rgba(16,16,16,.06), 0 16px 40px rgba(16,16,16,.10);
  direction:rtl; /* default; overridden to ltr for en/fr below */
  font-family:'Cairo',system-ui,sans-serif;
  color:var(--ink,#101010);
  max-width:640px;
  margin-inline:auto;
}
/* Follow the site language switcher: EN/FR render left-to-right in the
   site's Latin body font, Arabic stays RTL/Cairo. */
html[dir="ltr"] #tru-booking{direction:ltr}
html:not([lang="ar"]) #tru-booking{font-family:inherit}

/* ── Card shell ── */
#tru-booking .bw-card{
  background:var(--white,#fff);
  border:1px solid var(--bw-border);
  border-radius:var(--bw-radius);
  box-shadow:var(--bw-shadow);
  padding:clamp(1.25rem,4vw,2rem);
  overflow:hidden;
}

/* ── Header: smile progress + step label ── */
#tru-booking .bw-head{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  margin-bottom:1.4rem;
}
#tru-booking .bw-smile{width:96px;height:34px;display:block}
#tru-booking .bw-smile-base{stroke:var(--light,#E3E3E3)}
#tru-booking .bw-smile-fill{
  stroke:var(--ink,#101010);
  /* NO transition on stroke-dashoffset (removed 2026-08-01).
     Lighthouse named this exact element as the page's only non-composited
     animation: "Unsupported CSS Property: stroke-dashoffset". That property
     cannot be handed to the compositor, so every step change repainted on the
     main thread for 600ms — and it fired precisely when the user taps to
     advance, which is the moment INP is measured. INP (309ms in field data) is
     the only Core Web Vital this site fails.
     The progress still updates, it just snaps instead of sweeping. To restore
     the sweep, an SVG mask animated with transform would be the composited way
     to do it. */
}
#tru-booking .bw-step-label{
  font-size:.78rem;color:var(--mg,#6F6F6F);letter-spacing:.02em;
}
#tru-booking .bw-title{
  font-size:clamp(1.25rem,4.5vw,1.55rem);
  font-weight:700;line-height:1.35;text-align:center;
  margin:0 0 1.1rem;
}

/* ── Panels (steps) ── */
#tru-booking .bw-panel{display:none}
#tru-booking .bw-panel.is-active{display:block;animation:bwIn .38s cubic-bezier(0.16,1,0.3,1)}
@keyframes bwIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Step 1: service cards ── */
#tru-booking .bw-services{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;
}
@media(min-width:520px){#tru-booking .bw-services{grid-template-columns:repeat(3,1fr)}}
#tru-booking .bw-svc{
  min-height:64px;padding:.7rem .6rem;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--off,#F4F4F4);
  border:1px solid transparent;border-radius:var(--bw-radius-sm);
  font-family:inherit;font-size:.92rem;font-weight:600;color:var(--dg,#272727);
  cursor:pointer;
  transition:transform .18s cubic-bezier(0.16,1,0.3,1),background .18s ease,border-color .18s ease,color .18s ease;
}
#tru-booking .bw-svc:hover{border-color:var(--ink,#101010);background:var(--white,#fff)}
#tru-booking .bw-svc:active{transform:scale(.97)}
#tru-booking .bw-svc[aria-pressed="true"]{
  background:var(--ink,#101010);color:var(--white,#fff);border-color:var(--ink,#101010);
}
#tru-booking .bw-svc--urgent{border:1px dashed var(--wg,#A2A2A2)}

/* ── Step 2: days rail + slots ── */
#tru-booking .bw-days{
  display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
#tru-booking .bw-days::-webkit-scrollbar{display:none}
#tru-booking .bw-day{
  flex:0 0 auto;min-width:72px;min-height:72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  background:var(--off,#F4F4F4);border:1px solid transparent;border-radius:var(--bw-radius-sm);
  font-family:inherit;cursor:pointer;padding:.5rem .6rem;
  transition:transform .18s cubic-bezier(0.16,1,0.3,1),background .18s ease,border-color .18s ease,color .18s ease;
}
#tru-booking .bw-day:hover{border-color:var(--ink,#101010);background:var(--white,#fff)}
#tru-booking .bw-day:active{transform:scale(.97)}
#tru-booking .bw-day[aria-pressed="true"]{background:var(--ink,#101010);color:var(--white,#fff)}
#tru-booking .bw-day-name{font-size:.8rem;font-weight:700}
#tru-booking .bw-day-date{font-size:.72rem;color:var(--mg,#6F6F6F)}
#tru-booking .bw-day[aria-pressed="true"] .bw-day-date{color:var(--lg,#C0C0C0)}

#tru-booking .bw-slots{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
}
@media(min-width:520px){#tru-booking .bw-slots{grid-template-columns:repeat(4,1fr)}}
#tru-booking .bw-slot{
  min-height:44px;
  background:var(--white,#fff);border:1px solid var(--bw-border);border-radius:10px;
  font-family:inherit;font-size:.88rem;font-weight:600;color:var(--dg,#272727);
  cursor:pointer;
  transition:transform .18s cubic-bezier(0.16,1,0.3,1),background .18s ease,border-color .18s ease,color .18s ease;
}
#tru-booking .bw-slot:hover{border-color:var(--ink,#101010)}
#tru-booking .bw-slot:active{transform:scale(.96)}
#tru-booking .bw-slot[aria-pressed="true"]{background:var(--ink,#101010);color:var(--white,#fff);border-color:var(--ink,#101010)}
#tru-booking .bw-slot:disabled{
  opacity:.38;cursor:not-allowed;text-decoration:line-through;background:var(--off,#F4F4F4);
}
#tru-booking .bw-slots-empty{
  grid-column:1/-1;text-align:center;color:var(--mg,#6F6F6F);font-size:.9rem;padding:1.2rem 0;
}

/* ── Step 3: fields ── */
#tru-booking .bw-field{margin-bottom:1rem}
#tru-booking .bw-field label{
  display:block;font-size:.85rem;font-weight:700;color:var(--dg,#272727);margin-bottom:.35rem;
}
#tru-booking .bw-field input{
  width:100%;min-height:52px;padding:.7rem 1rem;
  font-family:inherit;font-size:1rem;color:var(--ink,#101010);
  background:var(--off,#F4F4F4);border:1px solid transparent;border-radius:var(--bw-radius-sm);
  transition:border-color .18s ease,background .18s ease;
}
#tru-booking .bw-field input:focus{outline:none;border-color:var(--ink,#101010);background:var(--white,#fff)}
#tru-booking .bw-field input[dir="ltr"]{text-align:right}
html[dir="ltr"] #tru-booking .bw-field input[dir="ltr"]{text-align:left}
#tru-booking .bw-phone-row{display:flex;gap:.5rem;direction:rtl}
html[dir="ltr"] #tru-booking .bw-phone-row{direction:ltr}
#tru-booking .bw-phone-row input{flex:1 1 auto;min-width:0}
#tru-booking .bw-cc-select{
  flex:0 0 auto;min-height:52px;padding:.5rem .6rem;max-width:6.6rem;
  font-family:inherit;font-size:.95rem;color:var(--ink,#101010);
  background:var(--off,#F4F4F4);border:1px solid transparent;border-radius:var(--bw-radius-sm);
  transition:border-color .18s ease,background .18s ease;
}
#tru-booking .bw-cc-select:focus{outline:none;border-color:var(--ink,#101010);background:var(--white,#fff)}
#tru-booking .bw-hint{font-size:.78rem;color:var(--mg,#6F6F6F);margin-top:.3rem;min-height:1.1em}
#tru-booking .bw-hint.is-err{color:var(--ink,#101010);font-weight:700}
#tru-booking .bw-summary{
  background:var(--off,#F4F4F4);border-radius:var(--bw-radius-sm);
  padding:.8rem 1rem;font-size:.88rem;color:var(--dg,#272727);
  margin-bottom:1.1rem;line-height:1.9;
}
#tru-booking .bw-summary strong{font-weight:700;color:var(--ink,#101010)}
#tru-booking .bw-reassure{
  text-align:center;font-size:.8rem;color:var(--mg,#6F6F6F);margin-top:.6rem;line-height:1.8;
}

/* ── Step 4: confirmation ── */
#tru-booking .bw-done{text-align:center;padding:1rem 0 .4rem}
#tru-booking .bw-done-mark{
  width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;
  background:var(--ink,#101010);display:flex;align-items:center;justify-content:center;
}
#tru-booking .bw-done-mark svg{width:28px;height:28px;stroke:var(--white,#fff)}
#tru-booking .bw-done h3{font-size:1.3rem;font-weight:700;margin:0 0 .4rem}
#tru-booking .bw-done p{font-size:.92rem;color:var(--mg,#6F6F6F);margin:0;line-height:1.9}

/* ── Emergency branch ── */
#tru-booking .bw-urgent{text-align:center;padding:.4rem 0}
#tru-booking .bw-urgent p{font-size:.95rem;color:var(--dg,#272727);margin:0 0 1.1rem;line-height:1.9}
#tru-booking .bw-urgent-actions{display:flex;flex-direction:column;gap:.6rem}
@media(min-width:520px){#tru-booking .bw-urgent-actions{flex-direction:row}}
#tru-booking .bw-urgent-actions a{
  flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--bw-radius-sm);font-weight:700;font-size:1rem;text-decoration:none;
  transition:transform .18s cubic-bezier(0.16,1,0.3,1),opacity .18s ease;
}
#tru-booking .bw-urgent-actions a:hover{opacity:.88}
#tru-booking .bw-urgent-actions a:active{transform:scale(.97)}
#tru-booking .bw-call{background:var(--ink,#101010);color:var(--white,#fff)}
#tru-booking .bw-wa{background:transparent;color:var(--ink,#101010);border:1px solid var(--ink,#101010)}

/* ── Footer nav (back / next) ── */
#tru-booking .bw-nav{display:flex;gap:.6rem;margin-top:1.3rem}
#tru-booking .bw-btn{
  min-height:52px;padding:.7rem 1.4rem;border-radius:999px;
  font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  transition:transform .18s cubic-bezier(0.16,1,0.3,1),opacity .18s ease,background .18s ease;
}
#tru-booking .bw-btn:active{transform:scale(.97)}
#tru-booking .bw-btn--next{flex:1;background:var(--ink,#101010);color:var(--white,#fff);border:none}
#tru-booking .bw-btn--next:hover{opacity:.88}
#tru-booking .bw-btn--next:disabled{opacity:.38;cursor:not-allowed;transform:none}
#tru-booking .bw-btn--back{
  background:transparent;color:var(--mg,#6F6F6F);border:1px solid var(--bw-border);
  padding-inline:1.1rem;
}
#tru-booking .bw-btn--back:hover{color:var(--ink,#101010);border-color:var(--ink,#101010)}

/* ── Focus visibility (keyboard) ── */
#tru-booking button:focus-visible,
#tru-booking a:focus-visible,
#tru-booking input:focus-visible{
  outline:2px solid var(--ink,#101010);outline-offset:2px;
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  #tru-booking .bw-panel.is-active{animation:none}
  #tru-booking .bw-smile-fill{transition:none}
  #tru-booking .bw-svc,#tru-booking .bw-day,#tru-booking .bw-slot,
  #tru-booking .bw-btn,#tru-booking .bw-urgent-actions a{transition:none}
}