/* site-shell.css */
/* Shared site shell based on home page liquid glass style */
:root{
  --ease: cubic-bezier(.2,.9,.2,1);
  --dur: 520ms;

  --bg: #EAF7F4;
  --bg2:#DFF3EE;

  --drawer-bg1: color-mix(in srgb, #ffffff 85%, var(--bg) 15%);
  --drawer-bg2: color-mix(in srgb, #f6fbff 78%, var(--bg2) 22%);
  --drawer-accent: rgba(68,169,255,.28);
  --drawer-surface: #ffffff;

  --tile-bg: #ffffff;

  --text: rgba(10, 25, 34, .88);
  --muted: rgba(10, 25, 34, .62);

  --glass: rgba(255,255,255,.44);
  --glass2: rgba(255,255,255,.62);
  --stroke: rgba(10, 35, 45, .12);

  --shadow: 0 22px 70px rgba(10, 35, 45, .12);
  --shadow2: 0 12px 32px rgba(10, 35, 45, .10);

  --nav-row: 56px;
  --nav-subrow: 52px;

  --r: 18px;
  --r2: 26px;
  --blur: 16px;

  /* Brand border palette (from your logo vibe) */
  --brand-1: #1fe3d0;
  --brand-2: #2a9bff;
  --brand-3: #7b5cff;
  --brand-4: #ff5cc8;
  --brand-5: #ff7a59;

  /* Border animation speed */
  --border-spin: 5s;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color-scheme: light dark;
}

[data-theme="dark"]{
  --bg: #05090b;
  --bg2:#030608;

  --drawer-bg1: color-mix(in srgb, #0b2028 80%, rgba(42,155,255,.14));
  --drawer-bg2: color-mix(in srgb, #05141a 78%, rgba(31,227,208,.14));
  --drawer-accent: rgba(42,155,255,.40);
  --drawer-surface: #0b2028;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);

  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.12);

  --shadow: 0 26px 90px rgba(0,0,0,.48);
  --shadow2: 0 14px 44px rgba(0,0,0,.34);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ direction:ltr; }
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

.wrap{ max-width: 1160px; margin: 0 auto; padding: 18px 18px 36px; position:relative; z-index:1; }

.grain{
  pointer-events:none;
  position:fixed;
  inset:-40%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.18;
  animation: grainMove 9s steps(8) infinite;
  transform:translateZ(0);
}
@keyframes grainMove{
  0%{transform:translate(-3%, -2%)}
  20%{transform:translate(2%, -4%)}
  40%{transform:translate(5%, 3%)}
  60%{transform:translate(-4%, 6%)}
  80%{transform:translate(-6%, -3%)}
  100%{transform:translate(-3%, -2%)}
}

.ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.blob{ position:absolute; filter: blur(26px); opacity:.55; animation: blobFloat 8s var(--ease) infinite alternate; }
.blob.b1{ width:380px; height:380px; left:-120px; top:-80px; background: radial-gradient(circle, rgba(31,227,208,.45), transparent 60%); }
.blob.b2{ width:420px; height:420px; right:-140px; top:-70px; background: radial-gradient(circle, rgba(123,92,255,.28), transparent 62%); animation-delay: 240ms;}
.blob.b3{ width:520px; height:520px; left:30%; bottom:-260px; background: radial-gradient(circle, rgba(255,92,200,.22), transparent 62%); animation-delay: 520ms;}
@keyframes blobFloat{
  from{ transform: translateY(0) translateX(0) scale(1); }
  to{ transform: translateY(18px) translateX(10px) scale(1.04); }
}

.glass{
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.55), transparent 56%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.26), transparent 55%),
    radial-gradient(circle at 55% 15%, rgba(42,155,255,.10), transparent 62%);
  filter: blur(18px);
  opacity:.40;
  pointer-events:none;
}
[data-theme="dark"] .glass::before{
  opacity:.30;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.28), transparent 56%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at 55% 15%, rgba(42,155,255,.16), transparent 62%);
}

/* =========================
   Animated border (NO GLOW)
   - border stays fixed
   - only gradient phase shifts
   ========================= */
@property --spin {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.animated-border{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border: 1.5px solid transparent; /* thicker & crisp */
  transform: translateZ(0);
}
.animated-border::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1.5px; /* must match border thickness for crisp edges */
  background:
    conic-gradient(
      from var(--spin),
      var(--brand-1),
      var(--brand-2),
      var(--brand-3),
      var(--brand-4),
      var(--brand-5),
      var(--brand-1)
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  animation: borderPhase var(--border-spin) linear infinite;
}
@keyframes borderPhase{
  from{ --spin: 0deg; }
  to{ --spin: 360deg; }
}
@media (prefers-reduced-motion: reduce){
  .animated-border::before{ animation: none; }
}

/* =========================
   Topbar (visible + styled)
   ========================= */
header.topbar{
  position:sticky;
  top:0;
  z-index:60;
  padding: 0;
  background: transparent;
}

.topbar-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  height: 70px;
  padding: 0 12px;
  border-radius: 22px;
  position:relative;

  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; }

