/* === Aichee Buttons (shadcn/ui sizing) === */
.actions .buy-now,
.item.cart-action.buy-now.primary {
  background: #7C3AED; /* ai purple */
  color: #ffffff;
  border-radius: 5.6px;
  height: 40px;
  padding: 8px 24px;
  min-width: 120px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

.actions .buy-now:hover,
.item.cart-action.buy-now.primary:hover {
  background: #6B21A8; /* darker purple */
}

.item.add-to-cart.accent {
  background: #ffffff;
  border: 1px solid #F59E0B; /* cta orange */
  color: #F59E0B;
  border-radius: 5.6px;
  height: 40px;
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

.item.add-to-cart.accent:hover {
  background: #FFF7ED; /* orange-50 */
}

/* === Purchase Bar & Actions Alignment - تمام برک‌پوینت‌ها === */
.purchase-bar { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  flex-wrap: nowrap; 
  justify-content: space-between; 
}
.purchase-bar .item { display: flex; align-items: center; }

/* قیمت همیشه سمت چپ */
.purchase-bar .item.header.price-pill { 
  order: 2; 
  padding: 8px 12px; 
  height: 40px; 
  border-radius: 6px; 
  flex: 0 0 auto; 
}
.purchase-bar .item.header.price-pill .price { display: inline-flex; align-items: center; line-height: 1; }
.purchase-bar .item.header.price-pill .price.default { margin-inline-start: 8px; opacity: .6; }

/* دکمه خرید همیشه سمت راست */
.purchase-bar .item.cart-action.buy-now { 
  order: 1; 
  flex: 0 0 auto; 
}

/* مخفی کردن دکمه افزودن به سبد در purchase-bar */
.purchase-bar .item.add-to-cart { display: none; }

/* Ensure actions container keeps alignment */
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; }

/* Mobile: sticky bar با قیمت + دکمه در یک راستا افقی */
@media (max-width: 700px) {
  .actions { flex-wrap: nowrap; justify-content: center; }
  .actions .buy-now,
  .item.add-to-cart.accent { min-width: 120px; width: auto; }
  
  /* Override tendra-rtl.css با specificity بالاتر */
  #item > .purchase { 
    position: fixed !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    z-index: 1000 !important; 
    background: #ffffff !important; 
    border-top: 1px solid #e5e7eb !important; 
    padding: 12px 16px !important; 
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important; 
  }
  
  .purchase-bar { 
    display: flex !important; 
    flex-direction: row !important;
    justify-content: space-between !important; 
    align-items: center !important; 
    flex-wrap: nowrap !important; 
    gap: 16px !important; 
    width: 100% !important; 
  }
  
  /* باکس قیمت: سمت چپ */
  .purchase-bar .item.header.price-pill { 
    order: 2; 
    flex: 0 0 auto; 
    padding: 8px 12px !important; 
    height: 40px !important; 
    border-radius: 6px !important; 
    background: #f8fafc !important; 
    border: 1px solid #e2e8f0 !important; 
    display: flex !important; 
    align-items: center !important; 
  }
  
  .purchase-bar .item.header.price-pill .price { 
    font-size: 16px !important; 
    font-weight: 600 !important; 
    line-height: 1 !important; 
  }
  
  /* Override CSS اینلاین Blade برای نمایش صحیح قیمت */
  #item .purchase-bar .item.header.price-pill .price.default { 
    font-weight: 600 !important; 
    font-size: 16px !important; 
    line-height: 1 !important; 
    color: #F59E0B !important; 
    opacity: 1 !important; 
    text-decoration: none !important; 
  }
  
  /* قیمت در حالت عادی (بدون تخفیف) */
  #item .purchase-bar .item.header.price-pill:not(.has-promo) .price.default {
    text-decoration: none !important;
    opacity: 1 !important;
    color: #F59E0B !important;
  }
  
  #item .purchase-bar .item.header.price-pill .price.promo { 
    font-weight: 600 !important; 
    font-size: 16px !important; 
    line-height: 1 !important; 
    color: #F59E0B !important; 
  }
  
  /* نمایش قیمت قبل تخفیف در حالت promo */
  #item .purchase-bar .item.header.price-pill.has-promo .price.default { 
    display: inline-flex !important;
    text-decoration: line-through !important;
    opacity: 0.6 !important;
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }
  
  /* دکمه خرید: سمت راست */
  .purchase-bar .item.cart-action.buy-now { 
    order: 1; 
    flex: 0 0 auto; 
    height: 40px !important; 
    padding: 8px 24px !important; 
    font-size: 14px !important; 
    font-weight: 600 !important; 
    min-width: 120px !important; 
    border-radius: 6px !important;
  }
  
  /* مخفی کردن دکمه افزودن به سبد */
  .purchase-bar .item.add-to-cart { display: none !important; }
}
/* ===== PAGES MANAGER - شاه ترند ===== */
/* Import layout styles */
@import url('./layout.css');

/* ===== HEADER BUTTON BORDERS — Single Source ===== */
/* تمام استایل‌های بردر آیتم‌های هدر از این بخش کنترل می‌شوند */
#top-menu .item,
#top-menu > .right.menu > .item {
  border: 1px solid transparent;
  border-radius: var(--header-item-hover-border-radius);
  padding: var(--header-item-hover-padding);
  font-weight: var(--font-weight-normal);
}

#top-menu .item:hover,
#top-menu > .right.menu > .item:hover {
  border-color: var(--header-item-hover-border);
}

/* ===== UNIFIED DROPDOWN SYSTEM - پایه مشترک تمام دراپ‌داون‌ها ===== */
/* Base dropdown system using user dropdown as foundation */

/* Base dropdown menu styling - مشترک برای تمام دراپ‌داون‌ها */
#top-menu .dropdown .menu,
#top-menu .ui.dropdown .left.menu,
.zone-account-dropdown .left.menu {
  background: var(--zone-dropdown-bg);
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 15px -3px var(--zone-dropdown-shadow);
  margin-top: var(--spacing-md); /* افزایش فاصله برای جلوگیری از بسته شدن */
  position: absolute;
  top: 100%;
  left: 50% !important; /* موقعیت از ابتدا وسط */
  right: auto !important;
  transform: translateX(-50%) !important; /* انتقال از ابتدا */
  z-index: var(--z-index-dropdown);
  opacity: 1;
  visibility: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto; /* اطمینان از اینکه menu قابل تعامل است */
}

/* Hover bridge to prevent closing gap between trigger and menu */
#top-menu .dropdown,
#top-menu .ui.dropdown,
.zone-account-dropdown {
  position: relative;
}

#top-menu .dropdown::after,
#top-menu .ui.dropdown::after,
.zone-account-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: var(--dropdown-bridge-width, 320px);
  height: var(--dropdown-bridge-height, 14px);
  background: transparent;
  z-index: calc(var(--z-index-dropdown) + 1);
  pointer-events: auto;
}

