/*
 * Build Your Website wizard styles (inc/enqueue.php loads this only on the
 * Build Your Website page template). Scoped to .ondigital-wizard / .lb-* so it
 * cannot leak into the rest of the theme. Ported from the ondigital/ prototype;
 * plain CSS, no Tailwind compile step. Do not add site-wide selectors here.
 */
/* ====== LIGHTBOX TOKENS (from ONDIGITAL-LIGHTBOX-DASHBOARD-SPEC.md, Part 3) ====== */
:root{
  --lb-canvas:#EEECF9; --lb-canvas-2:#E4E1F6;
  --lb-surface:#FFFFFF; --lb-surface-sunken:#F7F7FC; --lb-surface-tint:#F4F2FE;
  --lb-violet-50:#F4F2FE; --lb-violet-100:#E7E3FD; --lb-violet-200:#CFC7FB;
  --lb-violet-400:#8B7CF6; --lb-violet-600:#5B4BC4; --lb-violet-700:#4F46E5; --lb-violet-900:#6D28D9;
  --lb-positive:#059669; --lb-positive-text:#047857; --lb-positive-bg:#E7F7F0;
  --lb-caution:#B45309; --lb-caution-bg:#FEF3C7;
  --lb-negative:#B91C1C; --lb-negative-bg:#FDE7E7;
  --lb-text:#101828; --lb-text-secondary:#475467; --lb-text-tertiary:#64748B; --lb-text-inverse:#FFFFFF; --lb-text-link:#5B4BC4;
  --lb-line:#E4E7EC; --lb-line-strong:#CDD2DC; --lb-focus:#4F46E5;
  --lb-fs-display:1.875rem; --lb-fs-h1:1.375rem; --lb-fs-h2:1.0625rem; --lb-fs-body:.875rem; --lb-fs-meta:.8125rem; --lb-fs-micro:.75rem;
  --lb-space-1:.25rem; --lb-space-2:.5rem; --lb-space-3:.75rem; --lb-space-4:1rem; --lb-space-5:1.25rem; --lb-space-6:1.5rem; --lb-space-8:2rem;
  --lb-radius-card:14px; --lb-radius-tile:10px; --lb-radius-chip:8px; --lb-radius-pill:999px;
  --lb-shadow-1:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(80,70,150,.06);
  --lb-shadow-2:0 2px 4px rgba(16,24,40,.05), 0 16px 40px rgba(80,70,150,.10);
  --lb-shadow-focus:0 0 0 2px #FFFFFF, 0 0 0 4px var(--lb-focus);
  --lb-dur-fast:120ms; --lb-dur-base:180ms; --lb-dur-slow:260ms;
  --lb-ease:cubic-bezier(.2,.7,.3,1);
  --lb-font-ui:"Inter var","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* ====== SCOPED FOR THEME EMBEDDING ======
   Everything below targets .ondigital-wizard instead of html/body/*, so this
   can live inside an existing WordPress page without leaking into the rest of
   the site. Wrap the whole component's markup in <div class="ondigital-wizard">. */
@media (prefers-reduced-motion: reduce){
  .ondigital-wizard *,.ondigital-wizard *::before,.ondigital-wizard *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important;}
}
.ondigital-wizard, .ondigital-wizard *{box-sizing:border-box;}
.ondigital-wizard{
  font-family:var(--lb-font-ui);
  color:var(--lb-text);
  background:radial-gradient(120% 100% at 20% 0%, var(--lb-canvas) 0%, var(--lb-canvas-2) 100%);
  font-size:var(--lb-fs-body);
  line-height:1.5;
  /* No min-height:100dvh here on purpose, inside a themed page with its own
     header/footer, forcing full-viewport height on this container fights the
     surrounding layout. Let it size to its content instead. Revisit if the
     real theme's page template wants this section to fill the viewport. */
}
.ondigital-wizard a{color:var(--lb-text-link);}
.ondigital-wizard .lb-num{font-variant-numeric:tabular-nums lining-nums;}
/* Prices mix a currency symbol, digits and a Latin or translated unit (for
   example "₪482/mo"). Let each price take its direction from its own first
   strong character so it does not reorder to "mo/₪482" inside an RTL page;
   a translated Hebrew unit still reads right to left. The rail figures keep
   their right alignment in RTL, which plaintext would otherwise flip. */
