/*
 * auth_v2.css — shared stylesheet for the modern A/B version of all auth forms:
 *   - login          (templates/user/login_form_v2.tpl.php)
 *   - registration   (templates/user/registration_form_v2.tpl.php)
 *   - (future) password reset, profile, etc.
 *
 * Loaded only when ?v=2 is passed to login.php / registration.php.
 *
 * Design:
 *   - Single centered card on all breakpoints.
 *   - Social buttons on top, form below, divided by "or".
 *   - Mobile-first: identical layout, only padding/borders change under 480px.
 *   - Self-contained under .auth-v2 — no leaking styles to the rest of the site.
 *
 * Brand colors (mirrored from assets/css/colors.scss):
 *   --auth-brand:        #245494  (primary blue)
 *   --auth-brand-hover:  #2E5077
 *   --auth-error:        #AE0A12
 */

.auth-v2 {
    min-height: calc(100vh - 240px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px 60px;
    box-sizing: border-box;
    font-family: inherit;
    color: #1f2937;
}

.auth-v2 *,
.auth-v2 *::before,
.auth-v2 *::after {
    box-sizing: border-box;
}

.auth-v2-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    padding: 40px 36px;
}

/* Wider variant for forms with two-column rows (registration) */
.auth-v2-card--wide {
    max-width: 480px;
}

@media (max-width: 480px) {
    .auth-v2 {
        padding: 20px 12px 40px;
    }
    .auth-v2-card,
    .auth-v2-card--wide {
        padding: 28px 20px;
        border-radius: 8px;
        box-shadow: none;
        border-color: #eee;
    }
}

.auth-v2-title {
    margin: 0 0 28px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    color: #111827;
}

/* ---- Social block ---- */
.auth-v2-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.auth-v2-social-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.08s;
}

.auth-v2-social-btn:active {
    transform: translateY(1px);
}

.auth-v2-social-btn--apple {
    background: #000;
    color: #fff;
    border-color: #000;
}

.auth-v2-social-btn--apple:hover {
    background: #1a1a1a;
}

.auth-v2-social-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.auth-v2-social-btn[disabled]:active {
    transform: none;
}

.auth-v2-social-icon {
    flex-shrink: 0;
    margin-top: -2px; /* optical alignment to text baseline */
}

.auth-v2-social-badge {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Google renders its own iframe inside .g_id_signin — we only center it.
   `overflow: hidden` is a safety net: if GSI ever falls back to a fixed-pixel
   iframe wider than the card (happens when data-width is set too large for the
   viewport), the overflow is clipped to the card instead of breaking layout. */
.auth-v2-google-wrap {
    display: flex !important;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    /* Horizontal overflow is clipped as a safety net (see note above), but we
       keep vertical overflow visible — otherwise the GSI iframe's focus halo
       gets clipped on top when the Google button is focused. A few pixels of
       vertical padding give that halo breathing room inside the card. */
    overflow-x: hidden;
    overflow-y: visible;
    padding: 3px 0;
    min-height: 44px;
}

/* ---- Divider ---- */
.auth-v2-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: #9ca3af;
    font-size: 13px;
    text-transform: lowercase;
    letter-spacing: 0.3px;
}

.auth-v2-divider::before,
.auth-v2-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* ---- Form ---- */
.auth-v2-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Two-column row (first/last name, password/confirm).
   Collapses to single column under 480px automatically. */
.auth-v2-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 480px) {
    .auth-v2-row {
        grid-template-columns: 1fr;
    }
}

.auth-v2-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* allow grid item to shrink */
}

.auth-v2-field label {
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
}

.auth-v2-field-required {
    color: #AE0A12;
    margin-left: 2px;
}

.auth-v2-field-hint {
    color: #9ca3af;
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}

.auth-v2-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-v2-field input:focus {
    border-color: #245494;
    box-shadow: 0 0 0 3px rgba(36, 84, 148, 0.15);
}

.auth-v2-field input.error {
    border-color: #AE0A12;
}

.auth-v2-field input.error:focus {
    box-shadow: 0 0 0 3px rgba(174, 10, 18, 0.15);
}