/* Variant bridge sizing per dropdown type */
#top-menu .dropdown.cart { 
  --dropdown-bridge-width: 300px; 
  --dropdown-bridge-height: 16px;
}

#top-menu .dropdown.categories { 
  --dropdown-bridge-width: 360px; 
  --dropdown-bridge-height: 16px;
}

/* Safety: bridge attached to the menu width for variants with special layout */
#top-menu .dropdown.cart .menu::before,
#top-menu .dropdown.categories .menu::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--dropdown-bridge-height, 14px));
  left: 0;
  right: 0;
  height: var(--dropdown-bridge-height, 14px);
  background: transparent;
  pointer-events: auto;
}

/* Dropdown visibility states - مشترک برای تمام دراپ‌داون‌ها */
#top-menu .dropdown:hover .menu,
#top-menu .dropdown:focus-within .menu,
#top-menu .ui.dropdown:hover .left.menu,
#top-menu .ui.dropdown:focus-within .left.menu,
.zone-account-dropdown:hover .left.menu,
.zone-account-dropdown:focus-within .left.menu {
  opacity: 1;
  visibility: visible;
}

/* Base dropdown menu items - مشترک برای تمام دراپ‌داون‌ها */
#top-menu .dropdown .menu .item,
#top-menu .ui.dropdown .left.menu .item,
.zone-account-dropdown .left.menu .item {
  color: var(--zone-dropdown-text);

  padding: var(--spacing-md);
  border: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all var(--transition-duration) ease;
  width: 100%;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  text-align: right;
  line-height: var(--line-height-normal);
}

/* ===== Group Buy — Status Badge (7.2.1) ===== */
.status-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem; border-radius: 9999px;
  font-size: var(--text-xs, 0.75rem); font-weight: var(--font-semibold, 600);
}
.status-pending .status-badge { background: var(--orange-100, #FFEDD5); color: var(--orange-700, #9A3412); }
.status-locked .status-badge { background: var(--green-100, #D1FAE5); color: var(--color-brand-success, #059669); }
.status-settled .status-badge { background: var(--purple-100, #F3E8FF); color: var(--purple-700, #7C3AED); }

.remaining-count { font-weight: var(--font-medium, 500); }
.remaining-count.remaining-completed { color: var(--color-brand-success, #059669); }
.group-buy-option { transition: background-color .2s ease, border-color .2s ease; }
.group-buy-option.status-pending { border-color: var(--color-brand-cta-orange, #F59E0B); background: rgba(245,158,11,.06); }
.group-buy-option.status-locked { border-color: var(--color-brand-success, #059669); background: rgba(5,150,105,.06); }
.group-buy-option.status-settled { border-color: var(--purple-700, #7C3AED); background: rgba(124,58,237,.06); }

/* ===== Group Buy — Progress Bar (7.2.2) ===== */
.group-buy-progress { margin-top: .5rem; display: block; }
.group-buy-progress .progress-bar {
  position: relative; width: 100%; height: .5rem;
  background: var(--color-background-tertiary, #F1F5F9);
  border-radius: 9999px; overflow: hidden;
}
.group-buy-progress .progress-fill {
  height: 100%; width: 0%;
  background: var(--color-brand-cta-orange, #F59E0B);
  transition: width .25s ease;
}
.group-buy-progress .progress-text {
  margin-top: .25rem; font-size: var(--text-xs, .75rem);
  color: var(--color-text-secondary, #475569);
}

/* Locked/Settled note */
.gb-note {
  font-size: var(--text-xs, .75rem);
  color: var(--color-text-secondary, #475569);
}

/* Base dropdown item hover states - مشترک برای تمام دراپ‌داون‌ها */
#top-menu .dropdown .menu .item:hover,
#top-menu .ui.dropdown .left.menu .item:hover,
.zone-account-dropdown .left.menu .item:hover {
  background-color: var(--zone-dropdown-hover)!important;
  color: var(--zone-dropdown-text)!important;
}

/* Base dropdown scrollbar styling - مشترک برای تمام دراپ‌داون‌ها */
#top-menu .dropdown .menu::-webkit-scrollbar,
#top-menu .ui.dropdown .left.menu::-webkit-scrollbar,
.zone-account-dropdown .left.menu::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

#top-menu .dropdown .menu::-webkit-scrollbar-track,
#top-menu .ui.dropdown .left.menu::-webkit-scrollbar-track,
.zone-account-dropdown .left.menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#top-menu .dropdown .menu::-webkit-scrollbar-thumb,
#top-menu .ui.dropdown .left.menu::-webkit-scrollbar-thumb,
.zone-account-dropdown .left.menu::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

#top-menu .dropdown .menu::-webkit-scrollbar-thumb:hover,
#top-menu .ui.dropdown .left.menu::-webkit-scrollbar-thumb:hover,
.zone-account-dropdown .left.menu::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
/* ===== end of unified dropdown system ===== */



/* ===== CART DROPDOWN STYLING ===== */
Cart dropdown styling moved from tendra-ltr.css and tendra-rtl.css
#top-menu .dropdown.cart {
  position: relative;
}

#top-menu .dropdown.cart > div img {
  height: 30px;
  width: 30px;
}

#top-menu .dropdown.cart .items-wrapper {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

#top-menu .dropdown.cart .menu {
  border-radius: 1rem;
  max-width: 300px;
  min-width: 300px;
  position: absolute;
  visibility: hidden;
}

#top-menu .dropdown.cart .items .item {
  cursor: text;
  display: flex;
  margin: 0 !important;
  width: 300px;
}

#top-menu .dropdown.cart .items .item.checkout {
  background: #f35353;
  border-radius: 0 0 1rem 1rem !important;
  color: #fff;
  cursor: pointer;
  font-size: 1.28571429rem !important;
  font-weight: 700 !important;
  justify-content: center;
  margin: 0 !important;
  padding: 1rem;
  width: 100%;
}

#top-menu .dropdown.cart .items .item.checkout:active,
#top-menu .dropdown.cart .items .item.checkout:focus,
#top-menu .dropdown.cart .items .item.checkout:hover {
  background: #ed3838 !important;
  font-weight: 700 !important;
}

#top-menu .dropdown.cart .items .item:not(:last-child) {
  border-bottom: 1px solid #ebebeb;
}

#top-menu .dropdown.cart .items .item:hover {
  font-weight: 400 !important;
}

#top-menu .dropdown.cart .items .item .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 1.1rem;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
}

#top-menu .dropdown.cart .items .item strong {
  cursor: pointer;
  font-weight: 600;
  text-align: right;
}

#top-menu .dropdown.cart .items .item strong:hover {
  color: #346894;
}

#top-menu .dropdown.cart .items .item .subcontent {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#top-menu .dropdown.cart .items .item .subcontent input {
  border: 1px solid #dadada;
  box-shadow: none;
  padding: .35rem;
  width: 100%;
}

#top-menu .dropdown.cart .items .item .subcontent div {
  flex: 1;
  text-align: center;
}

#top-menu .dropdown.cart .items .item .subcontent div.price {
  color: #708090;
  flex: 2;
  text-align: right;
}

#top-menu .dropdown.cart .items .item .subcontent div.remove {
  cursor: pointer;
  text-align: left;
}

#top-menu .dropdown.cart .items .item .subcontent div.remove[disabled=disabled] {
  cursor: default;
}

#top-menu .dropdown.cart .items .item .subcontent div.remove:not([disabled=disabled]):hover i {
  font-weight: 700 !important;
}

#top-menu .dropdown.cart .items .item .image {
  background-position: bottom;
  background-size: cover;
  border-radius: 1rem;
  height: 50px;
  max-width: 50px;
  min-width: 50px;
  width: 100%;
}

