/* styles.css - MaderraShop */

:root {
    --maderra-color: #89817E;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 100%; /* asegura 16px base */
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fdfdfd;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Top banner */
.top-banner {
    background-color: #ffffff;
    color: #e04d13;
    text-align: center;
    font-size: 0.9rem;
    padding: 8px 10px;
    font-weight: bold;
}

/* Header section */
.maderra-header {
    background-color: #89817E;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px 20px;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 35px;
}

.logo-link {
    display: block;
}

.header-logo {
    height: 100px;
    object-fit: contain;
    max-width: 100%;
}

/* Botón hamburguesa (oculto por defecto en desktop) */
.hamburger {
    display: none;
}

/* Nav principal */
.main-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-bottom: 5px;
}

.main-nav a {
    color: #d9d6d3; /* gris claro como color base */
    font-weight: 500;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.main-nav a:hover,
.main-nav a:focus {
    color: #ffffff; /* blanco al hover/focus */
    outline: none;
}

/* Product section */
.container {
    max-width: 1200px;
    margin: auto;
}

/* Footer */
footer {
    text-align: center;
    padding: 30px;
    background-color: #eee;
    color: #666;
    margin-top: 40px;
}

/* Buttons */
.button {
    background-color: var(--maderra-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
}

.button:hover {
    background-color: #6B6562;
}

/* Topbar */
.topbar {
    background-color: #89817E;
    display: flex;
    align-items: center;
    padding: 10px 40px;
    font-size: 0.85rem;
}

.left-filler { flex: 1; }

.social-icons {
    display: flex;
    gap: 20px;
    flex: 1;
    justify-content: center;
}

.social-icons a {
    color: #d9d6d3;
    font-size: 1.2rem;
    transition: color 0.3s ease;
    text-decoration: none;
    outline: none;
    border: none;
}

.social-icons a:hover { color: #ffffff; }
.social-icons a:focus { outline: none; box-shadow: none; }

.divider {
  height: 25px;
  width: 2px;
  background-color: #ccc;
  margin: 0 16px;
  opacity: 0.5;
}

.user-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: flex-end;
}

.user-links a {
    color: #d9d6d3;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    text-decoration: none;
    outline: none;
    border: none;
}

.user-links a:hover { color: #ffffff; }
.user-links .or { color: #ccc; margin: 0 4px; }

/* Footer layout */
.site-footer {
    background: #f9f9f9;
    font-size: 0.9em;
    color: #555;
    border-top: 1px solid #ddd;
}

.footer-top { max-width: 1200px; margin: auto; }

.footer-top h4 {
    color: #999;
    margin-bottom: 10px;
    font-weight: 600;
}

.social-icons-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.social-icons-footer a {
    color: #89817E;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.social-icons-footer a:hover { color: #000; }

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
}

.footer-col { flex: 1 1 200px; }

.footer-col h4 {
    color: #999;
    margin-bottom: 10px;
    font-weight: 600;
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 6px; }

.footer-col ul li a {
    color: #333;
    text-decoration: none;
}
.footer-col ul li a:hover { text-decoration: underline; }

.footer-col.newsletter form {
    display: flex;
    margin-top: 10px;
}

.footer-col.newsletter input[type="email"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px 0 0 3px;
    outline: none;
}

.footer-col.newsletter button {
    background: #a69b95;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}
.footer-col.newsletter button:hover { background: #b8aea8; }

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid #ddd;
    margin-top: 40px;
}

.payment-logos img {
    height: 60px;
    margin: 0 5px;
    opacity: 0.8;
}

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-clickable { position: static; display: inline-block; }

.dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #d9d6d3;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    font-family: 'Poppins', sans-serif;
}
.dropdown-toggle:hover { color: #fff; }
.dropdown .caret { font-size: 0.7em; margin-left: 5px; }

/* Menú de dropdown oculto por defecto */
.dropdown-click-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #89817E;
  padding: 20px 40px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 1000;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;

  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;
}
.dropdown-click-menu.open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Links dentro del dropdown */
.dropdown-click-menu a {
    display: block;
    color: #fff;
    padding: 5px 0;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
}
.dropdown-click-menu a:hover,
.dropdown-click-menu a:focus {
    color: #ddd;
}

/* Buscador */
.search-container {
  display: none;
  background-color: #eee;
  padding: 20px;
  text-align: center;
}
.search-container.active { display: block; }

#search-input {
  width: 400px;
  max-width: 90%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Mensajes */
.message-container { margin-bottom: 1rem; }

.message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  align-items: center;
}

.message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  align-items: center;
}

.message.info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  align-items: center;
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

/* ===== Topbar centrado SOLO en tablets (769–992px) ===== */
@media (min-width: 769px) and (max-width: 992px) {
  .topbar{
    padding: 8px 18px;
    gap: 10px;
    flex-wrap: wrap;                 /* dos filas */
  }
  .main-nav{
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;     /* ← alinea verticalmente los items */
    gap: 18px;
  }

  /* Quita elementos que desbalancean el centro */
  .left-filler,
  .divider{
    display: none;
  }

  /* Redes: ocupan la primera fila y centradas */
  .social-icons{
    flex: 1 1 100%;
    justify-content: center;
    gap: 16px;
  }
  .social-icons a{ font-size: 1.1rem; }

  /* Links de usuario: segunda fila y centrados */
  .user-links{
    flex: 1 1 100%;
    justify-content: center;
    gap: 14px;
  }
  .user-links a{ font-size: 1rem; }

  .dropdown-clickable{
    position: relative;
    display: inline-flex;    /* ← evita desajustes verticales */
    align-items: center;
    width: auto;
  }

  /* El panel cae justo debajo y centrado respecto al botón */
  .dropdown-click-menu{
    position: fixed;                               /* ← clave para centrar en pantalla */
    left: 50%;
    top: var(--sd-top, 0px);                       /* la calcula JS al abrir */
    transform: translateX(-50%) translateY(-8px);  /* animación */
    width: min(720px, calc(100vw - 32px));
    grid-template-columns: repeat(2, minmax(200px,1fr));
    padding: 16px 24px;
    gap: 14px;
    text-align: center;
    justify-items: center;
    z-index: 1100;
  }
  .dropdown-click-menu.open{
    transform: translateX(-50%) translateY(0);
  }
  .main-nav a,
  .dropdown-toggle{
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    padding: 6px 0;          /* mismo “alto visual” */
    font-size: 0.95rem;      /* igual al resto */
  }
  .dropdown-toggle:focus { outline: none; }
}

/* Móviles (≤ 768px) — BLOQUE COMPACTO */
@media (max-width: 768px) {
  /* Aviso superior */
  .top-banner{
    font-size: 0.65rem;
    line-height: 1.25;
    padding: 6px 8px;
  }

  /* Topbar compacto y redes centradas */
  .topbar{
    padding: 6px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .left-filler{ display:none; }                /* quita el filler para centrar de verdad */
  .social-icons{
    flex: 1 1 100%;
    justify-content: center;
    gap: 14px;
  }
  .social-icons a{ font-size: 1rem; }

  .divider{ display:none; }

  .user-links{
    flex: 1 1 100%;
    justify-content: center;
    gap: 12px;
  }
  .user-links a{ font-size: 0.95rem; }

  /* Header + logo + hamburguesa más pequeño */
  .maderra-header{ padding: 14px 10px; }
  .logo-wrapper{ margin: 6px 0 10px; }
  .header-logo{ height: 56px; }                /* antes 70px */
  .hamburger{
    display: inline-flex;          /* ← hace que se vea */
    align-items: center;
    justify-content: center;
    width: 42px;                   /* opcional, solo para área táctil cómoda */
    height: 34px;                  /* idem */
    font-size: 1.6rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    margin: 4px auto 0;
    z-index: 1101;                 /* por encima de overlays */
  }

  /* Nav colapsado por defecto en móvil */
  .main-nav{
    display: none !important;     /* ← cerrado por defecto */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    text-align: center;
  }
  .main-nav.open{ 
    display: flex !important;     /* ← se muestra solo cuando hay .open */
  }

  /* Dropdown móvil más estrecho */
  .dropdown-clickable {
    position: relative;      /* ya lo tenías para anclar el menú */
    width: 100%;
    display: flex;           /* ← centra el botón */
    justify-content: center;
  }

  /* El menú se muestra justo debajo y centrado respecto al botón */
  .dropdown-click-menu {
    width: 280px;                       /* o "auto" si prefieres */
    max-width: calc(100vw - 24px);      /* evita desbordes */
    left: 50%;
    top: calc(100% + 8px);
    transform: translate(-50%, -8px);   /* animación hacia abajo */
    padding: 12px;
    gap: 10px;
    grid-template-columns: 1fr;         /* 1 columna en móvil */
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
    z-index: 1100;                      /* encima del header */
    text-align: center;
  }

  .dropdown-click-menu.open {
    transform: translate(-50%, 0);      /* estado abierto */
  }

  .dropdown-click-menu a {
    text-align: center;
  }

  .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 6px 10px;
    line-height: 1.2;
    text-align: center;
  }

  .dropdown-toggle:focus {
    outline: 2px solid #fff;     /* foco visible */
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* Footer y buscador */
  footer {
    padding: 18px 12px;       /* antes 30px */
    margin-top: 24px;         /* antes 40px */
  }

  .social-icons-footer {
    gap: 14px;
    margin-bottom: 12px;      /* antes 30px */
  }

  .footer-columns {
    flex-direction: column;
    gap: 2px;                /* antes 20–40px */
  }

  .footer-col { flex: 1 1 170px; }

  .footer-top h4 {
    margin: 4px 0 6px;        /* títulos más pegados */
    font-size: 0.95rem;
  }

  .footer-col p {             /* textos de dirección/teléfono */
    margin: 4px 0;
  }

  .footer-col ul li {
    margin-bottom: 4px;       /* menos espacio entre ítems */
  }

  /* El formulario del newsletter viene con inline style en el HTML.
     Si no lo quitas, overridemos aquí: */
  .footer-col.newsletter form {
    margin-top: 20px !important;   /* reduce el hueco del form */
  }

  .footer-col.newsletter {
    margin-top: -50px
  }

  .footer-bottom {
    margin-top: 16px;         /* antes 40px */
    padding-top: 12px;        /* antes 30px */
  }

  .payment-logos img {
    height: 36px;             /* ya reducido, un poco más compacto */
    margin: 0 4px;
  }
  #search-input { width: 100%; }
}

/* Ultra-compacto para teléfonos muy angostos */
@media (max-width: 380px){
  .header-logo{ height: 50px; }
  .user-links a{ font-size: 0.88rem; }
  .social-icons a{ font-size: 0.95rem; }
}