@font-face {
  font-family: "IRANYekanX VF";
  src: url(IRANYekanXVF.woff2) format("woff2");
    font-display:swap;
}
/* scrollbar size */
::-webkit-scrollbar{
  width:14px;
}
/* ======== BASE ======== */
#splashScreen {
  position: fixed;
  inset: 0;
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 999999;
  animation: fadeOut 1.4s ease forwards;
  animation-delay: 3.8s;
}

/* ======== LIQUID COFFEE BACKGROUND ======== */
.liquid-bg {
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 45% 55%,
    #c27a43 0%,
    #8a5226 18%,
    #532e13 40%,
    #1a0b05 72%,
    #050505 96%
  );
  filter: blur(55px);
  animation: liquidMove 6s infinite ease-in-out;
  opacity: 0.85;
}

@keyframes liquidMove {
  0%   { transform: translate(-15%, -10%) scale(1); }
  35%  { transform: translate(12%, 20%) scale(1.35); }
  65%  { transform: translate(-8%, 12%) scale(1.15); }
  100% { transform: translate(-15%, -10%) scale(1); }
}

/* ======== LOGO SECTION ======== */
.logo-container {
  text-align: center;
  z-index: 5;
  animation: logoAppear 1.6s ease forwards;
  opacity: 0;
  transform: translateY(25px);
}

/* ======== REAL LOGO IMAGE WITH GLOW ======== */
.brand-logo {
  width: 150px;
  filter: drop-shadow(0 0 25px rgba(255, 200, 150, 0.35))
          drop-shadow(0 0 45px rgba(180, 110, 60, 0.45));
  animation: logoGlow 3.3s ease-in-out infinite alternate;
}

@keyframes logoGlow {
  0%   { filter: drop-shadow(0 0 15px rgba(255, 200, 150, 0.2)); }
  100% { filter: drop-shadow(0 0 40px rgba(255, 220, 170, 0.55)); }
}

/* ======== EN TITLE (METALLIC) ======== */
.brand-title {
  margin-top: 18px;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 7px;
  font-family: sans-serif;
  text-transform: uppercase;
  background: linear-gradient(95deg, #ffd8b1, #ffce99, #d89a63, #ffce99);
  background-size: 250%;
  -webkit-background-clip: text;
  color: transparent;
  animation: metallicMove 4s infinite ease-in-out;
}
       .bale-button {
           margin-top:40px;
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            padding: 18px 35px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s ease;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .bale-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, 
                rgba(255, 107, 0, 0.3), 
                rgba(255, 165, 0, 0.3),
                rgba(255, 107, 0, 0.3));
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .bale-button:hover::before {
            opacity: 1;
        }

        .bale-button::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent,
                rgba(255, 255, 255, 0.1),
                transparent
            );
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% {
                transform: translateX(-100%) translateY(-100%) rotate(45deg);
            }
            100% {
                transform: translateX(100%) translateY(100%) rotate(45deg);
            }
        }

        .bale-icon {
            position: relative;
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.6));
            animation: pulse 2s ease-in-out infinite;
            z-index: 1;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.6));
            }
            50% {
                transform: scale(1.1);
                filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.9));
            }
        }

        .bale-text {
            position: relative;
            z-index: 1;
            text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
        }

        .bale-button:hover {
            transform: translateY(-3px);
            border-color: rgba(255, 107, 0, 0.5);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(255, 107, 0, 0.3),
                inset 0 0 20px rgba(255, 107, 0, 0.1);
        }

        .bale-button:hover .bale-icon {
            animation: pulse 1s ease-in-out infinite;
        }

        .bale-button:active {
            transform: translateY(-1px);
        }

        /* Neon glow effect */
        .neon-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120%;
            height: 120%;
            border: 2px solid rgba(255, 107, 0, 0.3);
            border-radius: 50px;
            opacity: 0;
            transition: all 0.4s ease;
        }

        .bale-button:hover .neon-ring {
            opacity: 1;
            width: 130%;
            height: 130%;
        }
@keyframes metallicMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* ========== RESPONSIVE (MOBILE OPTIMIZATION) ========== */
@media (max-width: 480px) {
.wgb-btn
{
    margin-top:10px;
}
  #splashScreen {
    animation-delay: 3.2s; /* کمی کمتر برای سرعت بیشتر موبایل */
  }

  .brand-logo {
    width: 110px; /* کوچکتر برای موبایل */
    margin-bottom: 8px;
  }

  .brand-title {
    font-size: 26px;
    letter-spacing: 4px;
    margin-top: 10px;
  }

  .brand-farsi {
    font-size: 17px;
    margin-top: 6px;
  }

  .brand-slogan {
    font-size: 14px;
    margin-top: 4px;
  }

  .logo-container {
    transform: translateY(10px);
  }

  /* پس‌زمینه مایع برای جلوگیری از لرزش */
  .liquid-bg {
    width: 260%;
    height: 260%;
    filter: blur(60px);
  }
}

/* ======== FARSI NAME ======== */
.brand-farsi {
  margin-top: 8px;
  font-size: 22px;
  color: #f3e9e1;
  opacity: 0.92;
  font-weight: 300;
  letter-spacing: 1px;
}

/* ======== SLOGAN ======== */
.brand-slogan {
  margin-top: 6px;
  font-size: 17px;
  color: #dcd2c9;
  opacity: 0.75;
  font-weight: 200;
  animation: sloganFade 2.6s ease forwards;
}

@keyframes sloganFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0.75; transform: translateY(0); }
}

/* ======== LOGO ENTRY ======== */
@keyframes logoAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======== EXIT FADE ======== */
@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* track (glass coffee background) */
::-webkit-scrollbar-track{
  background: rgba(35,20,10,0.65);
  backdrop-filter: blur(6px);
  border-radius:12px;
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.6),
    inset 0 0 3px rgba(255,200,120,0.15);
}

/* thumb (metal gold coffee style) */
::-webkit-scrollbar-thumb{

  background:
  linear-gradient(
    180deg,
    #3b220f 0%,
    #6b3f12 25%,
    #c79a3b 45%,
    #ffd27a 50%,
    #c79a3b 55%,
    #6b3f12 75%,
    #2a1608 100%
  );

  border-radius:12px;
  border:2px solid rgba(30,15,5,0.8);

  box-shadow:
    inset 0 0 8px rgba(255,215,120,0.6),
    inset 0 2px 2px rgba(255,255,255,0.25),
    0 0 10px rgba(200,150,60,0.5);

  position:relative;
}

/* hover shine */
::-webkit-scrollbar-thumb:hover{

  background:
  linear-gradient(
    180deg,
    #5a3412,
    #d4a94a,
    #fff2c0,
    #d4a94a,
    #7a4a1c
  );

  box-shadow:
    inset 0 0 10px rgba(255,235,170,0.9),
    0 0 12px rgba(255,200,90,0.9);
}

/* active (when dragging / scrolling) */
::-webkit-scrollbar-thumb:active{

  background:
  linear-gradient(
    180deg,
    #8a5a1f,
    #ffd27a,
    #fff4c8,
    #ffd27a,
    #8a5a1f
  );

  box-shadow:
    inset 0 0 14px rgba(255,240,200,1),
    0 0 14px rgba(255,210,120,1);
}

:root {
  --neon-purple: #a855f7;
  --neon-pink: #ec4899;
  --fg-bg: rgba(10, 14, 28, .52);
  --fg-border: rgba(168, 85, 247, .30);
  --fg-text: rgba(255, 255, 255, .92);
  --fg-muted: rgba(255, 255, 255, .72);
  --fg-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  --bg-color: #0b0e14;
  --card-bg: #161b22;
  --primary-gold: #fbbf24;
  --secondary-gold: #d97706;
  --tf2-red: #ef4444;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --success: #22c55e;
  --border-color: #30363d;
}

body {
  font-family: "IRANYekanX VF";
  font-size: 15px;
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  direction: rtl;
}

l-section.height_medium {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1025px) and (max-width: 1380px) {
  .l-section {
    --padding-inline: 2.5rem;
  }
  .wgb-btn
{
    margin-top:10px;
}
}
.tag-filter{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:15px 0 25px;
}