#top-menu .dropdown.cart span {
  margin-right: .25rem;
}

/* ===== AICHEE ENTERPRISE HEADER STYLING ===== */
/* Professional header styling moved from master.blade.php inline CSS */


.zone-account-dropdown .left.menu::before {
  content: '';
  position: absolute;
  top: -10px; /* فاصله بین دکمه و منو */
  left: 0;
  right: 0;
  height: 10px; /* همان فاصله */
  background: transparent;
  pointer-events: auto;
}

.zone-account-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: var(--color-header-text);
}

.zone-btn-trigger:hover {
  background-color: rgba(255, 255, 255, 0.15);

  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.zone-btn-trigger {
  background-color: rgba(255, 255, 255, 0) !important;

  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}


.zone-account-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-header-text);
}

.zone-btn-trigger i.chevron.down.icon {
  color: var(--color-header-text);
  font-size: 12px;
  margin-right: 4px;
  background-color: rgba(255, 255, 255, 0.15) !important;
}



/* CSS Reset for Header - Force all elements to use our colors */
#top-menu,
#top-menu *,
#top-menu *::before,
#top-menu *::after {
  color: var(--color-header-text) !important;
}

/* Preserve header background */
#top-menu {
  background-color: var(--header-bg) !important;
}

/* Individual items can have transparent background */
#top-menu .item,
#top-menu .item *,
#top-menu .item::before,
#top-menu .item::after {
  background-color: transparent;
}

/* Exception for zone-account-dropdown - keep background opaque 
#top-menu .item.zone-account-dropdown,
#top-menu .item.zone-account-dropdown *,
#top-menu .zone-account-dropdown,
#top-menu .zone-account-dropdown * {
  background-color: var(--zone-dropdown-bg) !important;
}
*/
/* Specific overrides for existing styles */
#top-menu .ui.menu,
#top-menu .ui.menu *,
#top-menu .ui.secondary.menu,
#top-menu .ui.secondary.menu * {
  color: var(--color-header-text) !important;
}

/* Preserve menu background */
#top-menu.ui.menu,
#top-menu.ui.secondary.menu {
  background-color: var(--header-bg) !important;
}

/* Individual menu items can have transparent background */
#top-menu .ui.menu .item,
#top-menu .ui.menu .item *,
#top-menu .ui.secondary.menu .item,
#top-menu .ui.secondary.menu .item * {
  background-color: transparent !important;
}

/* Exception for zone-account-dropdown - keep background opaque */
#top-menu .ui.menu .item.zone-account-dropdown,
#top-menu .ui.menu .item.zone-account-dropdown *,
#top-menu .ui.secondary.menu .item.zone-account-dropdown,
#top-menu .ui.secondary.menu .item.zone-account-dropdown * {
  background-color: var(--zone-dropdown-bg) !important;
}


/* Header core styling */
#top-menu {
  color: var(--color-header-text) !important;
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
}

#top-menu .item {
  color: var(--color-header-text) !important;
}

#top-menu .item a {
  color: var(--color-header-text) !important;
}

#top-menu .item a:hover {
  color: var(--color-zone-yellow) !important;
}

#top-menu .dropdown .toggler {
  color: var(--color-header-text) !important;
}

#top-menu .dropdown .toggler:hover {
  color: var(--color-zone-yellow) !important;
}




/* Ensure header background is applied */
#top-menu.ui.menu {
  background: var(--header-bg) !important;
}

/* Force header styling */
#top-menu {
  background-color: var(--color-zone-dark) !important;
  background-image: none !important;
}

#top-menu * {
  color: var(--color-header-text) !important;
}

#top-menu .ui.menu {
  background: var(--color-zone-dark) !important;
}

/* Override any existing styles */
.ui.secondary.menu#top-menu {
  background: var(--color-zone-dark) !important;
}

/* Final Override - Maximum Specificity */
#top-menu.ui.unstackable.secondary.menu.top.attached {
  background-color: var(--header-bg) !important;
}

/* Force white text for specific problematic elements */
#top-menu .item.categories .toggler,
#top-menu .item.collection,
#top-menu .item.credits,
#top-menu .item.help,
#top-menu .item.earnings,
#top-menu .item.cart,
#top-menu .item.notifications,
#top-menu .item.user,
#top-menu .item a,
#top-menu .item span,
#top-menu .item div,
#top-menu .item .text {
  color: var(--color-header-text) !important;
}

/* Exception for zone-account-dropdown - keep background opaque 
#top-menu .item.zone-account-dropdown,
#top-menu .item.zone-account-dropdown *,
#top-menu .zone-account-dropdown,
#top-menu .zone-account-dropdown * {
  background-color: var(--zone-dropdown-bg) !important;
}
*/
/* Hover states for all items 
#top-menu .item.categories .toggler:hover,
#top-menu .item.collection:hover,
#top-menu .item.credits:hover,
#top-menu .item.help:hover,
#top-menu .item.earnings:hover,
#top-menu .item.cart:hover,
#top-menu .item.notifications:hover,
#top-menu .item.user:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-header-text-hover) !important;
}
*/
/* ===== TENDRA HEADER SPECIFIC STYLES ===== */
/* Enterprise-level header styling for شاه ترند */

/* ===== DROPDOWN STYLING ===== */
/* Unified dropdown styling for all dropdowns (categories, zone-account, etc.) 

#top-menu .dropdown .menu,
.zone-account-dropdown .left.menu {
  background: var(--zone-dropdown-bg);
  border: 1px solid var(--zone-dropdown-border);
  border-radius: 1rem; 
  box-shadow: 0 10px 15px -3px var(--zone-dropdown-shadow);
  margin-top: 8px;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 280px;
  z-index: 1002;
  opacity: 1;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#top-menu .dropdown:hover .menu,
#top-menu .dropdown:focus-within .menu,
.zone-account-dropdown:hover .left.menu,
.zone-account-dropdown:focus-within .left.menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#top-menu .dropdown .menu .item,
.zone-account-dropdown .left.menu .item {
  color: var(--zone-dropdown-text);
  
  padding: 12px 16px;
  border: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  width: 100%;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  text-align: right;
  line-height: var(--leading-normal);
}

#top-menu .dropdown .menu .item:hover,
.zone-account-dropdown .left.menu .item:hover {
  background-color: var(--zone-dropdown-hover);
  color: var(--zone-dropdown-text);
}

/* Special styling for zone-signin-button 
.zone-signin-button {
  background-color: var(--color-zone-orange);
  color: var(--color-header-text);
  font-weight: var(--font-semibold);
  border: 1px solid var(--color-zone-orange);
  box-shadow: 0 2px 4px rgba(255, 153, 0, 0.2);
}
*/

