/* ==========================================================================
   OnePage Checkout theme — themes/onepage/assets/css/theme.css
   --------------------------------------------------------------------------
   Single-page booking shell: hero band + card, branch picker, services,
   calendar, time pills, client details, success card.

   Colour tokens are wired to the six admin pickers in header.php:
     --admin-button-1/2  ->  every gradient (CTA, day/slot selection, submit)
     --admin-main-1/2    ->  card + page wash
     --admin-footer-1/2  ->  footer strip
   Nothing below hardcodes a brand colour.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  --op-accent-1: var(--admin-button-1, #f0a08a);
  --op-accent-2: var(--admin-button-2, #e4776a);
  --op-surface:  var(--admin-main-1, #ffffff);
  --op-wash:     var(--admin-main-2, #f7f6f8);
  --op-ink: #2f3136;
  --op-ink-soft: #4c4f55;
  --op-muted: #8b909a;
  --op-line: #eceef1;
  --op-radius: 22px;
  --op-radius-sm: 14px;
  --op-shadow: 0 24px 60px -28px rgba(58,48,66,.28);
  --op-gradient: linear-gradient(120deg, var(--op-accent-1), var(--op-accent-2));
  --op-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --op-tap: 44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* several views toggle the [hidden] attribute directly (gallery filter, the
   inline "working…" bars, the extras/themes panels). Without this the display
   rules further down would win and those elements would never hide. */
body.op-theme [hidden]{display:none}
body.op-theme{
  margin:0;
  font-family:var(--op-font);
  font-size:16px;
  color:var(--op-ink);
  background:
    radial-gradient(1100px 520px at 12% 0%,  rgba(253,234,221,.95) 0%, rgba(253,234,221,0) 60%),
    radial-gradient(900px 620px at 100% 12%, rgba(233,236,251,.95) 0%, rgba(233,236,251,0) 62%),
    radial-gradient(900px 700px at 4% 100%, rgba(230,244,238,.95) 0%, rgba(230,244,238,0) 60%),
    var(--op-wash);
  padding:38px 20px;
  -webkit-font-smoothing:antialiased;
  /* the card floats in the middle of the screen: shorter than the viewport it
     is centred, taller than the viewport it simply scrolls (min-height, so the
     card is never clipped at the top) */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100dvh;
}
html[dir="rtl"] body.op-theme{font-family:"Noto Kufi Arabic", var(--op-font)}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--op-accent-2);outline-offset:3px}
.op-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------- 2. the card */
.op-card{
  position:relative;
  width:100%;max-width:1010px;margin:0 auto;
  background:var(--op-surface);
  border-radius:var(--op-radius);
  box-shadow:var(--op-shadow);
  overflow:hidden;
}
.op-body{position:relative}

/* ------------------------------------------------------------ 3. hero band */
.op-hero{
  position:relative;
  height:400px;
  background:var(--op-wash);
  transition:height .45s cubic-bezier(.4,0,.2,1);
}
.op-card[data-step]:not([data-step="home"]) .op-hero{height:150px}
.op-hero__media{
  position:absolute;inset:0 0 0 30%;
  overflow:hidden;
  background:var(--op-wash);
}
.op-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
/* left edge dissolved into the card, as in the reference design */
.op-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--op-surface) 0%, rgba(255,255,255,.92) 14%, rgba(255,255,255,0) 54%);
}
html[dir="rtl"] .op-hero__media{inset:0 30% 0 0}
html[dir="rtl"] .op-hero__media::after{background:linear-gradient(-90deg, var(--op-surface) 0%, rgba(255,255,255,.92) 14%, rgba(255,255,255,0) 54%)}
.op-hero__copy{
  position:relative;z-index:2;
  padding:112px 0 0 46px;max-width:56%;
  transition:opacity .3s;
}
/* the copy sits opposite the media box: after the RTL media moved to the left
   edge, the copy has to start flush with the right edge — the free space is
   pushed away on the end side (margin-inline-start would wedge it back over
   the photo) */
