/*! Dubai Home Fix — the four-step booking flow
 *  Part of the Dubai Home Fix WordPress theme. Edit with care; a child
 *  theme is the safer place for project-specific overrides.
 */
/* =========================================================
   5. BOOKING HERO (steps 1–3)
   ========================================================= */
.bk-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#FAFCFF 0%,#F2F7FF 60%,#EBF2FE 100%);}
.bk-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,252,255,.97) 0%,rgba(244,249,255,.9) 40%,rgba(239,245,255,.25) 62%,rgba(239,245,255,0) 78%);
}
.bk-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:48% 52%;align-items:center;min-height:300px;}
.bk-hero-copy{padding:52px 0 76px;max-width:620px;}
.eyebrow{
  display:inline-block;color:var(--blue);font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;
}
.bk-hero h1{font-size:44px;line-height:1.16;letter-spacing:-.015em;margin-bottom:16px;}
.bk-hero h1 .accent{color:var(--blue);}
.bk-hero p{font-size:16px;line-height:1.65;color:var(--body);max-width:430px;}
.bk-hero-media{position:absolute;top:0;right:0;width:52%;height:100%;}
.bk-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* ---- Confirmation hero (step 4) ---- */
.cf-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#FAFCFF 0%,#F4F9FF 60%,#EEF5FF 100%);}
.cf-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,252,255,.97) 0%,rgba(245,250,255,.92) 42%,rgba(239,245,255,.3) 62%,rgba(239,245,255,0) 80%);
}
.cf-hero-inner{position:relative;z-index:2;min-height:300px;display:flex;align-items:center;}
.cf-hero-copy{padding:56px 0 78px;max-width:640px;}
.cf-title{display:flex;align-items:center;gap:18px;margin-bottom:16px;}
.cf-check{
  width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;flex:none;box-shadow:0 10px 24px rgba(22,163,74,.25);
}
.cf-check svg{width:28px;height:28px;stroke-width:3;}
.cf-title h1{font-size:38px;line-height:1.2;}
.cf-title h1 .accent{color:var(--blue);}
.cf-hero-copy > p{font-size:16px;line-height:1.6;color:var(--body);margin-bottom:28px;}
.cf-badges{display:flex;flex-wrap:wrap;gap:16px;}
.cf-badge{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh-sm);min-height:64px;
}
.cf-badge svg{width:22px;height:22px;color:var(--blue);}
.cf-badge b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.3;}
.cf-badge span{font-size:12px;color:var(--muted);}
.cf-hero-media{position:absolute;top:0;right:0;width:48%;height:100%;z-index:0;}
.cf-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center bottom;}

/* =========================================================
   6. STEPPER
   ========================================================= */
