/**
 * Stack Engine — Login / Register Page Styles
 * Scoped to WooCommerce login page only (non-logged-in state)
 *
 * @package StackEngine
 */

/* ==================================================================
 * Scope root — everything in this file applies only to the logged-out
 * My Account page.
 * ================================================================*/

body.woocommerce-account:not(.logged-in) {
    --ink: #0C0C11;
    --accent: #7C5CFC;
    --accent-mid: #A48DFD;
    --accent-light: #EDE9FF;
    --warm: #FAFAF8;
    --warm2: #F2F0EC;
    --muted: #9896A8;
    --mid: #3A3A45;
    --border: rgba(12, 12, 17, 0.10);
    --border-s: rgba(12, 12, 17, 0.18);
    --success: #1D9E75;

    background: #0C0C11;
    color: var(--ink);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Neutralise account.css grid + related shell rules that would otherwise
   mis-layout the single-form page when the user is logged out. */
body.woocommerce-account:not(.logged-in) .woocommerce {
    display: block;
    max-width: none;
    padding: 0;
}
body.woocommerce-account:not(.logged-in) .stk-account-welcome-banner,
body.woocommerce-account:not(.logged-in) .stk-account-sidebar-balance,
body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation {
    display: none;
}
body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content,
body.woocommerce-account:not(.logged-in) .stk-auth-page {
    grid-column: unset;
    grid-row: unset;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Hide default theme title / breadcrumbs on the auth page */
body.woocommerce-account:not(.logged-in) .entry-title,
body.woocommerce-account:not(.logged-in) .page-title,
body.woocommerce-account:not(.logged-in) .woocommerce-breadcrumb,
body.woocommerce-account:not(.logged-in) h1.entry-title,
body.woocommerce-account:not(.logged-in) h1.page-title {
    display: none;
}

/* ==================================================================
 * PAGE WRAP — ambient gradient background
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .stk-auth-page {
    min-height: 100%;
    width: 100%;
}

body.woocommerce-account:not(.logged-in) .stk-auth-page .page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 1.5rem;
    position: relative;
    overflow: hidden;
}

body.woocommerce-account:not(.logged-in) .stk-auth-page .page::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124, 92, 252, 0.14) 0%, transparent 70%);
    pointer-events: none;
}

body.woocommerce-account:not(.logged-in) .stk-auth-page .page::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(124, 92, 252, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ==================================================================
 * AUTH CARD + VALUE PROP
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .auth-wrap {
    width: 100%;
    max-width: 460px;
    position: relative;
    z-index: 1;
}

body.woocommerce-account:not(.logged-in) .auth-value {
    text-align: center;
    margin-bottom: 28px;
}

body.woocommerce-account:not(.logged-in) .auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(124, 92, 252, 0.15);
    border: 1px solid rgba(124, 92, 252, 0.30);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 16px;
}

body.woocommerce-account:not(.logged-in) .auth-badge-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-mid);
    border-radius: 50%;
    animation: stk-auth-pulse 2s ease-in-out infinite;
}

@keyframes stk-auth-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

body.woocommerce-account:not(.logged-in) .auth-badge span {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-mid);
    letter-spacing: 0.04em;
}

body.woocommerce-account:not(.logged-in) .auth-value h1 {
    font-family: 'Poppins', 'DM Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #FAFAF8;
    letter-spacing: -0.025em;
    margin: 0 0 6px;
    line-height: 1.2;
}

body.woocommerce-account:not(.logged-in) .auth-value p {
    font-size: 14px;
    color: rgba(250, 250, 248, 0.45);
    line-height: 1.6;
    margin: 0;
}

/* Card */
body.woocommerce-account:not(.logged-in) .auth-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
}

/* Notices at top of card */
body.woocommerce-account:not(.logged-in) .auth-card > .woocommerce-notices-wrapper,
body.woocommerce-account:not(.logged-in) .auth-card > .woocommerce-error,
body.woocommerce-account:not(.logged-in) .auth-card > .woocommerce-message,
body.woocommerce-account:not(.logged-in) .auth-card > .woocommerce-info {
    margin: 0;
    padding: 14px 18px;
    border-radius: 0;
    border: none;
    font-size: 13px;
    line-height: 1.5;
    background: rgba(226, 75, 74, 0.10);
    color: #E24B4A;
    list-style: none;
}
body.woocommerce-account:not(.logged-in) .auth-card > .woocommerce-message {
    background: rgba(29, 158, 117, 0.10);
    color: var(--success);
}
body.woocommerce-account:not(.logged-in) .auth-card > .woocommerce-info {
    background: rgba(124, 92, 252, 0.10);
    color: var(--accent);
}
body.woocommerce-account:not(.logged-in) .auth-card .woocommerce-error li,
body.woocommerce-account:not(.logged-in) .auth-card .woocommerce-message li,
body.woocommerce-account:not(.logged-in) .auth-card .woocommerce-info li {
    margin: 0;
    list-style: none;
}

/* Tabs */
body.woocommerce-account:not(.logged-in) .auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--warm2);
    padding: 6px;
    gap: 4px;
}

body.woocommerce-account:not(.logged-in) .auth-tab {
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s;
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
}

body.woocommerce-account:not(.logged-in) .auth-tab.active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Form panels */
body.woocommerce-account:not(.logged-in) .auth-panel {
    display: none;
    padding: 28px;
}

body.woocommerce-account:not(.logged-in) .auth-panel.active {
    display: block;
}

body.woocommerce-account:not(.logged-in) .auth-panel form {
    margin: 0;
}

