:root{
    --brand:#ec1e79;
    --brand-100:#ffe6f1;
    --ink:#1f2a37;
    --muted:#5b6470;
    --line:#e8edf2;
    --panel:#ffffff;
    --radius:18px;
    --shadow:0 14px 40px rgba(17,17,26,.08);
    --ok:#0ea5e9;
    --warn:#f59e0b;
    --danger:#ef4444;
    --success:#10b981;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fafafb;line-height:1.6}

  /* Hero */
  .hero{
    background:
      radial-gradient(80% 120% at 20% 0%, rgba(236,30,121,.10), transparent 60%),
      var(--brand-100);
    padding: clamp(32px, 7vw, 90px) 20px 36px;
    border-bottom:1px solid var(--line);
  }
  .wrap{max-width:1200px;margin:0 auto;padding:0}
  .title{font-size:clamp(34px,4.8vw,60px);margin:0 0 6px;font-weight:700;letter-spacing:.3px}
  .subtitle{color:var(--muted);margin:0;max-width:62ch}
  .hero-cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
  .tag{background:#fff;border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-weight:600;color:#6b7280}

  /* Layout */
  .grid{display:grid;gap:28px;margin:32px auto 80px}
  @media(min-width:1024px){
    .grid{grid-template-columns: 1.15fr .85fr;gap:36px;align-items:start}
  }

  /* Card */
  .card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);overflow:hidden
  }
  .card-head{
    display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)
  }
  .card-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:.2px}
  .hint{margin-left:auto;font-size:12px;color:#6b7280}

  /* Left visual */
  .media-hero{
    position:relative;border-radius:16px;overflow:hidden;background:#fff;aspect-ratio:4/3;
    box-shadow:var(--shadow);border:1px solid var(--line);isolation:isolate;
  }
  .media-hero .layer{position:absolute; inset:0; width:100%; height:100%;}
  .art-layer{
    display:grid; place-items:center;
    background:conic-gradient(from 210deg at 10% 10%, #fff 0 45deg, #fff0 45deg),
               radial-gradient(120% 90% at 0% 0%, rgba(236,30,121,.08), transparent 60%),
               #fff;
    animation: artShow .9s ease-out both, artFloat 6s ease-in-out infinite; z-index:2;
  }
  .art{width:min(540px,82%); height:auto; filter:drop-shadow(0 18px 30px rgba(236,30,121,.15));}
  .photo-layer{z-index:1; opacity:0; transform:scale(1.02);
    animation: photoReveal 1.1s .9s ease-out both, photoFloat 9s 1.1s ease-in-out infinite;}
  .photo-layer img{width:100%;height:100%;object-fit:cover;display:block}
  .media-controls{display:flex;gap:10px;margin-top:10px;align-items:center}
  .mini-btn{border:1px solid var(--line); background:#fff; padding:8px 12px; border-radius:999px;font-weight:700; cursor:pointer;}
  .mini-btn:hover{border-color:#d3dae2}
  .mini-note{color:#6b7280;font-size:12px}

  /* Keyframes */
  @keyframes artShow{from{opacity:0; transform:translateY(8px) scale(.98)} 70%{opacity:1} to{opacity:0; transform:translateY(-8px) scale(1)}}
  @keyframes artFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
  @keyframes photoReveal{to{opacity:1; transform:scale(1)}}
  @keyframes photoFloat{0%,100%{transform:scale(1)} 50%{transform:scale(1.012)}}

  @media (prefers-reduced-motion: reduce){
    .art-layer,.photo-layer{animation:none}
    .photo-layer{opacity:1; transform:none}
  }

  /* Services */
  .service-list{padding:12px 10px}
  .svc{display:grid; grid-template-columns:72px 42px 1fr 90px; align-items:center; gap:12px; padding:12px 12px; border-radius:12px;}
  .svc + .svc{border-top:1px dashed #d9e0e7}
  .svc .price{order:1; justify-self:start; font-weight:700; color:var(--ink)}
  .svc input[type="checkbox"]{order:2}
  .svc .name{order:3; font-weight:700}
  .svc .duration{order:4; justify-self:end; white-space:nowrap; color:#6b7280}
  .svc input[type="checkbox"]{
    appearance:none; width:18px; height:18px; border-radius:4px; border:2px solid #cfd6de; background:#fff; display:grid; place-items:center;
    outline:none; cursor:pointer; transition:border-color .15s, background-color .15s, box-shadow .15s;
  }
  .svc input[type="checkbox"]::after{content:""; width:10px;height:10px;border-radius:2px;background:#fff;transform:scale(0);transition:transform .15s}
  .svc input[type="checkbox"]:hover{border-color:#aab4c0}
  .svc input[type="checkbox"]:checked{background:var(--brand); border-color:var(--brand); box-shadow:inset 0 0 0 4px #fff;}
  .svc input[type="checkbox"]:checked::after{transform:scale(1)}
  @media(max-width:700px){
    .svc{ grid-template-columns:72px 36px 1fr; gap:10px; }
    .svc .duration{grid-column:1 / -1; justify-self:start; color:#6b7280}
  }

  /* Booking widget */
  .booking{position:relative}
  @media(min-width:1024px){ .booking{position:sticky;top:18px} }
  .booking-body{padding:16px}

  /* Steps + progress */
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line)}
  .step-badge{display:flex;align-items:center;justify-content:center;height:30px;border-radius:10px;border:1px solid var(--line);font-weight:600;font-size:13px;color:#6b7280}
  .step-badge.active{background:var(--brand);border-color:var(--brand);color:#fff}
  .step-badge.done{background:#f0f9ff;border-color:#bae6fd;color:#0369a1}
  .progress{height:8px;background:#eef1f5;border-radius:999px;margin:10px 16px 0;overflow:hidden}
  .progress > span{display:block;height:100%;width:0;background:var(--brand);transition:width .25s ease}

  /* Time slots */
  .slots{display:grid;grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));gap:8px;}
  .slot{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:700;line-height:1;text-align:center;}
  .slot:hover{border-color:#d3dae2}
  .slot[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .slot[disabled]{opacity:.45;cursor:not-allowed}

  /* Fields */
  .field{display:grid;gap:6px;margin-bottom:12px}
  .field label{font-size:13px;font-weight:600;color:#4b5563}
  .field input,.field select,.field textarea{border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:640px){.two{grid-template-columns:1fr}}

  /* Summary */
  .summary{background:#fcfcfd;border:1px dashed #e6eaf0;border-radius:14px;padding:12px;margin-top:14px}
  .sum-row{display:flex;justify-content:space-between;gap:10px;margin:6px 0}
  .sum-row.total{font-weight:800}

  /* CTA */
  .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:12px;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;border:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s, box-shadow .2s;width:100%;justify-content:center}
  .btn[disabled]{opacity:.6;cursor:not-allowed}
  .btn:hover{transform:translateY(-1px)}
  .legal{font-size:12px;color:#6b7280;margin-top:8px}
  .ok{color:var(--success);font-weight:700}
  
  
  
  /* =========================
   MOBILE FIX (Services only)
   Paste at END of file
========================= */
@media (max-width: 700px){

  /* stop side padding that can cause squish */
  .service-list{ padding: 10px 10px; }

  /* Force a stable grid:
     col1 = price (+was/off)
     col2 = checkbox
     col3 = name + duration
  */
  .svc{
    display: grid;
    grid-template-columns: 88px 26px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;

    padding: 12px 12px;
  }

  /* Price */
  .svc .price{
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
  }

  /* Checkbox centered vertically across both rows */
  .svc input[type="checkbox"]{
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    align-self: center;
    justify-self: center;
  }

  /* Service name */
  .svc .name{
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 1.2;
    overflow-wrap: anywhere; /* prevents overflow */
  }

  /* Duration goes under name (no full-width jump) */
  .svc .duration{
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    white-space: nowrap;
    font-size: 13px;
    color: #6b7280;
  }

  /* If your markup includes discount elements, keep them tidy on mobile */
  .svc .was,
  .svc .off{
    grid-column: 1;
  }
  .svc .was{
    grid-row: 2;
    font-size: 12px;
    opacity: .65;
    white-space: nowrap;
  }
  .svc .off{
    grid-row: 1;
    justify-self: end;
    align-self: start;
    margin-top: -6px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  .svc{
    grid-template-columns: 84px 24px 1fr;
    padding: 11px 10px;
  }
  .svc .price{ font-size: 15px; }
  .svc .name{ font-size: 14px; }
}

/* =========================
   MOBILE FIX – Card Header
   Title + Hint vertical
========================= */
@media (max-width: 700px){

  .card-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .card-head h2{
    font-size: 18px;
    line-height: 1.25;
  }

  .card-head .hint{
    margin-left: 0;          /* remove push-right */
    font-size: 13px;
    color: #6b7280;
  }
  .hint {
    margin-left: initial;
    font-size: 12px;
    color: #6b7280;
}

.steps {
    flex-direction: column!important;
    display: flex!important;
}

.ast-container, .ast-container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0!important;
    padding-right: 0!important;
}

}