.zone-signin-button:hover {
  background-color: #E88B00;
  color: var(--color-header-text);
  border-color: #E88B00;
  box-shadow: 0 4px 8px rgba(255, 153, 0, 0.3);
}

/* Special styling for header items */
.zone-account-dropdown .left.menu .item.header {
  font-weight: var(--font-semibold);
  background-color: var(--zone-dropdown-header);
  border-bottom: 1px solid var(--zone-dropdown-divider);
}

.zone-account-dropdown .left.menu .item.logout {
  border-top: 1px solid var(--zone-dropdown-divider);
  color: #dc3545;
}

.zone-account-dropdown .left.menu .item.logout:hover {
  background-color: #dc3545;
  color: white;
}

/* Icon styling for all dropdown items */
#top-menu .dropdown .menu .item i.icon,
.zone-account-dropdown .left.menu .item i.icon {
  color: var(--color-text-tertiary);
  width: 16px;
  height: 16px;
  margin-right: 8px;
  font-size: var(--text-sm);
}

#top-menu .dropdown .menu .item:hover i.icon,
.zone-account-dropdown .left.menu .item:hover i.icon {
  color: var(--color-text-secondary);
}

/* ===== ICON STYLING ===== */
/* Force all icons in header to be white */
#top-menu .ai-icon,
#top-menu .ai-icon--md,
#top-menu .icon,
#top-menu .ui.avatar.image {
  color: transparent !important;
  fill: transparent !important;
}

/* Icon hover effects */
#top-menu .ai-icon:hover,
#top-menu .ai-icon--md:hover,
#top-menu .icon:hover {
  color: var(--color-header-text-hover) !important;
  fill: var(--color-header-text-hover) !important;
}

/* ===== AVATAR STYLING ===== */
/* Ensure avatar images are visible */
#top-menu .ui.avatar.image {
  border: 2px solid var(--color-header-text);
  background-color: var(--color-zone-secondary);
}

/* ===== CRITICAL OVERRIDES ===== */
/* Force override any existing styles with maximum specificity */
#top-menu .item.categories .toggler,
#top-menu .item.collection,
#top-menu .item.credits,
#top-menu .item.help,
#top-menu .item.earnings,
#top-menu .item.cart,
#top-menu .item.notifications,
#top-menu .item.user {
  color: var(--color-header-text) !important;
}

/* Exception for zone-account-dropdown - keep background opaque 
#top-menu .item.zone-account-dropdown,
#top-menu .item.zone-account-dropdown *,
#top-menu .zone-account-dropdown,
#top-menu .zone-account-dropdown * {
  background-color: var(--zone-dropdown-bg) !important;
}
*/
/* Hover states for all items 
#top-menu .item.categories .toggler:hover,
#top-menu .item.collection:hover,
#top-menu .item.credits:hover,
#top-menu .item.help:hover,
#top-menu .item.earnings:hover,
#top-menu .item.cart:hover,
#top-menu .item.notifications:hover,
#top-menu .item.user:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-header-text-hover) !important;
}
*/
/* ===== RESPONSIVE HEADER BREAKPOINTS ===== */
/* Enterprise-level responsive design for all screen sizes */

/* CRITICAL: Responsive override for zone-signin-button */
@media (max-width: 768px) {
  #top-menu .zone-account-dropdown .left.menu .item.zone-signin-button {
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    background-color: var(--color-zone-dark) !important;
    color: var(--color-header-text) !important;
  }
}

/* Mobile Header Improvements */
@media (max-width: 767px) {
  #top-menu .wrapper {
    padding: 0 12px;
  }
  
  #top-menu .right.menu .item.search {
    order: -1;
    flex: 1;
    margin: 0 8px;
  }
  
  #top-menu .right.menu .item.search .ui.input>input {
    width: 100%;
    max-width: none;
  }
  
  #top-menu .right.menu>.item:not(.search) {
    padding: 0 8px;
  }
}

/* Large Desktop (1280px+) */
@media (min-width: 1280px) {
  #top-menu .wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
  }
}

/* Desktop (992px - 1279px) */
@media (max-width: 1279px) and (min-width: 992px) {
  #top-menu .wrapper {
    max-width: 100%;
    padding: 0 var(--space-4);
  }
  :root { --hit: 75px; }
  #top-menu { min-height: 75px; }
  #top-menu.home-product { min-height: 80px; }
}

/* Tablet Landscape (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  #top-menu .wrapper {
    max-width: 100%;
    padding: 0 var(--space-3);
  }
  :root { --hit: 70px; }
  #top-menu { min-height: 70px; }
  #top-menu.home-product { min-height: 75px; }
  #top-menu .right.menu .search .ui.input input {
    width: 280px;
    --search-width: 280px;
  }
}

/* Tablet Portrait (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
  #top-menu .wrapper {
    max-width: 100%;
    padding: 0 var(--space-3);
  }
  :root { --hit: 65px; }
  #top-menu { min-height: 65px; }
  #top-menu.home-product { min-height: 70px; }
  #top-menu .item.search {
    max-width: 300px;
    margin: 0 var(--space-2);
  }
}

/* Mobile Large (480px - 575px) */
@media (max-width: 575px) and (min-width: 480px) {
  #top-menu .wrapper {
    max-width: 100%;
    padding: 0 var(--space-2);
  }
  :root { --hit: 60px; }
  #top-menu { min-height: 60px; }
  #top-menu.home-product { min-height: 65px; }
  #top-menu .item.search {
    max-width: 250px;
    margin: 0 var(--space-2);
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
  #top-menu .wrapper {
    max-width: 100%;
    padding: 0 var(--space-2);
  }
  :root { --hit: 56px; }
  #top-menu { min-height: 56px; }
  #top-menu.home-product { min-height: 60px; }
  #top-menu .item.search {
    max-width: 200px;
    margin: 0 var(--space-1);
  }
  #top-menu .right.menu .item:not(.categories):not(.search) {
    display: none;
  }
}

/* Ensure header is always full width */
#top-menu {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
}

#top-menu .wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* Force full width on all screen sizes */
@media (max-width: 100vw) {
  #top-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
  }
}

/* ===== ENHANCED SEARCH BAR STYLING ===== */
/* Professional search bar styling for header */
#top-menu .item.search {
  flex: 1;
  max-width: 400px;
  margin: 0 var(--space-4);
}

#top-menu .item.search .ui.input {
  width: 100%;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

#top-menu .item.search .ui.input:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#top-menu .item.search .ui.input:focus-within {
  box-shadow: 0 0 0 3px rgba(244, 191, 118, 0.3);
  border-color: #F4BF76;
}

