/* ==========================================================================
   BOOK-DEMO.CSS — page-specific styles only.
   Organized mobile-first; breakpoints layered up through tablet, laptop,
   and desktop, each commented clearly below.
   ========================================================================== */

/* ===================== BASE / MOBILE ===================== */
.demo-intro{ padding:150px 0 40px; max-width:640px; }
.demo-intro h1{ margin:20px 0 18px; }

.demo-layout{ display:grid; gap:44px; padding-bottom:120px; position:relative; overflow:hidden; }

.demo-bg-blob{
  position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none;
  animation:blob-drift 18s ease-in-out infinite alternate;
}
.demo-bg-blob--1{ width:340px; height:340px; background:rgba(92,143,34,0.16); top:-80px; right:-60px; }
.demo-bg-blob--2{ width:260px; height:260px; background:rgba(92,143,34,0.10); bottom:-40px; left:-60px; animation-delay:4s; }
@keyframes blob-drift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(24px,18px) scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .demo-bg-blob{ animation:none; } }

.demo-wizard{
  background:rgba(247,246,241,0.78);
  -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--paper-line);
  border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,0.08), 0 6px 18px rgba(0,0,0,0.04);
  padding:32px 22px 30px;
  position:relative; z-index:1; overflow:hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .demo-wizard{ background:var(--paper); }
}
.site--dark .demo-wizard{
  background:rgba(15,15,10,0.6) !important;
  border-color:rgba(255,255,255,0.08) !important;
  box-shadow:0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(163,255,71,0.04), 0 6px 18px rgba(0,0,0,0.3);
}

.demo-wizard__progress{ margin-bottom:30px; }
.demo-wizard__bar{ height:3px; border-radius:2px; background:var(--paper-line); position:relative; margin-bottom:10px; overflow:hidden; }
.demo-wizard__bar-fill{ position:absolute; left:0; top:0; height:100%; width:11.11%; border-radius:2px; background:var(--green); transition:width .5s var(--ease); box-shadow:0 0 12px rgba(92,143,34,0.5); }
.demo-wizard__count{ font-family:var(--font-label); font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--graphite); }
.site--dark .demo-wizard__bar-fill{ box-shadow:0 0 14px rgba(163,255,71,0.55); }

.demo-steps{ position:relative; min-height:180px; }
.demo-step{ display:none; }
.demo-step.is-active{ display:block; }
.demo-step{ transition:opacity .35s var(--ease), transform .35s var(--ease); }
.demo-step.is-anim-out-fwd{ opacity:0; transform:translateY(-16px); }
.demo-step.is-anim-out-back{ opacity:0; transform:translateY(16px); }
.demo-step.is-anim-in-start-fwd{ opacity:0; transform:translateY(16px); }
.demo-step.is-anim-in-start-back{ opacity:0; transform:translateY(-16px); }

.demo-step__label{ display:block; font-family:var(--font-label); font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--green-deep); margin-bottom:10px; }
.demo-step h2{ font-size:clamp(1.4rem, 1.2rem + 1.4vw, 1.9rem); margin-bottom:26px; max-width:22ch; }

