@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

:root{
  --bg:#0B0D10; --panel:#101317; --panel2:#0E1013; --border:rgba(255,255,255,.10);
  --text:#F3F1EC; --muted:#9B9690; --muted2:#6E6A63;
  --gold:#C6A15B; --gold-light:#E4C98A;
  --wine:#6E2635; --wine-light:#8C3245;
  --danger:#B4544A; --ok:#4C7A5E; --info:#5B8FB0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Vazirmatn',sans-serif; line-height:1.6; direction:rtl;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:#6E2635; color:#F3F1EC}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.section{padding:96px 0}
.section-alt{background:var(--panel2); border-top:1px solid var(--border)}
h1,h2,h3{margin:0; font-weight:800}
.heading{margin-bottom:40px}
.heading h2{font-size:2.2rem; line-height:1.25}
.heading p{color:var(--muted); max-width:560px; margin:12px 0 0; line-height:1.9}
.heading .rule{margin-top:20px; height:2px; width:64px; background:linear-gradient(to left,var(--gold),transparent)}
.heading.center{text-align:center}
.heading.center p, .heading.center .rule{margin-left:auto; margin-right:auto}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 26px; font-size:15px; border:0; cursor:pointer; font-family:inherit; transition:.25s}
.btn-solid{background:linear-gradient(to left,var(--gold),var(--gold-light)); color:var(--bg); font-weight:600}
.btn-solid:hover{filter:brightness(1.1); transform:translateY(-1px)}
.btn-ghost{background:transparent; border:1px solid rgba(198,161,91,.5); color:var(--gold-light)}
.btn-ghost:hover{background:rgba(198,161,91,.1)}
.btn-danger{border:1px solid rgba(180,84,74,.5); color:var(--danger); background:transparent}
.btn-block{width:100%; justify-content:center}
.btn-sm{padding:8px 14px; font-size:13px}

