/* FuseLoom callback request — the overlay opened by every "call you back" CTA.
   ---------------------------------------------------------------------------
   Descended from booking.css. Everything that dressed the calendar wizard — the
   four-step tracker, the day grid, the slot grid, the Back button, the summary
   table — is gone with the wizard itself. What is left is one form, and the two
   blocks the form needed that the wizard never had:

     .cb-slots   morning / afternoon / evening as one segmented control rather
                 than four radio buttons a thumb has to hunt for.
     .cb-consent the tick and the promise, boxed together and set apart from the
                 fields, so the thing being agreed to cannot be skimmed past on
                 the way to the button.

   The .flbook-* names are kept for the shell, panel, form fields and buttons.
   They are what the markup and the site's own overlay conventions already use,
   and renaming them would be churn with no reader on the other end. */

/* ── the overlay and its panel ─────────────────────────────────── */
.flbook-ov{position:fixed;inset:0;z-index:120;background:rgba(6,11,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:18px}
.flbook-ov.open{display:flex}
.flbook-p{width:min(660px,100%);max-height:92vh;display:flex;flex-direction:column;background:#0B1420;border:1px solid rgba(255,255,255,.16);border-radius:22px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.7);font-family:'Instrument Sans',sans-serif;color:#EAF2FA}
.flbook-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:15px;flex-shrink:0}
.flbook-h .x{margin-left:auto;background:none;border:0;color:#8FA3B8;font-size:22px;cursor:pointer;line-height:1;padding:2px 6px}
.flbook-h .x:hover{color:#EAF2FA}
.flbook-body{padding:16px 20px 4px;overflow-y:auto;flex:1}
.flbook-lead{font-size:14px;color:#C3D2E1;margin-bottom:14px;line-height:1.6}
.flbook-lead b{color:#EAF2FA}

/* ── the form ──────────────────────────────────────────────────── */
.flbook-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.flbook-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#8FA3B8}
.flbook-form label.wide{grid-column:1/-1}
.flbook-form label em{font-style:normal;color:#6B7C8C}
.flbook-form input,.flbook-form select,.flbook-form textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;color:#EAF2FA;font-size:13.5px;font-family:'Instrument Sans',sans-serif;outline:none;resize:vertical}
.flbook-form input:focus,.flbook-form select:focus,.flbook-form textarea:focus{border-color:rgba(47,227,196,.5)}
.flbook-form select option{background:#0B1420;color:#EAF2FA}
.flbook-err{color:#7BF3DC;font-size:12.5px;min-height:18px;margin:10px 0 0;grid-column:1/-1}

/* The line that stops a visitor assuming both channels are compulsory. It sits
   across both columns, directly above the pair it describes. */
.cb-hint{grid-column:1/-1;font-size:12.2px;line-height:1.5;color:#6B7C8C;margin:2px 0 -4px}

/* honeypot: off-screen rather than display:none, which some bots skip */
.cb-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

/* ── best time: one segmented control, not four radios ─────────── */
.cb-field{display:flex;flex-direction:column;gap:7px}
.cb-lab{font-size:12px;color:#8FA3B8}
.cb-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cb-slot{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 6px;color:#C3D2E1;font-size:13px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;font-family:'Instrument Sans',sans-serif}
.cb-slot:hover{border-color:rgba(47,227,196,.4)}
.cb-slot.sel{border-color:rgba(47,227,196,.55);background:rgba(47,227,196,.12);color:#EAF2FA;font-weight:600}
.cb-slot:focus-visible{outline:2px solid rgba(47,227,196,.7);outline-offset:2px}

/* ── consent: the tick and the promise, read together ──────────── */
.cb-consent{grid-column:1/-1;margin-top:4px;border:1px solid rgba(242,200,121,.28);border-radius:14px;padding:14px 16px;background:rgba(242,200,121,.045)}
.cb-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:11px;cursor:pointer;font-size:13.5px!important;color:#EAF2FA!important;line-height:1.5}
/* the box itself is enlarged: a 13px tick target is a mis-tap, and this is the
   one control on the form that must be hit deliberately */
.cb-check input{appearance:none;-webkit-appearance:none;flex:none;width:19px;height:19px;margin-top:1px;border:1.5px solid rgba(255,255,255,.36);border-radius:5px;background:rgba(255,255,255,.06);cursor:pointer;position:relative;padding:0}
.cb-check input:checked{background:linear-gradient(135deg,#2FE3C4,#7BF3DC);border-color:transparent}
.cb-check input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #04211C;border-width:0 2.4px 2.4px 0;transform:rotate(43deg)}
.cb-check input:focus-visible{outline:2px solid rgba(47,227,196,.7);outline-offset:2px}
.cb-promise{margin:10px 0 0 30px;font-size:12.2px;line-height:1.6;color:#8FA3B8}
.cb-promise a{color:#7BF3DC;text-decoration:none;font-weight:600}
.cb-promise a:hover{text-decoration:underline}

/* ── the sent state ────────────────────────────────────────────── */
.flbook-done{text-align:center;padding:26px 10px 10px}
.flbook-done svg{width:40px;height:40px;color:#2FE3C4}
.flbook-done h3{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;margin:12px 0 8px}
.flbook-done p{font-size:13.5px;color:#8FA3B8;max-width:420px;margin:0 auto 8px;line-height:1.6}
.flbook-done p b{color:#EAF2FA}

/* ── the footer bar ────────────────────────────────────────────── */
.flbook-nav{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:12px 20px;flex-shrink:0}
.flbook-nav:empty{display:none}
.flbook-next{border:0;cursor:pointer;border-radius:12px;padding:11px 20px;background:linear-gradient(135deg,#2FE3C4,#7BF3DC);color:#04211C;font-weight:700;font-size:14px;font-family:'Instrument Sans',sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.flbook-next:hover{box-shadow:0 8px 24px rgba(47,227,196,.45)}
.flbook-next[disabled]{opacity:.6;cursor:wait}
.flbook-f{padding:10px 18px 12px;font-size:11.5px;color:#6B7C8C;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}
.flbook-f a{color:#7BF3DC;text-decoration:none;font-weight:600}
.flbook-f a:hover{text-decoration:underline}

@media(max-width:560px){
  .flbook-ov{padding:8px}
  .flbook-p{max-height:94vh;border-radius:16px}
  .flbook-form{grid-template-columns:1fr}
  /* four segments will not fit a phone in one row without shrinking the text
     below a comfortable tap target, so they wrap to two */
  .cb-slots{grid-template-columns:repeat(2,1fr)}
  .cb-promise{margin-left:0}
}

@media(prefers-reduced-motion:reduce){
  .cb-slot,.flbook-next{transition:none}
}

/* ── Arabic layer ──────────────────────────────────────────────── */
html[lang="ar"] .flbook-p,html[lang="ar"] .flbook-form input,html[lang="ar"] .flbook-form select,html[lang="ar"] .flbook-form textarea,html[lang="ar"] .cb-slot,html[lang="ar"] .flbook-next{font-family:'Tajawal','Instrument Sans',sans-serif}
html[lang="ar"] .flbook-h,html[lang="ar"] .flbook-done h3{font-family:'Tajawal','Bricolage Grotesque',sans-serif}
[dir="rtl"] .flbook-h .x{margin-left:0;margin-right:auto}
[dir="rtl"] .flbook-nav{justify-content:flex-start}
[dir="rtl"] .cb-promise{margin:10px 30px 0 0}
[dir="rtl"] .cb-check input:checked::after{transform:rotate(43deg)}