/* ============================================================
   Glass button system — shared across page9 / page10 / page11 / page12.

   Structure injected into every themed button by assets/glass-theme.js
   (no extra wrapper element around the button anymore — that wrapper was
   the root cause of several layout bugs: square selection corners, broken
   flex `order` on the style-picker squares, absolutely-positioned buttons
   losing their position, unequal-width sibling buttons):
     <button class="glass-btn ...">
       <span class="layer-base"></span>       layer 1: centre-opaque -> edge-transparent fill (+ colour tint)
       <span class="layer-edge"></span>       layer 2: glass "kromka" rim highlight/shadow
       <span class="layer-highlight"></span>  layer 3: flowing violet/blue/green holographic wash
       <span class="label">...</span>         layer 4: original text/content
     </button>

   Colour tint channels (all 0..1, set as inline custom properties per button):
     --wsg-blue    boy theme            rgb(103,155,251)
     --wsg-pink    girl theme           rgb(249,168,212)
     --wsg-green   technical buttons    rgb(134,239,172)
     --wsg-purple  save/apply button    rgb(183,148,246)
     --wsg-dark    darkening (combined with --wsg-green for technical buttons)

   --wsg-accent (a plain hex colour, not 0..1) drives the hover / selected
   border + text colour for that same button — set alongside the tint above.
   ============================================================ */

/* Site-wide white text outline for contrast against the animated pattern
   backdrop. */
body{
  -webkit-text-stroke:1px #fff;
  paint-order:stroke fill;
}
button, input, select, textarea{
  -webkit-text-stroke:inherit;
  paint-order:inherit;
}

/* Site-wide field focus colour: green while the person is filling something
   in normally; red only once a required field has actually failed
   validation (an .is-invalid class the form's own submit-time check adds —
   never the browser's native red "required" outline, which forms below
   suppress with novalidate so this is the only red a person ever sees). */
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-control:hover:focus,
.form-control.is-invalid:focus,
.form-control:hover{
  outline:none !important;
  border-color:#4caf7d !important;
  box-shadow:none !important;
}
input.is-invalid, textarea.is-invalid, select.is-invalid,
input.is-invalid:focus, textarea.is-invalid:focus, select.is-invalid:focus,
.form-control.is-invalid, .form-control.is-invalid:hover{
  border-color:#e05a5a !important;
}
/* Browsers (and Bootstrap, via bootstrap.min.css) apply their own red
   :invalid styling to any empty required field the instant it renders —
   before the person has even touched it, and regardless of the .is-invalid
   class above. That's the "red first, then green on focus" flash. Neutralise
   just the native red decoration (outline/shadow) without touching
   border-color, so each field's own resting-state border (set separately,
   and it varies form to form) still shows through untouched. Red only ever
   appears through .is-invalid, set by each form's own submit-time check. */
input:invalid, textarea:invalid, select:invalid,
input:invalid:focus, textarea:invalid:focus, select:invalid:focus,
.form-control:invalid, .form-control:invalid:focus, .form-control:invalid:hover{
  outline:none !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
}
/* Safari specifically can paint its own native chrome (a reddish glow) on
   text fields using -webkit- prefixed rendering that the rules above don't
   reach. Turning off the native appearance entirely removes that chrome for
   every state, not just :invalid, so only the CSS above ever decides the
   border colour. */
input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  -webkit-appearance:none;
  appearance:none;
}

/* Every button on the site (real <button> elements plus the anchor/div
   elements styled as buttons) gets the same 50%-opacity drop shadow, no
   exceptions. */
button,
.glass-btn,
.wsg-restart-btn,
.wsg-nav-plus,
.wsg-nav-icon,
.wsg-footer-toggle,
.wsg-footer-home-btn,
.lcm-option,
.lcm-apply{
  box-shadow:0 .5rem 1.4rem rgba(84,84,92,.5);
}

/* Explicit exceptions to the rule above — these particular buttons stay flat. */
.faq-question,
.story-toggle,
.voices-toggle,
.lcm-close{
  box-shadow:none;
}