#top-menu .item.search .ui.input input {
  background: white;
  border: none;
  padding: 12px 16px 12px 44px;
  font-size: 14px;
  color: var(--color-zone-dark) !important;
  width: 100%;
}

#top-menu .item.search .ui.input input::placeholder {
  color: #64748B;
  font-weight: 400;
}

#top-menu .item.search .ui.input .search.icon {
  color: #F4BF76;
  font-size: 18px;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ===== zone Account Dropdown Base ===== */
.zone-account-dropdown {
  position: relative;
  cursor: pointer;
  z-index: 1001;
}

/* ===== zone Account Dropdown Menu Items - Migrated from tendra-rtl.css ===== */
/* Base item styles - Unified with Categories Dropdown */
#top-menu .user>.left.menu>.item {
  color: var(--zone-dropdown-text) !important;
  font-weight: var(--font-weight-normal) !important;
  margin: 0 !important;
  padding-bottom: var(--spacing-md) !important;
  padding-top: var(--spacing-md) !important;
  position: relative;
  transition: all var(--transition-duration) ease;
  border-radius: 0 !important; /* Match categories dropdown */
}

/* Active and selected states */
#top-menu .user>.left.menu>.item.active,
#top-menu .user>.left.menu>.item.selected {
  background: transparent !important;
  color: var(--zone-dropdown-text) !important;
}

/* Hover state */
#top-menu .user>.left.menu>.item:hover {
  background: var(--zone-dropdown-hover) !important;
  color: var(--zone-dropdown-text) !important;

}


#top-menu .user>.left.menu>.item:first-child:hover {
  background: var(--zone-dropdown-header) !important;
  color: var(--zone-dropdown-text) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* Last child (logout) - Unified with Categories */
#top-menu .user>.left.menu>.item:last-child {
  background: var(--zone-dropdown-bg) !important;
  border-radius: 0 0 1rem 1rem !important; /* Match categories dropdown */
  color: #dc3545 !important;
  border-top: 1px solid var(--zone-dropdown-divider);
}

#top-menu .user>.left.menu>.item:last-child:hover {
  background: #dc3545 !important;
  color: white !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* Earnings item */
#top-menu .user>.left.menu>.item.earnings {
  cursor: default;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium) !important;
  padding: var(--spacing-md) var(--spacing-md) !important;
  text-align: center;
  background: var(--zone-dropdown-header) !important;
  color: var(--zone-dropdown-text) !important;
  border-bottom: 1px solid var(--zone-dropdown-divider);
}

/* Nested left menu - Unified with Categories */
#top-menu .user>.left.menu .left.menu {
  background: var(--zone-dropdown-bg);
  border-radius: 0 .5rem .5rem 0 !important; /* Match categories dropdown */
  box-shadow: 3px 0 5px 1px #d1d1d1 !important; /* Match categories dropdown */
  min-width: 200px;
  top: -42px !important;
  border: 1px solid var(--zone-dropdown-border);
}

#top-menu .user>.left.menu .left.menu .item {
  color: var(--zone-dropdown-text) !important;
  padding-bottom: var(--spacing-md) !important;
  padding-top: var(--spacing-md) !important;
  position: relative;
  transition: all var(--transition-duration) ease;
}

#top-menu .user>.left.menu .left.menu .item:hover {
  background: var(--zone-dropdown-hover) !important;
  color: var(--zone-dropdown-text) !important;
}

#top-menu .user>.left.menu .left.menu .item:hover:after {
  visibility: hidden;
}

/* Dividers between items */
#top-menu .user>.left.menu .left.menu .item:not(:last-child):after {
  background: var(--zone-dropdown-divider) !important;
  bottom: 0;
  content: "";
  height: 1px;
  right: 5%;
  position: absolute;
  width: 90%;
  opacity: 0.3;
}

#top-menu .user>.left.menu .left.menu .item:not(:last-child):after:hover {
  background: var(--zone-dropdown-divider) !important;
  opacity: 0.5;
}


/* Exception for zone-account-dropdown - keep background opaque */
.zone-account-dropdown .left.menu,
.zone-account-dropdown .left.menu * {
  background-color: var(--zone-dropdown-bg);
}

/* ===== DROPDOWN STYLING - شاه ترند ===== */

/* ===== UNIFIED DROPDOWN SYSTEM ===== */

/* ===== FORM DROPDOWN STYLING ===== */
/* Form dropdown styling moved from tendra-ltr.css */
.ui.form .field > .floating.selection.dropdown {
  border-radius: 100px !important;
}

.ui.form .field > .floating.selection.dropdown .menu {
  border-radius: 1rem !important;
}

.ui.form .field > .floating.selection.dropdown > .label {
  border-radius: 100px;
}


/* ===== NOTIFICATIONS DROPDOWN STYLING ===== */
/* Notifications dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#top-menu .dropdown.notifications > div img {
  height: 30px;
  width: 30px;
}

#top-menu .dropdown.notifications .menu {
  border-radius: 1rem;
  margin-top: -1rem !important;
  margin-top: 0;
  position: absolute;
  right: 0;
  top: 85px;
  visibility: hidden;
  width: 300px;
}

#top-menu .dropdown.notifications .menu .items-wrapper {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

#top-menu .dropdown.notifications .menu .item {
  border-radius: 0;
  margin: 0 !important;
  padding: .5rem;
  text-align: left;
}

#top-menu .dropdown.notifications .menu .item:hover {
  font-weight: 400 !important;
}

#top-menu .dropdown.notifications .menu .item:not(:last-child) {
  border-bottom: 1px solid #f5f5f5;
}

#top-menu .dropdown.notifications .menu .item .image {
  background-position: bottom;
  background-size: cover;
  border-radius: 100px;
  height: 50px !important;
  min-width: 50px;
  width: 50px !important;
}

#top-menu .dropdown.notifications .menu .item p,
#top-menu .dropdown.notifications .menu .item time {
  font-size: .9rem;
}

#top-menu .dropdown.notifications .menu .item time {
  float: right;
}

#top-menu .dropdown.notifications .menu .item.all {
  background: #0b93bc;
  border-radius: 0 0 1rem 1rem;
  color: #fff;
  font-weight: 700;
  justify-content: center;
  padding: 1rem;
  text-align: center !important;
}

#top-menu .dropdown.notifications .menu .item.all:hover {
  background: #0fb5e7 !important;
  font-weight: 700;
}

#top-menu .dropdown.notifications .menu div.item {
  cursor: auto;
}

/* ===== CATEGORIES DROPDOWN VARIANT ===== */
/* Categories dropdown uses base dropdown component with custom scrollbar */
#top-menu .dropdown.categories .menu {
  max-height: 300px;
  overflow: auto;
}

/* ===== SEARCH DROPDOWN VARIANT ===== */
/* Search dropdown uses base dropdown component with custom positioning */
#top-menu .dropdown.search .menu {
  background: transparent;
  margin-top: 0; /* Override base margin for search */
  position: absolute;
  right: 0;
  top: 85px;
  visibility: hidden;
  width: 300px;
}

