/* ════════════════════════════════════════════════════════════
   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;
  font-family:'Cairo',system-ui,sans-serif;
  color:var(--ink,#101010);
  max-width:640px;
  margin-inline:auto;
}

/* ── 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);
  transition:stroke-dashoffset .6s cubic-bezier(0.16,1,0.3,1);
}
#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}
#tru-booking .bw-phone-row{display:flex;gap:.5rem;direction:rtl}
#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}
}