/* =========================================================
   GLASSIP – Estilos sobre base WordPress (2025)
   Mantiene la funcionalidad responsive original
   ========================================================= */

/* ---------- Variables de marca ---------- */
:root {
  --dark: #1b2029;
  --dark-2: #0f141d;
  --lime: #c5e82e;
  --txt: #fff;
  --radius: 10px;
  --grad-a: #63bbe8;
  --grad-b: #cad400;
}

/* =========================================================
   OVERRIDE DEL BODY Y FONDO
   ========================================================= */
body.login {
  background: var(--dark) !important;
  font-family: 'Inter', sans-serif !important;
}

/* =========================================================
   CONTENEDOR PRINCIPAL #login
   ========================================================= */
#login {
  /* Mantiene el width y responsive del original */
}

/* =========================================================
   FORMULARIO - Aplicar tema oscuro
   ========================================================= */
.login form {
  background: var(--dark-2) !important;
  border: none !important;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* =========================================================
   LOGO - Reemplazar con Glassip
   ========================================================= */
.login h1 a {
  background-image: url('https://shop.glassipbrand.com/wp-content/uploads/2025/05/LOGO-PhotoRoom.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 260px !important;
  height: 60px !important;
  margin: 0 auto 24px !important;
}

/* =========================================================
   LABELS - Color lime
   ========================================================= */
.login label {
  color: var(--lime) !important;
  font-weight: 600 !important;
}

/* Excepción para el label de "Recordarme" */
.login .forgetmenot label {
  color: var(--txt) !important;
  font-weight: 500 !important;
}

/* =========================================================
   CAMPOS DE INPUT
   ========================================================= */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  background: #000 !important;
  border: 2px solid #2a2f3a !important;
  border-radius: var(--radius) !important;
  color: var(--txt) !important;
  /* Mantiene el font-size y padding del original para responsive */
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: var(--lime) !important;
  box-shadow: 0 0 0 2px rgba(197, 232, 46, 0.4) !important;
  outline: none !important;
}

.login ::placeholder {
  color: #8d94a7 !important;
}

/* =========================================================
   CHECKBOX "RECORDARME"
   ========================================================= */
.login input[type="checkbox"] {
  transform: scale(1.15);
  margin-right: 0.5rem;
}

/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */
.login .button-primary {
  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: #000 !important;
  font-family: 'Days One', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
  /* Mantiene el float y dimensiones del original */
}

.login .button-primary:hover {
  filter: brightness(1.1) !important;
  color: #000 !important;
}

.login .button-primary:focus {
  filter: brightness(1.1) !important;
  color: #000 !important;
  box-shadow: 0 0 0 2px rgba(197, 232, 46, 0.4) !important;
}

/* =========================================================
   MENSAJES DE ERROR/ÉXITO
   ========================================================= */
.login .message,
.login .notice,
.login .success,
.login #login_error {
  background-color: var(--dark-2) !important;
  color: var(--txt) !important;
  border-left: 4px solid var(--lime) !important;
  border-radius: var(--radius);
}

.login .success {
  border-left-color: var(--lime) !important;
}

.login .notice-error {
  border-left-color: #ff6b6b !important;
}

/* =========================================================
   ENLACES INFERIORES
   ========================================================= */
.login #nav a,
.login #backtoblog a {
  color: #63bbe8 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.login #nav a:hover,
.login #backtoblog a:hover {
  color: var(--lime) !important;
  text-decoration: underline !important;
}

.login #nav a:focus,
.login #backtoblog a:focus {
  color: var(--lime) !important;
  box-shadow: 0 0 0 2px rgba(197, 232, 46, 0.4) !important;
}

/* =========================================================
   LANGUAGE SWITCHER - Mantiene posición original
   ========================================================= */
.login .language-switcher {
  /* Mantiene el margin y text-align del original */
}

.login #language-switcher {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.login #language-switcher select {
  background: #000 !important;
  border: 2px solid #2a2f3a !important;
  border-radius: var(--radius) !important;
  color: var(--txt) !important;
  padding: 0.5rem 1rem !important;
}

.login .language-switcher .button {
  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: #000 !important;
  font-weight: 600 !important;
  padding: 0.55rem 1rem !important;
}

.login .language-switcher .button:hover {
  filter: brightness(1.1) !important;
  color: #000 !important;
}

/* =========================================================
   BOTÓN MOSTRAR/OCULTAR CONTRASEÑA
   ========================================================= */
.login .button.wp-hide-pw {
  background: transparent !important;
  border: 1px solid #2a2f3a !important;
  color: var(--txt) !important;
}

.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
  border-color: var(--lime) !important;
  background: rgba(197, 232, 46, 0.1) !important;
}

/* =========================================================
   AJUSTES RESPONSIVE ADICIONALES
   ========================================================= */
@media screen and (max-width: 782px) {
  .login h1 a {
    width: 200px !important;
    height: 50px !important;
  }
}

@media screen and (max-width: 400px) {
  .login h1 a {
    width: 180px !important;
    height: 45px !important;
  }
  
  .login .language-switcher .button {
    width: 100%;
    margin: 5px 0 !important;
  }
}

/* =========================================================
   AJUSTES PARA PANTALLAS PEQUEÑAS EN ALTURA
   ========================================================= */
@media screen and (max-height: 550px) {
  .login h1 a {
    width: 160px !important;
    height: 40px !important;
    margin-bottom: 16px !important;
  }
}