.glass-btn{
  position:relative;
  box-sizing:border-box;
  background-color:transparent !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.925) !important;
  color:#33333d !important;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1rem 2.4rem rgba(30,20,50,.16) !important;
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.glass-btn:hover,
.glass-btn.is-selected{
  transform:translateY(-2px);
  border-color:var(--wsg-accent, #679bfb) !important;
  color:var(--wsg-accent, #679bfb) !important;
  box-shadow:
    0 1rem 2.4rem rgba(30,20,50,.16),
    0 0 3px 1px rgba(255,255,255,.7375) !important;
}
.glass-btn.is-selected{ transform:translateY(0); }
.glass-btn:active{ transform:translateY(0); }
.glass-btn.is-disabled{ opacity:.35; pointer-events:none; }

.glass-btn .layer-photo{
  position:absolute; inset:0; border-radius:inherit;
  background-image: var(--wsg-photo-url);
  background-size:cover;
  background-position:center;
  pointer-events:none;
  z-index:0;
}
.glass-btn .layer-base{
  position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(ellipse 78% 88% at 50% 50%, rgba(103,155,251,var(--wsg-blue,0)) 0%, rgba(103,155,251,0) 75%),
    radial-gradient(ellipse 78% 88% at 50% 50%, rgba(249,168,212,var(--wsg-pink,0)) 0%, rgba(249,168,212,0) 75%),
    radial-gradient(ellipse 78% 88% at 50% 50%, rgba(134,239,172,var(--wsg-green,0)) 0%, rgba(134,239,172,0) 75%),
    radial-gradient(ellipse 78% 88% at 50% 50%, rgba(183,148,246,var(--wsg-purple,0)) 0%, rgba(183,148,246,0) 75%),
    radial-gradient(ellipse 78% 88% at 50% 50%, rgba(0,0,0,var(--wsg-dark,0)) 0%, rgba(0,0,0,0) 75%),
    radial-gradient(ellipse 82% 90% at 50% 50%, rgba(255,255,255,.49) 0%, rgba(255,255,255,0) 85%);
  pointer-events:none;
  z-index:0;
}
.glass-btn .layer-edge{
  position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(ellipse 92% 94% at 50% 50%,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,.55) 82%,
      rgba(255,255,255,.595) 92%,
      rgba(20,20,35,.1) 100%);
  pointer-events:none;
  z-index:0;
}
.glass-btn .layer-highlight{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,
    rgba(186,168,247,.27) 0%,
    rgba(168,199,250,.24) 30%,
    rgba(163,231,201,.22) 60%,
    rgba(186,168,247,.22) 85%,
    rgba(168,199,250,.2) 100%);
  background-size:220% 220%;
  background-position:35% 35%;
  filter:blur(4px);
  pointer-events:none;
  z-index:0;
}
@keyframes wsgHighlightDrift{
  0%{ background-position:var(--wsg-hl-from, 0% 0%); }
  50%{ background-position:var(--wsg-hl-to, 100% 100%); }
  100%{ background-position:var(--wsg-hl-from, 0% 0%); }
}
.glass-btn .label{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
/* Complex content (package cards, payment buttons with their own multi-line layout) —
   don't force flex-centering, just let the original markup's own layout keep working. */
.glass-btn.glass-btn-freeform .label{
  display:block;
  width:100%; height:100%;
}

/* Colour-only swatch buttons for the "любимый цвет" picker on page11 — same glass recipe,
   just filled with the swatch's own real colour instead of a theme tint. Selected/hover
   state gets a matching ring since a border-colour change wouldn't read well against
   a circle that's already filled with its own colour. */
.glass-swatch{
  position:relative;
  width:3.2rem; height:3.2rem;
  border-radius:50%;
  box-sizing:border-box;
  background-color:transparent;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.glass-swatch.glass-btn{
  border:.5px solid #2a2a2e !important;
  box-shadow:
    0 .6rem 1.4rem rgba(30,20,50,.32),
    inset 0 -.35rem .55rem rgba(0,0,0,.28),
    inset 0 .28rem .5rem rgba(255,255,255,.6625) !important;
}
.glass-swatch::before{
  content:"";
  position:absolute; left:14%; top:12%; width:36%; height:26%;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.925), rgba(255,255,255,0) 70%);
  pointer-events:none; z-index:2;
  filter:blur(.5px);
}
.glass-swatch.glass-btn:hover,
.glass-swatch.glass-btn.is-selected{
  transform:translateY(-2px);
  box-shadow:
    0 .6rem 1.4rem rgba(30,20,50,.32),
    inset 0 -.35rem .55rem rgba(0,0,0,.28),
    inset 0 .28rem .5rem rgba(255,255,255,.6625),
    0 0 0 2px #679bfb, 0 0 3px 1px rgba(255,255,255,.7375) !important;
}
.glass-swatch.is-selected{ transform:translateY(0); }
.glass-swatch .layer-base{
  position:absolute; inset:0; border-radius:inherit;
  background:var(--wsg-swatch-color, #ccc);
  opacity:1;
  pointer-events:none;
}
.glass-swatch .layer-edge{
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse 92% 92% at 50% 50%,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 55%,
    rgba(255,255,255,.415) 85%, rgba(255,255,255,.46) 92%, rgba(20,20,35,.18) 100%);
  pointer-events:none;
}