.tag-btn{
padding:6px 12px;
border-radius:20px;
border:1px solid #ffffff22;
background:#ffffff0a;
color:#fff;
font-size:12px;
cursor:pointer;
transition:.2s;
}

.tag-btn:hover{
background:#ffffff22;
}

.tag-btn.active{
background:#ff6b00;
border-color:#ff6b00;
}
.user-type-switch{
display:flex;
gap:10px;
margin-bottom:20px;
}

.user-btn{
padding:8px 16px;
border-radius:30px;
border:1px solid #ffffff20;
background:#ffffff08;
color:#fff;
cursor:pointer;
transition:.25s;
font-size:13px;
}

.user-btn.active{
background:#ff6b00;
border-color:#ff6b00;
}
.status{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
opacity:.9;
}

.status-dot{
width:8px;
height:8px;
border-radius:50%;
animation:pulse 1.6s infinite;
}
.product-info{
display:flex;
flex-direction:column;
gap:6px;
}

.product-desc{
font-size:12px;
opacity:.7;
}

.product-tags{
display:flex;
gap:6px;
flex-wrap:wrap;
}

.tag{
font-size:11px;
padding:3px 8px;
border-radius:20px;
background:#ffffff14;
}
 
.status-ok .status-dot{
background:#00ff9d;
box-shadow:0 0 8px #00ff9d;
}

.status-off .status-dot{
background:#ff4d4d;
box-shadow:0 0 8px #ff4d4d;
}

@keyframes pulse{
0%{transform:scale(1);opacity:1}
50%{transform:scale(1.4);opacity:.6}
100%{transform:scale(1);opacity:1}
}

.l-section {
  position: relative;
  margin: 0 auto;
}

.l-section,
.l-subheader {
  --margin-inline-stretch: min(var(--site-content-width) / 2 + var(--header-width, 0px) / 2 + var(--site-outline-width, 0px) - 50vw, var(--padding-inline) * -1);
  padding-left: var(--padding-inline, 2.5rem);
  padding-right: var(--padding-inline, 2.5rem);
}

* {
  font-feature-settings: 'ss01' on;
    font-family: "IRANYekanX VF";
}

* {
  box-sizing: border-box;
}

section {
  display: block;
  unicode-bidi: isolate;
}

.l-canvas {
  margin: 0 auto;
  width: 100%;
  flex-grow: 1;
  background: var(--color-content-bg-grad);
  color: var(--color-content-text);
}

.wgb-otp-code-wrap.is-hidden {
  display: none;
}

/* === Seller KYC Neon Validation === */
.wgb-req {
  color: rgba(244, 63, 94, .95);
  margin-right: 6px;
  font-weight: 800;
}

.wgb-vfield label {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* label باید flex باشد تا dot کنار متن درست بنشیند */
.wgb-vfield>label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.2;
  margin-bottom: 8px;
  position: relative;
  overflow: visible !important;
  /* مهم: هاله بریده نشود */
}

/* خود نقطه */
.wgb-vdot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  position: relative;
  flex: 0 0 12px;
  background: rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .07);
  z-index: 2;
  /* روی هاله و روی بکگراند بیاید */
}

/* هاله */
.wgb-vdot::after {
  content: "";
  position: absolute;
  inset: -10px;
  /* کمی بزرگتر */
  border-radius: 999px;
  opacity: .9;
  background: radial-gradient(circle, rgba(255, 255, 255, .30), transparent 62%);
  filter: blur(7px);
  animation: wgbPulse 1.6s ease-in-out infinite;
  z-index: -1;
  /* پشت خود نقطه */
  pointer-events: none;
}

/* اگر parent کلی overflow hidden دارد، برای کل فیلد هم بازش کن */
.wgb-vfield {
  overflow: visible !important;
}

@keyframes wgbPulse {

  0%,
  100% {
    transform: scale(.92);
    opacity: .65;
  }

  50% {
    transform: scale(1.10);
    opacity: 1;
  }
}

.wgb-vfield.is-ok .wgb-vdot {
  background: rgba(34, 197, 94, .95);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .16), 0 0 18px rgba(34, 197, 94, .35);
}

.wgb-vfield.is-ok .wgb-vdot::after {
  background: radial-gradient(circle, rgba(34, 197, 94, .35), transparent 60%);
}

.wgb-vfield.is-err .wgb-vdot {
  background: rgba(244, 63, 94, .95);
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .16), 0 0 18px rgba(244, 63, 94, .38);
}

.wgb-vfield.is-err .wgb-vdot::after {
  background: radial-gradient(circle, rgba(244, 63, 94, .35), transparent 60%);
  animation-duration: .95s;
}

.wgb-vfield.is-err input {
  border-color: rgba(244, 63, 94, .55) !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .12) !important;
}

/* === Toast === */
.wgb-toast-host {
  position: fixed;
  z-index: 999999;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.wgb-toast {
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(10, 14, 26, .62);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

.wgb-toast.is-in {
  transform: translateY(0);
  opacity: 1;
}

.wgb-toast.is-out {
  transform: translateY(8px);
  opacity: 0;
}

.wgb-toast__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, .95);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .16), 0 0 18px rgba(59, 130, 246, .35);
}

.wgb-toast.is-warn .wgb-toast__dot {
  background: rgba(245, 158, 11, .95);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .16), 0 0 18px rgba(245, 158, 11, .35);
}

.wgb-toast.is-err .wgb-toast__dot {
  background: rgba(244, 63, 94, .95);
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .16), 0 0 18px rgba(244, 63, 94, .38);
}

.wgb-toast__txt {
  color: rgba(255, 255, 255, .92);
  font-size: 12.5px;
  line-height: 1.55;
}

.wgb-front-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 16px;
  color: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.wgb-tf2-table {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(12, 12, 18, .35);
  backdrop-filter: blur(10px);
}

.wgb-tf2-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.wgb-tf2-row:first-child {
  border-top: 0
}

.wgb-tf2-head {
  font-weight: 700;
  opacity: .9;
  background: rgba(255, 255, 255, .04)
}

.wgb-tf2-col {
  flex: 1
}

.wgb-tf2-col-count {
  text-align: right
}

.wgb-tf2-col-price {
  text-align: center;
  font-weight: 700
}

.wgb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .20);
  font-size: 12px
}

.wgb-pill.is-ok {
    border-color: rgb(191 131 0 / 35%);
    background: rgb(255 209 123 / 14%);
}

.wgb-tf2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 14px
}

.wgb-dot-note {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .85;
  font-size: 12px
}

.wgb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .95);
  box-shadow: 0 0 16px rgba(34, 197, 94, .45)
}

.wgb-chart-wrap {
  height: 260px
}

.wgb-tf2-table {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(12, 12, 18, .35);
  backdrop-filter: blur(10px);
}

.wgb-tf2-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.wgb-tf2-row:first-child {
  border-top: 0
}

.wgb-tf2-head {
  font-weight: 700;
  opacity: .9;
  background: rgba(255, 255, 255, .04)
}

.wgb-tf2-col {
  flex: 1
}

.wgb-tf2-col-count {
  text-align: right
}

.wgb-tf2-col-price {
  text-align: center;
  font-weight: 700
}

.wgb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .20);
  font-size: 12px
}

.wgb-pill.is-ok {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .12)
}

.wgb-tf2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 14px
}

.wgb-dot-note {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .85;
  font-size: 12px
}

.wgb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .95);
  box-shadow: 0 0 16px rgba(34, 197, 94, .45)
}

.wgb-chart-wrap {
  height: 260px
}
.price-tabs{
display:flex;
gap:8px;
margin-bottom:15px;
flex-wrap:wrap;
}
.coffee-lines{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin-top:20px;
}

.coffee-line-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
padding:18px;
border-radius:14px;
transition:0.3s;
}

.coffee-line-card:hover{
transform:translateY(-4px);
border-color:#a855f7;
}

.coffee-line-card h3{
margin:10px 0 8px;
font-size:18px;
}

.coffee-line-card p{
font-size:14px;
opacity:.85;
line-height:1.7;
}