.ondigital-wizard .lb-num,.ondigital-wizard .lb-swatch__price{unicode-bidi:plaintext;}
.ondigital-wizard:dir(rtl) .lb-stat__value{text-align:right;}
.lb-skip{position:absolute;left:-999px;top:0;background:var(--lb-surface);padding:8px 14px;border-radius:var(--lb-radius-chip);z-index:70;}
.lb-skip:focus{left:8px;top:8px;box-shadow:var(--lb-shadow-focus);}

/* Shell */
.lb-sheet{
  max-width:1440px; margin:0 auto; background:var(--lb-surface);
  /* min-height:100dvh removed, was assuming this owns the full viewport,
     which only holds true standalone. Inside a theme's page it should size to
     its content. If the real page template wants a taller hero feel, set an
     explicit min-height in the theme's stylesheet instead of forcing it here. */
}
@media (min-width:64rem){
  .lb-sheet{ margin-block:var(--lb-space-6); border-radius:var(--lb-radius-card); box-shadow:var(--lb-shadow-2); overflow:hidden; overflow:clip; /* clip, not hidden: hidden makes the sheet a scroll container and silently disables position:sticky on the pricing rail */ }
}

/* App bar */
.lb-appbar{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:var(--lb-space-2) var(--lb-space-4);
  min-height:64px; padding-block:var(--lb-space-2); padding-inline:var(--lb-space-6); background:var(--lb-surface);
  border-block-end:1px solid var(--lb-line);
}
.lb-brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; color:var(--lb-text); font-size:var(--lb-fs-h2);}
.lb-mark{width:30px; height:30px; border-radius:var(--lb-radius-tile); background:linear-gradient(135deg,var(--lb-violet-700),var(--lb-violet-900)); display:grid; place-items:center; color:#fff; font-size:14px;}
.lb-appbar-spacer{flex:1;}
.lb-discount-pill{
  display:flex; align-items:center; gap:8px; background:var(--lb-positive-bg); color:var(--lb-positive-text);
  border-radius:var(--lb-radius-pill); padding:6px 14px; font-size:var(--lb-fs-meta); font-weight:600;
}
.lb-mode-toggle{display:flex; gap:2px; background:var(--lb-surface-sunken); border-radius:var(--lb-radius-pill); padding:3px; margin-inline-start:12px;}
.lb-mode-toggle button{border:none; background:transparent; padding:7px 14px; border-radius:var(--lb-radius-pill); font-size:var(--lb-fs-meta); font-weight:600; color:var(--lb-text-secondary); cursor:pointer; display:flex; align-items:center; gap:6px;}
.lb-mode-toggle button[aria-pressed="true"]{background:var(--lb-surface); color:var(--lb-violet-600); box-shadow:var(--lb-shadow-1);}
.lb-mode-toggle button:focus-visible{outline:none; box-shadow:var(--lb-shadow-focus);}

/* Advanced mode: dense stacked catalog, no tabs, no steps */
.lb-advanced-section{margin-block-end:var(--lb-space-6);}
.lb-advanced-section__title{font-size:var(--lb-fs-h2); font-weight:600; margin:0 0 var(--lb-space-1);}
.lb-advanced-section__sub{font-size:var(--lb-fs-meta); color:var(--lb-text-secondary); margin:0 0 var(--lb-space-4);}

/* Layout: main + rail */
/* minmax(0,1fr), not 1fr: a bare 1fr track has an automatic minimum of its
   content's min-content width, so the step 2+ swatch grids and long unbroken
   labels pushed the page past 320px (WCAG 1.4.10 Reflow). */
.lb-body{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--lb-space-6); padding:var(--lb-space-6);}
@media (max-width:30rem){ .lb-body{padding:var(--lb-space-4);} .lb-card{padding:var(--lb-space-4);} .lb-appbar{padding-inline:var(--lb-space-4);} }
@media (min-width:64rem){
  .lb-body{grid-template-columns:68% 32%; align-items:start;}
}
.lb-rail{display:flex; flex-direction:column; gap:var(--lb-space-5); position:sticky; top:88px;}
/* Below the desktop breakpoint the rail used to be the last grid item, so the
   running total sat below the whole step and was never on screen while the visitor
   chose options. Lift it to the top and keep it as a compact single row that sticks
   under the site header (h-16 = 64px below 64rem). The detail lines and the
   completeness card stay desktop-only. */
