.elementor-8 .elementor-element.elementor-element-5130edb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8 .elementor-element.elementor-element-5422b08{width:100%;max-width:100%;}/* Start custom CSS for html, class: .elementor-element-5422b08 *//* =========================================================
   SUROOSH MIKANIK — FULL ADDITIONAL CSS (Astra + UAE/Elementor)
   (Zero-to-Hundred)
   - Light/Dark grayscale tokens (no extra colors)
   - Sticky glass header
   - Desktop nav + dropdown cards
   - Mobile actions: switch + hamburger ONLY (hidden on desktop)
   - Mobile fullscreen menu slide + overlay
   - Menu links: no stroke, subtle hover
   - Switch: stroke only, subtle hover
   - Hide page titles
   - Responsive 2025/2026 devices
========================================================= */

/* -------------------------
   0) TOKENS (Light)
------------------------- */
:root{
  --bg:#ffffff;
  --text:rgba(0,0,0,.88);
  --muted:rgba(0,0,0,.62);

  --border:rgba(0,0,0,.12);
  --border-strong:rgba(0,0,0,.22);

  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.92);

  --shadow:0 14px 40px rgba(0,0,0,.10);

  --r:16px;
  --r2:22px;
  --maxw:1180px;
}

/* Dark mode */
body.sm-dark{
  --bg:#0b0b0f;
  --text:rgba(255,255,255,.90);
  --muted:rgba(255,255,255,.64);

  --border:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.26);

  --glass:rgba(18,18,24,.62);
  --glass-strong:rgba(18,18,24,.86);

  --shadow:0 16px 44px rgba(0,0,0,.55);
}

/* -------------------------
   1) GLOBAL SAFETY
------------------------- */
html,body{ background:var(--bg); color:var(--text); }
*{ -webkit-tap-highlight-color:transparent; }
a{ color:inherit; text-decoration:none; }

/* Prevent theme wrappers from forcing backgrounds */
#page,#content,.site,.site-content,#primary,#main,
.elementor,.elementor-section,.elementor-container,.elementor-widget-wrap,
.entry-content,.page,.page-content,.site-header,.site-main,footer,.site-footer{
  background: transparent;
}

/* -------------------------
   2) HIDE PAGE TITLES (Astra + Elementor)
------------------------- */
.ast-page-builder-template .entry-title,
.ast-page-builder-template .page-title,
.ast-page-builder-template h1.entry-title,
.page .entry-title,
.page-title,
.elementor-page-title,
.elementor-widget-page-title{
  display:none !important;
}
.ast-container{ padding-top:0 !important; }

/* -------------------------
   3) HEADER (sticky glass)
------------------------- */
.sm-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  backdrop-filter: blur(14px);
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

.sm-header__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.sm-brand{ display:flex; align-items:center; }
.sm-brand__name{
  font-weight:650;
  letter-spacing:.3px;
  font-size: clamp(14px, 1.6vw, 16px);
}

/* -------------------------
   4) NAV LINKS (NO STROKE)
------------------------- */
.sm-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.sm-link{
  font-size:14px;
  padding:10px 10px;
  border-radius:12px;
  border:0 !important;
  background:transparent !important;
  color:var(--text);
  cursor:pointer;
  transition: background .16s ease, opacity .16s ease;
}

.sm-link:hover{
  background: rgba(0,0,0,.05) !important;
}
body.sm-dark .sm-link:hover{
  background: rgba(255,255,255,.06) !important;
}

/* -------------------------
   5) DESKTOP DROPDOWN (cards only)
------------------------- */
.sm-dd{ position:relative; }
.sm-dd__btn{ cursor:pointer; }
.sm-caret{ margin-left:6px; opacity:.75; }

.sm-dd__panel{
  position:absolute;
  top: calc(100% + 10px);
  left:0;

  width: min(720px, calc(100vw - 24px));
  padding: 12px;

  display:none;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;

  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--glass-strong);
  box-shadow: var(--shadow);
}

.sm-dd.is-open .sm-dd__panel{ display:grid; }

.sm-card{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;

  padding:12px 12px;
  border-radius:16px;

  border: 1px solid var(--border);
  background: var(--glass);
  transition: background .16s ease, transform .16s ease;
}
.sm-card span{ font-weight:600; }
.sm-card small{ color: var(--muted); }
.sm-card:hover{ background: var(--glass-strong); transform: translateY(-1px); }

