/* ------------------------------------------------------------------
   Account / login pages — styling for nopCommerce's built-in customer
   pages, which the theme's main build does not cover. Scoped to the
   account page body classes so nothing else is affected.
   ------------------------------------------------------------------ */

.login-page,
.registration-page,
.register-result-page,
.password-recovery-page,
.account-page,
.customer-info-page,
.address-list-page,
.change-password-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(96px, 14vh, 168px) 24px 96px;
    position: relative;
    z-index: 1;
    font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #f4f1ea;
}

.login-page .page-title h1,
.registration-page .page-title h1,
.password-recovery-page .page-title h1,
.account-page .page-title h1,
.register-result-page .page-title h1 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #f7f4ee;
    margin: 0 0 36px;
}

/* Two-column layout for the login page; single column elsewhere */
.login-page .customer-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

/* Readable panels sitting above the hero video */
.login-page .new-wrapper,
.login-page .returning-wrapper,
.registration-page .fieldset,
.password-recovery-page .fieldset,
.account-page .fieldset,
.register-result-page .page-body {
    background: rgba(18, 18, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 32px 30px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-page h2.title,
.fieldset h2.title,
.account-page h2.title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: #f2efe8;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.login-page .text {
    color: #c4beb2;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Form fields */
.form-fields .inputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-fields .inputs label {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #a9a396;
}

.form-fields .inputs input[type="text"],
.form-fields .inputs input[type="email"],
.form-fields .inputs input[type="password"],
.registration-page input[type="text"],
.registration-page input[type="email"],
.registration-page input[type="password"],
.account-page input[type="text"],
.account-page input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    background: #0f0f11;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    color: #f4f1ea;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-fields .inputs input:focus {
    outline: none;
    border-color: #c9a24b;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18);
}

.login-password {
    position: relative;
    display: flex;
    align-items: center;
}

.login-password input { flex: 1; }

/* Remember-me / forgot-password row */
.form-fields .inputs.reversed {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.form-fields .inputs.reversed input[type="checkbox"] { width: auto; margin: 0; }
.form-fields .inputs.reversed label { text-transform: none; letter-spacing: 0; color: #c4beb2; }

.forgot-password a,
a.forgot-password {
    color: #c9a24b;
    text-decoration: none;
    margin-left: auto;
}
.forgot-password a:hover { text-decoration: underline; }

/* Buttons */
.button-1,
.login-page .buttons button,
.registration-page .buttons button,
.account-page .buttons input[type="submit"] {
    display: inline-block;
    background: #c9a24b;
    color: #1a1712;
    border: none;
    border-radius: 9px;
    padding: 12px 30px;
    font-family: "Inter Tight", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.button-1:hover { background: #dcb564; }
.button-1:active { transform: translateY(1px); }

.register-button {
    background: transparent;
    color: #f4f1ea;
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.register-button:hover { background: rgba(255, 255, 255, 0.06); }

.login-page .buttons,
.registration-page .buttons { margin-top: 24px; }

/* "About login / registration" topic block */
.login-page .topic-block,
.login-page .external-authentication {
    grid-column: 1 / -1;
    margin-top: 28px;
    color: #a9a396;
    font-size: 0.9rem;
}
.login-page .topic-block .title h2 { font-family: "Fraunces", Georgia, serif; color: #d8d2c6; }

/* Validation messages */
.field-validation-error,
.validation-summary-errors {
    color: #e88b7d;
    font-size: 0.85rem;
}
.message-error { color: #e88b7d; }

/* Mobile */
@media (max-width: 820px) {
    .login-page .customer-blocks { grid-template-columns: 1fr; }
}