.price-tab{
      font-family: "IRANYekanX VF";
  font-size: 15px;
padding:6px 12px;
border-radius:8px;
border:1px solid #555;
background:#111;
color:#fff;
cursor:pointer;
}

.price-tab.active{
background:radial-gradient(circle,#b07a52,#3b2417);
border-color:radial-gradient(circle,#b07a52,#3b2417);
}

/* استایل کلی ظرف انتخاب */
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  height: 42px !important;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

/* === WGB Glass CTA Button (Gold/TF2) === */
.wgb-cta-row {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.wgb-cta-glass {
    margin-bottom:10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;

  text-decoration: none !important;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);

  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.wgb-cta-glass:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.wgb-cta-glass:active {
  transform: translateY(0);
}

.wgb-cta-glass .wgb-cta-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.95);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 0 18px rgba(34, 197, 94, 0.35);
}

.wgb-cta-glass .wgb-cta-text {
  font-size: 13px;
  letter-spacing: .2px;
}

.wgb-cta-glass .wgb-cta-arrow {
  opacity: .9;
  font-size: 14px;
}

@media (max-width: 520px) {
  .wgb-cta-glass {
    width: 100%;
  }
}

/* حالت فوکوس و باز شده */
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* متن داخل باکس انتخاب */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #374151 !important;
  line-height: 42px !important;
  padding-right: 12px !important;
  text-align: right;
}

/* آیکون فلش سمت چپ */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  left: 8px !important;
  right: auto !important;
}

/* باکس باز شونده (Dropdown) */
.select2-dropdown {
  border: 1px solid #3b82f6 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden;
  z-index: 999999;
}

/* فیلد جستجو داخل دراپ‌دان */
.select2-search--dropdown .select2-search__field {
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 8px !important;
  direction: ltr !important;
}

/* آیتم‌های لیست */
.select2-results__option {
  padding: 10px 12px !important;
  text-align: right;
  font-size: 13px;
}

/* حالت هاور روی آیتم‌ها */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #3b82f6 !important;
  color: #fff !important;
}

/* آیتم انتخاب شده */
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #eff6ff !important;
  color: #1e40af !important;
}

.wgb-ui-subtle {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, .70);
}

.wgb-token-footnote {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .70);
}

/* ===========================
   MODAL (Invoice Popup)
=========================== */
body.wgb-modal-open {
  overflow: hidden;
}

.wgb-modal {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  padding: 24px;
}

.wgb-front-card canvas {
  width: 100% !important;
  height: 260px !important;
  /* یا هرچی می‌خوای */
  display: block;
}

.wgb-price-chart {
  position: relative;
  height: 260px;
}

.wgb-price-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.wgb-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wgb-modal-dialog {
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, .35);
  background: rgba(15, 23, 42, .92);
  box-shadow: 0 20px 80px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
}

.wgb-modal-xl {
  width: min(1100px, 100%);
}

.wgb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.wgb-modal-title {
  font-weight: 900;
  color: #e2e8f0;
}

.wgb-modal-close {
  border: 0;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(148, 163, 184, .18);
  color: #e2e8f0;
  font-size: 20px;
}

.wgb-modal-body {
  padding: 0;
  overflow: auto;
  background: rgba(2, 6, 23, .25);
}

.wgb-invoice-frame {
  width: 100%;
  height: min(74vh, 820px);
  border: 0;
  display: block;
  background: #fff;
}

@media (max-width: 640px) {
  .wgb-modal {
    padding: 14px;
  }

  .wgb-invoice-frame {
    height: 78vh;
  }
}

.wgb-front-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
}

.wgb-front-sub {
  opacity: .8;
  font-size: 13px;
  margin-top: 6px;
}

.wgb-front-price {
  font-size: 26px;
  font-weight: 900;
  margin: 8px 0;
}

.wgb-front-price span {
  font-size: 12px;
  opacity: .75;
}

.wgb-front-form {
  margin-top: 12px;
}

.wgb-front-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px) {
  .wgb-front-grid {
    grid-template-columns: 1fr;
  }
}
.wgb-btn
{
    margin-top:10px;
}
.wgb-front-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wgb-front-field input {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .22);
  color: rgba(255, 255, 255, .92);
  padding: 10px 12px;
  outline: none;
}

.wgb-front-field input:focus {
  border-color: rgba(168, 85, 247, .85);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .18);
}

.wgb-front-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.wgb-front-otp {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}

.wgb-btn {
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(168, 85, 247, .95), rgba(236, 72, 153, .95));
  color: #0b1020;
  font-weight: 900;
}

.wgb-btn-ghost {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .18);
}

.wgb-btn-ok {
  background: linear-gradient(90deg, rgba(16, 185, 129, .95), rgba(59, 130, 246, .95));
  color: #081018;
}

.wgb-front-msg {
  margin-top: 12px;
  font-weight: 700;
}

.wgb-status {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(0, 0, 0, .18);
}

.wgb-status-ok {
  border-color: rgba(16, 185, 129, .35);
}

.wgb-status-no {
  border-color: rgba(239, 68, 68, .35);
}

.wgb-invoice {
  margin-top: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 16px;
}

.wgb-invoice-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.wgb-invoice-title {
  font-size: 16px;
  font-weight: 900;
}

.wgb-invoice-no {
  opacity: .8;
  margin-top: 6px;
}

.wgb-invoice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .wgb-invoice-grid {
    grid-template-columns: 1fr;
  }
}

.wgb-invoice-box {
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 10px;
}

.wgb-invoice-label {
  font-size: 12px;
  opacity: .75;
}

.wgb-invoice-value {
  font-weight: 900;
  margin-top: 6px;
}

.wgb-invoice-table {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}

.wgb-invoice-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;
}

@media (max-width: 900px) {
  .wgb-invoice-row {
    grid-template-columns: 1fr;
  }
}

.wgb-invoice-row>div {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.wgb-invoice-row-head {
  background: rgba(0, 0, 0, .22);
  font-weight: 900;
}

.wgb-invoice-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .18);
  border: 1px dashed rgba(255, 255, 255, .15);
}


/* --- Price Chart Widget (Exchange-like) --- */
.wgb-price-widget {
  padding: 18px 18px 14px;
}

.wgb-pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .10);
}

.wgb-price-now {
  margin-top: 10px;
  margin-bottom: 8px;
}

.wgb-price-now__value {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .96);
}

.wgb-price-now__sub {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}

.wgb-chart-wrap {
  position: relative;
  height: 280px;
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(2, 6, 23, .22);
}

.wgb-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.wgb-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.wgb-mini-stat {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
}

.wgb-mini-stat__label {
  font-size: 11px;
  color: rgba(255, 255, 255, .68);
}

.wgb-mini-stat__value {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(255, 255, 255, .92);
}

.wgb-stat-pos {
  color: rgba(34, 197, 94, .95) !important;
}

.wgb-stat-neg {
  color: rgba(239, 68, 68, .95) !important;
}

@media (max-width: 640px) {
  .wgb-mini-stats {
    grid-template-columns: 1fr;
  }
}

.wgb-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wgb-title-wrap {
  text-align: right;
  flex: 1;
}

.wgb-buy-status {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .88);
}

.wgb-buy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, .2);
}

.wgb-status-on .wgb-buy-dot {
  background: rgba(34, 197, 94, .95);
}

.wgb-status-on {
  border-color: rgba(34, 197, 94, .25);
  background: rgba(34, 197, 94, .08);
}

.wgb-status-off .wgb-buy-dot {
  background: rgba(239, 68, 68, .95);
}

.wgb-status-off {
  border-color: rgba(239, 68, 68, .25);
  background: rgba(239, 68, 68, .08);
}

.wgb-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  margin-inline-end: 6px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

.wgb-icon-pos {
  color: rgba(34, 197, 94, .95);
}

.wgb-icon-neg {
  color: rgba(239, 68, 68, .95);
}

.wgb-range-filter {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.wgb-range-btn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(255, 255, 255, .82);
  font-weight: 900;
  font-size: 12px;
  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.wgb-range-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(56, 189, 248, .25);
}

.wgb-range-btn.is-active {
  background: rgba(56, 189, 248, .14);
  border-color: rgba(56, 189, 248, .30);
  color: rgba(255, 255, 255, .95);
}

