/*
 * Wedding Budget
 * Copyright (c) 2026 Amar Micro Inc.
 * Author: Jacques Amar
 *
 * All rights reserved. Proprietary software — see LICENSE for terms.
 *
 * Version: 1.0.0
 *
 * Splash / login / register / verify screen.
 * Expects CSS variables from app.css (--primary, --primary-hover,
 * --text-primary, --border, --bg-card, etc.). Falls back to neutral defaults.
 */

.splash-page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--splash-bg, #f5f6fa);
    min-height: auto;
}

/* Card box used by the standalone public contact page (html/public/contact.php). */
.splash-card {
    width: 100%;
    max-width: 26rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #d9dde3);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    padding: 0.8rem 1.2rem;
}

/* Compact, self-contained auth unit. Carries its own card chrome so it can be
 * dropped into the landing side panel (or a popup later) unchanged. */
.auth-widget {
    width: 100%;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #d9dde3);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    padding: 0.8rem 1.2rem;
}

.splash-brand {
    text-align: center;
    margin-bottom: 0.2rem;
}

.splash-brand img {
    max-width: 7.5rem;
    height: auto;
    display: block;
    margin: 0 auto 0.1rem;
}

.splash-brand h1 {
    font-size: 1rem;
    margin: 0;
    color: var(--text-primary, #1a1a2e);
    line-height: 1.1;
}

.splash-brand p {
    margin: 0;
    color: var(--text-muted, #6c757d);
    font-size: 0.7rem;
    line-height: 1;
}

.splash-tabs {
    display: flex;
    border-bottom: 1px solid var(--border, #d9dde3);
    margin-bottom: 0.35rem;
}

.splash-tab {
    flex: 1;
    background: none;
    border: 0;
    padding: 0.3rem 0.25rem;
    font: inherit;
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.splash-tab[aria-selected="true"] {
    color: var(--primary, #2d6bcf);
    border-bottom-color: var(--primary, #2d6bcf);
    font-weight: 600;
}

.splash-panel {
    display: none;
}

.splash-panel[data-active="true"] {
    display: block;
}

/* Auth fields use the shared floating-label .form-field / .form-control
 * component (css/base/forms.css). Only the inter-field gap is tuned here for
 * the compact splash card; sizing, borders, focus and validation come from the
 * component and the --field-* tokens. */
.splash-form .form-field {
    margin-bottom: 0.55rem;
}

/* Password field: the floating .form-field is the positioning context for the
 * show/hide toggle. Reserve room on the right so the value never runs under it.
 * (Target the field, not input[type=password] — the toggle flips the type.) */
.field-password > .form-control {
    padding-right: 2.4rem;
}

.password-toggle {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem;
}

.password-toggle:focus {
    outline: 1px solid var(--primary, #2d6bcf);
    border-radius: 0.2rem;
}

.password-toggle .eye-open { display: block; }
.password-toggle .eye-off  { display: none; }
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-off  { display: block; }

.field-inline {
    margin-top: 0;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-primary, #1a1a2e);
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--primary, #2d6bcf);
}

.splash-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    margin-top: 0.25rem;
}

.splash-actions {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.splash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border: 0;
    border-radius: 0.3rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary, #2d6bcf);
    color: #fff;
}

.splash-btn:hover:not(:disabled) {
    background: var(--primary-hover, #1e4fa0);
}

.splash-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.splash-btn.ghost {
    background: transparent;
    color: var(--primary, #2d6bcf);
    border: 1px solid var(--border, #d9dde3);
}

.splash-btn.ghost:hover:not(:disabled) {
    background: var(--bg-alt, #f0f2f5);
}

.splash-message {
    margin: 0.75rem 0;
    padding: 0.6rem 0.75rem;
    border-radius: 0.3rem;
    font-size: 0.85rem;
    display: none;
}

.splash-message[data-kind="info"] {
    display: block;
    background: #e6f0ff;
    color: #1e4fa0;
}

.splash-message[data-kind="success"] {
    display: block;
    background: #e6f7ee;
    color: #1e7a42;
}

.splash-message[data-kind="error"] {
    display: block;
    background: #fdecec;
    color: #a12323;
}

.splash-footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
}

.splash-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--primary, #2d6bcf);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.splash-login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 0.45rem;
}

.splash-modal[hidden] {
    display: none;
}

.splash-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    /* Anchor the card BELOW the sticky top nav (.main-nav: position:sticky;
     * top:0; min-height:2.75rem; z-index:200) instead of vertically centering
     * it behind the header, where its top would be clipped. The modal keeps its
     * lower z-index (40), so the header stays visible/on top — as required.
     * Tall forms (the contact card) scroll within the overlay. */
    align-items: flex-start;
    justify-content: center;
    z-index: 40;
    padding: calc(2.75rem + 1rem) 1rem 1rem;
    overflow-y: auto;
}

.splash-modal-card {
    width: 100%;
    max-width: 24rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #d9dde3);
    border-radius: 0.5rem;
    padding: 0.8rem 1rem;
}

.splash-modal-title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    color: var(--text-primary, #1a1a2e);
}

.splash-modal-card--contact {
    max-width: 28rem;
}