@media (max-width:63.99rem){
  .lb-rail{order:-1; top:64px; z-index:9; gap:0; margin-inline:calc(var(--lb-space-4) * -1); margin-block-start:calc(var(--lb-space-4) * -1);}
  .lb-rail .lb-card{border-radius:0; border-inline:0; border-block-start:0; box-shadow:var(--lb-shadow-1); padding-block:var(--lb-space-2); padding-inline:var(--lb-space-4); display:flex; align-items:baseline; justify-content:space-between; gap:var(--lb-space-3);}
  .lb-rail .lb-card .lb-stat__label{margin:0;}
  .lb-rail .lb-card .lb-stat__value{margin:0; font-size:var(--lb-fs-h2);}
  .lb-rail .lb-rail__extra{display:none;}
}

/* Cards */
.lb-card{background:var(--lb-surface); border:1px solid var(--lb-line); border-radius:var(--lb-radius-card); box-shadow:var(--lb-shadow-1); padding:var(--lb-space-6);}
.lb-card__title{font-size:var(--lb-fs-h2); font-weight:600; margin:0 0 var(--lb-space-4); scroll-margin-block:96px;}
/* Step titles take programmatic focus on step change (tabindex="-1"). Show a
   ring for keyboard users, none after a pointer click. */
.lb-card__title:focus{outline:none;}
.lb-card__title:focus-visible{outline:2px solid var(--lb-focus); outline-offset:4px; border-radius:4px;}
.lb-card__label{font-size:var(--lb-fs-meta); color:var(--lb-text-secondary); font-weight:500; margin:0 0 var(--lb-space-2);}

/* Progress pill nav (dot-run inspired: steps as countable pellets) */
.lb-steps{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-block-end:var(--lb-space-6);}
.lb-steps__pellet{width:32px; height:6px; border-radius:var(--lb-radius-pill); background:var(--lb-line-strong);}
.lb-steps__pellet[data-state="done"]{background:var(--lb-positive);}
.lb-steps__pellet[data-state="current"]{background:var(--lb-violet-700);}
.lb-steps__label{font-size:var(--lb-fs-meta); color:var(--lb-text-secondary); margin-inline-start:8px;}

/* Swatch card (the paint-chip pattern) */
.lb-swatchgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(11rem,100%),1fr)); gap:var(--lb-space-4);}
.lb-swatch{
  position:relative; text-align:start; border:1.5px solid var(--lb-line); background:var(--lb-surface-sunken);
  border-radius:var(--lb-radius-tile); padding:var(--lb-space-4); cursor:pointer;
  transition:transform var(--lb-dur-base) var(--lb-ease), border-color var(--lb-dur-base), box-shadow var(--lb-dur-base);
  min-height:44px;
}
.lb-swatch:hover{transform:translateY(-2px); box-shadow:var(--lb-shadow-1);}
.lb-swatch:focus-visible{outline:none; box-shadow:var(--lb-shadow-focus);}
/* Selected state. `aria-pressed` is only valid ARIA on a real button (base
   tiers, catalog items). Non-button swatches (the read-only Foundation tiles
   and the per-page counter rows, whose real controls are the buttons inside)
   carry `data-selected` instead, so they get the same visual treatment without
   asserting an invalid role/state to assistive tech. */