/* ============== WGB UI (Minimal Pro) ============== */
.wgb-ui {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(2, 6, 23, .18);
  border-radius: 22px;
  padding: 18px;
  backdrop-filter: blur(10px);
}

.wgb-ui-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wgb-ui-title {
  font-weight: 900;
  font-size: 16px;
  color: rgba(255, 255, 255, .94);
}

.wgb-ui-badge {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .88);
}

.wgb-ui-badge-ok {
  border-color: rgba(34, 197, 94, .22);
  background: rgba(34, 197, 94, .10);
  color: rgba(34, 197, 94, .95);
}

.wgb-ui-badge-warn {
  border-color: rgba(245, 158, 11, .22);
  background: rgba(245, 158, 11, .10);
  color: rgba(245, 158, 11, .95);
}

.wgb-ui-badge-neg {
  border-color: rgba(239, 68, 68, .22);
  background: rgba(239, 68, 68, .10);
  color: rgba(239, 68, 68, .95);
}

.wgb-ui-alert {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .86);
  line-height: 1.9;
  margin-bottom: 14px;
}

.wgb-ui-alert-sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, .70);
}

.wgb-ui-alert-ok {
  border-color: rgba(34, 197, 94, .22);
  background: rgba(34, 197, 94, .08);
}

.wgb-ui-alert-warn {
  border-color: rgba(245, 158, 11, .22);
  background: rgba(245, 158, 11, .08);
}

.wgb-ui-alert-neg {
  border-color: rgba(239, 68, 68, .22);
  background: rgba(239, 68, 68, .08);
}

.wgb-ui-alert-info {
  border-color: rgba(56, 189, 248, .22);
  background: rgba(56, 189, 248, .08);
}

.wgb-ui-note {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(2, 6, 23, .22);
}

.wgb-ui-note__label {
  font-size: 12px;
  font-weight: 900;
  color: rgba(255, 255, 255, .86);
}

.wgb-ui-note__text {
  margin-top: 6px;
  color: rgba(255, 255, 255, .76);
  line-height: 1.9;
  font-size: 13px;
}

.wgb-ui-form {
  margin-top: 8px;
}

.wgb-ui-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wgb-ui-span2 {
  grid-column: 1 / -1;
}

.wgb-ui-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
}

.wgb-ui-hint {
  font-weight: 700;
  font-size: 11px;
  color: rgba(255, 255, 255, .60);
  margin-inline-start: 6px;
}

.wgb-ui-field input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
  outline: none;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.wgb-ui-field input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.wgb-ui-field input:focus {
  border-color: rgba(56, 189, 248, .35);
  background: rgba(56, 189, 248, .08);
  transform: translateY(-1px);
}

.wgb-ui-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.wgb-ui-actions-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
* {
    box-sizing: border-box;
}

* {
    font-feature-settings: 'ss01' on;
}
/* Stats Grid */
.stats-grid {
  display: grid;
  margin: 20px 0px;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  background: rgba(22, 27, 34, 0.1);
  padding: 30px;
  border-radius: 20px;
  margin-top: -40px;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1600px) {
    .l-main .aligncenter {
        max-width:calc(100vw - 5rem)
    }
}

@media (min-width: 1381px) {
    .l-subheader {
        --padding-inline:2.5rem
    }

    .l-section {
        --padding-inline: 2.5rem
    }

    body.usb_preview .hide_on_default {
        opacity: 0.25!important
    }

    .vc_hidden-lg,body:not(.usb_preview) .hide_on_default {
        display: none!important
    }

    .default_align_left {
        text-align: left;
        justify-content: flex-start
    }

    .default_align_right {
        text-align: right;
        justify-content: flex-end
    }

    .default_align_center {
        text-align: center;
        justify-content: center
    }

    .w-hwrapper.default_align_center>* {
        margin-left: calc( var(--hwrapper-gap,1.2rem) / 2 );
        margin-right: calc( var(--hwrapper-gap,1.2rem) / 2 )
    }

    .default_align_justify {
        justify-content: space-between
    }

    .w-hwrapper>.default_align_justify,.default_align_justify>.w-btn {
        width: 100%
    }

    *:not(.w-hwrapper:not(.wrap))>.w-btn-wrapper:not([class*="default_align_none"]):not(.align_none) {
        display: block;
        margin-inline-end:0}
}

@media (min-width: 1025px) and (max-width:1380px) {
    .l-subheader {
        --padding-inline:2.5rem
    }

    .l-section {
        --padding-inline: 2.5rem
    }

    body.usb_preview .hide_on_laptops {
        opacity: 0.25!important
    }

    .vc_hidden-md,body:not(.usb_preview) .hide_on_laptops {
        display: none!important
    }

    .laptops_align_left {
        text-align: left;
        justify-content: flex-start
    }

    .laptops_align_right {
        text-align: right;
        justify-content: flex-end
    }

    .laptops_align_center {
        text-align: center;
        justify-content: center
    }

    .w-hwrapper.laptops_align_center>* {
        margin-left: calc( var(--hwrapper-gap,1.2rem) / 2 );
        margin-right: calc( var(--hwrapper-gap,1.2rem) / 2 )
    }

    .laptops_align_justify {
        justify-content: space-between
    }

    .w-hwrapper>.laptops_align_justify,.laptops_align_justify>.w-btn {
        width: 100%
    }

    *:not(.w-hwrapper:not(.wrap))>.w-btn-wrapper:not([class*="laptops_align_none"]):not(.align_none) {
        display: block;
        margin-inline-end:0}

    .g-cols.via_grid[style*="--laptops-columns-gap"] {
        gap: var(--laptops-columns-gap,3rem)
    }
}

@media (min-width: 601px) and (max-width:1024px) {
    .l-subheader {
        --padding-inline:1rem
    }

    .l-section {
        --padding-inline: 1.5rem
    }

    body.usb_preview .hide_on_tablets {
        opacity: 0.25!important
    }

    .vc_hidden-sm,body:not(.usb_preview) .hide_on_tablets {
        display: none!important
    }

    .tablets_align_left {
        text-align: left;
        justify-content: flex-start
    }

    .tablets_align_right {
        text-align: right;
        justify-content: flex-end
    }

    .tablets_align_center {
        text-align: center;
        justify-content: center
    }

    .w-hwrapper.tablets_align_center>* {
        margin-left: calc( var(--hwrapper-gap,1.2rem) / 2 );
        margin-right: calc( var(--hwrapper-gap,1.2rem) / 2 )
    }

    .tablets_align_justify {
        justify-content: space-between
    }

    .w-hwrapper>.tablets_align_justify,.tablets_align_justify>.w-btn {
        width: 100%
    }

    *:not(.w-hwrapper:not(.wrap))>.w-btn-wrapper:not([class*="tablets_align_none"]):not(.align_none) {
        display: block;
        margin-inline-end:0}

    .g-cols.via_grid[style*="--tablets-columns-gap"] {
        gap: var(--tablets-columns-gap,3rem)
    }
}

@media (max-width: 600px) {
    .l-subheader {
        --padding-inline:1rem
    }

    .l-section {
        --padding-inline: 1rem
    }

    body.usb_preview .hide_on_mobiles {
        opacity: 0.25!important
    }

    .vc_hidden-xs,body:not(.usb_preview) .hide_on_mobiles {
        display: none!important
    }

    .mobiles_align_left {
        text-align: left;
        justify-content: flex-start
    }

    .mobiles_align_right {
        text-align: right;
        justify-content: flex-end
    }

    .mobiles_align_center {
        text-align: center;
        justify-content: center
    }

    .w-hwrapper.mobiles_align_center>* {
        margin-left: calc( var(--hwrapper-gap,1.2rem) / 2 );
        margin-right: calc( var(--hwrapper-gap,1.2rem) / 2 )
    }

    .mobiles_align_justify {
        justify-content: space-between
    }

    .w-hwrapper>.mobiles_align_justify,.mobiles_align_justify>.w-btn {
        width: 100%
    }

    .w-hwrapper.stack_on_mobiles {
        display: block
    }

    .w-hwrapper.stack_on_mobiles>:not(script) {
        display: block;
        margin: 0 0 var(--hwrapper-gap,1.2rem)
    }

    .w-hwrapper.stack_on_mobiles>:last-child {
        margin-bottom: 0
    }

    *:not(.w-hwrapper:not(.wrap))>.w-btn-wrapper:not([class*="mobiles_align_none"]):not(.align_none) {
        display: block;
        margin-inline-end:0}

    .g-cols.via_grid[style*="--mobiles-columns-gap"] {
        gap: var(--mobiles-columns-gap,1.5rem)
    }
}