.brand-center{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:none;
  height: 70px;
}
.brand-center__label{
  font-size: 19px;
  line-height: 70px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 700;
  white-space: nowrap;
}

/* Apply animated border ONLY to the topbar container */
.topbar-row.animated-border{
  border-color: transparent;
}

/* Icons: must be fully transparent (no bg, no border) */
.icon-btn{
  width:48px;                /* ← کمی بزرگ‌تر */
  height:48px;
  border-radius: 14px;
  cursor:pointer;
  transition: transform 220ms var(--ease), opacity 200ms var(--ease);
  -webkit-tap-highlight-color: transparent;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display:grid;
  place-items:center;
  color:var(--text);
}
.icon-btn.glass{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.icon-btn.glass::before{
  content: none !important;
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn:active{ transform: translateY(0) scale(.98); }

.icon{ display:grid; place-items:center; color:var(--text); opacity:.94; }
.icon svg{
  width:24px;        /* ← بزرگ‌تر */
  height:24px;
}
.hamburger-lines{ display:grid; gap:5px; }
.hamburger-lines span{
  display:block;
  width:22px;        /* ← بزرگ‌تر */
  height:2.6px;      /* ← ضخیم‌تر */
  border-radius:999px;
  background: currentColor;
}
/* Logo container must also be transparent */
.logo-slot{
  width: 66px;
  height: 66px;
  border-radius: 14px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.logo-img{ height:66px; width:66px; object-fit:contain; }
.logo-glow{ display:none !important; }

/* Theme toggle icons */
.theme-toggle{ position:relative; }
.theme-toggle__icon{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transition: opacity 200ms var(--ease), transform 260ms var(--ease);
  opacity:0;
  transform: scale(.8);
}
.theme-toggle__moon{ opacity:1; }
[data-theme="dark"] .theme-toggle__moon{ opacity:0; transform: scale(.8) rotate(-10deg); }
[data-theme="dark"] .theme-toggle__sun{ opacity:1; transform: scale(1); }

/* =========================
   AI Support widget
   ========================= */
.support-widget{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.support-widget__fab{
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(140deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  box-shadow: var(--shadow2);
  cursor: pointer;
}

.support-widget__panel{
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
}

.support-widget[data-open="false"] .support-widget__panel{
  display: none;
}

.support-widget__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke);
}

.support-widget__title{
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.support-widget__close{
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.support-chat__messages{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 220px;
}

.support-chat__message{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 82%;
}

.support-chat__message--user{
  align-self: flex-end;
  text-align: right;
}

.support-chat__message--agent{
  align-self: flex-start;
  text-align: left;
}

.support-chat__name{
  font-size: 12px;
  color: var(--muted);
}

.support-chat__bubble{
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.support-chat__message--user .support-chat__bubble{
  background: rgba(42, 155, 255, .16);
  border: 1px solid rgba(42, 155, 255, .25);
}

.support-chat__message--agent .support-chat__bubble{
  background: rgba(31, 227, 208, .16);
  border: 1px solid rgba(31, 227, 208, .25);
}

.support-chat__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.support-chat__ticks{
  font-size: 12px;
  color: rgba(42, 155, 255, .7);
}

.support-chat__form{
  display: flex;
  gap: 10px;
  padding: 12px 14px 16px;
  border-top: 1px solid var(--stroke);
}

.support-chat__input{
  flex: 1;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(255,255,255,.7);
  color: var(--text);
}

.support-chat__send{
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(31,227,208,.2);
  color: var(--text);
  cursor: pointer;
}

.support-widget[data-loading="true"] .support-chat__send{
  opacity: .6;
  cursor: wait;
}

[data-theme="dark"] .support-widget__fab{
  background: linear-gradient(140deg, rgba(15,32,40,.95), rgba(15,32,40,.75));
}

[data-theme="dark"] .support-chat__input{
  background: rgba(8, 20, 26, .9);
}

/* =========================
   Drawer
   ========================= */
.backdrop{
  position:fixed;
  inset:0;
  background:rgba(4, 14, 18, .55);
  opacity:0;
  transition: opacity 260ms var(--ease);
  pointer-events:none;
  z-index:55;
}
.backdrop[data-open="true"]{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  top:0;
  left:0;
  width:min(420px, 92vw);
  height:100vh;
  padding:20px;
  transform: translateX(-104%);
  transition: transform 320ms var(--ease);
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
  direction:ltr;

  background: var(--drawer-surface);
  border:1px solid color-mix(in srgb, var(--stroke) 65%, var(--drawer-accent));
  box-shadow: 0 26px 80px rgba(23, 58, 74, .22);
  overflow:hidden;
  border-radius: 0 22px 22px 0;
}
[data-theme="dark"] .drawer{
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  border-color: color-mix(in srgb, rgba(42,155,255,.40), rgba(255,255,255,.12));
}
.drawer[data-open="true"]{ transform: translateX(0); }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 2px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--stroke) 80%, rgba(42,155,255,.28));
}
.drawer__controls{ display:flex; align-items:center; gap:10px; }

/* In drawer head, icons must be transparent too */
.drawer__head .icon-btn{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.drawer__nav{
  display:grid;
  gap:12px;
  padding:4px 2px 12px;
  overflow:auto;
  flex:1;
  min-height:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background: transparent;
}
.drawer__nav::-webkit-scrollbar{ display:none; }
.drawer__group{ display:grid; gap:10px; width:100%; }

/* Items */
.drawer__item,
.drawer__accordion{
  width:100%;
  min-height: var(--nav-row);
  border-radius:16px;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition: transform 200ms var(--ease);
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  text-align:left;

  background: color-mix(in srgb, var(--drawer-surface) 92%, transparent);
  border: 0;
}
.drawer__item.animated-border,
.drawer__accordion.animated-border{
  border-color: transparent;
}

.drawer__item:hover,
.drawer__accordion:hover{ transform: translateY(-1px); }
.drawer__item:active,
.drawer__accordion:active{ transform: translateY(0); }

.drawer__item:focus-visible,
.drawer__accordion:focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand-2) 70%, transparent);
  outline-offset:3px;
}

.drawer__content{ display:flex; align-items:center; gap:12px; flex:1; direction:ltr; }
.drawer__label{ font-weight:700; letter-spacing:.01em; z-index:1; position:relative; }
[data-lang="fa"] .drawer__label{ direction: rtl; text-align:right; }

.drawer__glyph{ width:20px; height:20px; display:grid; place-items:center; color: currentColor; opacity:.94; }
.drawer__glyph svg{ width:20px; height:20px; }

.drawer__chevron{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  transition: transform 260ms var(--ease), color 200ms var(--ease);
  z-index:1;
  color: color-mix(in srgb, var(--text) 80%, rgba(42,155,255,.9));
}
.drawer__chevron svg{ transition: transform 240ms var(--ease); }
.drawer__accordion[aria-expanded="true"] .drawer__chevron{
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--text) 70%, var(--brand-2));
}

