/* ═══════════════════════════════════════════════════════════════
   35-login-modal.css
   Luxuriöses Login-Modal – Schlicht, elegant, Rolex/Cartier-Niveau
   Nutzt das bestehende Modal-System (12-modals.css) als Basis.
   Input-Design angelehnt an Checkout (19c-store-checkout.css).
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal Container Override ── */
#loginModal .modal-container {
    max-width: 26rem;
    background: var(--ivory-polished, #FDFCF8);
    border-radius: 1.5rem;
}

@media (min-width: 48rem) {
    #loginModal .modal-container {
        max-width: 28rem;
    }
}

/* ── Modal Body ── */
.login-modal-body {
    padding: clamp(2.5rem, 6vw, 3.5rem) clamp(2rem, 5vw, 3rem);
    position: relative;
    overflow-y: auto;
    max-height: 85vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.login-modal-body::-webkit-scrollbar {
    display: none;
}

/* ── Close Button Override ── */
#loginModal .modal-close {
    top: 1.2rem;
    right: 1.2rem;
    z-index: 200;
}

#loginModal .modal-close::before,
#loginModal .modal-close::after {
    background-color: var(--gold-dark);
    width: 1.4rem;
}

/* ── Header ── */
.login-modal-header {
    text-align: center;
    margin-bottom: 2.5rem;
    animation: loginFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.login-modal-title {
    font-family: var(--font-accent);
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--gold-accent);
    margin: 0 0 0.75rem;
}

.login-modal-subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    font-weight: 300;
    color: var(--text-dimmed);
    margin: 0;
    letter-spacing: 0.02em;
}

/* ── Goldlinie ── */
.login-modal-divider {
    width: 3rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
    margin: 0 auto 2.5rem;
    animation: loginFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ── Formular ── */
.login-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: loginFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

/* ── Form Group (wie Checkout) ── */
.login-modal-form .form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: none;
}

.login-modal-form .form-group label {
    font-family: var(--font-accent);
    font-size: var(--fs-form-label);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-dimmed);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

.login-modal-form .form-group input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--white);
    font-family: var(--font-accent);
    font-size: var(--fs-form-input);
    color: var(--text-secondary);
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0;
    -webkit-appearance: none;
    outline: none;
}

.login-modal-form .form-group input::placeholder {
    color: var(--text-dimmed);
    font-weight: 300;
    letter-spacing: 0.05em;
}

.login-modal-form .form-group input:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(196, 161, 105, 0.3);
    border-color: rgba(196, 161, 105, 0.4);
}

/* ── Passwort-Wrapper ── */
.login-pw-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-pw-wrapper input {
    padding-right: 3rem;
}

.login-pw-toggle {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--gold-dark);
}

.login-pw-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-pw-toggle .pw-icon--hide {
    display: none;
}

.login-pw-toggle.is-active .pw-icon--show {
    display: none;
}

.login-pw-toggle.is-active .pw-icon--hide {
    display: block;
}

/* ── Validation States ── */
.login-modal-form .form-group input.is-valid {
    border-left: 3px solid var(--gold-light);
}

.login-modal-form .form-group input.is-invalid {
    border-left: 3px solid var(--error);
}

.login-modal-form .error-hint {
    font-family: var(--font-accent);
    font-size: var(--fs-micro);
    color: var(--error);
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.login-modal-form .error-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
    height: auto;
    margin-bottom: 0.25rem;
}

/* ── Options Row (Passwort vergessen) ── */
.login-modal-options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: -0.5rem;
}

.login-modal-options a {
    font-family: var(--font-accent);
    font-size: var(--fs-form-label);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--gold-accent);
    text-decoration: none;
    transition: opacity 0.3s ease;
    padding: 0.5rem 0;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

.login-modal-options a:hover {
    opacity: 0.7;
}

/* ── Submit Button ── */
.login-modal-submit {
    width: 100%;
    padding: clamp(0.9rem, 2.5vw, 1.1rem);
    background: var(--gold);
    color: var(--white);
    border: none;
    font-family: var(--font-accent);
    font-size: var(--fs-button);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(196, 161, 105, 0.2);
    margin-bottom: 2rem;
}