@media (max-width: 1380px) {
    .g-cols.laptops-cols_1 {
        grid-template-columns:100%
    }

    .g-cols.laptops-cols_1.reversed>div:last-of-type {
        order: -1
    }

    .g-cols.laptops-cols_1.via_grid>.wpb_column.stretched,.g-cols.laptops-cols_1.via_flex.type_boxes>.wpb_column.stretched {
        margin-left: var(--margin-inline-stretch);
        margin-right: var(--margin-inline-stretch)
    }

    .g-cols.laptops-cols_2 {
        grid-template-columns: repeat(2,1fr)
    }

    .g-cols.laptops-cols_3 {
        grid-template-columns: repeat(3,1fr)
    }

    .g-cols.laptops-cols_4 {
        grid-template-columns: repeat(4,1fr)
    }

    .g-cols.laptops-cols_5 {
        grid-template-columns: repeat(5,1fr)
    }

    .g-cols.laptops-cols_6 {
        grid-template-columns: repeat(6,1fr)
    }

    .g-cols.laptops-cols_1-2 {
        grid-template-columns: 1fr 2fr
    }

    .g-cols.laptops-cols_2-1 {
        grid-template-columns: 2fr 1fr
    }

    .g-cols.laptops-cols_2-3 {
        grid-template-columns: 2fr 3fr
    }

    .g-cols.laptops-cols_3-2 {
        grid-template-columns: 3fr 2fr
    }

    .g-cols.laptops-cols_1-3 {
        grid-template-columns: 1fr 3fr
    }

    .g-cols.laptops-cols_3-1 {
        grid-template-columns: 3fr 1fr
    }

    .g-cols.laptops-cols_1-4 {
        grid-template-columns: 1fr 4fr
    }

    .g-cols.laptops-cols_4-1 {
        grid-template-columns: 4fr 1fr
    }

    .g-cols.laptops-cols_1-5 {
        grid-template-columns: 1fr 5fr
    }

    .g-cols.laptops-cols_5-1 {
        grid-template-columns: 5fr 1fr
    }

    .g-cols.laptops-cols_1-2-1 {
        grid-template-columns: 1fr 2fr 1fr
    }

    .g-cols.laptops-cols_1-3-1 {
        grid-template-columns: 1fr 3fr 1fr
    }

    .g-cols.laptops-cols_1-4-1 {
        grid-template-columns: 1fr 4fr 1fr
    }
}

@media (max-width: 1024px) {
    .g-cols.tablets-cols_1 {
        grid-template-columns:100%
    }

    .g-cols.tablets-cols_1.reversed>div:last-of-type {
        order: -1
    }

    .g-cols.tablets-cols_1.via_grid>.wpb_column.stretched,.g-cols.tablets-cols_1.via_flex.type_boxes>.wpb_column.stretched {
        margin-left: var(--margin-inline-stretch);
        margin-right: var(--margin-inline-stretch)
    }

    .g-cols.tablets-cols_2 {
        grid-template-columns: repeat(2,1fr)
    }

    .g-cols.tablets-cols_3 {
        grid-template-columns: repeat(3,1fr)
    }

    .g-cols.tablets-cols_4 {
        grid-template-columns: repeat(4,1fr)
    }

    .g-cols.tablets-cols_5 {
        grid-template-columns: repeat(5,1fr)
    }

    .g-cols.tablets-cols_6 {
        grid-template-columns: repeat(6,1fr)
    }

    .g-cols.tablets-cols_1-2 {
        grid-template-columns: 1fr 2fr
    }

    .g-cols.tablets-cols_2-1 {
        grid-template-columns: 2fr 1fr
    }

    .g-cols.tablets-cols_2-3 {
        grid-template-columns: 2fr 3fr
    }

    .g-cols.tablets-cols_3-2 {
        grid-template-columns: 3fr 2fr
    }

    .g-cols.tablets-cols_1-3 {
        grid-template-columns: 1fr 3fr
    }

    .g-cols.tablets-cols_3-1 {
        grid-template-columns: 3fr 1fr
    }

    .g-cols.tablets-cols_1-4 {
        grid-template-columns: 1fr 4fr
    }

    .g-cols.tablets-cols_4-1 {
        grid-template-columns: 4fr 1fr
    }

    .g-cols.tablets-cols_1-5 {
        grid-template-columns: 1fr 5fr
    }

    .g-cols.tablets-cols_5-1 {
        grid-template-columns: 5fr 1fr
    }

    .g-cols.tablets-cols_1-2-1 {
        grid-template-columns: 1fr 2fr 1fr
    }

    .g-cols.tablets-cols_1-3-1 {
        grid-template-columns: 1fr 3fr 1fr
    }

    .g-cols.tablets-cols_1-4-1 {
        grid-template-columns: 1fr 4fr 1fr
    }
}

@media (max-width: 600px) {
    .g-cols.mobiles-cols_1 {
        grid-template-columns:100%
    }

    .g-cols.mobiles-cols_1.reversed>div:last-of-type {
        order: -1
    }

    .g-cols.mobiles-cols_1.via_grid>.wpb_column.stretched,.g-cols.mobiles-cols_1.via_flex.type_boxes>.wpb_column.stretched {
        margin-left: var(--margin-inline-stretch);
        margin-right: var(--margin-inline-stretch)
    }

    .g-cols.mobiles-cols_2 {
        grid-template-columns: repeat(2,1fr)
    }

    .g-cols.mobiles-cols_3 {
        grid-template-columns: repeat(3,1fr)
    }

    .g-cols.mobiles-cols_4 {
        grid-template-columns: repeat(4,1fr)
    }

    .g-cols.mobiles-cols_5 {
        grid-template-columns: repeat(5,1fr)
    }

    .g-cols.mobiles-cols_6 {
        grid-template-columns: repeat(6,1fr)
    }

    .g-cols.mobiles-cols_1-2 {
        grid-template-columns: 1fr 2fr
    }

    .g-cols.mobiles-cols_2-1 {
        grid-template-columns: 2fr 1fr
    }

    .g-cols.mobiles-cols_2-3 {
        grid-template-columns: 2fr 3fr
    }

    .g-cols.mobiles-cols_3-2 {
        grid-template-columns: 3fr 2fr
    }

    .g-cols.mobiles-cols_1-3 {
        grid-template-columns: 1fr 3fr
    }

    .g-cols.mobiles-cols_3-1 {
        grid-template-columns: 3fr 1fr
    }

    .g-cols.mobiles-cols_1-4 {
        grid-template-columns: 1fr 4fr
    }

    .g-cols.mobiles-cols_4-1 {
        grid-template-columns: 4fr 1fr
    }

    .g-cols.mobiles-cols_1-5 {
        grid-template-columns: 1fr 5fr
    }

    .g-cols.mobiles-cols_5-1 {
        grid-template-columns: 5fr 1fr
    }

    .g-cols.mobiles-cols_1-2-1 {
        grid-template-columns: 1fr 2fr 1fr
    }

    .g-cols.mobiles-cols_1-3-1 {
        grid-template-columns: 1fr 3fr 1fr
    }

    .g-cols.mobiles-cols_1-4-1 {
        grid-template-columns: 1fr 4fr 1fr
    }

    .g-cols:not([style*="--columns-gap"]) {
        gap: 1.5rem
    }
}