#top-menu .dropdown.search .menu .item {
  margin: 0;
  padding: 0;
}

#top-menu .dropdown.search .menu input {
  border: none;
  border-radius: 500px;
  font-size: 1.4rem;
}

/* ===== FOOTER DROPDOWN STYLING ===== */
/* Footer dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#footer .footer-menu .dropdown .menu {
  border: none !important;
  border-radius: .75rem !important;
  box-shadow: none !important;
  overflow: hidden;
}

#footer .footer-menu .dropdown .menu .wrapper {
  max-height: 120px;
  overflow: auto;
}

#footer .footer-menu .dropdown .menu .header {
  background: #ffff51;
  color: #000 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  padding: 1rem !important;
}

#footer .footer-menu .dropdown .menu .item:not(.header) {
  border-radius: 0 !important;
  margin: 0 !important;
  text-transform: capitalize;
  width: 100%;
}

#footer .footer-menu .dropdown .menu .item:not(.header):hover {
  background: transparent !important;
  font-weight: 600;
}

/* ===== FILTER DROPDOWN STYLING ===== */
/* Filter dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#items .column.left .filter.cities .ui.dropdown,
#items .column.left .filter.countries .ui.dropdown {
  border-radius: 1rem !important;
}

#items .column.left .filter.cities .ui.dropdown .label,
#items .column.left .filter.countries .ui.dropdown .label {
  border-radius: 100px;
}

#items .column.left .filter.cities .ui.dropdown .menu,
#items .column.left .filter.countries .ui.dropdown .menu {
  border-radius: 1rem !important;
}

/* ===== PURCHASE DROPDOWN STYLING ===== */
/* Purchase dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#item > .purchase > .ui.menu .ui.dropdown {
  background: transparent;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
}

#item > .purchase > .ui.menu .ui.dropdown.licenses > .text {
  background: #fff;
  border-radius: .5rem;
  color: #000;
  font-size: 1.1rem;
  font-weight: 600;
  padding: .75rem 1rem;
}

#item > .purchase > .ui.menu .ui.dropdown:before {
  visibility: hidden;
}

#item > .purchase > .ui.menu .ui.dropdown .item {
  font-size: 1.1rem !important;
  min-height: 45px;
}

/* ===== PREPAID CREDITS DROPDOWN STYLING ===== */
/* Prepaid credits dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#prepaid-credits > .body > div.right-side .methods .ui.dropdown {
  border-radius: .75rem !important;
  box-shadow: none;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .text {
  align-items: center;
  display: flex;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .text img {
  border-radius: 100px;
  height: 100%;
  max-height: 34px;
  max-width: 34px;
  width: 100%;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .menu {
  background: #fff;
  border: none;
  border-radius: .75rem;
  box-shadow: none;
  margin-bottom: 1rem;
  margin-top: 1rem;
  max-height: 300px;
  overflow: hidden;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .menu::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .menu::-webkit-scrollbar-track {
  background: #eaeaea;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .menu::-webkit-scrollbar-thumb {
  background: #b061ff;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .menu::-webkit-scrollbar-thumb:hover {
  background: #582a86;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .menu:hover {
  overflow: auto;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item {
  align-items: center;
  display: flex;
  padding: 1.5rem 1.5rem 1rem !important;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item.active,
#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item.selected,
#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item:hover {
  background: #fff;
  font-weight: 600;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item .content {
  min-width: 0;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item img {
  border-radius: 100px;
  height: 50px;
  margin-right: 1rem;
  min-height: 50px;
  min-width: 50px;
  width: 50px;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item .name {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
}

#prepaid-credits > .body > div.right-side .methods .ui.dropdown .item .description {
  line-height: 1.5;
  margin-top: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== CHECKOUT DROPDOWN STYLING ===== */
/* Checkout dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#checkout-page > .container .right-side .methods .ui.dropdown {
  border-radius: .75rem !important;
  box-shadow: none;
}

#checkout-page > .container .right-side .methods .ui.dropdown .text {
  align-items: center;
  display: flex;
}

#checkout-page > .container .right-side .methods .ui.dropdown .text img {
  border-radius: 100px;
  height: 100%;
  max-height: 34px;
  max-width: 34px;
  width: 100%;
}

#checkout-page > .container .right-side .methods .ui.dropdown .menu {
  background: #fff;
  border: none;
  border-radius: .75rem;
  box-shadow: none;
  margin-bottom: 1rem;
  margin-top: 1rem;
  max-height: 300px;
  overflow: hidden;
}

#checkout-page > .container .right-side .methods .ui.dropdown .menu::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

#checkout-page > .container .right-side .methods .ui.dropdown .menu::-webkit-scrollbar-track {
  background: #eaeaea;
}

#checkout-page > .container .right-side .methods .ui.dropdown .menu::-webkit-scrollbar-thumb {
  background: #b061ff;
}

#checkout-page > .container .right-side .methods .ui.dropdown .menu::-webkit-scrollbar-thumb:hover {
  background: #582a86;
}

#checkout-page > .container .right-side .methods .ui.dropdown .menu:hover {
  overflow: auto;
}

#checkout-page > .container .right-side .methods .ui.dropdown .item {
  align-items: center;
  display: flex;
  padding: 1.5rem 1.5rem 1rem !important;
}

#checkout-page > .container .right-side .methods .ui.dropdown .item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

#checkout-page > .container .right-side .methods .ui.dropdown .item.active,
#checkout-page > .container .right-side .methods .ui.dropdown .item.selected,
#checkout-page > .container .right-side .methods .ui.dropdown .item:hover {
  background: #fff;
  font-weight: 600;
}

#checkout-page > .container .right-side .methods .ui.dropdown .item .content {
  min-width: 0;
}

#checkout-page > .container .right-side .methods .ui.dropdown .item img {
  border-radius: 100px;
  height: 50px;
  margin-right: 1rem;
  min-height: 50px;
  min-width: 50px;
  width: 50px;
}

#checkout-page > .container .right-side .methods .ui.dropdown .item .name {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
}

#checkout-page > .container .right-side .methods .ui.dropdown .item .description {
  line-height: 1.5;
  margin-top: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== MOBILE DROPDOWN STYLING ===== */
/* Mobile dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#mobile-menu-2 > .item.ui.dropdown .menu {
  border-radius: 1rem !important;
  margin-bottom: .25rem;
}

#mobile-menu-2 > .item.ui.dropdown .menu .item {
  color: #000 !important;
  display: block;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* ===== HOME PAGE DROPDOWN STYLING ===== */
/* Home page dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#app.home #top-menu .dropdown.cart > div img,
#app.home #top-menu .dropdown.notifications > div img {
  filter: invert(1);
}

/* ===== ITEM DROPDOWN STYLING ===== */
/* Item dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#item .l-side .top.menu .item.dropdown {
  display: none;
}

/* ===== HEADER DROPDOWN STYLING ===== */
/* Header dropdown styling moved from tendra-ltr.css and tendra-rtl.css */
#top-menu .ui.dropdown .header {
  background: #ffff51;
  color: #000 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  padding: 1rem !important;
}

