/* ===== LAYOUT STYLES - شاه ترند ===== */
/* Import design tokens */
@import url('../design-system/tokens.css');

/* ===== GLOBAL LAYOUT ===== */
/* Main container layout */
.main.container {
  background: var(--color-background-primary);
  margin: 0 auto;
  max-width: var(--layout-max-width);
  min-height: 100vh;
  width: 100%;
}

/* ===== HEADER LAYOUT ===== */
/* Top menu layout */
#top-menu {
  background: var(--header-bg);
  border: none;
  border-radius: 0;
  box-shadow: var(--header-shadow);
  height: var(--header-height);
  left: 0;
  margin: 0 auto;
  max-width: 100vw;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: var(--z-index-header);
}

#top-menu .wrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--layout-max-width);
  padding: 0 var(--spacing-lg);
  width: 100%;
}

#top-menu .logo {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-start;
}

#top-menu .logo img {
  height: auto;
  max-height: 75px;
  max-width: 200px;
  width: auto;
}

#top-menu .right.menu {
  align-items: center;
  display: flex;
  gap: var(--spacing-md);
  height: 100%;
  justify-content: flex-end;
}

/* ===== DROPDOWN BASE STYLES ===== */
/* Common dropdown container styles */
#top-menu .dropdown .menu,
.zone-account-dropdown .left.menu {
  background-color: var(--zone-dropdown-bg);

  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 12px var(--zone-dropdown-shadow);
  margin-top: var(--spacing-sm);
  min-width: 200px;
  padding: var(--spacing-sm) 0;
  position: absolute;
  top: 100%;
  z-index: var(--z-index-dropdown);
}

/* Common dropdown item styles */
#top-menu .dropdown .menu .item,
.zone-account-dropdown .left.menu .item {
  background-color: transparent;
  border: none;
  color: var(--zone-dropdown-text);
  cursor: pointer;
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  text-decoration: none;
  transition: all var(--transition-duration) ease;
  width: 100%;
}

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

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

/* Dropdown dividers */
#top-menu .dropdown .menu .divider,
.zone-account-dropdown .left.menu .divider {
  background-color: var(--zone-dropdown-divider);
  border: none;
  height: 1px;
  margin: var(--spacing-xs) 0;
  opacity: 0.3;
}

/* Dropdown headers */
#top-menu .dropdown .menu .header,
.zone-account-dropdown .left.menu .header {
  background-color: var(--zone-dropdown-header);
  color: var(--zone-dropdown-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  
  width: 100%;
}

/* ===== RESPONSIVE LAYOUT ===== */
/* Mobile layout adjustments */
@media (max-width: 768px) {
  #top-menu .wrapper {
    padding: 0 var(--spacing-md);
  }

  #top-menu .logo img {
    max-width: 150px;
  }

  #top-menu .right.menu {
    gap: var(--spacing-sm);
  }

  /* Mobile dropdown adjustments */
  #top-menu .dropdown .menu,
  .zone-account-dropdown .left.menu {
    left: 0;
    min-width: 180px;
    right: auto;
  }
}

/* Tablet layout adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  #top-menu .wrapper {
    padding: 0 var(--spacing-lg);
  }

  #top-menu .logo img {
    max-width: 180px;
  }
}

/* ===== UTILITY CLASSES ===== */
/* Flexbox utilities */
.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

/* Spacing utilities */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }

/* Text utilities */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/*
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
*/

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }

/* Position utilities */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }

/* Overflow utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }

/* Border utilities */
.border-0 { border: 0 !important; }
.border-radius { border-radius: var(--border-radius-sm) !important; }
.border-radius-lg { border-radius: var(--border-radius-lg) !important; }
.border-radius-xl { border-radius: var(--border-radius-xl) !important; }

/* Shadow utilities */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ===== PRODUCT PAGE LAYOUT ===== */
/* Product page main layout structure */
.product-page {
  background: var(--product-header-bg);
  min-height: 100vh;
  width: 100%;
}

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

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

/* Product rating and engagement layout */
.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-comments {
  display: flex;
  gap: var(--rating-stars-gap);
  align-items: end;
}

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