.stepper-wrap{position:relative;z-index:5;margin-top:-46px;}
.stepper{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);
  box-shadow:var(--sh-md);padding:26px 34px;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
}
.step-node{display:flex;align-items:center;gap:14px;position:relative;padding-right:24px;}
.step-dot{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:14px;font-weight:800;
  background:#EEF1F6;color:var(--muted);transition:background var(--t),color var(--t);
}
.step-dot svg{width:17px;height:17px;stroke-width:3;}
.step-label b{display:block;font-size:15px;font-weight:800;color:var(--muted);line-height:1.3;transition:color var(--t);}
.step-label span{font-size:13px;color:var(--muted);}
.step-node:not(:last-child)::after{
  content:"";position:absolute;top:17px;left:56px;right:12px;
  border-top:2px dotted #D3DBE6;
}
/* States */
.step-node.is-active .step-dot{background:var(--blue);color:#fff;}
.step-node.is-active .step-label b{color:var(--blue);}
.step-node.is-done .step-dot{background:var(--blue);color:#fff;}
.step-node.is-done .step-label b{color:var(--ink);}
.step-node.is-done::after{border-top-color:var(--blue);}

/* =========================================================
   8. STEP 1 — SERVICE PICKER
   ========================================================= */
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:30px;}
.service-tile{
  position:relative;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  padding:22px 14px 18px;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  min-height:150px;transition:border-color var(--t),box-shadow var(--t),transform var(--t),background var(--t);
}
.service-tile:hover{border-color:#C9DCF9;box-shadow:var(--sh-sm);transform:translateY(-3px);}
.service-tile img{height:62px;width:auto;object-fit:contain;object-position:center;margin-bottom:14px;}
.service-tile span{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;}
.service-tile .tick{
  position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  background:var(--blue);color:#fff;display:none;place-items:center;
}
.service-tile .tick svg{width:13px;height:13px;stroke-width:3.2;}
.service-tile.is-selected{border-color:var(--blue);background:#F7FAFF;box-shadow:0 0 0 3px rgba(22,104,227,.10);}
.service-tile.is-selected .tick{display:grid;}
.service-tile .icon-fallback{width:62px;height:62px;display:grid;place-items:center;color:var(--blue);margin-bottom:14px;}
.service-tile .icon-fallback svg{width:38px;height:38px;stroke-width:1.6;}

/* =========================================================
   10. STEP 3 — DATE & TIME
   ========================================================= */
.picker-label{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:14px;}
.picker-label .sub{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px;}

.date-row{display:flex;align-items:center;gap:14px;margin-bottom:30px;}
.date-nav{
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);flex:none;box-shadow:var(--sh-xs);
  transition:color var(--t),border-color var(--t),transform var(--t);
}
.date-nav:hover{color:var(--blue);border-color:#C9DCF9;transform:translateY(-2px);}
.date-nav svg{width:16px;height:16px;}
.date-track{
  display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;flex:1;
  scrollbar-width:none;padding:4px 2px;
}
.date-track::-webkit-scrollbar{display:none;}
.date-chip{
  flex:1 0 auto;min-width:86px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;padding:14px 10px;text-align:center;cursor:pointer;
  transition:border-color var(--t),background var(--t),transform var(--t),box-shadow var(--t);
}
.date-chip:hover{border-color:#C9DCF9;transform:translateY(-2px);}
.date-chip b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4;}
.date-chip span{font-size:13.5px;font-weight:700;color:var(--ink);}
.date-chip.is-selected{border-color:var(--blue);background:#F7FAFF;box-shadow:0 0 0 3px rgba(22,104,227,.10);}
.date-chip.is-selected b,.date-chip.is-selected span{color:var(--blue);}

.slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.slot{
  position:relative;display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  padding:0 18px;min-height:60px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);
  transition:border-color var(--t),background var(--t),transform var(--t),box-shadow var(--t);
}
.slot:hover{border-color:#C9DCF9;transform:translateY(-2px);}
.slot > svg{width:17px;height:17px;color:var(--muted);}
.slot .tick{
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--blue);color:#fff;display:none;place-items:center;border:2px solid #fff;
}
.slot .tick svg{width:12px;height:12px;stroke-width:3.2;}
.slot.is-selected{border-color:var(--blue);background:#F7FAFF;color:var(--blue);box-shadow:0 0 0 3px rgba(22,104,227,.10);}
.slot.is-selected > svg{color:var(--blue);}
.slot.is-selected .tick{display:grid;}

/* =========================================================
   11. STEP 4 — CONFIRMATION
   ========================================================= */
.panel-title-ic{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.panel-title-ic svg{width:22px;height:22px;color:var(--blue);}

.booked-card{border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:26px;}
.booked-top{display:flex;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line-soft);}
.booked-top img{width:96px;height:82px;object-fit:cover;object-position:center;border-radius:12px;background:var(--tint-2);}
.booked-top h3{font-size:17px;margin-bottom:10px;}
.booked-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:22px;}
.meta-item{display:flex;gap:10px;}
.meta-item > svg{width:17px;height:17px;color:var(--blue);margin-top:3px;}
.meta-item b{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:3px;}
.meta-item span{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45;}

.cust-card{border:1px solid var(--line);border-radius:var(--r);padding:24px;}
.cust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.cust-grid .is-full{grid-column:1/-1;}
.cust-grid b{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:4px;}
.cust-grid span{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5;}

.next-box{background:var(--tint);border-radius:var(--r);padding:24px;margin-top:26px;}
.next-box > b{display:block;font-size:15px;font-weight:800;color:var(--blue);margin-bottom:22px;}
.next-steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative;}
.next-step{text-align:center;position:relative;padding:0 8px;}
.next-step .ic{
  width:56px;height:56px;border-radius:50%;background:#fff;color:var(--blue);
  display:grid;place-items:center;margin:0 auto 12px;box-shadow:var(--sh-xs);
}
.next-step .ic svg{width:22px;height:22px;}
.next-step p{font-size:12.5px;line-height:1.5;color:var(--body);}
.next-step p b{display:block;font-weight:800;color:var(--ink);}
.next-step:not(:last-child)::after{
  content:"";position:absolute;top:28px;left:calc(50% + 38px);right:calc(-50% + 38px);
  border-top:2px dotted #B9D3F6;
}

/* Maintenance banner */
.maint{
  background:var(--tint);border-radius:var(--r-md);padding:26px 32px;margin-top:34px;
  display:flex;align-items:center;gap:26px;
}
.maint-art{width:96px;height:76px;object-fit:contain;flex:none;}
.maint-copy{flex:1;}
.maint-copy h2{font-size:19px;margin-bottom:5px;}
.maint-copy p{font-size:14px;color:var(--body);}

/* =========================================================
   13. WHY BOOK BAND
   ========================================================= */
.whybook{background:var(--tint-2);border-radius:var(--r-md);padding:30px 32px;margin-top:44px;}
.whybook > h2{font-size:20px;margin-bottom:22px;}
.whybook-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;}
.wb-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:22px 20px;min-height:132px;box-shadow:var(--sh-xs);
  transition:box-shadow var(--t),transform var(--t);
}
.wb-card:hover{box-shadow:var(--sh-md);transform:translateY(-4px);}
.wb-card svg{width:26px;height:26px;color:var(--blue);margin-bottom:14px;stroke-width:1.7;}
.wb-card b{display:block;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.wb-card p{font-size:12.5px;line-height:1.55;color:var(--muted);}

/* =========================================================
   15. CTA BAND
   ========================================================= */
.cta-band{
  margin-top:52px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--navy-deep) 0%,#0E3B86 55%,var(--blue) 100%);
}
.cta-band::after{
  content:"";position:absolute;right:16%;bottom:0;width:280px;height:100%;
  background:url("assets/images/skyline-outline.webp") no-repeat center bottom/contain;opacity:.22;
}
.cta-inner{display:flex;align-items:center;gap:28px;padding:0 24px;min-height:150px;position:relative;z-index:1;}
.cta-ic{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none;}
.cta-ic svg{width:32px;height:32px;color:#fff;}
.cta-copy{flex:1;}
.cta-copy h2{font-size:26px;color:#fff;margin-bottom:6px;}
.cta-copy p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.9);max-width:430px;}