.drawer__submenu[hidden]{ display:none !important; }
.drawer__submenu{
  display:grid;
  gap:10px;
  padding:10px 2px 4px 12px;
  border-left: 1px solid color-mix(in srgb, var(--brand-2) 35%, transparent);
}

.drawer__subitem{
  border-radius:14px;
  padding:14px 16px;
  min-height: var(--nav-subrow);
  background: color-mix(in srgb, var(--drawer-surface) 92%, transparent);
  color:var(--text);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition: transform 200ms var(--ease);
  border: 0;
}
.drawer__subitem.animated-border{ border-color: transparent; }
.drawer__subitem:hover{ transform: translateY(-1px); }
.drawer__subitem:active{ transform: translateY(0); }

.drawer__sectionTitle{
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
  margin:6px 4px 0;
}

.drawer__icon{
  width:18px;
  height:18px;
  color: color-mix(in srgb, var(--muted) 80%, rgba(42,155,255,.65));
  transition: color 200ms var(--ease);
}
[data-theme="dark"] .drawer__icon{ color: color-mix(in srgb, var(--muted) 70%, rgba(42,155,255,.78)); }

.page-main{ position:relative; z-index:1; }
.page-section{
  margin: 20px auto;
  padding: 20px;
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border:1px solid var(--stroke);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  max-width: 1160px;
}
.page-section h1, .page-section h2, .page-section h3, .page-section h4{ margin-top:0; color: var(--text); }
.page-section p{ color: var(--muted); line-height:1.7; }

@media (max-width: 720px){
  .logo-slot{ width:60px; height:60px; }
  .logo-img{ width:60px; height:60px; }
  .icon-btn{ width:52px; height:52px; }
  .drawer{ width:100vw; max-width:none; border-radius:0; }
  .topbar-row{ border-radius: 18px; }
  .brand-center{ gap:8px; height: 70px; }
  .brand-center__label{ font-size: 16px; letter-spacing: .16em; line-height: 70px; }
}

body.drawer-animating .grain,
body.drawer-animating .blob {
  animation-play-state: paused !important;
}










/* ✅ STOP HEAVY SHELL ANIMATIONS ONLY */
.grain,
.blob,
.animated-border::before{
  animation: none !important;
}

.drawer,
.backdrop,
.icon-btn,
.drawer__item,
.drawer__accordion,
.drawer__subitem{
  transition: none !important;
}