/**
 * Auth Form Styles (Login/Register)
 * 
 * @package Gestor_Suscripciones_Stripe
 */

body:has(.gss-auth-hide-page-chrome) .entry-title,
body:has(.gss-auth-hide-page-chrome) .page-title,
body:has(.gss-auth-hide-page-chrome) .page-header,
body:has(.gss-auth-hide-page-chrome) .wp-block-post-title,
body:has(.gss-auth-hide-page-chrome) .elementor-page-title {
    display: none !important;
}
body:has(.gss-auth-hide-page-chrome) .entry-header {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
}
body:has(.gss-auth-hide-page-chrome) .entry-content,
body:has(.gss-auth-hide-page-chrome) .site-content,
body:has(.gss-auth-hide-page-chrome) .content-area,
body:has(.gss-auth-hide-page-chrome) main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.page:has(.gss-auth-hide-page-chrome) .entry,
body.page:has(.gss-auth-hide-page-chrome) article {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.gss-auth-message:empty {
    margin: 0 !important;
    padding: 0 !important;
}

/* Wrapper
   3.8+: "full-bleed" para escapar del contenedor del tema.
   Si el tema pone `max-width: 1140px` o una sidebar en `.entry-content`, el
   wrapper quedaría centrado sólo dentro de ese hueco, no de la pantalla.
   Con `width: 100vw` y `margin-left: calc(50% - 50vw)` el wrapper se estira
   hasta ambos bordes del viewport independientemente del padre. Luego, con
   flex-center, el container (`max-width: 480px`) queda centrado respecto a
   la pantalla real.
   `min-height: calc(100vh - 80px)` reserva 80px para el header del tema
   (valor bajo que funciona con la mayoría de headers). Si tu tema tiene
   header más alto, puede quedar ligeramente desplazado, pero el form queda
   mucho más cerca del centro óptico que con 85vh. */
.gss-auth-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.gss-auth-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    overflow: hidden;
    width: 100%;
    max-width: 480px;
}