/* ==================================================================
 * FORM ELEMENTS
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .form-group {
    margin-bottom: 18px;
}

body.woocommerce-account:not(.logged-in) .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--mid);
    margin-bottom: 7px;
}

body.woocommerce-account:not(.logged-in) .form-input {
    width: 100%;
    border: 1px solid var(--border-s);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink);
    background: var(--warm);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

body.woocommerce-account:not(.logged-in) .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.12);
}

body.woocommerce-account:not(.logged-in) .form-input::placeholder {
    color: var(--muted);
}

body.woocommerce-account:not(.logged-in) .input-wrap {
    position: relative;
}

body.woocommerce-account:not(.logged-in) .input-wrap .form-input {
    padding-right: 44px;
}

body.woocommerce-account:not(.logged-in) .toggle-pw {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    padding: 0;
}

body.woocommerce-account:not(.logged-in) .toggle-pw:hover {
    color: var(--ink);
}

body.woocommerce-account:not(.logged-in) .toggle-pw svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Checkbox row */
body.woocommerce-account:not(.logged-in) .check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

body.woocommerce-account:not(.logged-in) .check-row input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

body.woocommerce-account:not(.logged-in) .check-row label {
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    margin: 0;
}

body.woocommerce-account:not(.logged-in) .check-row a {
    color: var(--accent);
    text-decoration: none;
}

body.woocommerce-account:not(.logged-in) .check-row a:hover {
    text-decoration: underline;
}

/* ==================================================================
 * SUBMIT BUTTON
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .btn-submit {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: opacity 0.15s, transform 0.15s;
    margin-bottom: 16px;
    line-height: 1.2;
}

body.woocommerce-account:not(.logged-in) .btn-submit:hover {
    opacity: 0.90;
    transform: translateY(-1px);
    color: #fff;
}

/* ==================================================================
 * DIVIDER + SOCIAL BUTTONS
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

body.woocommerce-account:not(.logged-in) .or-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
    height: 1px;
    background: var(--border);
}

body.woocommerce-account:not(.logged-in) .or-divider span {
    font-size: 12px;
    color: var(--muted);
}

body.woocommerce-account:not(.logged-in) .btn-social {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--warm);
    border: 1px solid var(--border-s);
    border-radius: 10px;
    padding: 11px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    color: var(--mid);
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 10px;
    text-decoration: none;
}

body.woocommerce-account:not(.logged-in) .btn-social:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--mid);
}

body.woocommerce-account:not(.logged-in) .btn-social svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==================================================================
 * FORM NOTE + LOST PASSWORD
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .form-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

body.woocommerce-account:not(.logged-in) .form-note a {
    color: var(--accent);
    text-decoration: none;
}

body.woocommerce-account:not(.logged-in) .form-note a:hover {
    text-decoration: underline;
}

body.woocommerce-account:not(.logged-in) .lost-pw {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

body.woocommerce-account:not(.logged-in) .lost-pw:hover {
    text-decoration: underline;
}

/* ==================================================================
 * PERKS (below card)
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .auth-perks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
    flex-wrap: wrap;
}

body.woocommerce-account:not(.logged-in) .auth-perk {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(250, 250, 248, 0.40);
}

body.woocommerce-account:not(.logged-in) .perk-check {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(124, 92, 252, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.woocommerce-account:not(.logged-in) .perk-check svg {
    width: 8px;
    height: 8px;
    stroke: var(--accent-mid);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==================================================================
 * ERROR STATES
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .field-error {
    font-size: 12px;
    color: #E24B4A;
    margin-top: 5px;
    display: none;
}

body.woocommerce-account:not(.logged-in) .field-error.visible {
    display: block;
}

body.woocommerce-account:not(.logged-in) .form-input.error {
    border-color: #E24B4A;
}

body.woocommerce-account:not(.logged-in) .form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.12);
}

/* ==================================================================
 * REGISTER PERKS INSIDE PANEL
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .register-perks {
    background: var(--accent-light);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.woocommerce-account:not(.logged-in) .reg-perk {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--mid);
    line-height: 1.45;
}

body.woocommerce-account:not(.logged-in) .reg-perk-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

body.woocommerce-account:not(.logged-in) .reg-perk strong {
    color: var(--ink);
    font-weight: 600;
}

/* ==================================================================
 * STRENGTH BAR (inline wrapper)
 * ================================================================*/

body.woocommerce-account:not(.logged-in) .stk-strength-wrap {
    margin-top: 10px;
}

body.woocommerce-account:not(.logged-in) .stk-strength-bars {
    display: flex;
    gap: 4px;
    height: 4px;
}

body.woocommerce-account:not(.logged-in) .stk-strength-bars > div {
    flex: 1;
    border-radius: 2px;
    background: rgba(12, 12, 17, 0.10);
    transition: background 0.3s;
}

body.woocommerce-account:not(.logged-in) .stk-strength-label {
    font-size: 11px;
    margin-top: 5px;
    color: var(--muted);
}

/* ==================================================================
 * RESPONSIVE
 * ================================================================*/

@media (max-width: 520px) {
    body.woocommerce-account:not(.logged-in) .stk-auth-page .page {
        padding: 32px 1rem;
    }
    body.woocommerce-account:not(.logged-in) .auth-value h1 {
        font-size: 22px;
    }
    body.woocommerce-account:not(.logged-in) .auth-panel {
        padding: 22px;
    }
    body.woocommerce-account:not(.logged-in) .auth-perks {
        gap: 14px;
    }
}