@media (max-width: 599px) {
    .l-canvas {
        overflow:hidden
    }

    .g-cols.stacking_default.reversed>div:last-of-type {
        order: -1
    }

    .g-cols.stacking_default.via_flex>div:not([class*="vc_col-xs"]) {
        width: 100%;
        margin: 0 0 1.5rem
    }

    .g-cols.stacking_default.via_grid.mobiles-cols_1 {
        grid-template-columns: 100%
    }

    .g-cols.stacking_default.via_flex.type_boxes>div,.g-cols.stacking_default.via_flex.reversed>div:first-child,.g-cols.stacking_default.via_flex:not(.reversed)>div:last-child,.g-cols.stacking_default.via_flex>div.has_bg_color {
        margin-bottom: 0
    }

    .g-cols.stacking_default.via_flex.type_default>.wpb_column.stretched {
        margin-left: -1rem;
        margin-right: -1rem
    }

    .g-cols.stacking_default.via_grid.mobiles-cols_1>.wpb_column.stretched,.g-cols.stacking_default.via_flex.type_boxes>.wpb_column.stretched {
        margin-left: var(--margin-inline-stretch);
        margin-right: var(--margin-inline-stretch)
    }

    .vc_column-inner.type_sticky>.wpb_wrapper,.vc_column_container.type_sticky>.vc_column-inner {
        top: 0!important
    }
}

@media (min-width: 600px) {
    body:not(.rtl) .l-section.for_sidebar.at_left>div>.l-sidebar,.rtl .l-section.for_sidebar.at_right>div>.l-sidebar {
        order:-1
    }

    .vc_column_container.type_sticky>.vc_column-inner,.vc_column-inner.type_sticky>.wpb_wrapper {
        position: -webkit-sticky;
        position: sticky
    }

    .l-section.type_sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 21;
        transition: top 0.3s cubic-bezier(.78,.13,.15,.86) 0.1s
    }

    .header_hor .l-header.post_fixed.sticky_auto_hide {
        z-index: 22
    }

    .admin-bar .l-section.type_sticky {
        top: 32px
    }

    .l-section.type_sticky>.l-section-h {
        transition: padding-top 0.3s
    }

    .header_hor .l-header.pos_fixed:not(.down)~.l-main .l-section.type_sticky:not(:first-of-type) {
        top: var(--header-sticky-height)
    }

    .admin-bar.header_hor .l-header.pos_fixed:not(.down)~.l-main .l-section.type_sticky:not(:first-of-type) {
        top: calc( var(--header-sticky-height) + 32px )
    }

    .header_hor .l-header.pos_fixed.sticky:not(.down)~.l-main .l-section.type_sticky:first-of-type>.l-section-h {
        padding-top: var(--header-sticky-height)
    }

    .header_hor.headerinpos_bottom .l-header.pos_fixed.sticky:not(.down)~.l-main .l-section.type_sticky:first-of-type>.l-section-h {
        padding-bottom: var(--header-sticky-height)!important
    }
}

@media (max-width: 600px) {
    .w-form-row.for_submit[style*=btn-size-mobiles] .w-btn {
        font-size:var(--btn-size-mobiles)!important
    }
}

/* Mobile */
@media (max-width: 720px){
  .wgb-ui-grid{ grid-template-columns: 1fr; }
  .wgb-ui-actions-2{ grid-template-columns: 1fr; }
}

.stat-item {
  text-align: center;
}

.stat-item .label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.stat-item .value {
  font-weight: bold;
  font-size: 1.1rem;
}

.status-online {
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.pulse {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(34, 197, 94, 0.7);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
}

/* Info Cards */
.cards-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 60px;
}

@media (min-width: 992px) {
  .cards-container {
    grid-template-columns: 1fr 1fr;
  }
}

.trade-card {
  background: var(--card-bg);
  padding: 40px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: border-color 0.3s, transform 0.3s;
}

.trade-card:hover {
  border-color: var(--primary-gold);
  transform: translateY(-5px);
}

.trade-card i.bg-icon {
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 120px;
  opacity: 0.05;
  transform: rotate(15deg);
}

.trade-card h3 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.icon-box {
  width: 45px;
  height: 45px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-gold);
}

.trade-card ul {
  list-style: none;
  margin-bottom: 30px;
}

.trade-card ul li {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.trade-card ul li i {
  color: var(--success);
}

/* Stepper */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 50px;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-item {
  text-align: center;
  position: relative;
}

.step-circle {
  width: 60px;
  height: 60px;
  background: #1f2937;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 24px;
  color: var(--primary-gold);
  border: 2px solid var(--border-color);
}

.step-item h4 {
  margin-bottom: 10px;
}

.step-item p {
  font-size: 12px;
  color: var(--text-muted);
}

/* Buttons (Pro) */
.wgb-btn {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .90);
  padding: 12px 14px;
  border-radius: 18px;
  font-family: "IRANYekanX VF";
  font-weight: 900;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  min-height: 44px;
}

.wgb-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(56, 189, 248, .25);
}

.wgb-btn:active {
  transform: translateY(0);
}

.wgb-btn-primary {
    background: rgb(255 255 255 / 1%);
    border-color: rgb(0 255 30 / 43%);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, .10) inset;

}

.wgb-btn-primary:hover {
  background: rgba(56, 189, 248, .18);
  box-shadow: 0 8px 30px rgba(56, 189, 248, .10);
}

.wgb-btn-ghost {
  background: rgba(255, 255, 255, .06);
}

.wgb-btn-ok {
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .30);
}

.wgb-btn-ok:hover {
  box-shadow: 0 8px 30px rgba(34, 197, 94, .10);
}

/* Support buttons */
.wgb-btn-discord {
  background: rgba(65, 45, 6, 0.18);
  border-color: rgba(93, 55, 32, 0.35);
}

.wgb-btn-telegram {
  background: rgba(34, 158, 217, .16);
  border-color: rgba(34, 158, 217, .35);
}

.wgb-btn-ic {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
}

.wgb-btn-sub {
  font-weight: 700;
  font-size: 11px;
  color: rgba(255, 255, 255, .70);
  margin-inline-start: 6px;
}

/* OTP block */
.wgb-ui-otp {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.wgb-ui-otp .wgb-ui-field {
  flex: 1;
  min-width: 220px;
}

.wgb-ui-msg {
  margin-top: 12px;
  min-height: 18px;
  color: rgba(255, 255, 255, .86);
  font-weight: 800;
  font-size: 12px;
}

.wgb-ui-actions a.wgb-btn {
  display: inline-flex !important;
  text-decoration: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.wgb-ui-actions a.wgb-btn:visited {
  color: rgba(255, 255, 255, .90) !important;
}

.container{
width:100%;
max-width:1380px;
margin-left:auto;
margin-right:auto;
padding-left:10px;
padding-right:10px;
}
.logo
{
    max-width:300px;
}
.herosec{
max-width:1380px;
margin:auto;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
min-height:90vh;
padding:40px 20px;
}



.us_custom_811e4304 {
  background-blend-mode: overlay !important;
  margin-top: 30px !important;
  padding: 15px !important;
  background: rgba(0, 0, 0, 0.69) url(wo-2.jpg) fixed left top / cover !important;
}

/* Mobile */
@media (max-width: 720px) {
  .wgb-ui-grid {
    grid-template-columns: 1fr;
  }

  .wgb-ui-actions-2 {
    grid-template-columns: 1fr;
  }

  .container {
    margin: 0px;
  }
}

.app-nav{
position:fixed;
bottom:25px;
left:50%;
transform:translateX(-50%);
z-index:9999;

width:90%;
max-width:520px;

display:flex;
justify-content:space-around;
gap:4px;

padding:10px;

border-radius:22px;

background:rgba(40,28,20,0.75);
backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,0.06);

box-shadow:
0 10px 40px rgba(0,0,0,0.6),
0 0 25px rgba(120,72,32,0.35);
}

.nav-item{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-decoration:none;
color:#e7ddd6;

font-size:11px;

padding:10px 12px;
border-radius:14px;

transition:.25s;
}

.nav-item i,
.nav-item svg{
font-size:18px;
width:18px;
height:18px;
margin-bottom:4px;
}

.nav-item:hover{
background:rgba(255,255,255,0.06);
color:#fff;
transform:translateY(-2px);
}

.nav-item.active{
background:linear-gradient(135deg,#6b3f1d,#a1622b);
color:#fff;

box-shadow:
0 0 15px rgba(161,98,43,.6),
0 0 25px rgba(107,63,29,.5);
}

.call-btn{
background:#8b5a2b;
color:#fff;
}

.call-btn:hover{
background:#6f451f;
}
.call-popup{

position:fixed;
inset:0;
background:rgba(0,0,0,.55);
backdrop-filter:blur(8px);
display:flex;
align-items:flex-end;
justify-content:center;
opacity:0;
pointer-events:none;
padding:20px;
transition:.35s;

z-index:10000;
}

.call-popup.show{
opacity:1;
pointer-events:auto;
}

.popup-sheet{

position:relative;

width:100%;
max-width:520px;

border-radius:28px 28px 0 0;

padding:28px 24px 30px;

background:rgba(45,30,20,.85);
backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.06);

box-shadow:
0 -20px 60px rgba(0,0,0,.6),
0 0 60px rgba(161,98,43,.35);

transform:translateY(110%);
transition:transform .45s cubic-bezier(.22,1,.36,1);

overflow:hidden;
}

.call-popup.show .popup-sheet{
transform:translateY(0);
}

/* coffee glow */

.popup-sheet::before{

content:"";

position:absolute;
inset:-40%;

background:radial-gradient(circle,
rgba(161,98,43,.45),
transparent 60%);

animation:coffeeGlow 6s linear infinite;

opacity:.35;
}

@keyframes coffeeGlow{

0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}

}

