/* ==========================================================================
   مگامنوی جدید (دسکتاپ) — تب‌های شیشه‌ای + کاشی‌های لینک با آیکن و شمارنده
   ساختار DOM را main.js قالب می‌سازد؛ این فایل فقط ظاهر را عوض می‌کند.
   رنگ اصلی از --primaryColor قالب می‌آید.
   ========================================================================== */
@media (min-width: 1001px) {

  /* ---------- قاب اصلی ---------- */
  html body .header.header_style_2 .top_nav li.has_mega_menu > ul.sub-menu {
    --mega-accent: var(--primaryColor, #4d6bff);
    --mega-tile: color-mix(in srgb, var(--text, #fff) 5%, transparent);
    --mega-tile-line: color-mix(in srgb, var(--text, #fff) 9%, transparent);
    width: clamp(780px, 72vw, 1020px) !important;
    padding: 16px !important;
    border-radius: 26px !important;
    border: 1px solid color-mix(in srgb, var(--text, #fff) 11%, transparent) !important;
    background:
      radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mega-accent) 20%, transparent), transparent 55%),
      var(--mega-bg) !important;
    box-shadow:
      0 30px 70px rgba(0, 0, 0, .5),
      inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu {
    grid-template-columns: 236px 1fr !important;
    column-gap: 18px !important;
  }

  /* ---------- ستون تب‌ها ---------- */
  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item {
    margin: 0 0 8px !important;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item > a.mega-tab-link {
    position: relative;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 54px;
    padding: 9px 12px !important;
    border: 1px solid transparent;
    border-radius: 16px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: color-mix(in srgb, var(--text, #fff) 78%, transparent) !important;
    background: transparent !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease !important;
  }

  /* آیکن تب داخل مربع گرد */
  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item > a.mega-tab-link i {
    display: inline-grid !important;
    place-items: center;
    flex: none;
    width: 36px !important;
    height: 36px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--text, #fff) 8%, transparent);
    font-size: 16px !important;
    opacity: 1 !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  }

  /* فلش کوچک سمت چپ تب */
  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item > a.mega-tab-link::after {
    content: "";
    margin-inline-start: auto;
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item > a.mega-tab-link:hover {
    color: var(--text, #fff) !important;
    background: color-mix(in srgb, var(--text, #fff) 6%, transparent) !important;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item.is-active > a.mega-tab-link {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--mega-accent) 55%, transparent);
    background: linear-gradient(270deg, color-mix(in srgb, var(--mega-accent) 38%, transparent), color-mix(in srgb, var(--mega-accent) 8%, transparent)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mega-accent) 28%, transparent);
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item.is-active > a.mega-tab-link i {
    background: var(--mega-accent);
    color: #fff;
    box-shadow: 0 0 16px color-mix(in srgb, var(--mega-accent) 60%, transparent);
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item.is-active > a.mega-tab-link::after {
    opacity: .9;
    transform: rotate(45deg) translate(-2px, 2px);
  }

  /* آیکن رنگی تب‌ها (mega-menu.js) */
  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item > a.mega-tab-link i.kf-tabico {
    --h: 215;
    background: linear-gradient(145deg, hsl(var(--h) 85% 60% / .30), hsl(var(--h) 85% 55% / .10));
    color: hsl(var(--h) 100% 80%);
    border: 1px solid hsl(var(--h) 85% 65% / .25);
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item > a.mega-tab-link i.kf-tabico svg {
    width: 19px;
    height: 19px;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled > ul.sub-menu > li.mega-tab-item.is-active > a.mega-tab-link i.kf-tabico {
    background: var(--mega-accent);
    border-color: transparent;
    color: #fff;
  }

  /* ---------- ناحیه‌ی محتوا ---------- */
  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled .mega-tabs-panels {
    padding: 0 !important;
    border-right: 0 !important;
    min-height: 0 !important;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled .mega-tab-panel.is-active {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    align-content: start !important;
    animation: kf-mega-in .22s ease both;
  }

  @keyframes kf-mega-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- کاشی لینک ---------- */
  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled .mega-tab-panel li {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled .mega-tab-panel li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 50px;
    padding: 8px 12px !important;
    border: 1px solid var(--mega-tile-line);
    border-radius: 14px !important;
    background: var(--mega-tile) !important;
    font-size: 14.5px !important;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text, #fff) !important;
    white-space: normal !important;   /* متن کامل؛ اگر بلند بود در دو خط */
    overflow: visible !important;
    text-overflow: clip !important;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu.mega-tabs-enabled .mega-tab-panel li > a:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--mega-accent) 65%, transparent);
    background: color-mix(in srgb, var(--mega-accent) 16%, transparent) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
    color: var(--text, #fff) !important;
  }

  /* آیکن رنگی اول کاشی (SVG داخلی با mega-menu.js؛ رنگ هر دسته از --h می‌آید) */
  .header .top_nav .has_mega_menu .mega-ico {
    --h: 215;
    display: inline-grid !important;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    top: 0 !important;
    border-radius: 11px;
    background: linear-gradient(145deg, hsl(var(--h) 85% 60% / .32), hsl(var(--h) 85% 55% / .10));
    border: 1px solid hsl(var(--h) 85% 65% / .28);
    color: hsl(var(--h) 100% 80%);
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }

  .header .top_nav .has_mega_menu li > a:hover .mega-ico {
    background: linear-gradient(145deg, hsl(var(--h) 85% 62%), hsl(var(--h) 80% 48%));
    border-color: transparent;
    color: #fff;
    transform: rotate(-6deg) scale(1.08);
    box-shadow: 0 6px 16px hsl(var(--h) 85% 55% / .45);
  }

  /* لینک اسکار: طلایی و متمایز */
  html body .header.header_style_2 .top_nav li.has_mega_menu .mega-tab-panel li > a.kf-gold {
    border-color: hsl(44 90% 58% / .55);
    background: linear-gradient(120deg, hsl(44 95% 55% / .20), hsl(44 95% 55% / .05)) !important;
    color: #ffe9a8 !important;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu .mega-tab-panel li > a.kf-gold:hover {
    border-color: hsl(44 95% 62%);
    box-shadow: 0 10px 24px hsl(44 95% 50% / .28);
  }

  /* شمارنده‌ی تعداد: قرص کوچک سمت چپ */
  html body .header.header_style_2 .top_nav li.has_mega_menu .mega-tab-panel .mega-count {
    flex: none;
    margin-inline-start: auto;
    min-width: 30px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text, #fff) 9%, transparent);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    color: color-mix(in srgb, var(--text, #fff) 72%, transparent) !important;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu .mega-tab-panel li > a:hover .mega-count {
    background: color-mix(in srgb, var(--mega-accent) 35%, transparent);
    color: #fff !important;
  }

  /* ردیف‌های بدون شمارنده: فلش ظریف سمت چپ */
  html body .header.header_style_2 .top_nav li.has_mega_menu .mega-tab-panel li > a:not(:has(.mega-count))::after {
    content: "";
    margin-inline-start: auto;
    flex: none;
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .28;
    transition: opacity .18s ease, transform .18s ease;
  }

  html body .header.header_style_2 .top_nav li.has_mega_menu .mega-tab-panel li > a:not(:has(.mega-count)):hover::after {
    opacity: .9;
    transform: rotate(45deg) translate(-2px, 2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header .top_nav .has_mega_menu .mega-tab-panel.is-active { animation: none !important; }
}

/* آیکن آیتم «دسته‌بندی‌ها» در نوار بالا */
@media (min-width: 1001px) {
  .header .top_nav li.has_mega_menu > a > i.kf-topico {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    margin-inline-end: 7px;
    line-height: 1;
  }

  .header .top_nav li.has_mega_menu > a > i.kf-topico svg {
    display: block;
    width: 19px;
    height: 19px;
  }

  .header .top_nav li.has_mega_menu > a > i.kf-topico .kf-f {
    transition: fill .2s ease, stroke .2s ease, transform .25s ease;
    transform-box: fill-box;
    transform-origin: center;
  }

  .header .top_nav li.has_mega_menu:hover > a > i.kf-topico .kf-f,
  .header .top_nav li.has_mega_menu:focus-within > a > i.kf-topico .kf-f {
    fill: var(--primaryColor, #4d6bff);
    stroke: var(--primaryColor, #4d6bff);
    transform: scale(1.12);
  }
}