/* ========================================
   MEIN KONTO DROPDOWN HEADER – style-header.css
   ======================================== */

/* === Wrapper für Button + Dropdown === */
.header-account-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 1.2rem;
}

/* === BUTTON === */
.account-toggle {
  background: none !important;
  border: none;
  color: #F1F6EB;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  transition: background 0.2s ease;
}

.account-toggle:focus,
.account-toggle:active {
  background: none !important;
  outline: none;
  box-shadow: none;
}

/* === SVG-Icon (Benutzer) === */
.account-toggle .icon-user-outline {
  width: 32px;
  height: 32px;
  stroke: #F1F6EB;
}

/* === Dropdown-Pfeil === */
.account-toggle .dropdown-arrow {
  font-size: 1.1rem;
  margin-top: 2px;
  color: #F1F6EB;
  transition: transform 0.2s ease, color 0.2s ease;
}

.account-toggle[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
  color: #F3C667;
}

/* === DROPDOWN-LISTE === */
.account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(64, 85, 39, 0.92);
  border: 1px solid #33401e;
  border-radius: 4px;
  padding: 0.5rem 0;
  z-index: 9999;
  min-width: 200px;
  list-style: none;
  margin: 0;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.account-dropdown.visible {
  display: block;
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* === DROPDOWN LINKS === */
.account-dropdown li {
  display: block;
}

.account-dropdown li a {
  display: block;
  padding: 0.6rem 1rem;
  color: #F1F6EB;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.account-dropdown li a:hover {
  background: none;
  color: #F3C667;
}

.account-dropdown li.active a {
  font-weight: 700;
  color: #F3C667;
}

/* === RESPONSIVE Anpassung === */
@media (max-width: 768px) {
  .header-account-wrapper {
    margin-left: 0.5rem;
  }

  .account-toggle span {
    display: none;
  }
}


/* ========================================
   Header-Login/Account Umschaltung (SOM)
   ======================================== */

.som-header-auth-wrapper {
  position: relative;
  min-width: 140px;
  min-height: 40px;
}

.som-header-auth-wrapper > .som-header-logged-in,
.som-header-auth-wrapper > .som-header-logged-out {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body.logged-in .som-header-logged-out,
body:not(.logged-in) .som-header-logged-in {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.som-header-logged-out a {
  font-weight: 500;
  color: #F1F6EB !important;
  text-decoration: none;
  opacity: 1 !important;
}

.som-header-logged-out a::before,
.som-header-logged-out a::after {
  display: none !important;
  content: none !important;
}

.som-header-logged-out .divider {
  opacity: 1;
  padding: 0 4px;
}

/* Login/Registrieren-Link im Header optisch angleichen */
.som-login-register-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #F1F6EB !important;
  text-decoration: none;
  background: none !important;
  border: none !important;
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
}

/* LOGIN/REGISTRIEREN ICON SICHTBAR MACHEN */
.som-login-register-link .icon-user-outline {
  width: 28px;         /* Sichtbare Breite */
  height: 28px;        /* Sichtbare Höhe */
  stroke: #F1F6EB;     /* Sichtbare Farbe */
  display: inline-block;
  flex-shrink: 0;
}

.som-login-register-link:hover {
  color: #F3C667 !important;
}

.som-header-auth-wrapper > .som-header-logged-out[style*="display: none"],
.som-header-auth-wrapper > .som-header-logged-in[style*="display: none"] {
  display: none !important;
  position: absolute !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* Sichtbarkeit der Elementor-Suche erzwingen */
.e-search {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Finaler Scroll-Fix für Warenkorb-Button im Header */
.elementor-menu-cart__toggle_button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px !important;
  padding-right: 10px !important;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  flex-wrap: nowrap;
  gap: 6px;
}

/* Verhindert, dass Inhalt das Layout sprengt */
.elementor-menu-cart__toggle_button > * {
  flex-shrink: 1;
  min-width: 0;
}