/* handle like ios */

.popup-handle{

width:42px;
height:5px;

background:rgba(255,255,255,.25);

border-radius:10px;

margin:0 auto 18px;
}

/* close */

.popup-close{

position:absolute;
top:18px;
left:18px;

font-size:18px;
cursor:pointer;
opacity:.7;
}

.popup-close:hover{
opacity:1;
}

/* text */

.popup-text{

font-size:14px;
line-height:1.9;

text-align:center;

margin-bottom:22px;

color:#f1e7df;
}

/* buttons */

.popup-buttons{

display:flex;
flex-direction:column;

gap:10px;
}

.popup-btn{

padding:14px;

border-radius:14px;

text-align:center;

text-decoration:none;

font-size:14px;

transition:.25s;
}

/* main call */

.main-call{

background:linear-gradient(135deg,#6b3f1d,#a1622b);

color:#fff;

box-shadow:
0 0 20px rgba(161,98,43,.5);
}

/* pulse animation */

.main-call{

animation:pulseCall 2s infinite;
}

@keyframes pulseCall{

0%{
box-shadow:0 0 0 0 rgba(161,98,43,.7);
}

70%{
box-shadow:0 0 0 14px rgba(161,98,43,0);
}

100%{
box-shadow:0 0 0 0 rgba(161,98,43,0);
}

}

/* sales button */

.sales-call{

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

color:#fff;
}

.sales-call:hover{

background:rgba(255,255,255,.12);

}
.section-head{
text-align:center;
margin-bottom:50px;
}

.section-head h2{
font-size:30px;
margin-bottom:12px;
}

.section-head p{
opacity:.8;
max-width:680px;
margin:auto;
line-height:1.9;
}

.repair-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:22px;
}

.repair-card{

padding:28px;

border-radius:18px;

background:rgba(45,30,20,.65);
backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.06);

transition:.35s;

text-align:center;
}

.repair-card:hover{

transform:translateY(-6px);

box-shadow:
0 10px 35px rgba(0,0,0,.6),
0 0 20px rgba(161,98,43,.35);
}

.repair-icon{

font-size:28px;
margin-bottom:14px;
}

.repair-card h3{
margin-bottom:8px;
font-size:18px;
}

.repair-card p{
font-size:14px;
opacity:.8;
line-height:1.8;
}

.repair-cta{
margin-top:40px;
text-align:center;
}
.site-footer{

margin-top:120px;

padding:60px 0 30px;

background:rgba(25,18,14,.9);

border-top:1px solid rgba(255,255,255,.05);
}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:40px;
}

.footer-col h4{

margin-bottom:16px;

font-size:18px;
}

.footer-col p{

font-size:14px;

line-height:1.9;

opacity:.85;
}

.footer-col ul{

list-style:none;
padding:0;
margin:0;
}

.footer-col li{

margin-bottom:10px;
}

.footer-col a{

text-decoration:none;

color:#e7ddd6;

font-size:14px;

transition:.2s;
}

.footer-col a:hover{

color:#c78b4b;
}

.footer-bottom{

margin-top:40px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.05);

text-align:center;

font-size:13px;

opacity:.7;
}

/* container */
.search-box {
    position: relative;
    margin: 18px 0px;
    width: 100%;
}



/* input */
.search-input {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 12px 16px 12px 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(30,20,15,.60);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 14px;
    transition: .35s;
    outline: none;
}

/* icon */
.search-icon {
    position: absolute;
    z-index: 3;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #fff;
    opacity: .7;
    transition: .3s;
}

/* no results */
.no-results {
    display: none;
    text-align: center;
    margin-top: 10px;
    background: rgba(255, 0, 0, .15);
    color: #ff4e4e;
    padding: 10px;
    border-radius: 10px;
    animation: fadeIn .4s ease forwards;
}

@keyframes fadeIn {
    0% { opacity:0; transform:translateY(6px); }
    100% { opacity:1; transform:translateY(0); }
}

/* highlight */
.highlight {
    background: #ad6a3222;
    border-radius: 6px;
    transition: background .2s;
}

/* pulse animation for matched rows */
.pulse {
    animation: pulseAnim 0.7s ease;
}

@keyframes pulseAnim {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}


/* کانتینر پس‌زمینه */
#gyroBackground {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, #140e0c, #0d0907);
}

.bubble{
position:absolute;
border-radius:50%;
filter:blur(90px);
opacity:.45;
mix-blend-mode:screen;
pointer-events:none;
}

