/* widgets.css — styles for the dynamic widgets (lead form states, booking, * verified reviews). Loaded site-wide from base.html and index.html. * Everything uses LOGICAL properties so the Arabic (RTL) pages need no * special-casing. Same design tokens as site.css. */ /* ---------- accessibility ---------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* ---------- honeypot — visually gone, still in the submitted form ---------- */ .hp-field{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px; overflow:hidden;opacity:0;pointer-events:none;} /* ---------- lead form states ---------- */ .f-err{font-size:.82rem;color:#8C2F1B;font-weight:500;} .f-err[hidden]{display:none;} .field [aria-invalid="true"]{border-color:#8C2F1B;box-shadow:0 0 0 3px rgba(140,47,27,.08);} .form-status{font-size:.92rem;font-weight:500;margin-block:4px 0;min-block-size:1em;color:var(--ink-soft);} .form-status:empty{margin-block:0;min-block-size:0;} .form-status.is-ok{color:var(--green);font-size:1.02rem;padding-block:14px;padding-inline:18px; background:var(--mint);border:1px solid var(--mint-deep);border-radius:12px;} .form-status.is-err{color:#8C2F1B;} .btn.is-busy{opacity:.55;cursor:progress;transform:none;} .form [data-wa-fallback]{align-self:flex-start;} /* ---------- no-JS degradation ---------- */ /* base.html / index.html add class "js" on from an inline script. * Without JS the fetch-driven form and widget are pointless: hide them, and * the sibling noscript fallback (direct WhatsApp / phone / e-mail links, * styled .bk-fallback) shows instead. */ html:not(.js) form[data-lead-form]{display:none;} html:not(.js) [data-booking]{display:none;} html:not(.js) [data-reviews]{display:none;} /* ---------- booking widget ---------- */ .bk{background:var(--panel);border:1px solid var(--hair);border-radius:20px; padding-block:30px 34px;padding-inline:clamp(20px,3.5vw,36px);} .bk-status{font-size:.95rem;font-weight:500;color:var(--ink-soft);margin-block:0 18px;min-block-size:1em;} .bk-status:empty{margin-block:0;min-block-size:0;} .bk-status.is-err{color:#8C2F1B;} .bk-day{margin-block-end:24px;} .bk-day-h{font-family:var(--f-head);font-weight:400;font-size:1.15rem;letter-spacing:.005em; margin-block:0 12px;text-transform:capitalize;color:var(--ink);} .bk-times{display:flex;flex-wrap:wrap;gap:10px;} .bk-slot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer; font-family:var(--f-body);background:var(--paper);border:1px solid var(--hair);border-radius:12px; padding-block:10px;padding-inline:16px;transition:border-color .2s,background .2s,transform .2s var(--ease);} .bk-slot:hover{border-color:var(--green);transform:translateY(-2px);} .bk-slot-t{font-family:var(--f-mono);font-size:.95rem;font-weight:500;color:var(--ink);} .bk-slot-m{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-soft);} .bk-slot.is-picked,.bk-slot[aria-pressed="true"]{background:var(--green);border-color:var(--green);} .bk-slot.is-picked .bk-slot-t,.bk-slot[aria-pressed="true"] .bk-slot-t{color:var(--paper);} .bk-slot.is-picked .bk-slot-m,.bk-slot[aria-pressed="true"] .bk-slot-m{color:var(--mint-deep);} .bk-tz{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-soft);margin-block:14px 0;} .bk-retry{margin-block-start:6px;} .bk-form{margin-block-start:26px;padding-block-start:26px;border-block-start:1px solid var(--hair);} .bk-picked{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;color:var(--green); background:var(--mint);border:1px solid var(--mint-deep);border-radius:10px; padding-block:10px;padding-inline:14px;margin-block:0 6px;} .bk-hint{font-size:.85rem;color:var(--ink-soft);margin-block:0;} .bk-form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-block-start:6px;} .bk-form-actions .btn{margin-block-start:0;} .bk-done{outline:none;text-align:center;padding-block:26px 10px;} .bk-done-mark{inline-size:56px;block-size:56px;margin-inline:auto;margin-block:0 16px; display:flex;align-items:center;justify-content:center;background:var(--mint); border:1px solid var(--mint-deep);border-radius:999px;font-size:1.5rem;color:var(--green);} .bk-done-h{font-family:var(--f-head);font-weight:300;font-size:1.7rem;margin-block:0 8px;} .bk-done-lead{color:var(--ink-soft);margin-block:0 14px;} .bk-done-when{font-family:var(--f-mono);font-size:.9rem;letter-spacing:.04em;color:var(--ink); background:var(--paper);border:1px solid var(--hair);border-radius:10px;display:inline-block; padding-block:10px;padding-inline:18px;margin-block:0 10px;} .bk-cancel{font-size:.9rem;color:var(--ink-soft);margin-block:16px 0;} .bk-cancel-link{color:var(--green);border-block-end:1px solid var(--green);transition:color .2s,border-color .2s;} .bk-cancel-link:hover{color:var(--ink);border-color:var(--ink);} .bk-fallback{display:flex;flex-direction:column;gap:12px;align-items:flex-start;} .bk-fallback p{margin-block:0;color:var(--ink-soft);font-size:.95rem;} .bk-fallback[hidden]{display:none;} [data-bk-fallback]:not([hidden]){margin-block-start:18px;padding-block-start:18px; border-block-start:1px solid var(--hair);} /* ---------- verified reviews ---------- */ [data-reviews][hidden]{display:none;} .review .rmeta{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft);margin-block-start:8px;} .review .rmeta a{color:var(--green);border-block-end:1px solid var(--green);transition:color .2s,border-color .2s;} .review .rmeta a:hover{color:var(--ink);border-color:var(--ink);} @media (max-width:640px){ .bk-times{gap:8px;} .bk-slot{padding-inline:13px;} .bk-form-actions{flex-direction:column;align-items:stretch;} .bk-form-actions .btn{justify-content:center;} }