/* ===== RESPONSIVE DROPDOWN OVERRIDES ===== */
/* Responsive dropdown overrides for mobile */

/* Mobile dropdown visibility */
@media (max-width: 768px) {
  #top-menu .dropdown.cart,
  #top-menu .dropdown.notifications {
    display: none;
  }

  #mobile-menu-2 > .item.ui.dropdown .menu {
    border-radius: 1rem !important;
    margin-bottom: .25rem;
  }

  #mobile-menu-2 > .item.ui.dropdown .menu .item {
    color: #000 !important;
    display: block;
    font-size: 1rem !important;
    font-weight: 500 !important;
  }
}

/* Home page dropdown overrides */
#app.home #top-menu .dropdown.cart > div img,
#app.home #top-menu .dropdown.notifications > div img {
  filter: invert(1);
}

/* ===== HEADER DROPDOWN SYSTEM ===== */
/* Unified header dropdown styling for all dropdowns */

/* Base dropdown menu styling */

#top-menu .dropdown .menu,
#top-menu .ui.dropdown .left.menu,
.zone-account-dropdown .left.menu {
  /* DEDUPED: uses unified base defined at top of this file */
}

/* Dropdown visibility states */
#top-menu .dropdown:hover .menu,
#top-menu .dropdown:focus-within .menu,
#top-menu .ui.dropdown:hover .left.menu,
#top-menu .ui.dropdown:focus-within .left.menu,
.zone-account-dropdown:hover .left.menu,
.zone-account-dropdown:focus-within .left.menu {
  opacity: 1;
  visibility: visible;

}

/* Dropdown menu items */
#top-menu .dropdown .menu .item,
#top-menu .ui.dropdown .left.menu .item,
.zone-account-dropdown .left.menu .item {
  /* DEDUPED: inherits item base from unified system */
}

/* Dropdown item hover states */
#top-menu .dropdown .menu .item:hover,
#top-menu .ui.dropdown .left.menu .item:hover,
.zone-account-dropdown .left.menu .item:hover {
  background-color: var(--zone-dropdown-hover);
  color: var(--zone-dropdown-text);
}


/* ===== PRODUCT PAGE (TENDRA) - Migrated from product.blade-new.php ===== */
/* Scope to product page containers to avoid bleeding */
#item .row.main{display:flex;flex-direction:column;gap:24px}
#item .row.main>.column{width:100%;max-width:100%;float:none;display:block}
#item .row.main>.r-side{order:1}
#item .row.main>.l-side{order:2}

/* Header container */
#item #header>.container{display:flex;flex-direction:column;gap:16px;align-items:stretch;padding:12px 16px 16px;max-width:1200px;margin:8px auto 16px}
#item #header .thumb{width:100%;aspect-ratio:1/1;height:auto;margin:0 auto;max-width:360px}
#item #header .thumb img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
#item #header .content{flex:1 1 0}
#item #header .title{font-size:1.5rem;font-weight:600;margin:0 0 1rem}
#item #header .description{opacity:.75;margin-bottom:1rem}
#item #header .accent-line{height:4px;background:#F59E0B;border-radius:9999px;width:40px;margin-top:6px}

/* Screenshots grid */
#item .screenshots .ui.items{display:grid;gap:16px}
#item .screenshots .item.screenshot{border-radius:.35rem;background-size:cover;background-position:center;height:125px}
#item .screenshots .content.images.body{border-top:1px solid #e5e7eb}

/* Breadcrumb bar */
#item .breadcrumb-bar{background:#7C3AED;width:100%}
#item .breadcrumb-bar .container{max-width:1200px;margin:0 auto;padding:10px 24px}
#item .breadcrumb-bar .breadcrumb{display:flex;gap:8px;align-items:center;color:#fff}
#item .breadcrumb-bar .breadcrumb a{background:#fff;color:#7C3AED;border-radius:8px;padding:6px 12px;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.06)}
#item .breadcrumb-bar .breadcrumb .sep{opacity:.5;color:#fff}
#item .breadcrumb-bar .breadcrumb [aria-current="page"]{background:#2563EB;color:#fff;border-radius:8px;padding:6px 12px}

/* Purchase bar */
#item .purchase-bar{background:#ffffff;border-radius:.5rem}
#item .purchase-bar .item.primary{background:#ffffff;color:#7C3AED;border-radius:.5rem}
#item .purchase-bar .item.primary:hover{background:#F8FAFC}
#item .purchase-bar .item.accent{background:#F59E0B;color:#fff;border-radius:.5rem}
#item .price-pill .price{font-weight:700}

/* Price section */
#item .price-section{text-align:center;margin-bottom:20px;padding:16px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}
#item .price-section .price{font-weight:600;color:#000}

/* Actions */
#item #header .actions{display:flex;flex-direction:column;gap:16px;align-items:stretch;margin-top:12px}
#item #header .actions .buy-now{background:#7C3AED;color:#fff;border-radius:.35rem;height:40px;padding:.5rem 1rem}
#item #header .actions .add-to-cart{background:#fff;border:1px solid #F59E0B;color:#F59E0B;border-radius:.35rem;height:40px;padding:.5rem}
#item #header .actions .price{font-size:1.3rem;font-weight:600;line-height:1;order:-1;text-align:center;margin-bottom:8px}

/* Responsive breakpoints */
@media (min-width:768px){
  #item #header>.container{flex-direction:row;gap:24px;align-items:flex-start;padding:16px 24px 20px}
  #item #header .thumb{flex:0 0 300px;width:360px;max-width:none;margin:0 auto;height:360px}
  body[dir="rtl"] #item #header>.container{flex-direction:row}
}
@media (min-width:1024px){
  #item #header .thumb{flex:0 0 360px;width:360px;height:360px}
}
@media (min-width:1280px){
  #item #header>.container{gap:32px}
}

/* Tabs */
#item .tabs-nav{margin-top:12px}

/* License selection */
#item .license-badge{display:flex;gap:8px;align-items:center;padding:12px 13px;border:1px solid #e5e7eb;border-radius:4px;margin-top:12.9px}
#item .license-options{display:flex;flex-direction:column;gap:12px}
#item .license-option{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease}
#item .license-badges .ui.mini.label{font-size:11px}

/* Sharer */
#item .sharer{margin-top:32px;padding:24px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}

/* ===== END PRODUCT PAGE ===== */

/* ===== PRODUCT PAGE SPECIFIC STYLES ===== */
/* Product page component styles using design tokens */

/* Product header content styling */
.product-header .content {
  display: flex;
  flex-direction: column;
  gap: var(--product-content-gap);
}

.product-category-title {
  color: #000000;
  opacity: var(--product-category-opacity);
  text-transform: uppercase;
}