/* ============================================================
   Animated pastel background — same recipe as the design test page,
   just mixed 30% toward white so it reads as a calmer backdrop behind
   real content instead of a demo showcase.
   ============================================================ */
.wsg-bg-anim{
  background-color:transparent !important;
  background-image:linear-gradient(120deg,#fff4fa,#f3f7ff,#f6f3ff,#effcf7,#fffaf3) !important;
  background-size:400% 400% !important;
  background-position:35% 50%;
  position:relative;
}
@keyframes wsgGradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.wsg-blob{
  position:fixed;
  border-radius:50%;
  filter:blur(24px);
  opacity:.45;
  pointer-events:none;
  z-index:0;
}
.wsg-blob-a{ width:26rem; height:26rem; background:#ffeaf4; top:-6rem; left:-6rem; animation:wsgDriftA 23.4s ease-in-out infinite; }
.wsg-blob-b{ width:22rem; height:22rem; background:#e4f1ff; top:10%; right:-8rem; animation:wsgDriftB 28.8s ease-in-out infinite; }
.wsg-blob-c{ width:24rem; height:24rem; background:#f2edff; bottom:-8rem; left:12%; animation:wsgDriftC 25.2s ease-in-out infinite; }
.wsg-blob-d{ width:20rem; height:20rem; background:#ebf9f2; bottom:5%; right:10%; animation:wsgDriftA 30.6s ease-in-out infinite reverse; }
@keyframes wsgDriftA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(3rem,4rem); } }
@keyframes wsgDriftB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-4rem,3rem); } }
@keyframes wsgDriftC{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(2rem,-3rem); } }

/* ============================================================
   Footer — shared across page9 / page10 / page11 / page12.
   ============================================================ */
