:root{
    --bg:#F2F8FF;
    --surface:#FFFFFF;
    --surface-alt:#EAF1FF;
    --ink:#0A1E33;
    --ink-muted:#54698A;
    --purple-1:#5B3FD1;
    --purple-2:#7C5CFF;
    --lavender:#C9BFFF;
    --blue-1:#17B8CF;
    --blue-2:#4FD8DE;
    --line:#DCE6F5;
    --gold:#FFBE5C;
    --deep:#0C2B52;
    --foam:#F2F8FF;
    --violet:var(--purple-1);
    --violet-2:var(--purple-2);
    --aqua:var(--blue-1);
    --aqua-2:var(--blue-2);
    --gradient-brand: linear-gradient(120deg, var(--purple-1) 0%, var(--purple-2) 50%, var(--blue-1) 100%);
    --shadow-soft: 0 20px 40px -20px rgba(91,63,209,0.35);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Vazirmatn', sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.7;
    overflow-x:hidden;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer; border:none;}
  ul{list-style:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

  /* ---------- Focus visibility ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline:3px solid var(--purple-2);
    outline-offset:3px;
    border-radius:6px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(255, 255, 255, 0.85);
    backdrop-filter:blur(4px);
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 16px rgba(0,0,0,.08);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-mark{width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0;}
  .brand-word{font-size:1.5rem; font-weight:800; letter-spacing:-0.02em;
    background:var(--purple-2); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .nav-links{display:flex; align-items:center; gap:32px;}
  .nav-links a{font-weight:500; color:var(--ink-muted); transition:color .2s;}
  .nav-links a:hover{color:var(--purple-1);}
  .nav-actions{display:flex; align-items:center; gap:16px;}
  .cart-btn{
    position:relative; display:flex; align-items:center; gap:8px;
    background:transparent; padding:11px 20px; border-radius:100px;
    border:1.5px solid var(--line); color:var(--ink);
    font-weight:600; font-size:0.92rem; transition:background .2s, border-color .2s, color .2s;
  }
  .cart-btn:hover{background:var(--surface-alt); border-color:var(--purple-1); color:var(--purple-1);}
  .cart-count{
    position:absolute; top:-6px; right:-6px;
    background:var(--purple-2); color:#fff; font-size:0.7rem; font-weight:700;
    width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  }
  .btn-primary{
  display:flex; align-items:center; gap:8px;
  background:var(--purple-2); color:#fff; padding:11px 24px; border-radius:100px;
  font-weight:600; font-size:0.92rem; box-shadow:var(--shadow-soft);
  transition:transform .2s;
  }
  .btn-primary:hover{transform:translateY(-2px);}

  .btn-primary-phone{
  position: relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:100px;
  padding-bottom:20px ;
  padding-top: 5px;
  font-weight:600;
  font-size:0.92rem;
  color:var(--ink);
  transition:background .2s, color .2s;
}

.btn-primary-phone:hover{
  color:var(--blue-1);
}

  .menu-toggle{display:none; background:none; padding:6px;}
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
    content:''; display:block; width:24px; height:2px; background:var(--ink); position:relative; transition:.2s;
  }
  .menu-toggle span::before{position:absolute; top:-7px;}
  .menu-toggle span::after{position:absolute; top:7px;}

  /* ---------- Hero (exact port of the published artifact) ---------- */
  .hero{
    position:relative; isolation:isolate;
    min-height:92vh;
    background:
      radial-gradient(120% 90% at 85% 8%, rgba(124,92,255,.6), transparent 60%),
      linear-gradient(150deg, var(--ink) 0%, var(--violet) 26%, var(--violet-2) 55%, var(--violet) 78%, var(--aqua) 118%);
    overflow:hidden;
    cursor:default;
    color:#fff;
  }

  /* soft moving glow blobs */
  .hero .glow, .footer .glow{ position:absolute; border-radius:50%; filter:blur(70px); z-index:1; }
  .hero .glow--a, .footer .glow--a{ width:520px; height:520px; background:radial-gradient(circle, rgba(79,216,222,.45), transparent 70%);
    top:-140px; left:-120px; animation: heroFloatSlow 16s ease-in-out infinite; }
  .hero .glow--b, .footer .glow--b{ width:420px; height:420px; background:radial-gradient(circle, rgba(255,190,92,.28), transparent 70%);
    bottom:-100px; right:10%; animation: heroFloatSlow 20s ease-in-out infinite reverse; }
  @keyframes heroFloatSlow{
    0%,100%{ transform: translate(0,0); }
    50%{ transform: translate(30px,-24px); }
  }

  /* rising bubbles */
  .hero .bubbles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
  .hero .bubble, .footer .bubbles .bubble{
    position:absolute; bottom:-40px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.08) 70%);
    animation-name: heroRise; animation-timing-function: ease-in; animation-iteration-count:infinite;
  }
  @keyframes heroRise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    8%{ opacity:.85; }
    90%{ opacity:.5; }
    100%{ transform:translateY(-108vh) translateX(var(--drift,20px)); opacity:0; }
  }

  /* ripple canvas layer, follows cursor */
  .hero #rippleCanvas{ position:absolute; inset:0; z-index:3; pointer-events:none; }

  .hero-inner{
    position:relative; z-index:5;
    max-width:800px; margin:0 auto; padding:130px 48px 100px;
  }

  .hero-copy{ max-width:640px; text-align:right; }
  .hero .eyebrow{
    color:var(--aqua-2); font-weight:600; font-size:15px; margin-bottom:18px;
    display:inline-block;
  }
  .hero .headline{
    color:#fff; font-size:56px; line-height:1.28; font-weight:800; letter-spacing:-.5px;
  }
  .hero .headline .accent{
    background:linear-gradient(90deg, var(--gold), #ffe1a8);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero .sub{
    margin-top:26px; color:rgba(255,255,255,.82); font-size:17px; line-height:1.9; max-width:520px;
  }
  .hero .cta-row{ margin-top:38px; display:flex; gap:16px; }
  .hero .cta-primary{
    background:#fff; color:var(--ink); border:none; padding:16px 30px; border-radius:14px;
    font-family:inherit; font-weight:700; font-size:15px; cursor:pointer;
    box-shadow:0 14px 30px rgba(0,0,0,.25); transition:transform .2s ease;
    display:inline-block;
  }
  .hero .cta-primary:hover{ transform:translateY(-2px); }
  .hero .cta-secondary{
    background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);
    padding:16px 30px; border-radius:14px; font-family:inherit; font-weight:700; font-size:15px; cursor:pointer;
    transition:background .2s ease;
    display:inline-block;
  }
  .hero .cta-secondary:hover{ background:rgba(255,255,255,.1); }

  /* bottom wave divider */
  .hero .wave-divider{ position:absolute; left:0; right:0; bottom:-2px; z-index:4; line-height:0; }
  .hero .wave-divider svg{ width:100%; height:90px; display:block; }
  .hero .wave-divider path{ animation: heroWaveShift 10s ease-in-out infinite alternate; }
  @keyframes heroWaveShift{
    0%{ d: path("M0,40 C240,90 480,0 720,30 C960,60 1200,10 1440,45 L1440,100 L0,100 Z"); }
    100%{ d: path("M0,30 C240,0 480,90 720,50 C960,10 1200,60 1440,25 L1440,100 L0,100 Z"); }
  }

  @media (max-width: 980px){
    .hero-inner{ text-align:center; padding-top:90px; }
    .hero-copy{ text-align:center; margin:0 auto; }
    .hero .headline{ font-size:36px; }
    .hero .stats{ justify-content:center; flex-wrap:wrap; gap:28px; }
    .hero .cta-row{ justify-content:center; flex-wrap:wrap; }
  }

  @media (prefers-reduced-motion: reduce){
    .hero .glow--a, .hero .glow--b, .hero .bubble, .hero .wave-divider path,
    .footer .glow--a, .footer .glow--b, .footer .bubbles .bubble, .footer-wave-top path,
    .category-icon{
      animation:none !important;
    }
  }

  /* ---------- Section shell ---------- */
  section{padding:96px 0;}
  .section-head{
  display:flex;
  flex-direction:column;      /* اضافه شد - زیر هم بچین */
  align-items:center;
  justify-content:center;
  text-align:center;          /* اضافه شد - متن‌های چند خطی هم وسط باشن */
  gap:12px;                   /* فاصله بین ۳ تا متن، به‌جای 24px بزرگ */
  margin-bottom:52px;
  }
  .section-head h2{
    font-size:clamp(1.8rem, 3vw, 2.4rem); font-weight:800; letter-spacing:-0.01em; max-width:20ch;
  }
  .section-head p{color:var(--ink-muted); max-width:42ch; font-size:1.02rem;}
  .section-tag{
    color:var(--purple-1); font-weight:700; font-size:0.95rem; margin-bottom:10px; display:block;
  }

  /* ---------- Store ---------- */
  .store{background:var(--surface);}
  .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .store-search{
    max-width:680px; margin:-28px auto 20px; display:flex; align-items:center; gap:10px;
    padding:7px 8px 7px 7px; background:var(--surface); border:1px solid var(--line);
    border-radius:18px; box-shadow:0 14px 32px -25px rgba(10,30,51,.42); transition:border-color .2s, box-shadow .2s;
  }
  .store-search:focus-within{border-color:var(--purple-2); box-shadow:0 16px 34px -24px rgba(91,63,209,.42);}
  .store-search svg{width:22px; height:22px; flex:0 0 22px; margin-right:9px; color:var(--purple-1);}
  .store-search input{min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); padding:10px 2px; font:inherit; font-size:.94rem;}
  .store-search input::placeholder{color:#7b8ca7;}
  .store-search button{flex:0 0 auto; padding:11px 21px; border-radius:12px; background:var(--purple-2); color:#fff; font-size:.88rem; font-weight:700; transition:transform .2s, background .2s;}
  .store-search button:hover{background:var(--purple-1); transform:translateY(-1px);}
  .store-slider{
    position:relative;
    min-height:430px;
    padding:24px 76px 58px;
    perspective:1450px;
    isolation:isolate;
  }
  .store-slider::before{
    content:'';
    position:absolute;
    inset:42px 12% 44px;
    border-radius:44px;
    background:
      radial-gradient(circle at 18% 24%, rgba(79,216,222,.28), transparent 34%),
      radial-gradient(circle at 78% 72%, rgba(124,92,255,.22), transparent 36%),
      linear-gradient(135deg, rgba(234,241,255,.92), rgba(255,255,255,.62));
    filter:blur(.2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.78), 0 30px 80px rgba(91,63,209,.14);
    animation:storeBackdropBreath 7s ease-in-out infinite alternate;
  }
  .store-slider-viewport{
    position:relative;
    height:360px;
    transform-style:preserve-3d;
    touch-action:pan-y;
  }
  .store-slider-track{
    position:relative;
    width:100%; height:100%;
    transform-style:preserve-3d;
  }
  .category-card{
    position:relative; display:block; border-radius:28px; overflow:hidden; aspect-ratio:3/4;
    transition:box-shadow .25s, transform .25s;
  }
  .store-slide{
    position:absolute;
    top:50%; left:50%;
    width:min(310px, 70vw);
    height:360px;
    aspect-ratio:auto;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, -50%) scale(.72) rotateY(0deg) translateZ(-180px);
    filter:blur(3px) saturate(.75);
    --tilt-x:0deg;
    --tilt-y:0deg;
    will-change:transform, opacity, filter;
    transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .58s ease, filter .58s ease, box-shadow .4s ease;
    box-shadow:0 18px 36px rgba(10,30,51,.14);
  }
  .store-slide::before{
    content:'';
    position:absolute; inset:0; z-index:3;
    pointer-events:none;
    background:linear-gradient(118deg, rgba(255,255,255,.28), transparent 28%, transparent 68%, rgba(255,255,255,.12));
    opacity:.38;
    transition:opacity .58s ease;
  }
  .store-slide.is-active{
    opacity:1;
    z-index:5;
    pointer-events:auto;
    transform:translate(-50%, -50%) scale(1) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(150px);
    filter:none;
    box-shadow:0 38px 82px rgba(91,63,209,.25), 0 12px 26px rgba(10,30,51,.12);
    animation:storeCardFloat 5.5s ease-in-out infinite;
  }
  .store-slide.is-active::before{opacity:.68;}
  .store-slide.is-prev{
    opacity:.64;
    z-index:3;
    pointer-events:auto;
    transform:translate(calc(-50% - 260px), -50%) scale(.82) rotateY(-34deg) translateZ(-60px);
    filter:blur(.8px) saturate(.92);
  }
  .store-slide.is-next{
    opacity:.64;
    z-index:3;
    pointer-events:auto;
    transform:translate(calc(-50% + 260px), -50%) scale(.82) rotateY(34deg) translateZ(-60px);
    filter:blur(.8px) saturate(.92);
  }
  .store-slide.is-far{
    opacity:.2;
    z-index:1;
    transform:translate(-50%, -50%) scale(.66) rotateY(0deg) translateZ(-260px);
  }
  .category-card:hover{box-shadow:var(--shadow-soft);}
  .store-slide:hover{transform:translate(-50%, -53%) scale(1.025) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(165px);}
  .store-slide.is-prev:hover{transform:translate(calc(-50% - 260px), -52%) scale(.84) rotateY(-30deg) translateZ(-45px);}
  .store-slide.is-next:hover{transform:translate(calc(-50% + 260px), -52%) scale(.84) rotateY(30deg) translateZ(-45px);}
  .category-photo-placeholder{
    position:absolute; inset:0;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 74%, #ffffff 26%) 0%, var(--card-accent-2) 100%);
    border:1px solid rgba(255,255,255,.42);
    border-radius:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:28px;
    color:#fff;
  }
  .category-photo-placeholder::before{
    content:'';
    position:absolute; inset:16px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.22);
    background:radial-gradient(circle at 28% 20%, rgba(255,255,255,.34), transparent 26%);
  }
  .category-photo-placeholder::after{
    content:'';
    position:absolute;
    width:150px; height:150px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    bottom:-52px; left:-42px;
  }
  .category-icon{
    position:relative;
    font-size:4.5rem;
    line-height:1;
    filter:drop-shadow(0 16px 18px rgba(10,30,51,.2));
    animation: storeIconFloat 2.8s ease-in-out infinite;
  }
  .category-photo-placeholder strong,
  .category-photo-placeholder small{
    position:relative;
    z-index:1;
  }
  .category-photo-placeholder strong{font-size:1.22rem; font-weight:900;}
  .category-photo-placeholder small{font-size:.9rem; color:rgba(255,255,255,.84);}
  .category-photo-uploaded picture,
  .category-photo-uploaded img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  }
  .category-photo-uploaded::before{background:linear-gradient(180deg, rgba(13,11,37,.1), rgba(13,11,37,.72));}
  .category-label{
    position:absolute; inset:auto 0 0 0; padding:48px 22px 20px;
    background:linear-gradient(to top, rgba(10,30,51,0.92) 0%, rgba(10,30,51,0.48) 62%, rgba(10,30,51,0) 100%);
  }
  .category-label span{font-weight:900; font-size:1.18rem; color:#fff;}
  .store-slider-viewport{cursor:pointer;}
  .store-slider-viewport .store-slide.is-active{cursor:auto;}
  .store-slider-dots{
    position:absolute;
    left:50%; bottom:8px;
    transform:translateX(-50%);
    display:flex; gap:9px; align-items:center; justify-content:center;
    z-index:8;
  }
  .store-slider-dots button{
    width:10px; height:10px;
    border-radius:999px;
    background:var(--lavender);
    transition:width .25s, background .25s, transform .25s;
  }
  .store-slider-dots button.active{
    width:30px;
    background:var(--gradient-brand);
    transform:translateY(-1px);
  }
  @keyframes storeIconFloat{
    0%,100%{transform:translateY(0) rotate(-2deg);}
    50%{transform:translateY(-12px) rotate(3deg);}
  }
  @keyframes storeCardFloat{
    0%,100%{margin-top:0;}
    50%{margin-top:-7px;}
  }
  @keyframes storeBackdropBreath{
    from{transform:scale(.98); opacity:.82;}
    to{transform:scale(1.02); opacity:1;}
  }
  @media (prefers-reduced-motion:reduce){
    .store-slider::before,
    .store-slide.is-active,
    .category-icon{animation:none;}
    .store-slide{transition-duration:.01ms;}
  }

  /* ---------- Booking ---------- */
  .booking{background:var(--surface-alt);}
  .booking-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
  }
  .level-list{display:flex; flex-direction:column; gap:16px; max-width:640px; margin:0 auto;}
  .level-card{
    background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer;
    transition:border-color .2s, box-shadow .2s;
  }
  .level-card:hover{border-color:var(--purple-2);}
  .level-card.active{border-color:var(--purple-1); box-shadow:var(--shadow-soft);}
  .level-main{display:flex; align-items:center; gap:16px; min-width:0; flex:1;}
  .level-main > div{min-width:0;}
  .level-badge{
    width:46px; height:46px; border-radius:50%; background:var(--gradient-brand); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.95rem; flex-shrink:0;
  }
  .level-name{font-weight:700; font-size:1.02rem; overflow-wrap:break-word;}
  .level-time{color:var(--ink-muted); font-size:0.85rem; overflow-wrap:break-word;}
  .level-price{font-weight:800; color:var(--purple-1); white-space:nowrap;}
  .level-view{font-weight:700; font-size:0.9rem; color:var(--purple-1); white-space:nowrap; flex-shrink:0; background:none; padding:0;}
  .level-placement{background:transparent; border:1.5px dashed var(--purple-2);}
  .level-placement:hover{border-color:var(--purple-1);}
  .level-placement.active{box-shadow:none;}
  .level-badge-outline{
    background:transparent; border:1.5px solid var(--purple-1); color:var(--purple-1);
  }

  .booking-form{
    background:var(--surface); border-radius:24px; padding:36px; border:1px solid var(--line);
  }
  .booking-form h3{font-size:1.3rem; font-weight:800; margin-bottom:6px;}
  .booking-form > p{color:var(--ink-muted); font-size:0.92rem; margin-bottom:26px;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:0.88rem; font-weight:600; margin-bottom:7px; color:var(--ink);}
  .field input, .field select{
    width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
    background:var(--bg); font-family:inherit; font-size:0.95rem; color:var(--ink);
  }
  .field input:focus, .field select:focus{border-color:var(--purple-2);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .submit-btn{
    width:100%; background:var(--gradient-brand); color:#fff; padding:14px; border-radius:12px;
    font-weight:700; font-size:1rem; margin-top:6px; box-shadow:var(--shadow-soft);
  }
  .confirm-msg{
    margin-top:16px; padding:14px 16px; border-radius:12px; background:#EAF7EE; color:#276B3A;
    font-size:0.9rem; font-weight:600; display:none;
  }
  .confirm-msg.show{display:block;}

  /* ---------- Features ---------- */
  .features{background:var(--surface);}
  .feature-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;
  }
  .feature-item{text-align:center;}
  .feature-icon{
    width:56px; height:56px; margin:0 auto 18px; border-radius:16px; background:var(--surface-alt);
    display:flex; align-items:center; justify-content:center;
  }
  .feature-icon svg{width:28px; height:28px; stroke:var(--purple-1);}
  .feature-item h4{font-weight:700; font-size:1.02rem; margin-bottom:8px;}
  .feature-item p{color:var(--ink-muted); font-size:0.88rem;}

  /* ---------- Footer: matches hero's deep-sea treatment ---------- */
  footer{
    position:relative; isolation:isolate; overflow:hidden;
    background:linear-gradient(180deg, var(--violet) 0%, var(--deep) 55%, var(--ink) 100%);
    color:rgba(255,255,255,0.78);
    padding:130px 0 28px;
  }
  .footer-wave-top{
    position:absolute; top:0; left:0; right:0; z-index:1; line-height:0;
    transform:translateY(-99%) rotate(180deg); pointer-events:none;
  }
  .footer-wave-top svg{width:100%; height:90px; display:block;}
  .footer-wave-top path{fill:var(--violet); animation:heroWaveShift 10s ease-in-out infinite alternate;}

  .footer .glow--a{ width:340px; height:340px; top:-120px; left:-80px; }
  .footer .glow--b{ width:280px; height:280px; bottom:-80px; right:6%; }

  .wrap.footer-inner{position:relative; z-index:5;}

  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .brand-word{background:linear-gradient(120deg, var(--blue-1), var(--aqua-2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .footer-brand p{margin-top:14px; color:rgba(255,255,255,0.62); font-size:0.9rem; max-width:32ch;}
  footer h5{font-weight:700; color:#fff; margin-bottom:16px; font-size:0.95rem;}
  footer ul li{margin-bottom:10px;}
  footer ul li a{color:rgba(255,255,255,0.62); font-size:0.9rem; transition:color .2s;}
  footer ul li a:hover{color:var(--aqua-2);}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px;
    color:rgba(255,255,255,0.45); font-size:0.85rem;
  }

  /* footer bubbles — static, mirrors the hero's rising bubbles */
  .footer .bubbles{position:absolute; inset:0; z-index:2; pointer-events:none;}
  .footer .bubbles .bubble:nth-child(1){left:6%; width:6px; height:6px; --drift:14px; animation-duration:10s; animation-delay:-1s;}
  .footer .bubbles .bubble:nth-child(2){left:15%; width:9px; height:9px; --drift:-18px; animation-duration:13s; animation-delay:-6s;}
  .footer .bubbles .bubble:nth-child(3){left:24%; width:4px; height:4px; --drift:10px; animation-duration:8s; animation-delay:-3s;}
  .footer .bubbles .bubble:nth-child(4){left:33%; width:7px; height:7px; --drift:-12px; animation-duration:11.5s; animation-delay:-8s;}
  .footer .bubbles .bubble:nth-child(5){left:42%; width:5px; height:5px; --drift:16px; animation-duration:9s; animation-delay:-2s;}
  .footer .bubbles .bubble:nth-child(6){left:52%; width:10px; height:10px; --drift:-20px; animation-duration:14s; animation-delay:-9.5s;}
  .footer .bubbles .bubble:nth-child(7){left:61%; width:5px; height:5px; --drift:12px; animation-duration:9.5s; animation-delay:-4.5s;}
  .footer .bubbles .bubble:nth-child(8){left:70%; width:8px; height:8px; --drift:-14px; animation-duration:12s; animation-delay:-7s;}
  .footer .bubbles .bubble:nth-child(9){left:79%; width:4px; height:4px; --drift:18px; animation-duration:8.5s; animation-delay:-1.5s;}
  .footer .bubbles .bubble:nth-child(10){left:88%; width:7px; height:7px; --drift:-10px; animation-duration:10.5s; animation-delay:-5.5s;}
  .footer .bubbles .bubble:nth-child(11){left:95%; width:5px; height:5px; --drift:14px; animation-duration:9.2s; animation-delay:-3.5s;}
  .footer .bubbles .bubble:nth-child(12){left:48%; width:3px; height:3px; --drift:-8px; animation-duration:7.5s; animation-delay:-6.5s;}


  /* ---------- Responsive ---------- */
  @media (max-width:920px){
    /* کارت اسلایدر از ابتدای قاب شروع شود؛ بدون فرورفتگیِ بالایی در تبلت. */
    .store-slider{padding:0 44px 58px;}
    .store-slider::before{inset:24px 8% 44px;}
    .store-slide.is-prev{transform:translate(calc(-50% - 190px), -50%) scale(.76) rotateY(-34deg) translateZ(-80px);}
    .store-slide.is-next{transform:translate(calc(-50% + 190px), -50%) scale(.76) rotateY(34deg) translateZ(-80px);}
    .store-slide.is-prev:hover{transform:translate(calc(-50% - 190px), -52%) scale(.78) rotateY(-30deg) translateZ(-65px);}
    .store-slide.is-next:hover{transform:translate(calc(-50% + 190px), -52%) scale(.78) rotateY(30deg) translateZ(-65px);}
    .booking-grid{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:repeat(2, 1fr); gap:32px 20px;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
    /* از همین‌جا هدر به منوی همبرگری تبدیل میشه */
    .nav-links{position:absolute; top:100%; right:0; left:0; background:var(--bg);
      flex-direction:column; align-items:stretch; gap:4px; padding:0 24px;
      max-height:0; overflow:hidden; opacity:0; border-bottom:1px solid transparent;
      transition:max-height .3s ease, opacity .2s ease, padding .3s ease; z-index:90;}
    .nav-links.open{max-height:420px; opacity:1; padding:12px 24px 22px; border-bottom-color:var(--line);
      box-shadow:0 16px 24px -18px rgba(10,30,51,0.25);}
    .nav-links a{padding:10px 4px; border-bottom:1px solid var(--line);}
    .menu-toggle{display:block;}
  }
  @media (max-width:640px){
    .section-head{
    align-items:flex-start;   /* راست‌چین کردن آیتم‌ها (چون صفحه RTL هست) */
    text-align:right;       /* متن‌های چند خطی هم راست‌چین شن */
    }
    .wrap{padding:0 16px;}
    .brand-word{font-size:1.25rem;}
    .nav{padding:18px 0;}
    .nav-actions{gap:10px;}
    .cart-btn{padding:11px 14px; font-size:0.95rem;}
    .nav-actions .btn-primary{padding:11px 18px; font-size:0.9rem;}
    .nav-actions .cart-btn span.cart-label{display:none;}
    .nav-actions .cart-btn .cart-icon{display:inline-block;}
    .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{width:26px;}
    .btn-primary .btn-label{display:none;}
    .btn-primary{padding:11px;}
    .store-search{margin:-30px auto 17px; border-radius:15px; gap:6px; padding:6px;}
    .store-search svg{width:20px; height:20px; flex-basis:20px; margin-right:5px;}
    .store-search input{font-size:.82rem; padding:9px 0;}
    .store-search button{padding:10px 13px; font-size:.78rem;}
    /* فضای بالای کارت را در موبایل هم حذف کن. */
    .store-slider{min-height:382px; padding:0 8px 54px;}
    .store-slider::before{inset:18px 0 44px; border-radius:30px;}
    /* کارت فعال با translateZ کمی از قاب بیرون می‌آید؛ مخفی‌بودن overflow
       باعث برش خوردن لبهٔ بالایی آن می‌شد. */
    .store-slider-viewport{height:320px; overflow:visible;}
    .store-slide{width:min(260px, 78vw); height:320px;}
    .store-slide.is-active{transform:translate(-50%, -50%) scale(1) rotateY(0deg) translateZ(80px);}
    .store-slide.is-prev{transform:translate(calc(-50% - 140px), -50%) scale(.7) rotateY(-38deg) translateZ(-110px);}
    .store-slide.is-next{transform:translate(calc(-50% + 140px), -50%) scale(.7) rotateY(38deg) translateZ(-110px);}
    .store-slide.is-far{opacity:0;}
    .store-slide:hover{transform:translate(-50%, -52%) scale(1.01) rotateY(0deg) translateZ(90px);}
    .store-slide.is-prev:hover{transform:translate(calc(-50% - 140px), -51%) scale(.72) rotateY(-34deg) translateZ(-100px);}
    .store-slide.is-next:hover{transform:translate(calc(-50% + 140px), -51%) scale(.72) rotateY(34deg) translateZ(-100px);}
    .store-slider-dots{bottom:15px;}
    .category-icon{font-size:3.8rem;}
    .feature-grid{grid-template-columns:repeat(2, 1fr); gap:32px 20px;}
    .footer-grid{grid-template-columns:1fr;}
    footer{padding-top:90px;}
    section{padding:64px 0;}
  }
  @media (max-width:420px){
    .section-head{
    align-items:flex-start;   /* راست‌چین کردن آیتم‌ها (چون صفحه RTL هست) */
    text-align:right;       /* متن‌های چند خطی هم راست‌چین شن */
    }
    .store-slide{width:min(238px, 82vw);}
    .store-slide.is-prev{opacity:.36; transform:translate(calc(-50% - 112px), -50%) scale(.64) rotateY(-42deg) translateZ(-130px);}
    .store-slide.is-next{opacity:.36; transform:translate(calc(-50% + 112px), -50%) scale(.64) rotateY(42deg) translateZ(-130px);}
  }

/* Django messages */

/* Header nav login/logout buttons */
.nav-login{
  border:1.5px solid var(--line); color:var(--ink); padding:11px 20px; border-radius:100px;
  font-weight:600; font-size:0.95rem; transition:background .2s, border-color .2s;
}
.nav-login:hover{background:var(--surface-alt); border-color:var(--purple-1);}
.nav-logout{
  color:var(--ink-muted); padding:11px 14px; font-weight:600; font-size:0.95rem;
  transition:color .2s;
}
.nav-logout:hover{color:var(--purple-1);}

/*hhh*/
.alert {
  padding: 0.9rem 1.2rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.alert-success {
  background: #e6f7ec;
  color: #1e7d3c;
  border: 1px solid #b7e6c6;
}
.alert-error, .alert-danger {
  background: #fdecea;
  color: #c0392b;
  border: 1px solid #f5c6cb;
}

/* Profile view */
.profile-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
}
.profile-card p {
  margin: 0.5rem 0;
}


/* =====================================================
   کارت‌های رزرو کلاس - فقط برای عرض 640px و کمتر
   ===================================================== */
@media (max-width:640px){

  .level-card{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "main view";
    align-items:center;
    gap:14px;
    padding:18px 16px;
  }

  /* اسم کلاس و توضیحات سمت راست */
  .level-main{
    grid-area:main;
    width:100%;
    min-width:0;
    gap:0;
    text-align:right;
  }

  /* حذف آیکون فقط در موبایل */
  .level-card .level-badge{
    display:none;
  }

  .level-name{
    font-size:0.98rem;
    line-height:1.7;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .level-time{
    font-size:0.82rem;
    line-height:1.8;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  /* رزرو کلاس سمت چپ */
  .level-view{
    grid-area:view;
    justify-self:start;
    font-size:0.86rem;
    white-space:nowrap;
    margin-inline-start:0;
  }
}


/* صفحه‌های خیلی کوچک */
@media (max-width:420px){

  .level-card{
    padding:16px 14px;
    gap:10px;
  }

  .level-name{
    font-size:0.94rem;
  }

  .level-time{
    font-size:0.79rem;
  }

  .level-view{
    font-size:0.82rem;
    justify-self:start;
  }
}