/* header */
header.site{position:sticky; top:0; z-index:100; background:rgba(11,13,16,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); box-shadow:0 1px 0 0 rgba(110,38,53,.4)}
.header-row{max-width:1180px; margin:0 auto; padding:0 20px; height:72px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.1rem}
.brand .mark{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--wine),var(--bg)); border:1px solid var(--gold)}
nav.main{display:flex; gap:30px}
nav.main a{font-size:.9rem; color:#C7C4BD}
nav.main a:hover{color:var(--gold-light)}
.header-actions{display:flex; align-items:center; gap:12px}
.cart-btn{position:relative; border:1px solid rgba(255,255,255,.15); padding:10px; background:transparent; color:var(--text); cursor:pointer}
.cart-badge{position:absolute; top:-8px; left:-8px; background:var(--gold); color:var(--bg); font-size:10px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.menu-toggle{display:none; background:none; border:0; color:var(--text); font-size:22px; cursor:pointer}
.mobile-menu{display:none; border-top:1px solid var(--border); padding:16px 20px; flex-direction:column; gap:12px}
.mobile-menu.open{display:flex}
@media(max-width:1024px){
  nav.main,.header-actions{display:none}
  .menu-toggle{display:block}
}

/* hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero-bg{position:absolute; inset:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.35}
.hero-fade{position:absolute; inset:0; background:linear-gradient(to top,var(--bg),rgba(11,13,16,.8) 60%,rgba(11,13,16,.4))}
.hero-glow{position:absolute; top:-160px; right:-160px; width:560px; height:560px; border-radius:50%; opacity:.5; background:radial-gradient(circle,rgba(110,38,53,.6),transparent 70%)}
.hero-inner{position:relative; max-width:1180px; margin:0 auto; padding:110px 20px 170px}
.hero-pill{display:inline-block; font-size:.75rem; padding:6px 14px; margin-bottom:22px; color:var(--gold-light); background:rgba(110,38,53,.2); border:1px solid rgba(110,38,53,.55)}
.hero h1{font-size:2.6rem; line-height:1.2; margin-bottom:22px; max-width:640px}
.hero p.lead{color:#B9B5AD; font-size:1.1rem; line-height:1.9; max-width:560px; margin-bottom:34px}
.hero .actions{display:flex; flex-wrap:wrap; gap:14px}
@media(min-width:768px){.hero h1{font-size:3.6rem}}

/* grid helpers */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* cards */
.card{border:1px solid var(--border); padding:28px; position:relative}
.card:hover{border-color:rgba(198,161,91,.5)}
.card .top-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.ribbon{position:absolute; top:0; right:0; font-size:11px; padding:5px 12px; background:var(--wine); color:var(--text)}
.price{color:var(--gold-light); font-weight:700; font-size:1.15rem}
.old-price{color:var(--muted2); text-decoration:line-through; font-size:.8rem}

/* forms */
.field{margin-bottom:0}
.field label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:8px}
.inp{width:100%; background:var(--bg); border:1px solid rgba(255,255,255,.12); color:var(--text); padding:11px 14px; font-size:14px; font-family:inherit}
.inp:focus{outline:2px solid rgba(198,161,91,.6); outline-offset:2px}
textarea.inp{min-height:90px; resize:vertical}
.form-box{background:var(--panel); border:1px solid var(--border); padding:30px}

/* booking slots */
.slots{display:flex; flex-wrap:wrap; gap:8px}
.slot-btn{padding:9px 16px; font-size:.85rem; border:1px solid rgba(255,255,255,.15); background:transparent; color:#C7C4BD; cursor:pointer}
.slot-btn.selected{background:var(--gold); border-color:var(--gold); color:var(--bg)}
.slot-btn.full{color:#5C5954; text-decoration:line-through; cursor:not-allowed}

/* gallery */
.gallery-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.gallery-filters a{padding:7px 16px; font-size:.85rem; border:1px solid rgba(255,255,255,.15); color:#C7C4BD}
.gallery-filters a.active{background:var(--gold); border-color:var(--gold); color:var(--bg)}
.gallery-item{position:relative; aspect-ratio:4/5; overflow:hidden}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item .cap{position:absolute; inset-inline:0; bottom:0; padding:12px; background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}
.gallery-item .cap span{color:var(--gold-light); font-size:.8rem}

/* club levels */
.level-card{border:1px solid var(--border); padding:24px; text-align:center}
.level-card.vip{border-color:var(--gold); background:linear-gradient(160deg,#3A1420,#0E1013 60%)}

/* testimonials */
.stars{display:flex; gap:2px; margin-bottom:14px}
.stars .on{color:var(--gold)}
.stars .off{color:#3A3733}

/* faq */
.faq-item{border:1px solid var(--border); margin-bottom:10px}
.faq-item summary{cursor:pointer; padding:16px 20px; font-size:.9rem; font-weight:500; list-style:none; display:flex; align-items:center; justify-content:space-between}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 20px 18px; color:var(--muted); font-size:.9rem; line-height:1.8; margin:0}

/* status pill */
.pill{font-size:.72rem; padding:4px 12px; border:1px solid; display:inline-block; white-space:nowrap}

/* footer */
footer.site{padding:40px 0; border-top:1px solid rgba(110,38,53,.5)}
.footer-row{display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:space-between}
@media(min-width:768px){.footer-row{flex-direction:row}}
.footer-row small{color:var(--muted2)}

/* دکمه شناور تماس سریع */
.float-call{position:fixed; bottom:22px; left:22px; z-index:200; width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--bg); display:flex;
  align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.4)}
.float-call:hover{filter:brightness(1.08)}
.admin-link{font-size:.75rem; color:#5C5954; display:flex; align-items:center; gap:5px}
.admin-link:hover{color:var(--gold)}

/* flash messages */
.flash{max-width:1180px; margin:16px auto 0; padding:0 20px}
.flash .box{border:1px solid; padding:12px 18px; font-size:.9rem; display:flex; align-items:center; gap:8px}
.flash .success{border-color:rgba(76,122,94,.6); color:#8FCBA6; background:rgba(76,122,94,.1)}
.flash .error{border-color:rgba(180,84,74,.6); color:#E39289; background:rgba(180,84,74,.1)}

/* dashboard */
.stat-card{border:1px solid var(--border); padding:22px}
.stat-card .val{font-size:1.6rem; font-weight:700}
.stat-card .lbl{color:var(--muted); font-size:.8rem; margin-top:6px}

/* side tabs */
.panel-layout{display:grid; grid-template-columns:1fr; gap:30px}
@media(min-width:768px){.panel-layout{grid-template-columns:210px 1fr}}
.side-tabs{display:flex; gap:6px; overflow-x:auto}
@media(min-width:768px){.side-tabs{flex-direction:column}}
.side-tabs a{padding:11px 16px; font-size:.88rem; color:var(--muted); white-space:nowrap}
.side-tabs a.active{background:rgba(198,161,91,.1); color:var(--gold-light); border-right:2px solid var(--gold)}

table.admin-table{width:100%; border-collapse:collapse; font-size:.85rem}
table.admin-table th,table.admin-table td{border:1px solid var(--border); padding:10px 12px; text-align:right}
table.admin-table th{color:var(--muted); font-weight:500}

.row-actions{display:flex; gap:6px; flex-wrap:wrap}

.cart-drawer-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:150}
.cart-drawer{position:fixed; top:0; bottom:0; left:0; width:100%; max-width:420px; background:var(--panel); border-left:1px solid var(--border); z-index:151; padding:26px; overflow-y:auto}
.cart-line{display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:12px}
.qty-ctrl{display:flex; align-items:center; gap:10px}
.qty-ctrl button{background:none; border:1px solid rgba(255,255,255,.2); width:26px; height:26px; color:var(--text); cursor:pointer}

/* ===========================================================
 *  باشگاه الماسی / کارت VIP — نشان‌ها
 * =========================================================== */
.diamond-badge{color:#8FD9E8; font-weight:700}
.vip-badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; font-size:.72rem; font-weight:700;
  color:#241804; border-radius:3px;
  background-image:linear-gradient(90deg,#C6A15B,#F5E3B3,#C6A15B);
  background-size:220% 100%;
  animation:shimmer 2.8s linear infinite;
}
.vip-card{background:linear-gradient(160deg,#241019,var(--panel) 65%)}

/* ===========================================================
 *  جلوه‌های ویژه: حباب‌های کف (الهام از کارواش)
 * =========================================================== */
.foam-layer{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1}
.bubble{
  position:absolute; bottom:-40px; border-radius:50%;
  background-image:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 76%);
  opacity:0; animation-name:bubble-rise; animation-timing-function:linear; animation-iteration-count:infinite;
  will-change:transform, opacity;
}
@keyframes bubble-rise{
  0%{ transform:translate(0,0) scale(.8); opacity:0; }
  12%{ opacity:.6; }
  88%{ opacity:.3; }
  100%{ transform:translate(var(--drift,20px),-640px) scale(1); opacity:0; }
}

.hero-wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(100deg,transparent 30%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 55%, transparent 70%);
  background-size:240% 100%; background-repeat:no-repeat;
  animation:wash-sweep 7s ease-in-out infinite;
}
@keyframes wash-sweep{
  0%{ background-position:150% 0; }
  50%{ background-position:-50% 0; }
  100%{ background-position:150% 0; }
}
.hero-glow{z-index:0}
.hero-bg{z-index:0}
.hero-inner{z-index:2}

/* ریپل کلیک روی دکمه‌ها */
.btn{position:relative; overflow:hidden}
.ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,.55); animation:ripple-anim .6s ease-out forwards;
}
@keyframes ripple-anim{ to{ transform:scale(3); opacity:0; } }

@keyframes shimmer{ to{ background-position:-220% 0; } }

/* احترام به کاربرانی که حرکت را کاهش می‌دهند */
@media (prefers-reduced-motion: reduce){
  .bubble, .hero-wash, .vip-badge, .ripple{ animation:none !important; }
  .bubble{ display:none !important; }
}