.demo-input{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid var(--paper-line);
  padding:14px 0; font-family:var(--font-display); font-size:1.35rem; color:var(--ink);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.demo-input:focus{ outline:none; border-bottom-color:var(--green-deep); box-shadow:0 1px 0 0 var(--green-deep); }
.demo-input::placeholder{ color:var(--paper-line); font-family:var(--font-body); font-size:1rem; }
.demo-textarea{ min-height:120px; resize:vertical; line-height:1.5; font-family:var(--font-body); font-size:1.05rem; }
.site--dark .demo-input{ color:var(--paper) !important; border-bottom-color:rgba(255,255,255,0.14); }
.site--dark .demo-input:focus{ border-bottom-color:#a3ff47; box-shadow:0 1px 0 0 #a3ff47; }
.site--dark .demo-input::placeholder{ color:rgba(247,246,241,0.28); }

.pill-group{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.pill{
  border-radius:999px;
  padding:12px 20px; border:1px solid var(--paper-line); background:transparent;
  font-family:var(--font-label); font-size:0.86rem; color:var(--ink-soft);
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.pill:hover{ border-color:var(--green); transform:translateY(-1px); }
.pill.is-selected{ background:var(--green-deep); border-color:var(--green-deep); color:var(--paper); transform:translateY(-1px); box-shadow:0 6px 16px rgba(92,143,34,0.25); }
.site--dark .pill{ color:rgba(247,246,241,0.72); border-color:rgba(255,255,255,0.14); }
.site--dark .pill:hover{ border-color:#a3ff47; color:var(--paper); }
.site--dark .pill.is-selected{ background:#a3ff47; border-color:#a3ff47; color:var(--ink); box-shadow:0 6px 18px rgba(163,255,71,0.3); }

.demo-review{ border:1px solid var(--paper-line); border-radius:10px; overflow:hidden; margin:26px 0 30px; }
.demo-review__row{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:16px 18px; border-top:1px solid var(--paper-line); transition:background .2s var(--ease); }
.demo-review__row:first-child{ border-top:none; }
.demo-review__row:hover{ background:rgba(92,143,34,0.05); }
.demo-review__label{ font-family:var(--font-label); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--graphite); flex-shrink:0; }
.demo-review__value{ font-size:0.9rem; color:var(--ink); text-align:right; }
.demo-review__edit{ font-family:var(--font-label); font-size:0.74rem; color:var(--green-deep); flex-shrink:0; margin-left:8px; }
.demo-review__edit:hover{ text-decoration:underline; }
.site--dark .demo-review{ border-color:rgba(255,255,255,0.1); }
.site--dark .demo-review__row{ border-top-color:rgba(255,255,255,0.1); }
.site--dark .demo-review__row:hover{ background:rgba(163,255,71,0.06); }
.site--dark .demo-review__label{ color:rgba(247,246,241,0.5); }
.site--dark .demo-review__value{ color:var(--paper); }
.site--dark .demo-review__edit{ color:#a3ff47; }

.demo-submit{ width:100%; justify-content:center; border-radius:4px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.demo-submit:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(92,143,34,0.25); }

.demo-wizard__nav{ display:flex; justify-content:space-between; align-items:center; margin-top:34px; padding-top:22px; border-top:1px solid var(--paper-line); }
.demo-nav-btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-label); font-size:0.86rem; letter-spacing:0.04em;
  padding:12px 4px; color:var(--ink-soft); transition:color .25s;
}
.demo-nav-btn--back:hover{ color:var(--ink); }
.site--dark .demo-nav-btn--back:hover{ color:var(--paper); }
.demo-nav-btn--next{
  margin-left:auto; padding:13px 26px; border:1px solid var(--ink); color:var(--ink); border-radius:4px;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.demo-nav-btn--next:hover{ background:var(--green-deep); border-color:var(--green-deep); color:var(--paper); transform:translateY(-2px); box-shadow:0 10px 22px rgba(92,143,34,0.22); }
.demo-nav-btn--back{ visibility:hidden; }
.demo-nav-btn--back.is-shown{ visibility:visible; }
.demo-nav-btn--next.is-hidden{ display:none; }
.site--dark .demo-wizard__nav{ border-top-color:rgba(255,255,255,0.1); }
.site--dark .demo-nav-btn{ color:rgba(247,246,241,0.65); }
.site--dark .demo-nav-btn--next{ border-color:rgba(255,255,255,0.35); color:var(--paper); }
.site--dark .demo-nav-btn--next:hover{ background:#a3ff47; border-color:#a3ff47; color:var(--ink); box-shadow:0 10px 24px rgba(163,255,71,0.28); }

.demo-step.is-shake{ animation:demo-shake .4s var(--ease); }
@keyframes demo-shake{
  10%,90%{ transform:translateX(-3px); } 20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-6px); } 40%,60%{ transform:translateX(6px); }
}

/* Success state */
.demo-success{ text-align:center; padding:50px 10px; }
.demo-success__check{ width:56px; height:56px; margin:0 auto 22px; filter:drop-shadow(0 0 0 rgba(92,143,34,0)); }
.demo-success__check circle, .demo-success__check path{ stroke-dasharray:220; stroke-dashoffset:220; }
.demo-success.is-visible .demo-success__check{ animation:success-glow 1.2s var(--ease) .6s both; }
.demo-success.is-visible .demo-success__check circle{ animation:draw-line .8s var(--ease) forwards; }
.demo-success.is-visible .demo-success__check path{ animation:draw-line .5s var(--ease) forwards .7s; }
@keyframes draw-line{ to{ stroke-dashoffset:0; } }
@keyframes success-glow{ 0%{ filter:drop-shadow(0 0 0 rgba(92,143,34,0)); } 60%{ filter:drop-shadow(0 0 14px rgba(92,143,34,0.45)); } 100%{ filter:drop-shadow(0 0 6px rgba(92,143,34,0.2)); } }
.demo-success h2{ margin-bottom:16px; }
.demo-success .lead{ margin-inline:auto; margin-bottom:30px; }
.site--dark .demo-success__check circle{ stroke:#a3ff47; }
.site--dark .demo-success__check path{ stroke:#a3ff47; }
.site--dark .demo-success.is-visible .demo-success__check{ animation-name:success-glow-dark; }
@keyframes success-glow-dark{ 0%{ filter:drop-shadow(0 0 0 rgba(163,255,71,0)); } 60%{ filter:drop-shadow(0 0 16px rgba(163,255,71,0.5)); } 100%{ filter:drop-shadow(0 0 6px rgba(163,255,71,0.22)); } }

/* Sidebar */
.demo-side{ display:flex; flex-direction:column; gap:32px; }
.demo-side__block{ border-top:1px solid var(--paper-line); padding-top:20px; }
.site--dark .demo-side__block{ border-top-color:rgba(255,255,255,0.12); }
.demo-side__block:first-child{ border-top:none; padding-top:0; }
.demo-side__block p{ font-size:0.92rem; color:var(--graphite); line-height:1.6; }
.demo-side__phone{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.3rem; font-weight:600; transition:color .25s var(--ease); }
.demo-side__phone svg{ width:17px; height:17px; color:var(--green); transition:transform .25s var(--ease); }
.demo-side__phone:hover{ color:var(--green-deep); }
.demo-side__phone:hover svg{ transform:scale(1.12); }
.site--dark .demo-side__phone svg{ color:#a3ff47; }
.site--dark .demo-side__phone:hover{ color:#a3ff47; }

/* The whole page is already the booking flow — the persistent Call/Book bar is redundant here */
.page-book-demo .mobile-cta-bar{ display:none; }
@media (max-width:759px){ body.page-book-demo{ padding-bottom:0; } }

/* ===================== TABLET (700px+) ===================== */
@media (min-width:700px){
  .demo-wizard{ padding:48px 52px 44px; }
}

/* ===================== LAPTOP (980px+) ===================== */
@media (min-width:980px){
  .demo-intro{ padding:190px 0 50px; }
  .demo-layout{ grid-template-columns:1.5fr 1fr; gap:70px; align-items:start; }
  .demo-side{ position:sticky; top:120px; padding-top:20px; }
}

/* ===================== DESKTOP (1300px+) ===================== */
@media (min-width:1300px){
  .demo-layout{ gap:100px; }
}