html[dir="rtl"] .op-hero__copy{padding:112px 46px 0 0;margin-inline-end:auto}
.op-card[data-step]:not([data-step="home"]) .op-hero__copy{opacity:0;pointer-events:none}
.op-wordmark{
  margin:0;font-size:80px;line-height:.94;font-weight:600;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--op-accent-1);
  word-break:break-word;
}
.op-tagline{
  margin:20px 0 26px;font-size:19px;line-height:1.45;font-weight:300;
  color:rgba(47,49,54,.5);max-width:300px;
}
.op-hero--plain .op-hero__media{inset:0}
.op-hero--plain .op-hero__media::after{background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.1) 40%, rgba(0,0,0,.45))}

/* hamburger + drawer */
.op-burger{
  position:absolute;inset-inline-start:30px;top:26px;z-index:6;
  width:46px;height:46px;border-radius:50%;
  background:var(--op-gradient);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:transform .2s;
}
.op-burger:hover{transform:scale(1.06)}
.op-burger i{display:block;width:18px;height:2px;border-radius:2px;background:#fff}
.op-drawer{position:fixed;inset:0;z-index:80;display:none}
.op-drawer.is-open{display:block}
.op-drawer__scrim{position:absolute;inset:0;background:rgba(35,30,40,.42)}
.op-drawer__panel{
  position:absolute;inset-block:0;inset-inline-start:0;width:300px;max-width:86vw;
  background:var(--op-surface);padding:28px 24px;
  box-shadow:24px 0 60px -30px rgba(0,0,0,.5);
  animation:op-slide .3s cubic-bezier(.4,0,.2,1) both;
  overflow-y:auto;
}
@keyframes op-slide{from{transform:translateX(-28px);opacity:.4}to{transform:none;opacity:1}}
html[dir="rtl"] .op-drawer__panel{animation-name:op-slide-rtl}
@keyframes op-slide-rtl{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
.op-drawer__brand{margin:0 0 20px;font-size:24px;font-weight:600;color:var(--op-accent-1);text-transform:uppercase;letter-spacing:.01em}
.op-drawer__nav{display:grid;gap:4px}
.op-drawer__nav a{
  text-decoration:none;font-size:15px;padding:12px 12px;border-radius:10px;
  display:flex;align-items:center;gap:10px;
}
.op-drawer__nav a:hover,.op-drawer__nav a.is-current{background:color-mix(in srgb, var(--op-accent-1) 12%, #fff);color:var(--op-accent-2)}
.op-drawer__meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--op-line);display:grid;gap:10px;font-size:13px;color:var(--op-muted)}
.op-drawer__meta a{text-decoration:none}
.op-drawer__meta a:hover{color:var(--op-accent-2)}
.op-drawer__close{position:absolute;inset-inline-end:16px;top:18px;font-size:20px;line-height:1;color:var(--op-muted);padding:6px}

/* ------------------------------------------------------- 4. buttons + pills */
.op-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--op-gradient);color:#fff;
  font-size:15px;font-weight:500;letter-spacing:.01em;
  border-radius:999px;padding:13px 30px;min-height:var(--op-tap);
  box-shadow:0 14px 26px -14px rgba(0,0,0,.35);
  transition:transform .18s,box-shadow .18s,opacity .18s;
  text-decoration:none;
}
.op-pill:hover{transform:translateY(-1px);box-shadow:0 18px 30px -16px rgba(0,0,0,.4)}
.op-pill[disabled],.op-pill.is-disabled{opacity:.4;pointer-events:none;box-shadow:none}
.op-pill--block{display:flex;width:100%}
.op-pill--ghost{background:var(--op-surface);color:var(--op-ink);border:1px solid var(--op-line);box-shadow:none}
.op-pill--ghost:hover{border-color:#d9dde3;transform:none}
.op-pill--sm{padding:10px 20px;font-size:13.5px;min-height:38px}
.op-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:op-spin .7s linear infinite;
}
@keyframes op-spin{to{transform:rotate(360deg)}}