/* Header — ligero en desktop */
.gss-auth-header { text-align: center; padding: 20px 20px 16px; background: #fff; }
.gss-auth-logo { margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.gss-auth-logo img { display: block; height: auto; max-height: 100px; width: auto; }
.gss-auth-icon { width: 52px; height: 52px; margin: 0 auto 12px; background: var(--gss-auth-icon-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.gss-auth-icon svg { width: 28px; height: 28px; color: #fff; }
.gss-auth-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #1e293b; }
.gss-auth-subtitle { margin: 0; font-size: 13px; color: #64748b; }

/* Tabs */
.gss-auth-tabs { display: flex; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.gss-auth-tab { flex: 1; padding: 12px 14px; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: #64748b; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gss-auth-tab:hover { color: #334155; background: #f1f5f9; }
.gss-auth-tab.active { color: var(--gss-auth-tab-active); background: #fff; border-bottom: 2px solid var(--gss-auth-tab-active); margin-bottom: -1px; }
.gss-auth-tab svg { flex-shrink: 0; }

/* Panels */
.gss-auth-panel { display: none; padding: 20px 20px 22px; }
.gss-auth-panel.active { display: block; }

/* Form Groups */
.gss-auth-form .gss-form-group { margin-bottom: 14px; }
.gss-auth-form .gss-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .gss-auth-form .gss-form-row { grid-template-columns: 1fr; } }

.gss-auth-form label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 500; color: #374151; font-size: 13px; }
.gss-auth-form label svg { color: #9ca3af; }
.gss-auth-form label .required { color: #ef4444; }

.gss-auth-form input[type="email"],
.gss-auth-form input[type="password"],
.gss-auth-form input[type="text"] {
    width: 100%; padding: 11px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s; background: #fff; box-sizing: border-box;
}
.gss-auth-form input::placeholder { color: #9ca3af; }
.gss-auth-form input:focus { outline: none; border-color: var(--gss-auth-input-focus); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }

.gss-field-hint { display: block; margin-top: 4px; font-size: 12px; color: #9ca3af; }

/* Password wrapper */
.gss-password-wrapper { position: relative; }
.gss-password-wrapper input { padding-right: 44px; }
.gss-toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; }
.gss-toggle-password:hover { color: #6b7280; }

/* Password feedback area */
.gss-password-feedback { margin-bottom: 20px; }

/* Password strength */
.gss-password-strength { margin-bottom: 8px; }
.gss-strength-bar { height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
.gss-strength-bar span { display: block; height: 100%; width: 0; transition: width 0.3s, background 0.3s; border-radius: 2px; }
.gss-password-strength.weak .gss-strength-bar span { background: #ef4444; }
.gss-password-strength.fair .gss-strength-bar span { background: #f59e0b; }
.gss-password-strength.good .gss-strength-bar span { background: #10b981; }
.gss-password-strength.strong .gss-strength-bar span { background: #059669; }
.gss-strength-text { display: block; margin-top: 4px; font-size: 12px; color: #6b7280; }

/* Password match indicator */
.gss-password-match { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 0; }
.gss-password-match.match { color: #059669; }
.gss-password-match.no-match { color: #dc2626; }
.gss-password-match .gss-match-icon::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.gss-password-match.match .gss-match-icon::before { background: #059669; }
.gss-password-match.no-match .gss-match-icon::before { background: #dc2626; }

/* Checkbox */
.gss-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: #4b5563; line-height: 1.4; }
.gss-checkbox-label input { display: none; }
.gss-checkbox-custom { flex-shrink: 0; width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 4px; transition: all 0.2s; position: relative; margin-top: 1px; }
.gss-checkbox-label input:checked + .gss-checkbox-custom { background: var(--gss-auth-primary); border-color: var(--gss-auth-primary); }
.gss-checkbox-label input:checked + .gss-checkbox-custom::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Form options row — 3.8+: ahora solo contiene "Recordarme" (el link olvidaste
   contraseña se movió debajo del input password para ahorrar alto vertical). */
.gss-form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.gss-forgot-link { font-size: 12px; color: var(--gss-auth-link); text-decoration: none; }
.gss-forgot-link:hover { text-decoration: underline; }
/* 3.8+: link "¿Olvidaste tu contraseña?" bajo el campo password, alineado a la derecha */
.gss-forgot-link-inline { display: block; text-align: right; margin-top: 6px; font-size: 12px; color: var(--gss-auth-link); text-decoration: none; }
.gss-forgot-link-inline:hover { text-decoration: underline; }

/* Terms */
.gss-terms { margin-bottom: 16px; }
.gss-terms a { color: var(--gss-auth-link); text-decoration: none; }
.gss-terms a:hover { text-decoration: underline; }

/* Invalid checkbox state (terms/privacy not checked on submit) */
.gss-checkbox-invalid .gss-checkbox-custom { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.gss-checkbox-invalid .gss-checkbox-label { color: #dc2626; }
.gss-checkbox-error {
    display: none;
    align-items: center;
    gap: 4px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    padding: 4px 8px 4px 28px;
    background: #fef2f2;
    border-radius: 4px;
    border-left: 3px solid #dc2626;
}
.gss-checkbox-error::before { content: '⚠ '; font-size: 11px; }
.gss-checkbox-invalid .gss-checkbox-error { display: flex; }

/* Buttons */
.gss-auth-wrapper .gss-btn-full { width: 100%; }
.gss-auth-wrapper .gss-btn-primary {
    padding: 12px 24px; background: var(--gss-auth-primary); color: #fff; border: none; border-radius: 10px;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.gss-auth-wrapper .gss-btn-primary:hover { background: #333333; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.gss-auth-wrapper .gss-btn-primary:active { transform: translateY(0); }
.gss-auth-wrapper .gss-btn-primary:disabled { background: #9ca3af; cursor: not-allowed; transform: none; box-shadow: none; }

.gss-auth-wrapper .gss-spinner { animation: gss-spin 1s linear infinite; }
@keyframes gss-auth-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.gss-auth-wrapper .gss-btn-secondary { padding: 12px 20px; background: #f3f4f6; color: #374151; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; }
.gss-auth-wrapper .gss-btn-secondary:hover { background: #333333; color: #fff; }

/* Messages */
.gss-auth-message { margin-top: 16px; }
.gss-auth-wrapper .gss-success { padding: 12px 16px; background: var(--gss-auth-success-bg); color: var(--gss-auth-success-text); border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.gss-auth-wrapper .gss-error { padding: 12px 16px; background: var(--gss-auth-error-bg); color: var(--gss-auth-error-text); border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }

/* Logged in state */
.gss-auth-logged-in { text-align: center; padding: 48px 24px; }
.gss-auth-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* Error Banner */
.gss-auth-error-banner { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #fef2f2; color: #991b1b; font-size: 14px; border-bottom: 1px solid #fecaca; }
.gss-auth-error-banner svg { flex-shrink: 0; color: #dc2626; }

/* Social Login */
.gss-social-login { padding: 16px 24px 0; }
.gss-google-btn { 
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; 
    padding: 12px 16px; background: #fff; border: 1px solid #dadce0; border-radius: 8px; 
    font-size: 14px; font-weight: 500; color: #3c4043 !important; text-decoration: none !important; 
    transition: all 0.2s; cursor: pointer; 
}
.gss-google-btn:hover, .gss-google-btn:focus, .gss-google-btn:active, .gss-google-btn:visited { 
    background: #f8f9fa; border-color: #c1c4c8; box-shadow: 0 1px 3px rgba(0,0,0,0.08); 
    text-decoration: none !important; color: #3c4043 !important;
}
.gss-google-btn span, .gss-google-btn * { text-decoration: none !important; }
.gss-google-btn svg { flex-shrink: 0; }
.gss-divider { display: flex; align-items: center; margin: 14px 0 0; gap: 16px; }
.gss-divider::before, .gss-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.gss-divider span { font-size: 12px; color: #94a3b8; text-transform: uppercase; font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────────────
   3.8+: Responsive compactado
   Breakpoint ampliado a `max-width: 1100px` y `max-height: 900px` para cubrir
   la mayoría de portátiles (MacBook Air/Pro 13-14", 1366×768, 1440×900,...).
   Antes sólo disparaba en 1366×768 muy estricto y el resto de portátiles con
   ~800px de altura útil se quedaba con el estilo desktop grande → scroll.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px), (max-height: 900px) {
    .gss-auth-wrapper      { min-height: calc(100vh - 70px); padding: 12px 10px; }
    .gss-auth-container    { border-radius: 12px; }
    .gss-auth-header       { padding: 14px 16px 10px; }
    .gss-auth-logo         { margin: 0 auto 8px; }
    .gss-auth-logo img     { max-height: 72px; width: auto; }
    .gss-auth-icon         { width: 44px; height: 44px; margin: 0 auto 8px; }
    .gss-auth-icon svg     { width: 24px; height: 24px; }
    .gss-auth-title        { font-size: 18px; margin-bottom: 4px; }
    .gss-auth-subtitle     { font-size: 12px; }
    .gss-auth-tab          { padding: 9px 12px; font-size: 13px; }
    .gss-auth-panel        { padding: 16px 16px 18px; }
    .gss-social-login      { padding: 12px 16px 0; }
    .gss-google-btn        { padding: 9px 14px; font-size: 13px; }
    .gss-divider           { margin: 10px 0 0; }
    .gss-auth-form .gss-form-group { margin-bottom: 10px; }
    .gss-auth-form label   { margin-bottom: 5px; font-size: 12px; }
    .gss-auth-form input[type="email"],
    .gss-auth-form input[type="password"],
    .gss-auth-form input[type="text"] { padding: 9px 12px; font-size: 14px; }
    .gss-form-options      { margin-bottom: 12px; }
    .gss-auth-wrapper .gss-btn-primary { padding: 10px 18px; font-size: 14px; }
    .gss-password-feedback { margin-bottom: 10px; }
    .gss-terms             { margin-bottom: 8px; }
    .gss-forgot-link-inline { font-size: 11px; margin-top: 4px; }
}