.wsg-footer{
  position:relative; z-index:1;
  margin-top:4rem;
  padding:0 1.5rem 3rem;
}
.wsg-footer-inner{
  max-width:64rem; margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem;
  background:rgba(255,255,255,.5125);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:1.75rem;
  padding:2.5rem 2rem;
  box-shadow:0 1rem 3rem rgba(30,20,50,.08);
}
.wsg-footer-col h4{
  font-size:1.05rem; font-weight:800; margin:0 0 1rem; color:#33333d;
  font-family:'Balsamiq Sans', 'Comic Sans MS', sans-serif;
}
.wsg-footer-col a{
  display:block; margin-bottom:.6rem; color:#5c5c68; text-decoration:none;
  font-size:1.05rem; font-family:'Balsamiq Sans', 'Comic Sans MS', sans-serif;
  transition:color .2s;
}
.wsg-footer-col a:hover{ color:#679bfb; }
@media (max-width:760px){
  .wsg-footer-inner{ grid-template-columns:repeat(2, 1fr); }
}

/* ============================================================
   Top navbar — page8 only for now (glass style), rest of the
   "old" site still uses its original menu until we redesign it too.
   ============================================================ */
.wsg-navbar{
  position:relative; z-index:2;
  padding:1.5rem 1.5rem 0;
}
.wsg-navbar-inner{
  max-width:74rem; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background:rgba(255,255,255,.5125);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  padding:.7rem 1rem .7rem 1.5rem;
  box-shadow:0 1rem 2.4rem rgba(30,20,50,.08);
}
.wsg-navbar-brand img{ height:1.8rem; display:block; }
.wsg-navbar-links{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.wsg-navbar-links a{
  text-decoration:none; color:#5c5c68; font-weight:600; font-size:1.15rem;
  font-family:'Balsamiq Sans', 'Comic Sans MS', sans-serif;
  transition:color .2s;
}
.wsg-navbar-links a:hover{ color:#679bfb; }
.wsg-navbar-cta{
  padding:.65rem 1.4rem; font-size:1.34rem; font-weight:700;
  font-family:'Balsamiq Sans', 'Comic Sans MS', sans-serif;
  text-decoration:none; border-radius:999px; white-space:nowrap;
}
.wsg-restart-wrap{ text-align:center; margin-top:2rem; }
.wsg-restart-btn{
  display:inline-block; text-decoration:none;
  padding:1rem 2.4rem; font-size:1.34rem; font-weight:700;
  font-family:'Balsamiq Sans', 'Comic Sans MS', sans-serif;
  border-radius:999px;
}

/* ============================================================
   "Расскажите о ребёнке" hero — page9 top block, rebuilt on the new
   glass engine. No image slot yet (added once real artwork is supplied) —
   sits on the shared animated parallax background/blobs.
   ============================================================ */
.wsg-hero{
  position:relative; z-index:1;
  padding:3rem 1.5rem 0;
  background-color:transparent !important;
}
.wsg-hero-card{
  max-width:44rem; margin:0 auto; text-align:center;
  background:rgba(255,255,255,.5125);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:1.75rem;
  padding:2.5rem 2rem;
  box-shadow:0 1rem 3rem rgba(30,20,50,.08);
}
.wsg-hero-title{
  font-size:2.1rem; font-weight:800; margin:0 0 1rem; color:#33333d;
  font-family:'Balsamiq Sans', 'Comic Sans MS', sans-serif;
  }
.wsg-hero-subtitle{
  font-size:1.05rem; color:#5c5c68; margin:0; line-height:1.6;
  font-family:'Balsamiq Sans', 'Comic Sans MS', sans-serif;
}

/* ============================================================
   Decorative book covers — page8 / page9 only. Sit above the animated
   gradient/blobs, below all real content. Positioned relative to the page
   itself (not the viewport) so they scroll away naturally with the content,
   like they're actually lying on the page. Slide in once (top group on
   load, bottom group on first scroll-to-bottom), settle at a slight
   random tilt, like they were just tossed onto a table.
   ============================================================ */
.wsg-book-layer{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:1; pointer-events:none; overflow:hidden;
}
.wsg-book{
  position:absolute;
  width:23.75rem; height:23.75rem;
  object-fit:contain;
  filter:drop-shadow(0 .5rem .6rem rgba(20,15,35,.55));
  opacity:0;
  transform-origin:center;
  transition:transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity .8s ease;
}
.wsg-book.wsg-book-settled{
  /* transform transition removed once the entrance slide-in finishes, so the
     ongoing scroll-parallax updates apply instantly instead of lagging behind
     a ~1.4s transition on every scroll frame. */
  transition:opacity .8s ease;
}
.wsg-book-top{
  top:-12.5rem;
  transform:translate(-50%, -160%) rotate(0deg);
}
.wsg-book-top.is-visible{
  opacity:1;
  transform:translate(-50%, 0) rotate(var(--wsg-book-rot, 0deg));
}
.wsg-book-bottom{
  bottom:-12.5rem;
  transform:translate(-50%, 160%) rotate(0deg);
}
.wsg-book-bottom.is-visible{
  opacity:1;
  transform:translate(-50%, 0) rotate(var(--wsg-book-rot, 0deg));
}
@media (max-width:700px){
  .wsg-book{ width:15rem; height:15rem; }
  .wsg-book-top{ top:-8rem; }
  .wsg-book-bottom{ bottom:-8rem; }
}

/* Dynamically-added "tell us about [relative]" card on page9 — needed its own
   glass background, it previously had none at all. */

/* ============================================================
   Pattern layer — sits between the animated gradient and the colour
   blobs. Tiled, slowly drifting, and framed: fully visible within 10% of
   any edge, fades out from 10% to 20%, and is completely invisible in the
   centre (beyond 20% from every edge) so it never competes with content.
   ============================================================ */
.wsg-pattern-layer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('images/bg-pattern.webp');
  background-repeat:repeat;
  background-size:560px 560px;
  opacity:.55;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 10%, transparent 20%, transparent 100%),
    linear-gradient(to top, #000 0%, #000 10%, transparent 20%, transparent 100%),
    linear-gradient(to right, #000 0%, #000 10%, transparent 20%, transparent 100%),
    linear-gradient(to left, #000 0%, #000 10%, transparent 20%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 10%, transparent 20%, transparent 100%),
    linear-gradient(to top, #000 0%, #000 10%, transparent 20%, transparent 100%),
    linear-gradient(to right, #000 0%, #000 10%, transparent 20%, transparent 100%),
    linear-gradient(to left, #000 0%, #000 10%, transparent 20%, transparent 100%);
}

/* ============================================================
   Responsive compact navbar + footer — narrow screens only.
   Desktop (.wsg-navbar-left/.wsg-navbar-right, .wsg-footer-inner) is
   untouched above the breakpoint; below it, these compact versions
   (built by assets/glass-theme.js from the existing desktop links)
   take over instead.
   ============================================================ */
.wsg-navbar-compact{ display:none; }
.wsg-footer-compact{ display:none; }
.wsg-footer-accordion-list{ display:none; }

/* Compact navbar/footer are toggled by JS (assets/glass-theme.js) based on
   whether the normal desktop content actually fits in one row — not a fixed
   viewport-width breakpoint. See checkNavbarFit()/checkFooterFit(). */
.wsg-navbar.is-compact .wsg-navbar-left,
.wsg-navbar.is-compact .wsg-navbar-right{ display:none !important; }
.wsg-navbar.is-compact .wsg-navbar-inner{ justify-content:center; }
.wsg-navbar.is-compact .wsg-navbar-compact{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:.5rem;
}
.wsg-navbar-compact-group{ display:flex; align-items:center; gap:.6rem; }
.wsg-nav-icon{
  width:2.4rem; height:2.4rem; border-radius:.85rem; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8875);
  color:#54545c; text-decoration:none;
}
.wsg-nav-icon svg{ width:1.15rem; height:1.15rem; }
.wsg-nav-plus{
  flex:0 0 auto; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  padding:.65rem 1.4rem;
  background:#679bfb; color:#fff; font-size:1.34rem; font-weight:700; line-height:1;
  text-decoration:none; white-space:nowrap;
}

.wsg-footer.is-compact .wsg-footer-inner{ display:none; }
.wsg-footer.is-compact .wsg-footer-compact{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  padding:1.75rem 1.5rem;
}
.wsg-footer-home-btn{
  width:2.75rem; height:2.75rem; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.775); border:1px solid rgba(255,255,255,.8875);
  color:#54545c; text-decoration:none;
  transition:opacity .2s, transform .2s;
}
.wsg-footer-home-btn.is-hidden{ opacity:0; pointer-events:none; transform:scale(.7); width:0; margin:0; overflow:hidden; }
.wsg-footer-toggle{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 3.4rem; border-radius:999px;
  background:rgba(255,255,255,.775); border:1px solid rgba(255,255,255,.8875);
  font-weight:700; font-size:1.34rem; color:#54545c; cursor:pointer;
}
.wsg-footer-toggle .arrow{ font-size:1rem; color:#679bfb; transition:transform .25s ease; }
.wsg-footer-toggle.is-open .arrow{ transform:rotate(180deg); }
.wsg-footer.is-compact .wsg-footer-accordion-list.is-open{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  margin:0 1.5rem 1.75rem;
  padding:1.5rem 1.5rem 1.75rem;
  background:rgba(255,255,255,.775);
  border:1px solid rgba(255,255,255,.9);
  border-radius:1.5rem;
}
.wsg-footer-accordion-list a{ font-size:1.05rem; color:#54545c; text-decoration:none; }


/* ============================================================
   Reload flicker guard: the page stays invisible until glass-theme.js has
   styled the buttons/cards and the pattern + fonts are ready, then fades in
   (no flash of flat pastel cards / missing background). CSS-only fallback
   reveals it after 2.5s even if a script fails.
   ============================================================ */
html.wsg-preload body{ opacity:0; animation:wsgRevealFallback 0s 2.5s forwards; }
html.wsg-ready body{ transition:opacity .3s ease; }
@keyframes wsgRevealFallback{ to{ opacity:1; } }