.bubble.b1{
width:420px;
height:420px;
background:radial-gradient(circle,#d6a77a,#b07a52);
top:-120px;
right:-120px;
}

.bubble.b2{
width:360px;
height:360px;
background:radial-gradient(circle,#b07a52,#8a5a3b);
bottom:-100px;
left:-120px;
}

.bubble.b3{
width:300px;
height:300px;
background:radial-gradient(circle,#8a5a3b,#5a3825);
top:40%;
left:60%;
}

.bubble.b4{
width:260px;
height:260px;
background:radial-gradient(circle,#c7925f,#8a5a3b);
top:65%;
right:25%;
}

.bubble.b5{
width:340px;
height:340px;
background:radial-gradient(circle,#a66b45,#2f1c12);
top:20%;
left:20%;
}

.bubble.b6{
width:240px;
height:240px;
background:radial-gradient(circle,#e0b48b,#b07a52);
bottom:20%;
right:15%;
}

.bubble.b7{
width:200px;
height:200px;
background:radial-gradient(circle,#c89a6d,#6a3f28);
top:10%;
left:70%;
}

.bubble.b8{
width:180px;
height:180px;
background:radial-gradient(circle,#b07a52,#3b2417);
bottom:35%;
left:45%;
}

@media (max-width:768px){

.bubble{
filter:blur(45px);
opacity:.40;
}

.bubble.b1{
width:110px;
height:110px;
}

.bubble.b2{
width:100px;
height:100px;
}

.bubble.b3{
width:90px;
height:90px;
}

.bubble.b4{
width:80px;
height:80px;
}

.bubble.b5{
width:100px;
height:100px;
}

.bubble.b6{
width:85px;
height:85px;
}

.bubble.b7{
width:70px;
height:70px;
}

.bubble.b8{
width:75px;
height:75px;
}

}

html,body{
overflow-x:hidden;
}
/* Membership Modal Styles */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
  display: flex;
}

.modal-glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  padding: 40px;
  max-width: 550px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: slideUp 0.4s ease;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.modal-close:hover {
  background: rgba(255, 0, 0, 0.6);
  transform: rotate(90deg);
}

.modal-title {
  color: #fff;
  font-size: 26px;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
/* =========================
   CAKE SECTION
========================= */
.cake-info p{
  position:relative;
  padding-bottom:18px;
}

/* خط زیر توضیحات */
.cake-info p::after{

  content:"";
  position:absolute;

  right:0;
  bottom:0;

  width:0;
  height:2px;

  background:linear-gradient(
    90deg,
    #c49a6c,
    #8b5e3c,
    #c49a6c
  );

  border-radius:2px;

  animation:descLine 1.2s ease forwards;

}

/* انیمیشن */
@keyframes descLine{

  from{
    width:0;
    opacity:0;
  }

  to{
    width:120px;
    opacity:1;
  }

}
.cake-title h3::after{
      content:"";
  position:absolute;

  right:0;
  bottom:0;

  width:0;
  height:2px;

  background:linear-gradient(
    90deg,
    #c49a6c,
    #8b5e3c,
    #c49a6c
  );

  border-radius:2px;
  right:50%;
  transform:translateX(50%);
}

@keyframes descLine{

  from{
    width:0;
  }

  to{
    width:140px;
  }

}

.cake-section {
  padding: 100px 0;
  position: relative;
}


.cake-header {
  text-align: center;
  margin-bottom: 60px;
}

.cake-header h2 {
  font-size: 38px;
  color: #fff;
  margin-bottom: 10px;
}

.cake-header p {
  color: #aaa;
  font-size: 16px;
}


/* CARD */

.cake-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.cake-glass {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  padding: 40px 30px;
  overflow: hidden;
  min-height: 420px;
  transition: all 0.6s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* IMAGE */

.cake-image {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 260px;
  transition: all 0.8s ease;
  animation: floatCake 4s ease-in-out infinite;
}

.cake-image img {
  width: 100%;
  transform-origin: center;
  transition: transform 0.8s ease;
}

@keyframes floatCake {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* STATUS */

.cake-status {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.available .status-dot {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

.unavailable .status-dot {
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
}

/* TAGS */

.cake-tags {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
}

.cake-tags span {
  background: rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 50px;
  font-size: 12px;
}

/* INFO PANEL */

.cake-info {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s ease;
  max-width: 60%;
}

.cake-info h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #fff;
}

.cake-info p {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 20px;
}

.cake-btn {
  background: linear-gradient(45deg, #f59e0b, #f97316);
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.cake-btn:hover {
  transform: scale(1.05);
}

.cake-btn.disabled {
  background: #444;
  cursor: not-allowed;
}

/* ACTIVE STATE */

.cake-card.active .cake-image {
  right: -120px;
}

.cake-card.active .cake-image img {
  transform: rotateY(360deg) scale(1.1);
}

.cake-card.active .cake-info{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}


.map-hint /* =========================
   CAKE SECTION
========================= */

.cake-section {
  padding: 100px 0;
  position: relative;
}

.cake-header {
  text-align: center;
  margin-bottom: 60px;
}

.cake-header h2 {
  font-size: 38px;
  color: #fff;
  margin-bottom: 10px;
}

.cake-header p {
  color: #aaa;
  font-size: 16px;
}

.cake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  perspective: 1200px;
}

/* CARD */

.cake-card {
  position: relative;
    position:relative;
  overflow:hidden;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.cake-glass {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  padding: 40px 30px;
  overflow: hidden;
  min-height: 320px;
  transition: all 0.6s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* IMAGE */

.cake-image{
  position:absolute;
  right:-50px;
  bottom:-10px;

  width:240px;
  aspect-ratio:1/1;

  display:flex;
  align-items:center;
  justify-content:center;
}

.cake-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cake-marquee{

  position:absolute;

  bottom:10px;
  left:-80%;

  width:220%;
z-index:0;
  transform:rotate(-45deg);

  pointer-events:none;
  overflow:hidden;

}
@media (max-width: 640px) {

  .cake-section
  {
      padding:25px !important;
  }
  .cake-grid {

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 10px;
    perspective: 1200px;
}


}
/* حالت تبلت: سه‌ستونه ثابت */
@media (min-width: 768px) and (max-width: 1024px) {

  .cake-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

}
.cake-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-150%;
  width:120%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent 10%,
    rgba(255,255,255,0.12) 50%,
    transparent 90%
  );

  transform:skewX(-20deg);

  transition:0.8s ease;
  pointer-events:none;
}

.cake-card:hover::before{
  left:150%;
}

.cake-marquee span{

  font-size:106px;
  font-weight:800;
  white-space:nowrap;
    font-family:'roboto';
  color:transparent;

  -webkit-text-stroke:1px rgba(255,255,255,0.35);

  mix-blend-mode:normal;

  opacity:.35;
z-index:-1;
  animation:cakeMarquee 14s linear infinite;
}

@keyframes floatCake {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.marquee-track{

  font-size:46px;
  font-weight:900;

  white-space:nowrap;

  color:transparent;

  -webkit-text-stroke:1px rgba(255,255,255,0.25);

  mix-blend-mode:overlay;

  opacity:.35;

  animation:cakeMarquee 14s linear infinite;

}
@keyframes cakeMarquee{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}
.cake-image,
.cake-price,
.cake-tags{

  z-index:1;
}
.cake-fa,
.cake-titl,
.cake-en
{
    z-index:3;
}
.cake-card.active .cake-en{
  opacity:0;
  transform:translateY(10px);
}
.cake-titl{
  position:absolute;

  left:20px;
  bottom:50px;


  text-align:left;
  direction:ltr;
  font-size:20px;
  font-weight:900;

  line-height:1.05;

  color:#f1b682;

  letter-spacing:.3px;

  text-shadow:
  0 2px 10px rgba(0,0,0,0.35);
  transition:0.35s ease;
}
.cake-card.active .cake-en,
.cake-card.active .cake-fa,
.cake-card.active .cake-price {
  opacity:0;
  transform:translateY(12px);
}

/* انگلیسی */
.cake-en{
  font-size:20px;
  font-weight:800;
  color:#f1b682;
  letter-spacing:.5px;
  text-shadow:0 4px 15px rgba(0,0,0,.4);
  transition:.35s ease;
}

/* فارسی */
.cake-fa{
      left:20px;
  bottom:60px;
  font-size:34px;
  font-weight:500;
  color:rgba(255,255,255,.75);
  letter-spacing:.3px;
  transition:.35s ease;
  backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
background:linear-gradient(
120deg,
rgba(0,0,0,.05),
rgba(0,0,0,0.1)
);

}
.cake-price{
margin-top:15px;
display:inline-flex;
align-items:center;

padding:8px 16px;

border-radius:30px;

background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,.15);

color:#ffff;
font-weight:700;
font-size:18px;

}
.cake-fa::before{

content:"";

position:absolute;
top:-6;
left:-6;

width:200%;
height:50%;

border-radius:inherit;


opacity:.4;
pointer-events:none;

}
.cake-price span{
font-size:14px;
opacity:.7;
margin-right:4px;
}

/* STATUS */

.cake-status {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.available .status-dot {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

.unavailable .status-dot {
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
}

/* TAGS */

.cake-tags {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
}

.cake-tags span{
  font-size:12px;
  padding:6px 14px;
  border-radius:30px;

  color:#fff;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.2);

  box-shadow:
  0 0 8px rgba(255,255,255,0.15),
  inset 0 0 6px rgba(255,255,255,0.08);

  backdrop-filter:blur(6px);
}
.cake-delivery{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#ddd;
  margin-bottom:14px;
}

.cake-delivery svg{
  color:#f59e0b;
}


/* INFO PANEL */

.cake-info{
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%) translateX(-30px);
  width: 55%;
  opacity: 0;
  transition: all .5s ease;
  z-index:3;
}


.cake-info h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #fff;
}

.cake-info p {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 20px;
}

.cake-btn {
  background: linear-gradient(45deg, #f59e0b, #f97316);
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.cake-btn:hover {
  transform: scale(1.05);
}

.cake-btn.disabled {
  background: #444;
  cursor: not-allowed;
}

/* ACTIVE STATE */

.cake-card.active .cake-image {
  right: -120px;
}

.cake-card.active .cake-image img {
  transform: rotateY(360deg) scale(1.1);
}

.cake-card.active .cake-info{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}



.submit-btn {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}