/* Booking form (block sanai3i/booking): real buttons and inputs on the design's .bk / .cal / .slots / .bsum. */
.dir-b .bkw .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.dir-b .bkw [hidden]{display:none!important}
.dir-b .bkw .bk-steps{min-width:0}
.dir-b .bkw .mt{margin:0;align-items:flex-start;cursor:pointer;position:relative}
.dir-b .bkw .mt .rad{margin-top:2px}
.dir-b .bkw .mt:has(input:focus-visible){outline:2px solid var(--steel);outline-offset:2px}

/* calendar */
.dir-b .bkw .cal-h .bk-nav{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.dir-b .bkw .cal-h .bk-nav:hover:not(:disabled){background:var(--ink);color:var(--white)}
.dir-b .bkw .cal-h .bk-nav:disabled{opacity:.3;cursor:default}
.dir-b.rtl .bkw .cal-h .bk-nav svg{transform:scaleX(-1)}
.dir-b .bkw .cal>button{aspect-ratio:1;display:grid;place-items:center;font:inherit;font-weight:600;font-size:15px;padding:0;cursor:pointer;min-width:0}
.dir-b .bkw .cal>button.av{background:var(--conc);color:var(--ink);border:1px solid var(--ink)}
.dir-b .bkw .cal>button.av:hover{background:var(--ink);color:var(--white)}
.dir-b .bkw .cal>button.sel{display:grid;place-items:center;justify-content:center;min-height:0;padding:0;font-size:15px;background:var(--ink);color:var(--white);border:0;box-shadow:inset 0 -4px 0 var(--ember)}
.dir-b.rtl .bkw .bsum .btn svg{transform:none}
.dir-b .bkw .cal .dow{text-transform:uppercase}
.dir-b.rtl .bkw .cal .dow{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;font-size:11px}
.dir-b.rtl .bkw .cal-h h3,.dir-b.rtl .bkw .dayh{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;letter-spacing:0;text-transform:none}

/* times */
.dir-b .bkw .slots>button{min-height:48px;display:grid;place-items:center;border:1px solid var(--ink);background:var(--white);color:var(--ink);font:inherit;font-weight:600;font-size:16px;cursor:pointer;padding:0}
.dir-b .bkw .slots>button:hover{background:var(--conc)}
.dir-b .bkw .slots>button.on{background:var(--ember);border:2px solid var(--ink)}
.dir-b .bkw .slots>*{font-variant-numeric:tabular-nums;direction:ltr}

/* fields */
.dir-b .bkw input.inp,.dir-b .bkw textarea.inp{width:100%;font:inherit;font-size:16px;border-radius:0;appearance:none;-webkit-appearance:none}
.dir-b .bkw textarea.inp{display:block;resize:vertical;padding:14px 16px}
.dir-b .bkw .inp::placeholder{color:var(--ph)}
.dir-b .bkw .inp:focus{outline:0;border:2px solid var(--steel);padding-inline:15px;box-shadow:0 0 0 3px rgba(31,74,110,.18)}
.dir-b .bkw .inp.err{border:2px solid var(--err);padding-inline:15px}
.dir-b.rtl .bkw .inp.ltr{text-align:right}
.dir-b .bkw .bk-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* summary */
.dir-b .bkw .bsum .btn{cursor:pointer}
.dir-b .bkw .bsum .btn:disabled{opacity:.7;cursor:progress}
.dir-b .bkw .bsum .when{display:block}
.dir-b.rtl .bkw .bsum .when{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;font-size:22px;line-height:1.5}
.dir-b.rtl .bkw .bsum dt{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;text-transform:none}
.dir-b.rtl .bkw .sum-h{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;text-transform:none}
.dir-b .bkw .bsum .free{background:var(--ember);color:var(--ink);padding:3px 8px;font-size:12px}
.dir-b .bkw .bk-error{margin-top:14px;padding:12px 14px;border:2px solid var(--err);background:rgba(255,255,255,.06);color:var(--white);font-size:14px;line-height:1.5}

/* booked */
.dir-b .bkw .bk-done .fsec-h h2 b{color:var(--ink)}
.dir-b .bkw .bk-done .when{font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:800;font-size:24px;line-height:1.2;display:block}
.dir-b.rtl .bkw .bk-done .when{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700}
.dir-b .bkw .bk-ok-text{font-size:17px;color:var(--mute)}
.dir-b .bkw .bk-ok-links{display:flex;flex-wrap:wrap;gap:16px 32px}
.dir-b .bkw.is-done .bsum .go .fine{display:none}
.dir-b .bkw .bk-done:focus{outline:0}
.dir-b.rtl .bkw .fsec-h h2{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;letter-spacing:0;text-transform:none;font-stretch:100%}

/* the customer's place: address (with suggestions) and the pin on the map (MapLibre) */
.dir-b .bkw .bk-ac{position:relative}
.dir-b .bkw .bk-ac-list{position:absolute;inset-inline:0;top:100%;z-index:20;margin:0;padding:0;list-style:none;background:var(--wp--preset--color--paper,#F6F4F0);border:1px solid var(--ink);border-top:0;max-height:300px;overflow-y:auto;box-shadow:0 10px 24px rgba(22,21,20,.14)}
.dir-b .bkw .bk-ac-list[hidden]{display:none}
.dir-b .bkw .bk-ac-list li{text-transform:none;letter-spacing:0;font-size:15px;display:flex;flex-direction:column;gap:2px;padding:10px 14px;cursor:pointer;border-top:1px solid var(--line);line-height:1.35}
.dir-b .bkw .bk-ac-list li:first-child{border-top:0}
.dir-b .bkw .bk-ac-list li:hover,.dir-b .bkw .bk-ac-list li[aria-selected="true"]{background:var(--conc)}
.dir-b .bkw .bk-ac-list li[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--wp--preset--color--ember,#EE5A2F)}
.dir-b.rtl .bkw .bk-ac-list li[aria-selected="true"]{box-shadow:inset -3px 0 0 var(--wp--preset--color--ember,#EE5A2F)}
.dir-b .bkw .bk-ac-list .n{font-weight:600;color:var(--ink)}
.dir-b .bkw .bk-ac-list .d{font-size:13px;color:var(--wp--preset--color--slate,#5B5751)}
.dir-b .bkw .bk-ac-state:empty{display:none}
.dir-b .bkw .bk-pin .lbl{display:block}
.dir-b .bkw .bk-map-wrap{display:flex;flex-direction:column;gap:10px}
.dir-b .bkw .bk-locate{align-self:flex-start;width:auto;margin:0;gap:8px;cursor:pointer}
.dir-b .bkw .bk-locate svg{width:18px;height:18px}
.dir-b .bkw .bk-locate:disabled{opacity:.7;cursor:progress}
.dir-b .bkw .bk-map{height:340px;border:1px solid var(--ink);background:var(--conc);z-index:0;font:inherit;font-size:12px;overflow:hidden}
.dir-b .bkw .bk-map.off{height:auto;min-height:0;border-style:dashed}
.dir-b .bkw .bk-map canvas:focus-visible{outline:2px solid var(--steel);outline-offset:-2px}
.dir-b .bkw .bk-map.err{border:2px solid var(--err)}
.dir-b .bkw .bk-map .maplibregl-ctrl-attrib{font-size:11px}
.dir-b .bkw .bk-map .maplibregl-ctrl-group{border-radius:0;border:1px solid var(--ink);box-shadow:none}
.dir-b .bkw .bk-map .maplibregl-ctrl-group button{width:34px;height:34px}
.dir-b .bkw .bk-map .maplibregl-cooperative-gesture-screen{font:inherit;font-size:15px}
.dir-b .bkw .bk-marker{width:32px;height:44px;cursor:grab;filter:drop-shadow(0 2px 2px rgba(22,21,20,.35))}
.dir-b .bkw .bk-marker:active{cursor:grabbing}
.dir-b .bkw .bk-marker svg{display:block}
.dir-b .bkw .bk-marker path{fill:var(--wp--preset--color--ember,#EE5A2F);stroke:var(--ink);stroke-width:1.5}
.dir-b .bkw .bk-marker circle{fill:var(--wp--preset--color--paper,#F6F4F0)}
.dir-b .bkw .bk-pin-state:empty{display:none}
.dir-b .bkw .bk-pin-state bdi{white-space:nowrap}
.dir-b .bkw .bsum dd b{overflow-wrap:anywhere}
.dir-b .bkw .bsum dl>div:last-child{border-bottom:0}

@media (max-width:1023px){
  .dir-b .bkw .fsec-h{flex-wrap:wrap;padding:12px 20px;gap:8px}
  .dir-b .bkw .fsec-b{padding:20px}
  .dir-b .bkw .frow{grid-template-columns:1fr}
  .dir-b .bkw .bsum{position:static}
}

@media (max-width:760px){
  .dir-b .bkw .bk-map{height:280px}
  .dir-b .bkw .bk-locate{align-self:stretch;width:100%}
  /* compact steps 1 and 2 so the calendar shows without scrolling */
  .dir-b .bk.bkw{padding-top:8px}
  .dir-b .bkw .fsec{margin-bottom:10px}
  .dir-b .bkw .fsec-h{min-height:52px;padding:8px 20px}
  .dir-b .bkw .bk-kind .fsec-b{padding:12px 20px;gap:8px}
  .dir-b .bkw .bk-kind .mt{padding:10px 12px;margin-bottom:0}
  .dir-b .bkw .bk-kind .mt div>span{display:none}
  .dir-b .bkw .bk-kind .frow{gap:8px}
  .dir-b .bkw .bk-when .fsec-b{padding-top:14px}
  .dir-b .bkw .fsec-h h2{font-size:16px}
  .dir-b .bkw .bk-when .fsec-h .aside{font-size:12px}
}