/* Alert block — login.js / registration.js toggles via .alert-danger */
.auth-v2-alert {
    display: none;
    padding: 10px 12px;
    background: rgba(174, 10, 18, 0.08);
    color: #7c1d1d;
    border: 1px solid rgba(174, 10, 18, 0.25);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.auth-v2 .alert-danger {
    background: rgba(174, 10, 18, 0.08);
}

/* ---- Submit ---- */
.auth-v2-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    margin-top: 6px;
    background: #245494;
    color: #fff;
    border: 1px solid #245494;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.08s;
}

.auth-v2-submit:hover {
    background: #2E5077;
    border-color: #2E5077;
    box-shadow: 0 2px 8px rgba(36, 84, 148, 0.3);
}

.auth-v2-submit:active {
    transform: translateY(1px);
}

.auth-v2-submit.disabled,
.auth-v2-submit:disabled {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: progress;
    box-shadow: none;
}

.auth-v2-submit-spinner {
    display: none;
}

.auth-v2-submit.disabled .auth-v2-submit-spinner {
    display: inline-block;
}

/* ---- Collapsible optional fields (registration) ----
   Uses native <details>/<summary>. When closed, shows a single "+ Add optional
   details" toggle. When open, the three fields expand below with the same
   vertical rhythm as the rest of the form. */
.auth-v2-optional {
    margin: 0;
    padding: 0;
    border: 0;
}

.auth-v2-optional-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: #245494;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 0.15s;
}

/* Hide default disclosure triangles (Safari / Chrome / Firefox) */
.auth-v2-optional-toggle::-webkit-details-marker {
    display: none;
}
.auth-v2-optional-toggle::marker {
    content: '';
}

.auth-v2-optional-toggle:hover {
    color: #2E5077;
    text-decoration: underline;
}

/* Custom "+" icon that flips to "−" when <details> opens */
.auth-v2-optional-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 1px solid currentColor;
    border-radius: 3px;
    transition: transform 0.2s;
}

.auth-v2-optional-icon::before,
.auth-v2-optional-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: opacity 0.15s;
}

/* horizontal bar of the plus */
.auth-v2-optional-icon::before {
    left: 2px;
    right: 2px;
    top: 50%;
    height: 1.5px;
    transform: translateY(-50%);
}

/* vertical bar of the plus — fades out when open */
.auth-v2-optional-icon::after {
    top: 2px;
    bottom: 2px;
    left: 50%;
    width: 1.5px;
    transform: translateX(-50%);
}

.auth-v2-optional[open] .auth-v2-optional-icon::after {
    opacity: 0;
}

.auth-v2-optional-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    animation: auth-v2-optional-slide 0.18s ease-out;
}

@keyframes auth-v2-optional-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Required-fields legend (small hint under submit / before form) ---- */
.auth-v2-required-legend {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    margin-top: -4px;
}

.auth-v2-required-legend .auth-v2-field-required {
    margin: 0 2px;
}

/* ---- Links row ---- */
.auth-v2-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    font-size: 13px;
}

.auth-v2-links a {
    color: #245494;
    text-decoration: none;
    transition: color 0.15s;
}

.auth-v2-links a:hover {
    color: #2E5077;
    text-decoration: underline;
}

.auth-v2-links-sep {
    color: #d1d5db;
    user-select: none;
}

/* ==========================================================================
 * Notification state — success / error result cards (used by:
 *   registration-verify (done | wrong_link | error)
 *   password-reset success state (form 1)
 * Self-contained: no dependency on FontAwesome or external icon fonts; the
 * icons are inline SVGs in the templates.
 * ========================================================================== */
.auth-v2-state {
    text-align: center;
}

.auth-v2-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(5, 150, 105, 0.12);
    color: #047857;
}

.auth-v2-state-icon--error {
    background: rgba(174, 10, 18, 0.10);
    color: #AE0A12;
}

.auth-v2-state-icon svg {
    width: 34px;
    height: 34px;
}

.auth-v2-state-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.2px;
}

.auth-v2-state-text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}

.auth-v2-state-text a {
    color: #245494;
    text-decoration: none;
}

.auth-v2-state-text a:hover {
    color: #2E5077;
    text-decoration: underline;
}

.auth-v2-state-note {
    display: none; /* toggled by JS after resend button click */
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 500;
}

.auth-v2-state-note--success { color: #047857; }
.auth-v2-state-note--error   { color: #AE0A12; }