/* ============================================================================
 * Arcpoly Theme — Auth pages (login, register, password reset)
 * ========================================================================== */

/* ============================================================================
 * AUTH PAGE — Full-bleed dark gradient background + centered card
 * ========================================================================== */

/* Override body cho auth pages — toàn bộ viewport có gradient */
body.page-slug-login,
body.page-slug-register,
body.page-slug-password-reset {
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(245, 77, 45, 0.12), transparent 60%),
        radial-gradient(ellipse 50% 30% at 50% 100%, rgba(245, 77, 45, 0.06), transparent 70%),
        var(--c-bg-0) !important;
    background-attachment: fixed !important;
}

/* Hide page title + breadcrumb (auth-card có title riêng) */
body.page-slug-login .page-header,
body.page-slug-register .page-header,
body.page-slug-password-reset .page-header,
body.page-slug-login .breadcrumb,
body.page-slug-register .breadcrumb,
body.page-slug-password-reset .breadcrumb,
body.page-slug-login .entry-header,
body.page-slug-register .entry-header,
body.page-slug-password-reset .entry-header {
    display: none !important;
}

/* Remove container constraints — auth-page tự lo padding/max-width */
body.page-slug-login main.site-main,
body.page-slug-register main.site-main,
body.page-slug-password-reset main.site-main {
    padding: 0 !important;
}
body.page-slug-login main.site-main > .container,
body.page-slug-register main.site-main > .container,
body.page-slug-password-reset main.site-main > .container {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
body.page-slug-login .page-article,
body.page-slug-register .page-article,
body.page-slug-password-reset .page-article,
body.page-slug-login .entry-content,
body.page-slug-register .entry-content,
body.page-slug-password-reset .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Full-bleed auth-page wrapper */
.auth-page {
    min-height: calc(100vh - var(--header-h, 72px));
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2rem, 6vw, 4.5rem) var(--container-pad, 1rem);
    box-sizing: border-box;
    /* Gradient ALREADY on body — don't double up */
}
.auth-page .container {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 0;
}
.auth-card {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    background: var(--c-bg-1, #141414);
    border: 1px solid var(--c-border, #262626);
    border-radius: 16px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    overflow: hidden;
    position: relative;
}
/* Decorative gradient line trên card */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-brand, #f54d2d), transparent);
    pointer-events: none;
    z-index: 2;
}
.auth-card__header {
    padding: 2rem 2rem 1rem;
    text-align: center;
}
.auth-card__logo {
    margin: 0 auto 1rem;
    display: inline-flex;
}
.auth-card__title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: 0.5rem;
}
.auth-card__desc {
    color: var(--c-text-dim);
    font-size: var(--fs-sm);
}
.auth-card__body {
    padding: 1rem 2rem 2rem;
}
.auth-card__footer {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--c-divider);
    background: var(--c-bg-2);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-text-dim);
}
.auth-card__footer a {
    color: var(--c-brand);
    font-weight: var(--fw-medium);
}

/* OAuth divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-divider);
}

/* OAuth buttons */
.btn-oauth {
    width: 100%;
    height: var(--input-h);
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: var(--r);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
}
.btn-oauth:hover {
    background: var(--c-bg-3);
    border-color: var(--c-border-hi);
}
.btn-oauth svg {
    width: 18px;
    height: 18px;
}

/* ============================================================================
 * NATIVE FORM ELEMENT DARK STYLING (select dropdown, option items)
 * Force color-scheme:dark trên select để browser render dropdown native với
 * dark theme thay vì white. Apply ở root để fix mọi <select> trên site.
 * ========================================================================== */
html { color-scheme: dark; }

select.form-control,
select.form-control:focus {
    color-scheme: dark;  /* Buộc Chrome/Edge render dropdown panel theo dark mode */
    background: var(--c-bg-1);
    color: var(--c-text);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23a3a3a3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* Option items — limited cross-browser support but apply where possible */
select.form-control option,
select.form-control optgroup {
    background: var(--c-bg-2);
    color: var(--c-text);
    padding: 0.5rem;
}
select.form-control optgroup {
    font-weight: 600;
    color: var(--c-brand);
    background: var(--c-bg-1);
}
select.form-control option:checked,
select.form-control option:hover {
    background: var(--c-brand);
    color: #fff;
}

/* Password strength */
.password-strength {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.25rem;
}
.password-strength__bar {
    flex: 1;
    height: 4px;
    background: var(--c-border);
    border-radius: var(--r-pill);
    transition: background var(--duration-fast) var(--ease);
}
.password-strength--weak .password-strength__bar:nth-child(1)   { background: var(--c-danger); }
.password-strength--medium .password-strength__bar:nth-child(-n+2) { background: var(--c-warning); }
.password-strength--strong .password-strength__bar:nth-child(-n+3) { background: var(--c-success); }
.password-strength--very-strong .password-strength__bar { background: var(--c-success); }