/* Purchase section layout */
.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-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%;
}

/* Sticky purchase bar layout */
.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 {
  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);
}

/* License selection layout */
.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;
}

/* Group buy progress layout */
.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;
}

/* ===== MOBILE LAYOUT COMPONENTS ===== */
/* Mobile search bar layout */
#mobile-search-bar {
  background: var(--mobile-menu-bg);
  display: none !important;
  height: var(--search-bar-height);
  right: 0;
  padding: var(--spacing-md);
  position: fixed;
  top: var(--mobile-search-top);
  width: 100%;
  z-index: var(--search-bar-z-index);
}

/* Mobile menu layout */
#mobile-menu {
  background: var(--mobile-menu-bg);
  border: 0;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--mobile-menu-shadow);
  height: var(--mobile-menu-height);
  right: var(--mobile-menu-right);
  margin: 0;
  overflow-y: auto;
  padding: var(--spacing-sm);
  position: fixed;
  top: var(--mobile-menu-top);
  visibility: hidden;
  width: var(--mobile-menu-width);
  z-index: var(--mobile-menu-z-index);
}

#mobile-menu .wrapper {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

/* Mobile menu 2 layout */
#mobile-menu-2 {
  align-items: center;
  background: var(--mobile-menu-2-bg);
  bottom: 0;
  display: none;
  height: var(--mobile-menu-2-height);
  justify-content: space-between;
  margin: 0;
  position: fixed;
  width: 100%;
  z-index: var(--mobile-menu-2-z-index);
}

/* Blur overlay layout */
#blur {
  background: var(--blur-bg);
  height: 100%;
  top: 0;
  z-index: var(--blur-z-index);
}

#blur,
#items-menu {
  right: 0;
  position: fixed;
  width: 100%;
}

/* Items menu layout */
#items-menu {
  background: var(--items-menu-bg);
  display: none;
  top: var(--items-menu-top);
  z-index: var(--items-menu-z-index);
}

#items-menu:after,
#items-menu:before {
  bottom: 20px;
  content: "";
  height: 50%;
  position: absolute;
  width: 50%;
  z-index: -1;
}

#items-menu:before {
  box-shadow: -3px 11px 9px 3px var(--items-menu-shadow);
  right: 0;
  transform: rotate(2deg);
}

#items-menu:after {
  box-shadow: 3px 11px 9px 3px var(--items-menu-shadow);
  left: 0;
  transform: rotate(-2deg);
}

/* Items menu categories layout */
#items-menu .categories {
  background: var(--items-menu-bg);
  display: flex;
  height: 47px;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
  width: 100vw;
}

#items-menu .categories .wrapper>.item {
  color: var(--items-menu-text);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--items-category-font-size);
  margin: 0;
  padding: var(--items-category-padding);
  position: relative;
}

#items-menu .categories .wrapper>.item:last-child {
  margin-left: var(--spacing-md);
}

#items-menu .categories .wrapper>.item:not(:first-child) {
  margin-right: -0.25rem;
}

#items-menu .categories .wrapper>.item:not(:last-child):after {
  background: var(--items-menu-divider);
  content: "";
  height: 20px;
  right: auto;
  position: absolute;
  left: 0;
  top: 13.5px;
  width: 1px;
}

#items-menu .categories .wrapper>.item>span {
  border: 1px solid var(--items-menu-border);
  border-radius: var(--border-radius-sm);
  display: block;
  padding: var(--items-category-padding);
}

#items-menu .categories .wrapper>.item .items {
  background: var(--items-menu-bg);
  display: none;
  right: 0;
  max-height: calc(100vh - 113px);
  min-width: 200px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  z-index: var(--items-submenu-z-index);
}

#items-menu .categories .wrapper>.item .items .item {
  display: block;
  margin: 0;
  padding: var(--items-submenu-padding);
  position: relative;
}

#items-menu .categories .wrapper>.item .items .item:not(:last-child):after {
  background: #f7f7f7;
  bottom: 0;
  content: "";
  height: 1px;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

#items-menu .categories .wrapper>.item.active .items {
  display: block;
}