/* Icons Container Positioning CSS - ULTIMATE FORCE */

/* ========================================
   ULTIMATE FORCE OVERRIDES - RIGHT POSITIONING
   ======================================== */

/* Force icons container to be on RIGHT - ULTIMATE OVERRIDE */
.nav-buttons-container,
.primary-menu .nav-buttons-container,
.header-navigation .nav-buttons-container,
.header-navigation .primary-menu .nav-buttons-container,
.header-navigation .container-fluid .nav-buttons-container {
  order: 3 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-self: flex-end !important;
  align-self: center !important;
  position: relative !important;
  z-index: 999999 !important;
}

/* Force right positioning regardless of logo position */
.primary-menu:has(.site-branding) .nav-buttons-container,
.primary-menu .site-branding ~ .nav-buttons-container,
.primary-menu .nav-menu ~ .nav-buttons-container {
  order: 3 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-self: flex-end !important;
}

/* ========================================
   DEFAULT ICONS CONTAINER POSITIONING - RIGHT SIDE (LAST)
   ======================================== */

/* Default icons container positioning - RIGHT SIDE (LAST) */
.nav-buttons-container {
  /* Default position - right side */
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
  
  /* Ensure proper display */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Container styling */
  background: var(--icons-container-background, #f5f5f5) !important;
  border-radius: var(--icons-container-border-radius, 25px) !important;
  padding: var(--icons-container-padding, 10px 15px) !important;
  gap: var(--icons-container-gap, 15px) !important;
}

/* ========================================
   FORCE RIGHT POSITIONING (LAST)
   ======================================== */

/* Icons container should ALWAYS be on RIGHT (LAST) */
.primary-menu .nav-buttons-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
  justify-self: flex-end !important;
}

/* When logo is on LEFT, icons container on RIGHT */
.primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container,
.primary-menu .site-branding[data-position="left"] ~ .nav-buttons-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* When logo is on RIGHT, icons container on RIGHT */
.primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container,
.primary-menu .site-branding[data-position="right"] ~ .nav-buttons-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* When logo is on CENTER, icons container on RIGHT */
.primary-menu:has(.site-branding[data-position="center"]) .nav-buttons-container,
.primary-menu .site-branding[data-position="center"] ~ .nav-buttons-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* ========================================
   LANGUAGE-SPECIFIC RIGHT POSITIONING (LAST)
   ======================================== */

/* Arabic/RTL Layout - Icons container positioning */
html[dir="rtl"] .nav-buttons-container,
body[dir="rtl"] .nav-buttons-container,
html[lang="ar"] .nav-buttons-container,
body[lang="ar"] .nav-buttons-container {
  /* Default RTL position - right side */
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* Arabic/RTL - When logo is on LEFT, icons container on RIGHT */
html[dir="rtl"] .primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container,
body[dir="rtl"] .primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container,
html[lang="ar"] .primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container,
body[lang="ar"] .primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* Arabic/RTL - When logo is on RIGHT, icons container on RIGHT */
html[dir="rtl"] .primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container,
body[dir="rtl"] .primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container,
html[lang="ar"] .primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container,
body[lang="ar"] .primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* English/LTR Layout - Icons container positioning */
html[dir="ltr"] .nav-buttons-container,
body[dir="ltr"] .nav-buttons-container,
html[lang="en"] .nav-buttons-container,
body[lang="en"] .nav-buttons-container {
  /* Default LTR position - right side */
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* English/LTR - When logo is on LEFT, icons container on RIGHT */
html[dir="ltr"] .primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container,
body[dir="ltr"] .primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container,
html[lang="en"] .primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container,
body[lang="en"] .primary-menu:has(.site-branding[data-position="left"]) .nav-buttons-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* English/LTR - When logo is on RIGHT, icons container on RIGHT */
html[dir="ltr"] .primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container,
body[dir="ltr"] .primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container,
html[lang="en"] .primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container,
body[lang="en"] .primary-menu:has(.site-branding[data-position="right"]) .nav-buttons-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 3 !important; /* Icons container comes LAST (right side) */
}

/* ========================================
   ICONS CONTAINER STYLING
   ======================================== */

/* Icons container appearance */
.nav-buttons-container {
  /* Container dimensions */
  width: var(--icons-container-width, auto) !important;
  height: var(--icons-container-height, auto) !important;
  min-width: var(--icons-container-min-width, 200px) !important;
  min-height: var(--icons-container-min-height, 50px) !important;
  
  /* Container styling */
  background: var(--icons-container-background, #f5f5f5) !important;
  border: var(--icons-container-border, 1px solid #e0e0e0) !important;
  border-radius: var(--icons-container-border-radius, 25px) !important;
  padding: var(--icons-container-padding, 10px 15px) !important;
  
  /* Container shadows */
  box-shadow: var(--icons-container-box-shadow, 0 2px 8px rgba(0,0,0,0.1)) !important;
  
  /* Container layout */
  display: var(--icons-container-display, flex) !important;
  justify-content: var(--icons-container-justify-content, center) !important;
  align-items: var(--icons-container-align-items, center) !important;
  gap: var(--icons-container-gap, 15px) !important;
  
  /* Container positioning */
  position: relative !important;
  z-index: 1000 !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 1200px) {
  .nav-buttons-container {
    min-width: var(--icons-container-min-width-tablet, 180px) !important;
    padding: var(--icons-container-padding-tablet, 8px 12px) !important;
    gap: var(--icons-container-gap-tablet, 12px) !important;
  }
}

@media (max-width: 768px) {
  .nav-buttons-container {
    /* Mobile positioning - right */
    margin: 10px 0 10px auto !important;
    order: 3 !important; /* Icons container comes last on mobile */
    
    /* Mobile styling */
    min-width: var(--icons-container-min-width-mobile, 160px) !important;
    padding: var(--icons-container-padding-mobile, 6px 10px) !important;
    gap: var(--icons-container-gap-mobile, 10px) !important;
  }
}

/* ========================================
   ICONS VISIBILITY CONTROL
   ======================================== */

/* Control individual icon visibility */
.nav-buttons-container .search-icon {
  display: var(--show-search-icon, block) !important;
}

.nav-buttons-container .dashboard-icon {
  display: var(--show-dashboard-icon, block) !important;
}

.nav-buttons-container .language-selector {
  display: var(--show-language-selector, block) !important;
}

/* Hide icons container if disabled */
.nav-buttons-container.hidden {
  display: none !important;
}