/* -------------------------------- 5. home strip (studio pages + contact) */
.op-strip{
  display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:44px;padding:34px 46px 40px;border-top:1px solid var(--op-line);
}
.op-hours{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.op-hours__day{text-align:center}
.op-hours__name{color:var(--op-accent-2);font-size:14px;font-weight:500;margin-bottom:16px}
.op-hours__time{font-size:14px;color:#3b3d42;line-height:1.15;display:flex;flex-direction:column;align-items:center;gap:7px}
.op-hours__time i{display:block;width:1px;height:14px;background:#d6d9de}
.op-hours__gap{color:#c3c7cd}
.op-hours__day.is-closed .op-hours__name{color:#c3c7cd}
.op-hours__day.is-closed .op-hours__time{color:var(--op-muted);font-size:12.5px}
html[dir="ltr"] .op-hours__time span{direction:ltr}
.op-contact{display:grid;gap:14px;align-content:start;border-inline-start:1px solid var(--op-line);padding-inline-start:28px}
.op-contact__row{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--op-ink-soft)}
.op-contact__row i{color:var(--op-accent-2);width:16px;text-align:center;margin-top:3px}
.op-contact__row a{text-decoration:none;word-break:break-word}
.op-contact__row a:hover{color:var(--op-accent-2)}

/* the home screen opens with the studio's own words: the Home page first (no
   label above it, its own heading carries it) and then the About us page with
   its label. Both are the rows the admin edits under Pages. Rich text arrives
   as HTML, so only the surrounding rhythm is styled here and images are capped
   to the column. */
.op-pages{display:grid;gap:26px;align-content:start;min-width:0}
.op-page{min-width:0}
.op-page + .op-page{padding-top:26px;border-top:1px solid var(--op-line)}
.op-page__label{
  margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--op-accent-2);
}
html[dir="rtl"] .op-page__label{letter-spacing:0}
.op-page__body{font-size:14.5px;line-height:1.85;color:var(--op-ink-soft);overflow-wrap:break-word}
.op-page__body>*:first-child{margin-top:0}
.op-page__body>*:last-child{margin-bottom:0}
.op-page__body h1,.op-page__body h2,.op-page__body h3,.op-page__body h4{font-size:17px;font-weight:600;color:var(--op-ink);line-height:1.5;margin:0 0 10px}
.op-page__body p{margin:0 0 12px}
.op-page__body img,.op-page__body iframe,.op-page__body video{max-width:100%;height:auto;border-radius:12px}
.op-page__body a{color:var(--op-accent-2);text-decoration:underline}
.op-page__body ul,.op-page__body ol{margin:0 0 12px;padding-inline-start:20px}

/* the home strip belongs to the home screen only */
.op-card[data-step]:not([data-step="home"]) .op-home{display:none}

/* --------------------------------------------------- 6. order summary bar */
.op-summary{
  display:none;align-items:center;gap:20px;
  padding:14px 46px;border-top:1px solid var(--op-line);background:#fdfcfc;
  flex-wrap:wrap;
}
.op-card[data-step]:not([data-step="home"]) .op-summary{display:flex}
.op-summary__back{color:var(--op-muted);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.op-summary__back:hover{color:var(--op-accent-2)}
.op-summary__back[hidden]{display:none}
.op-summary__item{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--op-muted);min-width:0}
.op-summary__item b{font-size:13.5px;font-weight:500;color:var(--op-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.op-summary__item[data-empty="1"] b{color:#c6cad1;font-weight:400}
.op-summary__spacer{flex:1}
.op-summary__total{text-align:end;margin-inline-start:auto}
.op-summary__total b{font-size:18px}
.op-progress{display:flex;gap:6px;align-items:center;margin-inline-start:4px}
.op-progress span{width:26px;height:4px;border-radius:99px;background:var(--op-line)}
.op-progress span.is-done{background:var(--op-gradient)}

/* --------------------------------------------------------- 7. step layout */
.op-step{display:none;padding:40px 46px 46px;border-top:1px solid var(--op-line)}
.op-step.is-active{display:block;animation:op-fade .34s ease both}
.op-step--center.is-active{display:grid;place-items:center;min-height:340px}
@keyframes op-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.op-step__title{margin:0 0 26px;font-size:27px;font-weight:500;letter-spacing:-.01em}
.op-step__lead{margin:-16px 0 26px;color:var(--op-muted);font-size:14.5px}
.op-step__foot{display:flex;justify-content:flex-end;gap:12px;margin-top:34px;flex-wrap:wrap}
.op-note{margin:16px 0 0;font-size:11.5px;color:#a9aeb6;line-height:1.6}
.op-empty{padding:22px 0;color:var(--op-muted);font-size:14px}

/* ----------------------------------------------------------- 8. branches */
.op-branches{display:grid;gap:14px}
.op-branch{
  display:flex;align-items:center;gap:16px;text-align:start;width:100%;
  border:1px solid var(--op-line);border-radius:var(--op-radius-sm);
  padding:16px 18px;background:var(--op-surface);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.op-branch:hover{border-color:var(--op-accent-1);transform:translateY(-2px);box-shadow:0 18px 32px -24px rgba(0,0,0,.35)}
.op-branch.is-selected{border-color:var(--op-accent-1);box-shadow:0 0 0 3px color-mix(in srgb, var(--op-accent-1) 22%, #fff)}
.op-branch__thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--op-wash);flex:0 0 auto}
.op-branch__thumb img{width:100%;height:100%;object-fit:contain}
.op-branch__fallback{display:grid;place-items:center;width:100%;height:100%;font-size:20px;color:var(--op-accent-1)}
.op-branch__body{flex:1;min-width:0}
.op-branch__name{margin:0 0 4px;font-size:16.5px;font-weight:500}
.op-branch__meta{margin:0;font-size:13px;color:var(--op-muted);display:flex;flex-wrap:wrap;gap:14px}
.op-branch__meta i{margin-inline-end:5px;color:var(--op-accent-2)}
/* per-weekday hours read as a sentence, so give them their own line */
.op-branch__meta>span{min-width:0}
.op-branch__hours{flex-basis:100%}
.op-branch__arrow{color:var(--op-accent-2);font-size:20px;flex:0 0 auto}

/* ----------------------------------------------------------- 9. services */
.op-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.op-service{
  display:flex;flex-direction:column;text-align:start;
  border:1px solid var(--op-line);border-radius:var(--op-radius-sm);
  padding:14px;background:var(--op-surface);
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.op-service:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(58,48,66,.45);border-color:#e4e7ea}
.op-service.is-selected{border-color:var(--op-accent-1);box-shadow:0 0 0 3px color-mix(in srgb, var(--op-accent-1) 22%, #fff)}
/* square media box: the whole photo is shown (never cropped), the card's own
   wash fills whatever the aspect ratio leaves over */
.op-service__photo{
  aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--op-wash);position:relative;
}
.op-service__photo img{width:100%;height:100%;object-fit:contain}
.op-service__photo i{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:34px;color:color-mix(in srgb, var(--op-accent-1) 60%, #fff);
}
.op-service__name{margin:16px 0 12px;font-size:16px;font-weight:500}
.op-service__hr{height:1px;background:var(--op-line);margin-bottom:14px}
.op-service__price{font-size:20px;font-weight:500}
.op-service__meta{font-size:12.5px;color:var(--op-muted);margin:4px 0 14px;min-height:16px}
.op-service__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.op-service__tag{
  font-size:11px;letter-spacing:.02em;color:var(--op-accent-2);
  background:color-mix(in srgb, var(--op-accent-1) 14%, #fff);
  border-radius:999px;padding:4px 10px;
}
.op-service .op-pill{margin-top:auto}

/* --------------------------------------------------- 10. calendar + slots */
.op-schedule{display:grid;grid-template-columns:360px minmax(0,1fr);gap:52px}
.op-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.op-cal__month{font-size:22px;font-weight:500}
.op-cal__nav{display:flex;gap:10px}
.op-cal__nav button{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--op-line);
  display:grid;place-items:center;color:#9aa0a8;transition:.18s;
}
.op-cal__nav button:hover:not([disabled]){border-color:var(--op-accent-1);color:var(--op-accent-2)}
.op-cal__nav button[disabled]{opacity:.35;cursor:default}
.op-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.op-cal__dow{font-size:10.5px;letter-spacing:.08em;color:#b3b8bf;padding-bottom:12px}
.op-cal__day{
  aspect-ratio:1;border-radius:50%;font-size:13.5px;color:#3d4045;
  display:grid;place-items:center;transition:.16s;border:1px solid transparent;
}
.op-cal__day:hover:not(.is-off):not(.is-out):not(.is-selected){background:#f6f5f4}
.op-cal__day.is-off{color:#d5d8dd;text-decoration:line-through;cursor:default}
.op-cal__day.is-out{color:#e6e8ec;cursor:default}
.op-cal__day.is-today{border-color:var(--op-line)}
.op-cal__day.is-selected{
  background:var(--op-gradient);color:#fff;
  box-shadow:0 10px 18px -10px rgba(0,0,0,.4);text-decoration:none;
}
.op-cal__legend{display:flex;gap:16px;margin-top:16px;font-size:11.5px;color:var(--op-muted);flex-wrap:wrap}
.op-cal__legend i{color:var(--op-accent-2);margin-inline-end:5px}
.op-slots__label{font-size:13.5px;font-weight:500;margin-bottom:18px;min-height:20px;color:var(--op-ink)}
.op-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.op-slot{
  border:1px solid var(--op-line);border-radius:11px;background:var(--op-surface);
  padding:13px 10px;font-size:13px;color:var(--op-ink-soft);transition:.16s;
  min-height:var(--op-tap);
}
.op-slot:hover:not([disabled]):not(.is-selected){border-color:var(--op-accent-1);color:var(--op-accent-2)}
.op-slot.is-selected{
  background:var(--op-gradient);border-color:transparent;color:#fff;
  box-shadow:0 12px 20px -12px rgba(0,0,0,.4);
}
.op-slot[disabled]{color:#dcdfe3;background:#fbfbfc;cursor:default}
.op-slots__empty{padding:6px 0;font-size:13px;color:var(--op-muted);grid-column:1/-1}
.op-skeleton{height:46px;border-radius:11px;background:linear-gradient(90deg,#f4f4f6,#fafafb,#f4f4f6);background-size:200% 100%;animation:op-sheen 1.2s linear infinite}
@keyframes op-sheen{to{background-position:-200% 0}}

/* ------------------------------------------------------ 11. client details */
.op-details{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}
.op-panel{
  border:1px solid var(--op-line);border-radius:var(--op-radius-sm);
  padding:26px 28px;background:var(--op-surface);
}
.op-panel + .op-panel{margin-top:22px}
.op-panel__title{margin:0 0 20px;font-size:17px;font-weight:500}
.op-field{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:14px;margin-bottom:13px}
.op-field label{font-size:13.5px;color:#5b5f66}
.op-field input,.op-field select,.op-field textarea{
  width:100%;font:inherit;font-size:14px;color:var(--op-ink);
  border:1px solid var(--op-line);border-radius:9px;padding:11px 13px;background:var(--op-surface);
  transition:.16s;min-height:var(--op-tap);
}
.op-field textarea{min-height:82px;resize:vertical}
.op-field input:focus,.op-field select:focus,.op-field textarea:focus{
  outline:0;border-color:var(--op-accent-1);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--op-accent-1) 28%, #fff);
}
.op-field--req label::after{content:" *";color:var(--op-accent-2)}
.op-field__error{grid-column:2;font-size:11.5px;color:#c0392b;margin-top:-8px}
.op-field.is-invalid input,.op-field.is-invalid select,.op-field.is-invalid textarea{border-color:#e08b7f}
.op-check{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--op-ink-soft);cursor:pointer;padding:9px 0}
.op-check input{margin-top:2px;width:17px;height:17px;accent-color:var(--op-accent-2);flex:0 0 auto}
.op-check b{margin-inline-start:auto;color:var(--op-accent-2);font-weight:500;white-space:nowrap}
.op-langvalue{direction:ltr;unicode-bidi:embed}

/* theme ("moodboard") picker — inline carousel, no modal. A page is two rows
   of cards: two across on phones, three from 600px up. The cards fill the
   columns two at a time (grid-auto-flow) so each page is a whole number of
   columns, and the arrows step exactly one page. Only the picker scrolls —
   the completion card re-uses .op-themes__grid as a plain grid. */
.op-themes{margin-top:6px}
.op-themes__group{margin-bottom:18px}
.op-themes__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.op-themes__head h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#b3b8bf;font-weight:500}
.op-themes__nav{display:flex;gap:6px}
.op-themes__nav[hidden]{display:none}
.op-themes__arrow{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--op-line);
  display:grid;place-items:center;color:#9aa0a8;font-size:11px;
  transition:border-color .18s,color .18s;
}
.op-themes__arrow:hover:not([disabled]){border-color:var(--op-accent-1);color:var(--op-accent-2)}
.op-themes__arrow[disabled]{opacity:.35;cursor:default}
/* Arabic pages run the other way, so the chevrons point the other way too */
html[dir="rtl"] .op-themes__arrow i{transform:scaleX(-1)}
.op-themes .op-themes__grid{
  display:grid;
  grid-template-columns:none;
  grid-template-rows:repeat(2,auto);
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 10px)/2);
  gap:10px;
  padding:3px;                 /* room for the selected card's ring */
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.op-themes .op-themes__grid::-webkit-scrollbar{display:none}
.op-themes .op-theme-cell{position:relative;scroll-snap-align:start}
.op-theme-cell .op-theme-card{width:100%}
/* magnifier: the card itself is a button, so this sits beside it — at the
   inline start, opposite the tick a selected card shows */
.op-theme-zoom{
  position:absolute;inset-inline-start:6px;top:6px;z-index:2;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--op-accent-2);
  display:grid;place-items:center;font-size:10px;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .18s,color .18s;
}
.op-theme-zoom:hover{color:var(--op-accent-1)}
.op-theme-cell:hover .op-theme-zoom,
.op-theme-cell:focus-within .op-theme-zoom{opacity:1;pointer-events:auto}
/* touch screens never hover, so the magnifier simply stays there */
@media (hover:none){
  .op-theme-zoom{opacity:1;pointer-events:auto;width:30px;height:30px;font-size:12px}
}
.op-themes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.op-theme-card{
  position:relative;border:2px solid var(--op-line);border-radius:12px;overflow:hidden;
  background:var(--op-surface);padding:0;transition:.18s;
}
.op-theme-card img{width:100%;height:78px;object-fit:cover}
.op-themes .op-theme-card img{height:96px}
.op-theme-card span{display:block;padding:7px 6px;font-size:11px;text-align:center;color:var(--op-ink-soft)}
.op-theme-card:hover{transform:translateY(-2px)}
.op-theme-card.is-selected{border-color:var(--op-accent-1);box-shadow:0 0 0 3px color-mix(in srgb, var(--op-accent-1) 20%, #fff)}
.op-theme-card.is-selected::after{
  content:"\2713";position:absolute;inset-inline-end:6px;top:6px;
  width:20px;height:20px;border-radius:50%;background:var(--op-gradient);color:#fff;
  display:grid;place-items:center;font-size:11px;
}
.op-themes__count{font-size:12.5px;color:var(--op-muted);margin-bottom:12px}
@media (min-width:600px){
  /* tablets and desktops: three cards side by side, two rows per page */
  .op-themes .op-themes__grid{grid-auto-columns:calc((100% - 20px)/3)}
}

/* voucher + price */
.op-voucher__row{display:flex;gap:10px}
.op-voucher__row input{flex:1}
.op-voucher__msg{margin:10px 0 0;font-size:12.5px;display:none}
.op-voucher__msg.is-ok{color:#2e8b57;display:block}
.op-voucher__msg.is-bad{color:#c0392b;display:block}
.op-price{display:grid;gap:8px;margin-top:20px}
.op-price__row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--op-ink-soft)}
.op-price__row b{font-weight:500}
.op-price__row--total{border-top:1px solid var(--op-line);padding-top:12px;font-size:17px;color:var(--op-ink)}
.op-price__row--total b{font-size:20px}
.op-price__row--save{color:#2e8b57}
.op-aside{position:sticky;top:24px}

/* ------------------------------------------------------------ 12. success */
.op-result{text-align:center;padding:10px 0}
.op-result__badge{
  width:96px;height:96px;border-radius:50%;margin:0 auto 26px;
  background:var(--op-gradient);display:grid;place-items:center;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.4);
}
.op-result__badge i{font-size:40px;color:#fff}
.op-result h2{margin:0 0 8px;font-size:26px;font-weight:500}
.op-result p{margin:0 0 26px;color:var(--op-muted);font-size:14.5px}
/* every box on the success screen shares one width, so the column of panels
   below the badge lines up with the summary table */
.op-result__meta{
  display:grid;gap:8px;text-align:start;margin:0 auto 26px;width:100%;max-width:520px;
  border:1px solid var(--op-line);border-radius:var(--op-radius-sm);padding:18px 22px;
}
.op-result__meta div{display:flex;justify-content:space-between;gap:20px;font-size:13.5px}
.op-result__meta span{color:var(--op-muted)}
.op-result__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --------------------------------------------------- 13. generic content */
.op-content{padding:40px 46px 46px;border-top:1px solid var(--op-line)}
/* contact page: give the message form a genuinely wide column and let each
   input take the full row instead of sharing it with its label. Deliberately
   the same specificity as .op-details, so the <=1000px stack below still wins. */
.op-details--contact{grid-template-columns:minmax(0,1fr) 400px}
.op-details--contact .op-field{grid-template-columns:minmax(0,1fr);gap:7px}
.op-details--contact .op-field__error{grid-column:1;margin-top:-4px}
.op-content h1{margin:0 0 22px;font-size:27px;font-weight:500}
.op-content h2{margin:0 0 16px;font-size:20px;font-weight:500}
.op-content p{line-height:1.75;color:var(--op-ink-soft)}
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.op-grid a{display:block;border-radius:12px;overflow:hidden;background:var(--op-wash);aspect-ratio:1}
.op-grid a img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.op-grid a:hover img{transform:scale(1.04)}
.op-grid.is-busy{opacity:.45}
.op-gallery-more{margin-top:22px;text-align:center}
.op-gallery-more[hidden]{display:none}
.op-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.op-tab{
  display:inline-flex;align-items:center;text-decoration:none;
  border:1px solid var(--op-line);border-radius:999px;padding:9px 18px;font-size:13px;color:var(--op-ink-soft);
  background:var(--op-surface);
}
.op-tab:hover{border-color:#d9dde3;color:var(--op-accent-2)}
.op-tab.is-active{background:var(--op-gradient);border-color:transparent;color:#fff}
.op-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:14px}
.op-table th,.op-table td{border-bottom:1px solid var(--op-line);padding:11px 10px;text-align:start}
.op-table th{color:var(--op-muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.op-bars{display:flex;justify-content:center;gap:5px;padding:14px 0}
.op-bars span{width:8px;height:8px;border-radius:50%;background:var(--op-accent-1);animation:op-bounce .9s infinite}
.op-bars span:nth-child(2){animation-delay:.12s}.op-bars span:nth-child(3){animation-delay:.24s}
.op-bars span:nth-child(4){animation-delay:.36s}.op-bars span:nth-child(5){animation-delay:.48s}
@keyframes op-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}
.op-alert{border-radius:12px;padding:14px 18px;font-size:13.5px;margin-bottom:20px}
.op-alert--ok{background:#eef8f1;color:#22694a}
.op-alert--bad{background:#fdefec;color:#a4462f}
.op-map{margin-top:22px;border-radius:var(--op-radius-sm);overflow:hidden}
.op-map iframe{width:100%;border:0;min-height:280px}

/* inline "remove" link used inside the price rows */
.op-link{color:var(--op-accent-2);font-size:11.5px;text-decoration:underline;padding:0;margin-inline-start:6px}

/* ----------------------------------------------------------- 14. lightbox */
.op-lightbox{
  position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  background:rgba(20,16,22,.9);padding:24px;
}
.op-lightbox.is-open{display:flex}
.op-lightbox__frame{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;max-width:92vw}
.op-lightbox img{max-width:92vw;max-height:86vh;border-radius:12px}
.op-lightbox__frame img{max-height:78vh}
.op-lightbox__caption{margin:0;color:#fff;font-size:13.5px;text-align:center;opacity:.85}
.op-lightbox-close{position:absolute;inset-inline-end:22px;top:16px;font-size:30px;line-height:1;color:#fff}

/* ------------------------------------------------------------ 15. footer */
.op-footer{
  border-top:1px solid var(--op-line);
  background:linear-gradient(180deg, var(--admin-footer-1, #ffffff), var(--admin-footer-2, #f7f6f8));
  padding:26px 46px 30px;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--op-muted);
}
.op-footer__brand{display:flex;align-items:center;gap:14px}
.op-footer__brand img{height:34px;width:auto}
.op-footer__links{display:flex;gap:16px;flex-wrap:wrap}
.op-footer__links a{text-decoration:none}
.op-footer__links a:hover{color:var(--op-accent-2)}
.op-footer__social{display:flex;gap:10px}
.op-footer__social a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--op-line);color:var(--op-ink-soft);
}
.op-footer__social a:hover{border-color:var(--op-accent-1);color:var(--op-accent-2)}

/* ---------------------------------------------------- 16. loading overlay */
.op-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.82);backdrop-filter:blur(3px);
}
.op-overlay.is-active{display:flex}
.op-overlay__panel{text-align:center;max-width:340px;padding:0 20px}
.op-overlay__panel .op-spinner{
  width:42px;height:42px;border-width:3px;margin:0 auto 20px;
  border-color:color-mix(in srgb, var(--op-accent-1) 30%, #fff);border-top-color:var(--op-accent-2);
}
.op-overlay__panel h2{margin:0 0 8px;font-size:18px;font-weight:500}
.op-overlay__panel p{margin:0;color:var(--op-muted);font-size:13.5px;line-height:1.6}
.op-overlay__wait{display:none}
.op-overlay.is-payment .op-overlay__wait{display:block}

/* -------------------------------------------------- 17. orientation guard */
.op-rotate{
  display:none;position:fixed;inset:0;z-index:300;
  align-items:center;justify-content:center;text-align:center;padding:24px;
  background:var(--op-surface);
}
body.op-mobile-landscape .op-rotate{display:flex}
.op-rotate i{font-size:40px;color:var(--op-accent-1);margin-bottom:16px;display:block}
.op-rotate h2{margin:0 0 8px;font-size:20px}
.op-rotate p{margin:0;color:var(--op-muted);font-size:14px}

/* -------------------------------------------------------- 18. responsive */
@media (max-width:1000px){
  .op-schedule{grid-template-columns:minmax(0,1fr)}
  .op-details{grid-template-columns:minmax(0,1fr)}
  .op-aside{position:static}
}
@media (max-width:900px){
  body.op-theme{padding:16px 12px}
  .op-card{border-radius:18px}
  .op-hero{height:340px}
  .op-card[data-step]:not([data-step="home"]) .op-hero{height:118px}
  .op-wordmark{font-size:44px}
  .op-tagline{font-size:16px;margin:16px 0 22px}
  .op-hero__copy{padding:104px 0 0 24px;max-width:82%}
  html[dir="rtl"] .op-hero__copy{padding:104px 24px 0 0}
  .op-hero__media{inset:0 0 0 34%}
  html[dir="rtl"] .op-hero__media{inset:0 34% 0 0}
  .op-burger{inset-inline-start:18px;top:18px;width:40px;height:40px}
  .op-strip{grid-template-columns:1fr;gap:26px;padding:26px 24px 30px}
  .op-contact{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--op-line);padding-top:22px}
  .op-hours{gap:4px}
  .op-hours__name{font-size:12px;margin-bottom:12px}
  .op-hours__time{font-size:12px}
  .op-step,.op-content{padding:28px 24px 32px}
  .op-summary{padding:12px 24px;gap:14px}
  .op-summary__item b{max-width:150px}
  .op-services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-field{grid-template-columns:minmax(0,1fr);gap:6px}
  .op-field__error{grid-column:1;margin-top:-6px}
  .op-branch{flex-wrap:wrap}
  .op-footer{padding:22px 24px}
}
@media (max-width:600px){
  .op-services{grid-template-columns:minmax(0,1fr)}
  /* phones keep two gallery photos per row instead of collapsing to one */
  .op-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .op-hours{gap:2px}
  .op-hours__name{font-size:11px}
  .op-summary__item:nth-of-type(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .op-hero,.op-hero__copy{transition:none}
  .op-step.is-active{animation:none}
  .op-skeleton{animation:none}
}