/* -------------------------
   6) THEME SWITCH (STROKE ONLY)
------------------------- */
.sm-switch{
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sm-switch__track{
  width:52px;
  height:30px;
  border-radius:999px;
  background:transparent !important;                 /* stroke only */
  border:2px solid var(--border-strong) !important;
  position:relative;
  transition: box-shadow .16s ease;
}
.sm-switch:hover .sm-switch__track{
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
body.sm-dark .sm-switch:hover .sm-switch__track{
  box-shadow: 0 0 0 4px rgba(255,255,255,.07);
}

.sm-switch__thumb{
  width:26px;
  height:26px;
  border-radius:999px;
  position:absolute;
  top:50%;
  left:2px;
  transform: translateY(-50%);
  background: var(--bg) !important;
  border:2px solid var(--border-strong) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: left .18s ease, transform .18s ease;
}
.sm-switch[aria-checked="true"] .sm-switch__thumb{ left:24px; }
.sm-switch:active .sm-switch__thumb{ transform: translateY(-50%) scale(.98); }

/* -------------------------
   7) MOBILE ACTIONS (switch + hamburger)
   - Hidden on desktop
------------------------- */
.sm-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Burger */
.sm-burger{
  width:44px;
  height:44px;
  border-radius:14px;
  border:0;
  background:transparent;
  cursor:pointer;
  transition: background .16s ease;
}
.sm-burger:hover{ background: rgba(0,0,0,.05); }
body.sm-dark .sm-burger:hover{ background: rgba(255,255,255,.06); }

.sm-burger__lines{
  position:relative;
  width:22px;
  height:14px;
  display:block;
  margin:0 auto;
}
.sm-burger__lines:before,
.sm-burger__lines:after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:999px;
  background: var(--text);
  opacity:.9;
}
.sm-burger__lines:before{ top:0; }
.sm-burger__lines:after{ bottom:0; }

/* -------------------------
   8) OVERLAY + MOBILE FULLSCREEN MENU (slide)
------------------------- */
.sm-overlay{
  display:block;
  position:fixed;
  inset:0;
  z-index: 9999;
  background: rgba(0,0,0,.22);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
}
body.sm-dark .sm-overlay{ background: rgba(0,0,0,.45); }
body.sm-mopen .sm-overlay{ opacity:1; pointer-events:auto; }

.sm-mobile{
  position:fixed;
  inset:0;
  z-index: 10000;
  background: var(--bg);
  color: var(--text);

  transform: translateX(110%);
  transition: transform .32s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;

  padding: 18px 16px 24px;
  /* iOS safe areas */
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

body.sm-mopen .sm-mobile{
  transform: translateX(0);
  pointer-events:auto;
}

/* Top row */
.sm-mobile__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.sm-mobile__title{
  font-weight:700;
  letter-spacing:.2px;
  font-size:16px;
}

.sm-close{
  width:44px;
  height:44px;
  border-radius:14px;
  border:2px solid var(--border-strong);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}

/* Quick links row */
.sm-mobile__links{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sm-mitem{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
}
body.sm-dark .sm-mitem{ background: rgba(255,255,255,.06); }

.sm-mobile__section{
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .18px;
  text-transform: uppercase;
}

/* Cards fill page + centered */
.sm-mobile__cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sm-mcard{
  width:100%;
  padding: 18px 16px;
  border-radius: 18px;
  border: 2px solid var(--border-strong);
  background: transparent;
  font-weight: 700;
  font-size: 18px;
  text-align:center;
}

/* Prevent scroll when menu open (JS also fixes body position) */
body.sm-mopen{ overflow:hidden !important; }

/* -------------------------
   9) RESPONSIVE BREAKPOINTS
   - Desktop shows desktop nav
   - Mobile shows hamburger + switch only
------------------------- */
.sm-nav--desktop{ display:flex; }
.sm-nav--mobile{ display:none; }

/* Desktop: hide mobile actions + mobile menu elements */
@media (min-width: 981px){
  .sm-header .sm-actions,
  .sm-header .sm-nav--mobile,
  .sm-header [data-mopen],
  .sm-header [data-mmenu],
  .sm-header .sm-overlay{
    display:none !important;
  }
}

/* Mobile: show actions, hide desktop nav; disable desktop dropdown panel */
@media (max-width: 980px){
  .sm-nav--desktop{ display:none !important; }
  .sm-nav--mobile{ display:flex !important; }
  .sm-header .sm-actions{ display:flex !important; }
  .sm-dd__panel{ display:none !important; }
}

/* Tablet spacing tweaks */
@media (max-width: 1180px){
  .sm-header__inner{ padding: 12px 14px; }
}

/* Very small phones */
@media (max-width: 380px){
  .sm-brand__name{ font-size: 13px; }
  .sm-burger{ width:42px; height:42px; }
  .sm-switch__track{ width:50px; height:28px; }
  .sm-switch__thumb{ width:24px; height:24px; }
  .sm-switch[aria-checked="true"] .sm-switch__thumb{ left:24px; }
}
/* =========================
   MOBILE MENU — FIX (background + menu items + category cards)
========================= */

/* Fullscreen mobile surface must be solid and readable */
.sm-mobile{
  background: var(--bg) !important;
}

/* Stronger separation for section label */
.sm-mobile__section{
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* Make top quick links look like a proper menu row */
.sm-mobile__links{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px !important;
}

.sm-mitem{
  text-align: center !important;
  font-weight: 600 !important;
  border: 1px solid var(--border) !important;
  background: var(--glass-strong) !important;
}

/* Category cards: fill page + correct background */
.sm-mcard{
  border: 2px solid var(--border-strong) !important;
  background: var(--glass-strong) !important;     /* FIX background */
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
}

/* Dark mode mobile cards */
body.sm-dark .sm-mitem,
body.sm-dark .sm-mcard{
  background: var(--glass-strong) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
}

/* Small phones: 1 column quick links */
@media (max-width: 420px){
  .sm-mobile__links{
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   DESKTOP MEGA MENU — FULL WIDTH
========================= */
@media (min-width: 981px){

  .sm-dd__panel{
    /* Full width mega */
    position: fixed !important;
    top: 78px !important;               /* اگر هدر بلندتر/کوتاه‌تره این عدد را 70~90 تنظیم کن */
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(1200px, calc(100vw - 32px)) !important; /* full-ish with safe margin */
    max-width: 1200px !important;

    display: none;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;

    border-radius: 24px !important;
    padding: 14px !important;
  }

  .sm-dd.is-open .sm-dd__panel{
    display: grid !important;
  }

  /* Cards inside mega: better spacing */
  .sm-card{
    border-radius: 18px !important;
    padding: 14px 14px !important;
  }
}/* End custom CSS */