@media (hover: hover) and (pointer: fine) {
    .login-modal-submit:hover {
        background: var(--gold-dark);
        letter-spacing: 0.35em;
        box-shadow: 0 6px 30px rgba(196, 161, 105, 0.35);
    }
}

.login-modal-submit:active {
    transform: scale(0.98) translate3d(0, 0, 0);
    box-shadow: 0 2px 10px rgba(196, 161, 105, 0.15);
}

/* ── Trennlinie ── */
.login-modal-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-modal-separator::before,
.login-modal-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.login-modal-separator span {
    padding: 0 1rem;
    color: var(--text-dimmed);
    font-family: var(--font-accent);
    font-size: var(--fs-form-label);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 400;
}

/* ── Registrierungslink ── */
.login-modal-register {
    text-align: center;
    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    color: var(--text-dimmed);
    font-weight: 300;
}

.login-modal-register a {
    color: var(--gold-accent);
    text-decoration: none;
    font-weight: 400;
    transition: opacity 0.3s ease;
    margin-left: 0.25rem;
}

.login-modal-register a:hover {
    opacity: 0.7;
}

/* ── Shake Animation bei Fehler ── */
.login-modal-form.is-shake {
    animation: loginShake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes loginShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* ── Fade-Up Animation ── */
@keyframes loginFadeUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Chrome/Safari Autofill-Fix ── */
#loginModal input:-webkit-autofill,
#loginModal input:-webkit-autofill:hover,
#loginModal input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-secondary);
    -webkit-box-shadow: 0 0 0px 1000px var(--white) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ═══════════════════════════════════════════════════════════════
   Registrierungsbereich – Expand-Animation im Modal
   ═══════════════════════════════════════════════════════════════ */

/* Standardzustand: versteckt */
.register-section {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    will-change: max-height, opacity;
}

/* Aktiver Zustand: sichtbar */
.register-section.is-expanded {
    max-height: 60rem;
    opacity: 1;
}

/* Header des Registrierungsbereichs */
.register-section-header {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.register-section-title {
    font-family: var(--font-accent);
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--gold-accent);
    margin: 0 0 0.75rem;
}

/* Trennlinie im Registrierungsbereich */
.register-section .login-modal-divider {
    margin-top: 2rem;
}

/* ── Login-Bereich verstecken bei Register-Ansicht ── */
.login-modal-body.show-register #loginModalForm {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    pointer-events: none;
}

.login-modal-body.show-register .login-modal-options {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    pointer-events: none;
}

.login-modal-body.show-register .login-modal-separator {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    pointer-events: none;
}

.login-modal-body.show-register .login-modal-register {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    pointer-events: none;
}

/* Standard-Transition für Login-Form (wenn es wieder erscheint) */
#loginModalForm {
    max-height: 50rem;
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.login-modal-options,
.login-modal-separator,
.login-modal-register {
    max-height: 10rem;
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

/* ── Modal-Titel Swap bei Register ── */
.login-modal-body.show-register .login-modal-title::after {
    content: none;
}

/* ── Zurück zum Login Link ── */
.register-back-link {
    text-align: center;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.register-back-link a {
    font-family: var(--font-primary);
    font-size: var(--fs-body-sm);
    color: var(--text-dimmed);
    text-decoration: none;
    font-weight: 300;
    transition: opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0;
}

.register-back-link a strong {
    color: var(--gold-accent);
    font-weight: 500;
    margin-left: 0.3rem;
}

.register-back-link a:hover {
    opacity: 0.7;
}

/* ── Registrierungsformular: gleicher Style wie Login ── */
#registerModalForm .form-group {
    animation: loginFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#registerModalForm .form-group:nth-child(1) { animation-delay: 0.1s; }
#registerModalForm .form-group:nth-child(2) { animation-delay: 0.15s; }
#registerModalForm .form-group:nth-child(3) { animation-delay: 0.2s; }
#registerModalForm .form-group:nth-child(4) { animation-delay: 0.25s; }
#registerModalForm .form-group:nth-child(5) { animation-delay: 0.3s; }

#registerModalForm .login-modal-submit {
    animation: loginFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}