.product-accent-line {
  background: var(--color-brand-cta-orange);
  height: var(--product-accent-height);
  width: var(--product-accent-width);
  border-radius: 9999px;
}

.product-title {
  color: #000000;
  margin-top: var(--product-title-margin-top);
}

/* Rating and engagement styling */
.product-rating-section {
  display: flex;
  gap: var(--rating-gap);
  align-items: end;
  flex-wrap: wrap;
  margin-top: 3.9px;
}

.product-rating {
  display: flex;
  gap: var(--rating-stars-gap);
  align-items: end;
}

.product-stars {
  display: flex;
  gap: 4px;
}

.product-stars .ai-icon {
  width: var(--rating-stars-size);
  height: var(--rating-stars-size);
}

.product-rating-text {
  font-weight: 500;
  font-size: var(--rating-text-size);
  line-height: var(--rating-text-line-height);
  color: #000000;
}

.product-comments {
  display: flex;
  gap: var(--rating-stars-gap);
  align-items: end;
}

.product-comments .ai-icon {
  width: var(--rating-stars-size);
  height: var(--rating-stars-size);
  background-image: url('/assets/images/comment.png');
}

.product-comments-count,
.product-comments-text {
  font-weight: 500;
  font-size: var(--rating-text-size);
  line-height: var(--rating-text-line-height);
  color: #000000;
}

.product-comments-text {
  opacity: 0.75;
}

/* Action buttons styling */
.product-action-buttons {
  display: flex;
  gap: var(--action-buttons-gap);
  align-items: center;
}

.product-like-btn,
.product-share-btn {
  background: var(--action-btn-bg);
  border: none;
  border-radius: var(--action-btn-radius);
  padding: var(--action-btn-padding);
  display: flex;
  align-items: center;
  gap: var(--action-btn-gap);
  cursor: pointer;
}

.product-like-btn .font-button,
.product-share-btn .font-button {
  color: #000000;
}

.product-like-btn .ai-icon,
.product-share-btn .ai-icon {
  width: var(--action-icon-size);
  height: var(--action-icon-size);
}

.product-like-btn .ai-icon {
  background-image: url('/assets/images/like.png');
}

.product-share-btn .ai-icon {
  background-image: url('/assets/images/share.png');
}

/* Product description styling */
.product-description {
  color: #000000;
  opacity: 0.75;
  margin-top: 11.35px;
}

/* Purchase section styling */
.purchase-section {
  text-align: center;
  margin-bottom: var(--purchase-margin-bottom);
  padding: var(--purchase-padding);
  background: var(--purchase-bg);
  border-radius: var(--purchase-radius);
  border: 1px solid var(--purchase-border);
}

.purchase-price {
  color: #000000;
}

/* Purchase actions styling */
.purchase-actions {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: var(--spacing-lg);
  width: 100%;
}

/* Buy button styling */
.product-buy-btn {
  background: var(--btn-buy-bg);
  color: var(--btn-buy-color);
  border-radius: var(--btn-buy-radius);
  height: var(--btn-buy-height);
  padding: var(--btn-buy-padding);
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  justify-content: center;
}

.product-buy-btn:hover {
  background: var(--btn-buy-hover);
  color: var(--btn-buy-color);
}

/* Add to cart button styling */
.product-add-to-cart-btn {
  background: var(--btn-add-bg);
  border: 1px solid var(--btn-add-border);
  color: var(--btn-add-color);
  border-radius: var(--btn-buy-radius);
  height: var(--btn-buy-height);
  padding: var(--btn-buy-padding);
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  justify-content: center;
}

.product-add-to-cart-btn:hover {
  background: var(--btn-add-hover-bg);
}

/* Download button styling */
.product-download-btn {
  background: var(--color-brand-cta-orange);
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sticky purchase bar styling */
.sticky-purchase-bar {
  background: var(--sticky-bar-bg);
  border: 1px solid var(--sticky-bar-border);
  border-radius: var(--sticky-bar-radius);
  padding: var(--sticky-bar-padding);
  box-shadow: var(--sticky-bar-shadow);
  margin-top: var(--spacing-xl);
}

/* Price pill styling */
.price-pill {
  background: var(--price-pill-bg);
  border: 1px solid var(--price-pill-border);
  border-radius: var(--price-pill-radius);
  padding: var(--price-pill-padding);
  display: flex;
  align-items: center;
  gap: var(--price-pill-gap);
}

.price-pill .price {
  font-weight: var(--price-font-weight);
  font-size: var(--price-font-size);
  line-height: var(--price-line-height);
  color: #000000;
}

.price-pill .price.promo {
  color: var(--price-promo-color);
}

.price-pill .price.default {
  opacity: var(--price-default-opacity);
}

/* License selection styling */
.license-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.license-option {
  display: flex;
  align-items: center;
  gap: var(--license-option-gap);
  padding: var(--license-option-padding);
  border: 1px solid var(--license-option-border);
  border-radius: var(--license-option-radius);
  background: var(--license-option-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.license-option:hover {
  border-color: var(--license-option-hover-border);
  box-shadow: var(--license-option-hover-shadow);
}

.license-option input[type="radio"] {
  margin: 0 0 0 6px;
  accent-color: var(--color-brand-ai-purple);
}

.license-option .name {
  font-weight: 600;
  color: #111827;
}

.license-option .sep {
  flex: 1;
}

.license-option .price {
  font-weight: 700;
  color: #111827;
}

.license-option .price s {
  color: #6b7280;
  font-weight: 400;
  margin-inline-start: 6px;
}

/* Group buy progress styling */
.group-buy-progress {
  margin-top: 0.5rem;
  display: block;
}

.group-buy-progress-bar {
  position: relative;
  width: 100%;
  height: var(--group-buy-progress-height);
  background: var(--group-buy-progress-bg);
  border-radius: 9999px;
  overflow: hidden;
}

.group-buy-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--group-buy-progress-fill);
  transition: width 0.25s ease;
}

.group-buy-progress-text {
  margin-top: 0.25rem;
  font-size: var(--group-buy-note-size);
  color: var(--group-buy-note-color);
}

/* Group buy note styling */
.group-buy-note {
  font-size: var(--group-buy-note-size);
  color: var(--group-buy-note-color);
}

/* ===== END PRODUCT PAGE SPECIFIC STYLES ===== */

/* Product - compact license chooser */
#item .license-options.compact{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
#item .license-option.compact{display:flex;align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;padding:10px 12px;cursor:pointer;transition:box-shadow .2s ease,border-color .2s ease}
#item .license-option.compact:hover{border-color:#d1d5db;box-shadow:0 1px 4px rgba(0,0,0,.06)}
#item .license-option.compact input[type="radio"]{margin:0 0 0 6px;accent-color:#7C3AED}
#item .license-option.compact .name{font-weight:600;color:#111827}
#item .license-option.compact .sep{flex:1}
#item .license-option.compact .price{font-weight:700;color:#111827}
#item .license-option.compact .price s{color:#6b7280;font-weight:400;margin-inline-start:6px}