.lb-swatch[aria-pressed="true"],
.lb-swatch[data-selected="true"]{border-color:var(--lb-violet-700); background:var(--lb-violet-50);}
.lb-swatch__icon{width:36px; height:36px; border-radius:var(--lb-radius-chip); background:var(--lb-violet-100); color:var(--lb-violet-700); display:grid; place-items:center; margin-block-end:var(--lb-space-3);}
.lb-swatch[aria-pressed="true"] .lb-swatch__icon,
.lb-swatch[data-selected="true"] .lb-swatch__icon{background:var(--lb-violet-700); color:#fff;}
.lb-swatch__name{font-weight:600; font-size:var(--lb-fs-body); display:block;}
.lb-swatch__price{font-size:var(--lb-fs-meta); color:var(--lb-text-secondary);}
.lb-swatch__note{display:block; margin-top:0.25rem; font-size:var(--lb-fs-meta); color:var(--lb-text-secondary); text-wrap:balance;}
.lb-swatch__check{position:absolute; top:10px; inset-inline-end:10px; width:20px; height:20px; border-radius:50%; background:var(--lb-positive); color:#fff; display:none; align-items:center; justify-content:center; font-size:11px;}
.lb-swatch[aria-pressed="true"] .lb-swatch__check,
.lb-swatch[data-selected="true"] .lb-swatch__check{display:flex;}

/* Counter swatch (per-page quantity items) */
.lb-counter{display:flex; align-items:center; justify-content:space-between; margin-block-start:var(--lb-space-3);}
.lb-counter__btn{width:28px; height:28px; border-radius:50%; border:1px solid var(--lb-line-strong); background:#fff; display:grid; place-items:center; cursor:pointer;}
.lb-counter__btn:focus-visible{outline:none; box-shadow:var(--lb-shadow-focus);}
.lb-counter__val{font-weight:600; min-width:1.5rem; text-align:center;}

/* Category tabs (Add More step) */
.lb-tabs{display:flex; gap:8px; flex-wrap:wrap; background:var(--lb-surface-sunken); border-radius:var(--lb-radius-pill); padding:4px; margin-block-end:var(--lb-space-5);}
.lb-tabs button{border:none; background:transparent; padding:8px 16px; border-radius:var(--lb-radius-pill); font-size:var(--lb-fs-meta); font-weight:500; color:var(--lb-text-secondary); cursor:pointer;}
/* These are toggle buttons in a group, not an APG tabs widget (there is no
   tabpanel to own), so selection is expressed with aria-pressed. */
.lb-tabs button[aria-pressed="true"]{background:var(--lb-surface); color:var(--lb-violet-600); box-shadow:var(--lb-shadow-1); border:1px solid var(--lb-violet-200);}

/* Stat card */
.lb-stat__label{font-size:var(--lb-fs-meta); color:var(--lb-text-secondary); font-weight:500; margin:0;}
.lb-stat__value{font-size:var(--lb-fs-display); font-weight:600; margin:var(--lb-space-2) 0 0;}
.lb-stat__sub{font-size:var(--lb-fs-meta); color:var(--lb-text-tertiary); margin-block-start:4px;}
.lb-stat__delta{display:inline-flex; align-items:center; gap:4px; background:var(--lb-positive-bg); color:var(--lb-positive-text); border-radius:var(--lb-radius-pill); padding:3px 10px; font-size:var(--lb-fs-meta); font-weight:600; margin-block-start:var(--lb-space-3);}

/* Build completeness dot-matrix (density encodes progress) */
.lb-matrix{display:flex; align-items:flex-end; gap:4px; height:56px; margin-block:var(--lb-space-3);}
.lb-matrix__col{width:8px; display:flex; flex-direction:column-reverse; gap:3px;}
.lb-matrix__dot{width:8px; height:8px; border-radius:var(--lb-radius-pill); background:var(--lb-line);}
.lb-matrix__dot[data-on="true"]{background:var(--lb-violet-600);}

/* Site preview mini */
.lb-preview{border:1px solid var(--lb-line); border-radius:var(--lb-radius-tile); overflow:hidden; background:var(--lb-surface-sunken);}
.lb-preview__bar{height:10px; background:var(--lb-line-strong); border-radius:2px; margin:8px 10px 0;}
.lb-preview__nav{height:14px; margin:8px 10px 0; border-radius:2px; background:var(--lb-line); opacity:0; transition:opacity var(--lb-dur-slow);}
.lb-preview__nav[data-on="true"]{opacity:1; background:var(--lb-violet-200);}
.lb-preview__hero{height:46px; margin:8px 10px 0; border-radius:4px; background:var(--lb-line); opacity:.35;}
.lb-preview__hero[data-on="true"]{background:linear-gradient(135deg,var(--lb-violet-400),var(--lb-violet-700)); opacity:1;}
.lb-preview__blocks{display:flex; gap:6px; margin:8px 10px 0;}
.lb-preview__block{flex:1; height:24px; border-radius:4px; background:var(--lb-line); opacity:.3;}
.lb-preview__block[data-on="true"]{background:var(--lb-violet-100); opacity:1; border:1px solid var(--lb-violet-200);}
.lb-preview__footer{height:16px; margin:8px 10px 10px; border-radius:2px; background:var(--lb-line); opacity:.3;}
.lb-preview__footer[data-on="true"]{background:var(--lb-text); opacity:1;}

/* Buttons */
.lb-btn{display:inline-flex; align-items:center; gap:8px; justify-content:center; min-height:44px; padding:0 20px; border-radius:var(--lb-radius-chip); font-weight:600; font-size:var(--lb-fs-body); border:1px solid transparent; cursor:pointer;}
.lb-btn:focus-visible{outline:none; box-shadow:var(--lb-shadow-focus);}
.lb-btn--primary{background:linear-gradient(135deg,var(--lb-violet-700),var(--lb-violet-900)); color:#fff; box-shadow:var(--lb-shadow-1);}
.lb-btn--primary:hover{transform:translateY(-1px);}
.lb-btn--quiet{background:var(--lb-surface); border-color:var(--lb-line-strong); color:var(--lb-text-secondary);}
.lb-btn--quiet:hover{background:var(--lb-surface-sunken);}
.lb-btn[disabled]{opacity:.45; cursor:not-allowed;}
.lb-actions{display:flex; justify-content:space-between; margin-block-start:var(--lb-space-6);}

/* Toast / milestone */
.lb-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px); opacity:0;
  background:var(--lb-text); color:#fff; padding:12px 20px; border-radius:var(--lb-radius-chip);
  font-size:var(--lb-fs-body); display:flex; align-items:center; gap:10px; box-shadow:var(--lb-shadow-2); z-index:60;
  transition:opacity var(--lb-dur-slow) var(--lb-ease), transform var(--lb-dur-slow) var(--lb-ease);
  pointer-events:none;
}
.lb-toast[data-show="true"]{opacity:1; transform:translateX(-50%) translateY(0);}
.lb-toast i{color:var(--lb-positive);}

.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;}

/* Discount banner */
.lb-discount-banner{
  border:1px solid var(--lb-positive); background:var(--lb-positive-bg); color:var(--lb-positive-text);
  border-radius:var(--lb-radius-tile); padding:var(--lb-space-4) var(--lb-space-5); display:flex; align-items:center; gap:12px; margin-block-end:var(--lb-space-6);
  font-size:var(--lb-fs-meta); font-weight:500;
}
.lb-discount-banner i{font-size:18px;}