/* ============================================
   CHARLYS GETRÄNKE - MAIN STYLESHEET
   Archivo principal que importa todos los módulos
   ============================================ */

/* Base Styles */
@import url("./css/base/variables.css");
@import url("./css/base/reset.css");
@import url("./css/base/typography.css");
@import url("./css/base/utilities.css");
@import url("./css/base/animations.css");

/* Layout */
@import url("./css/layout/header.css");
@import url("./css/layout/footer.css");

/* Components */
@import url("./css/components/buttons.css");
@import url("./css/components/cards.css");
@import url("./css/components/forms.css");
@import url("./css/components/modal.css");

/* Sections */
@import url("./css/sections/hero.css");
@import url("./css/sections/purchase-info.css");
@import url("./css/sections/delivery-districts.css");
@import url("./css/sections/company-history.css");
@import url("./css/sections/callback.css");
@import url("./css/sections/categories.css");
@import url("./css/sections/features.css");
@import url("./css/sections/products.css");
@import url("./css/sections/contact.css");

/* Pages */
@import url("./css/pages/products-landing.css");
@import url("./css/pages/catalog.css");
@import url("./css/pages/login.css");

/* Responsive */
@import url("./css/base/responsive.css");

/* ============================================
   AUTENTICACIÓN & USER DROPDOWN (ESTILO PREMIUM)
   ============================================ */

#auth-status-container {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

/* 1. Botón de Login (Estado No Logueado) */
.login-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  background: transparent;
  color: #cda434; /* Dorado */
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  border: 1px solid #cda434;
}

.login-nav-btn:hover {
  background: #cda434;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(205, 164, 52, 0.3);
}

/* 2. Botón del Usuario (Estado Logueado) */
.user-dropdown-btn {
  background: rgba(205, 164, 52, 0.1);
  border: 1px solid rgba(205, 164, 52, 0.4);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.user-dropdown-btn:hover {
  background: rgba(205, 164, 52, 0.2);
  border-color: #cda434;
}

.user-dropdown-btn .user-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.chevron-icon {
  transition: transform 0.3s ease;
}

/* 3. Contenedor del Dropdown (Fondo Oscuro) */
.user-dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: #1a1a1a; /* Fondo oscuro premium */
  min-width: 240px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  z-index: 9999;
  overflow: hidden;
}

.user-dropdown-content.show {
  display: block;
  animation: fadeInDropdown 0.25s ease-out;
}

/* 4. Cabecera del Dropdown */
.dropdown-header {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid #2a2a2a;
}

.status-label {
  display: inline-block;
  font-size: 9px;
  color: #cda434;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  border: 1px solid rgba(205, 164, 52, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
}

.user-email-text {
  color: #bbbbbb !important;
  font-size: 0.8rem;
  font-weight: 400;
  margin: 0;
  word-break: break-all;
}

/* 5. Enlaces e Items */
.user-dropdown-content a,
.user-dropdown-content .dropdown-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  text-decoration: none;
  color: #eeeeee;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.user-dropdown-content a:hover {
  background: rgba(205, 164, 52, 0.1);
  color: #cda434;
  padding-left: 22px; /* Efecto sutil de desplazamiento */
}

.user-dropdown-content hr {
  border: 0;
  border-top: 1px solid #2a2a2a;
  margin: 0;
}

/* 6. Botón de Logout (Rojo elegante) */
.logout-link {
  color: #ff5555 !important;
  font-weight: 600 !important;
  background: rgba(255, 85, 85, 0.02);
}

.logout-link:hover {
  background: rgba(255, 85, 85, 0.1) !important;
  color: #ff7777 !important;
}

/* Utilidades */
.hidden {
  display: none !important;
}

/* Animaciones */
@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ajustes Responsive */
@media (max-width: 768px) {
  .login-nav-btn span,
  .user-name {
    display: none; /* Solo iconos en móviles */
  }
  .login-nav-btn,
  .user-dropdown-btn {
    padding: 10px;
  }
  .user-dropdown-content {
    position: fixed;
    top: 70px;
    right: 10px;
    left: 10px;
    min-width: unset;
  }
}

.hero-center-img {
  margin-bottom: 2rem; /* Espaciado entre la imagen y el texto inferior */
  width: 100%;
  max-width: 450px; /* Controla el tamaño máximo de la imagen aquí */
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-center-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Efecto sutil de flotación (opcional, le da un toque premium) */
  animation: floatAnimation 4s ease-in-out infinite;
}

@keyframes floatAnimation {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}