/* =========================================================
   17. RESPONSIVE
   ========================================================= */
@media (max-width:1440px){ :root{--container:1320px;} }
@media (max-width:1366px){
  :root{--container:1180px;}
  .nav-list{gap:22px;}
  .header-mail{display:none;}
  .booking-layout{grid-template-columns:minmax(0,1fr) 350px;}
  .bk-hero h1{font-size:40px;}
}
@media (max-width:1280px){
  :root{--container:1120px;--grid-gap:24px;}
  .nav-list{gap:20px;}
  .service-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .whybook-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .panel{padding:30px 26px 32px;}
}
@media (max-width:1024px){
  .header-inner{height:76px;}
  .header-inner > .btn{width:auto;padding:0 20px;}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-md);display:none;
  }
  .main-nav.is-open{display:block;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 14px;}
  .nav-list a{padding:11px 0;border-bottom:1px solid var(--line-soft);}
  .nav-list .is-active::after{display:none;}
  .nav-toggle{display:inline-flex;margin-left:auto;}

  .bk-hero::before,.cf-hero::before{background:linear-gradient(180deg,rgba(250,252,255,.96) 0%,rgba(240,246,255,.9) 55%,rgba(239,245,255,.85) 100%);}
  .bk-hero-inner{grid-template-columns:1fr;min-height:0;}
  .bk-hero-copy,.cf-hero-copy{padding:44px 0 70px;max-width:none;}
  .bk-hero-media,.cf-hero-media{position:relative;width:100%;height:280px;}

  .booking-layout{grid-template-columns:1fr;}
  .sidebar{position:static;grid-template-columns:1fr 1fr;align-items:start;}
  .booked-meta,.cust-grid{grid-template-columns:1fr 1fr;}
  .stepper{padding:22px;}
  .step-node{padding-right:14px;}
  .step-node:not(:last-child)::after{left:50px;right:6px;}
}
@media (max-width:768px){
  :root{--sec-y:56px;}
  .bk-hero h1{font-size:32px;}
  .cf-title h1{font-size:28px;}
  .stepper{grid-template-columns:1fr 1fr;gap:22px 0;}
  .step-node:not(:last-child)::after{display:none;}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-grid{grid-template-columns:1fr;}
  .slot-grid{grid-template-columns:1fr 1fr;}
  .whybook-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sidebar{grid-template-columns:1fr;}
  .next-steps{grid-template-columns:1fr 1fr;gap:24px 0;}
  .next-step:not(:last-child)::after{display:none;}
  .maint{flex-direction:column;text-align:center;}
  .cta-inner{flex-direction:column;text-align:center;padding:40px 24px;}
  .cta-copy p{max-width:none;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .footer-bottom{flex-direction:column;text-align:center;}
}
@media (max-width:480px){
  :root{--gutter:20px;}
  .bk-hero h1{font-size:28px;}
  .cf-title{flex-direction:column;align-items:flex-start;gap:12px;}
  .cf-title h1{font-size:26px;}
  .stepper{grid-template-columns:1fr;gap:18px;}
  .panel{padding:24px 20px 28px;}
  .service-grid{gap:14px;}
  .slot-grid{grid-template-columns:1fr;}
  .booked-meta,.cust-grid{grid-template-columns:1fr;}
  .whybook{padding:24px 20px;}
  .whybook-grid{grid-template-columns:1fr;}
  .next-steps{grid-template-columns:1fr;}
  .step-actions{flex-direction:column-reverse;}
  .step-actions .btn{width:100%;}
  .booked-top{flex-direction:column;align-items:flex-start;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}


/* =========================================================
   18. IMAGE REFINEMENTS
   ========================================================= */
.bk-hero-inner{grid-template-columns:46% 54%;}
.bk-hero-media{width:54%;display:block;overflow:hidden;}
.bk-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.bk-hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    #F5F9FF 0%,
    rgba(245,249,255,.82) 10%,
    rgba(245,249,255,.26) 26%,
    rgba(245,249,255,0) 46%);
}

.cf-hero-media{width:50%;display:block;overflow:hidden;}
.cf-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 25%;}
.cf-hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    #F6FAFF 0%,
    rgba(246,250,255,.84) 12%,
    rgba(246,250,255,.28) 28%,
    rgba(246,250,255,0) 48%);
}

/* Service picker tiles: photos cropped to a consistent ratio */
.service-tile{padding:16px 14px 18px;min-height:0;}
.service-tile img{
  width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:center;
  border-radius:12px;margin-bottom:12px;background:var(--tint-2);
}
.service-tile .icon-fallback{
  width:100%;aspect-ratio:4/3;height:auto;border-radius:12px;
  background:var(--tint);margin-bottom:12px;
}

/* Summary + confirmation thumbnails */
.sum-service img,
.booked-top img{object-fit:cover;object-position:center;background:var(--tint-2);}

@media (max-width:1024px){
  .bk-hero-inner{grid-template-columns:1fr;}
  .bk-hero-media,.cf-hero-media{position:relative;width:100%;height:320px;}
  .bk-hero-media::after,.cf-hero-media::after{
    background:linear-gradient(180deg,rgba(245,249,255,.5) 0%,rgba(245,249,255,0) 30%);
  }
}