/* ════════════════════════════════════════════════════════════════════════════
   AllOEMRims — My Account Pages
   Dark-themed WooCommerce account area: navigation, forms, 2FA, avatar, tables
   ════════════════════════════════════════════════════════════════════════════ */


/* ── 1. Page Wrapper ──────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* Two-column layout: sidebar + content
   WooCommerce wraps output in <div class="woocommerce"><div class="woocommerce-MyAccount-wrapper">
   Apply grid to BOTH in case one gets overridden */
.woocommerce-account .woocommerce-MyAccount-wrapper,
.woocommerce-account .aor-page-content .woocommerce-MyAccount-wrapper {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 769px) {
    .woocommerce-account .woocommerce-MyAccount-wrapper,
    .woocommerce-account .aor-page-content .woocommerce-MyAccount-wrapper {
        grid-template-columns: 220px 1fr !important;
        gap: 32px;
        align-items: start;
    }
}


/* ── 2. My Account Navigation ─────────────────────────────────────────────── */

.woocommerce-MyAccount-navigation {
    background:
        var(--aor-brushed),
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.06) 100%),
        #18181f;
    border: 1px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.1);
    border-radius: var(--aor-radius);
    overflow: hidden;
    box-shadow:
        var(--aor-shadow-raised),
        inset 0 1px 0 rgba(255,255,255,0.07);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 18px;
    color: #8888a0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
    border-left: 3px solid transparent;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    color: #dcdce5;
    background: rgba(255,255,255,0.04);
    padding-left: 22px;
    border-left-color: rgba(219, 0, 0, 0.4);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--current a {
    color: #f0f0f5;
    background: rgba(219, 0, 0, 0.08);
    border-left-color: #db0000;
    padding-left: 22px;
}

/* Mobile: horizontal scroll tabs */
@media (max-width: 768px) {
    .woocommerce-MyAccount-wrapper {
        display: block;
    }

    .woocommerce-MyAccount-navigation {
        margin-bottom: 24px;
        border-radius: var(--aor-radius);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        white-space: nowrap;
        padding: 0 4px;
    }

    .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.04);
        flex-shrink: 0;
    }

    .woocommerce-MyAccount-navigation ul li:last-child {
        border-right: none;
    }

    .woocommerce-MyAccount-navigation ul li a {
        padding: 12px 16px;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .woocommerce-MyAccount-navigation ul li a:hover {
        padding-left: 16px;
        border-left-color: transparent;
        border-bottom-color: rgba(219, 0, 0, 0.4);
    }

    .woocommerce-MyAccount-navigation ul li.is-active a,
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--current a {
        border-left-color: transparent;
        border-bottom-color: #db0000;
        padding-left: 16px;
    }
}


/* ── 3. My Account Content Area ───────────────────────────────────────────── */

.woocommerce-MyAccount-content {
    background:
        var(--aor-carbon),
        #18181f;
    border: 1px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.1);
    border-radius: var(--aor-radius);
    padding: 28px;
    box-shadow:
        var(--aor-shadow-raised),
        inset 0 1px 0 rgba(255,255,255,0.06);
    color: #dcdce5;
    min-height: 300px;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    color: #f0f0f5;
    margin-bottom: 18px;
    margin-top: 0;
}

.woocommerce-MyAccount-content h2 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.woocommerce-MyAccount-content h3 {
    font-size: 1rem;
    font-weight: 700;
}

.woocommerce-MyAccount-content p {
    color: #8888a0;
    line-height: 1.6;
    margin-bottom: 16px;
}

.woocommerce-MyAccount-content p strong {
    color: #dcdce5;
}

.woocommerce-MyAccount-content a {
    color: #db0000;
    transition: color 0.2s ease;
}

.woocommerce-MyAccount-content a:hover {
    color: #ff1a1a;
}


/* ── 4. Orders Table ──────────────────────────────────────────────────────── */

.woocommerce-orders-table,
.woocommerce table.woocommerce-orders-table,
.woocommerce-account .woocommerce table {
    border-collapse: collapse;
    width: 100%;
    background:
        var(--aor-carbon),
        #18181f;
    border: 1px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.1);
    border-radius: var(--aor-radius);
    overflow: hidden;
    box-shadow:
        var(--aor-shadow-raised),
        inset 0 1px 0 rgba(255,255,255,0.07);
    margin-bottom: 0;
}

.woocommerce-account .woocommerce table th {
    text-align: left;
    padding: 11px 16px;
    background:
        var(--aor-brushed),
        linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.05) 100%),
        rgba(255,255,255,0.03);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8888a0;  /* WCAG AA */
    border-bottom: 2px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.woocommerce-account .woocommerce table td {
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.03);
    vertical-align: middle;
    color: #dcdce5;
    font-size: 0.9rem;
}

.woocommerce-account .woocommerce table tr:hover td {
    background: rgba(255,255,255,0.02);
}

/* Order number link */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    color: #f0f0f5;
    font-weight: 700;
    transition: color 0.2s ease;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
    color: #db0000;
}

/* Order status badges */
.woocommerce-orders-table mark.order-status,
.woocommerce-order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.06);
    color: #8888a0;
    border: 1px solid rgba(255,255,255,0.06);
}

.woocommerce-orders-table mark.order-status.status-completed,
.order-status.status-completed {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
    border-color: rgba(34,197,94,0.2);
}

.woocommerce-orders-table mark.order-status.status-processing,
.order-status.status-processing {
    background: rgba(0,212,255,0.08);
    color: #00d4ff;
    border-color: rgba(0,212,255,0.15);
}

.woocommerce-orders-table mark.order-status.status-pending,
.order-status.status-pending {
    background: rgba(251,191,36,0.08);
    color: #f59e0b;
    border-color: rgba(251,191,36,0.15);
}

.woocommerce-orders-table mark.order-status.status-cancelled,
.woocommerce-orders-table mark.order-status.status-failed,
.order-status.status-cancelled,
.order-status.status-failed {
    background: rgba(219,0,0,0.08);
    color: #db0000;
    border-color: rgba(219,0,0,0.15);
}

/* Order action button */
.woocommerce-orders-table .button {
    font-size: 0.75rem;
    padding: 7px 14px;
}

/* Mobile: stacked rows */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce table thead {
        display: none;
    }

    .woocommerce-account .woocommerce table tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid rgba(255,255,255,0.06);
        border-top-color: rgba(255,255,255,0.1);
        border-radius: var(--aor-radius);
        background:
            var(--aor-carbon),
            #18181f;
        box-shadow: var(--aor-shadow-raised);
        padding: 14px;
    }

    .woocommerce-account .woocommerce table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
        font-size: 0.85rem;
    }

    .woocommerce-account .woocommerce table td::before {
        content: attr(data-title);
        font-weight: 700;
        color: #8888a0;  /* WCAG AA */
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        flex-shrink: 0;
        margin-right: 12px;
    }
}


/* ── 5. Order Detail Page ─────────────────────────────────────────────────── */

.woocommerce-order-details {
    margin-bottom: 32px;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8888a0;  /* WCAG AA */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    background:
        var(--aor-brushed),
        linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.05) 100%),
        rgba(255,255,255,0.03);
    padding: 11px 24px;
    margin: 0 -24px 16px;
    border-bottom: 2px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4);
}

/* First title doesn't need top margin offset */
.woocommerce-order-details:first-child .woocommerce-order-details__title,
.woocommerce-column:first-child .woocommerce-column__title {
    margin-top: -28px;
    border-radius: var(--aor-radius) var(--aor-radius) 0 0;
}

.woocommerce-customer-details address {
    font-style: normal;
    color: #dcdce5;
    line-height: 1.8;
    font-size: 0.9rem;
}

/* Two-column addresses on order detail */
.woocommerce-columns--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

.woocommerce-column {
    background:
        var(--aor-carbon),
        #18181f;
    border: 1px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.1);
    border-radius: var(--aor-radius);
    padding: 24px;
    box-shadow:
        var(--aor-shadow-raised),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

@media (max-width: 768px) {
    .woocommerce-columns--2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ── 6. Address Fields ────────────────────────────────────────────────────── */

.woocommerce-address-fields .woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm fieldset {
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--aor-radius-sm);
}

.woocommerce-address-fields fieldset legend {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8888a0;  /* WCAG AA */
    padding: 0 8px;
    margin-left: -8px;
}


/* ── 7. Account / Profile Edit Form ───────────────────────────────────────── */

.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.edit-account {
    /* inherits content card padding */
}

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
    margin-bottom: 16px;
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8888a0;  /* WCAG AA */
    margin-bottom: 6px;
}

.woocommerce-account .woocommerce-form-row input.woocommerce-Input,
.woocommerce-account .woocommerce-form-row input[type="text"],
.woocommerce-account .woocommerce-form-row input[type="email"],
.woocommerce-account .woocommerce-form-row input[type="tel"],
.woocommerce-account .woocommerce-form-row input[type="password"],
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row select,
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields input[type="tel"],
.woocommerce-address-fields select {
    width: 100%;
    padding: 10px 14px;
    background: #14141c;
    border: 1px solid #2a2a38;
    border-radius: var(--aor-radius-sm);
    color: #dcdce5;
    font-size: 0.95rem;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.woocommerce-account .woocommerce-form-row input:focus,
.woocommerce-account .form-row input.input-text:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus {
    outline: none;
    border-color: #db0000;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 0 2px rgba(219,0,0,0.3);
}

.woocommerce-account .woocommerce-form-row input::placeholder,
.woocommerce-account .form-row input::placeholder {
    color: #8888a0;  /* WCAG AA */
}

/* Two-column form layout on desktop */
@media (min-width: 769px) {
    .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--wide,
    .woocommerce-account .edit-account .form-row-wide {
        width: 100%;
    }

    .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row:not(.woocommerce-form-row--wide),
    .woocommerce-account .edit-account .form-row:not(.form-row-wide):not(.form-row-last) {
        width: calc(50% - 8px);
        display: inline-block;
        vertical-align: top;
        margin-right: 16px;
    }

    .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row:nth-of-type(even),
    .woocommerce-account .edit-account .form-row-last {
        margin-right: 0;
    }
}


/* ── 7b. Custom Account Form Fields (match filter panel) ─────────────────── */

.aor-edit-account-form {
    /* Form wrapper inherits content card padding */
}

.aor-form-row {
    margin-bottom: 16px;
}

.aor-form-row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .aor-form-row--half {
        grid-template-columns: 1fr;
    }
}

.aor-form-field {
    margin-bottom: 0;
}

.aor-form-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8888a0;
    margin-bottom: 5px;
}

.aor-form-field label .required {
    color: var(--aor-red);
}

.aor-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.4);
    border-top-color: rgba(0,0,0,0.6);
    border-bottom-color: rgba(255,255,255,0.04);
    border-radius: var(--aor-radius-sm);
    font-size: 0.9rem;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 20%, transparent 40%),
        var(--aor-bg-input);
    color: var(--aor-text);
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.5),
        inset 0 1px 2px rgba(0,0,0,0.4),
        inset 0 -1px 0 rgba(255,255,255,0.03),
        0 1px 0 rgba(255,255,255,0.06),
        0 2px 1px rgba(255,255,255,0.02);
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.aor-input:focus {
    border-color: var(--aor-cyan-dim);
    outline: none;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.5),
        inset 0 1px 2px rgba(0,0,0,0.4),
        0 0 0 3px var(--aor-cyan-glow),
        0 0 16px rgba(0, 212, 255, 0.15);
}

.aor-input::placeholder {
    color: #8888a0;  /* WCAG AA */
}

.aor-field-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #8888a0;  /* WCAG AA */
    line-height: 1.4;
}

/* Password fieldset styled like filter panel */
.aor-password-fieldset {
    background:
        var(--aor-noise),
        linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.06) 100%),
        rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.1);
    border-radius: var(--aor-radius);
    padding: 22px;
    margin: 24px 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

.aor-password-fieldset legend {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8888a0;
    padding: 0 8px;
}

/* Address fields — match filter panel inputs */
.woocommerce-address-fields .aor-input,
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields input[type="tel"],
.woocommerce-address-fields select {
    border: 1px solid rgba(0,0,0,0.4);
    border-top-color: rgba(0,0,0,0.6);
    border-bottom-color: rgba(255,255,255,0.04);
    background:
        linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 20%, transparent 40%),
        var(--aor-bg-input);
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.5),
        inset 0 1px 2px rgba(0,0,0,0.4),
        inset 0 -1px 0 rgba(255,255,255,0.03),
        0 1px 0 rgba(255,255,255,0.06),
        0 2px 1px rgba(255,255,255,0.02);
}

.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus {
    outline: none;
    border-color: var(--aor-cyan-dim);
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.5),
        inset 0 1px 2px rgba(0,0,0,0.4),
        0 0 0 3px var(--aor-cyan-glow),
        0 0 16px rgba(0, 212, 255, 0.15);
}

/* Profile picture section */
.aor-pfp-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.aor-pfp-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.aor-pfp-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow:
        0 0 0 3px rgba(219,0,0,0.15),
        var(--aor-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aor-bg-card);
}

.aor-pfp-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aor-pfp-placeholder {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--aor-text-dim);
}

.aor-pfp-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Form submit area */
.aor-form-submit {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.aor-form-submit .aor-btn--primary {
    display: block;
    width: 100%;
    padding: 13px 28px;
    background: linear-gradient(180deg, #ff2222 0%, #e81010 25%, #c20000 50%, #a00000 75%, #800000 100%);
    color: #f0f0f5;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--aor-radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 2px 3px rgba(0,0,0,0.6);
    box-shadow:
        0 2px 6px rgba(219,0,0,0.4),
        0 6px 20px rgba(219,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.5);
}

.aor-form-submit .aor-btn--primary:hover {
    background: linear-gradient(180deg, #ff4444 0%, #ff1a1a 25%, #d00000 50%, #b80000 75%, #900000 100%);
    box-shadow:
        0 4px 14px rgba(219,0,0,0.5),
        0 10px 30px rgba(219,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    transform: translateY(-2px);
}

.aor-form-submit .aor-btn--primary:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 3px rgba(219,0,0,0.3),
        inset 0 3px 8px rgba(0,0,0,0.5);
}

/* Small buttons (Change Photo, etc.) */
.aor-btn--sm {
    display: inline-block;
    padding: 7px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: var(--aor-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
}

.aor-btn--secondary {
    background: linear-gradient(180deg, #2a2a40 0%, #18181f 100%);
    color: #dcdce5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07);
}

.aor-btn--secondary:hover {
    background: linear-gradient(180deg, #3a3a52 0%, #2a2a3a 100%);
    color: #f0f0f5;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

.aor-btn--danger {
    background: transparent;
    color: #8888a0;
    border-color: rgba(255,255,255,0.06);
    box-shadow: none;
    padding: 7px;
}

.aor-btn--danger:hover {
    color: #db0000;
    border-color: rgba(219,0,0,0.3);
    background: rgba(219,0,0,0.06);
}

.aor-btn--danger svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ── 8. Password Strength Meter ───────────────────────────────────────────── */

.woocommerce-password-strength {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--aor-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.04);
    color: #8888a0;
    border: 1px solid rgba(255,255,255,0.04);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-password-strength.strong {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
    border-color: rgba(34,197,94,0.2);
}

.woocommerce-password-strength.good {
    background: rgba(0,212,255,0.08);
    color: #00d4ff;
    border-color: rgba(0,212,255,0.15);
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
    background: rgba(219,0,0,0.08);
    color: #db0000;
    border-color: rgba(219,0,0,0.15);
}

.woocommerce-password-hint {
    font-size: 0.78rem;
    color: #8888a0;  /* WCAG AA */
    margin-top: 4px;
    display: block;
}


/* ── 9. Login & Register Forms ────────────────────────────────────────────── */

/* Side-by-side on desktop */
@media (min-width: 769px) {
    .woocommerce-account .u-columns,
    .woocommerce-account .woocommerce-page .col2-set {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
    background:
        var(--aor-carbon),
        #18181f;
    border: 1px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.1);
    border-radius: var(--aor-radius);
    padding: 28px;
    box-shadow:
        var(--aor-shadow-raised),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2,
.woocommerce-account .col-1 h2,
.woocommerce-account .col-2 h2 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8888a0;  /* WCAG AA */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    background:
        var(--aor-brushed),
        linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.05) 100%),
        rgba(255,255,255,0.03);
    margin: -28px -28px 20px;
    padding: 11px 28px;
    border-radius: var(--aor-radius) var(--aor-radius) 0 0;
    border-bottom: 2px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4);
}

form.woocommerce-form-login,
form.woocommerce-form-register {
    /* styles applied via column wrappers above */
}

/* "Remember me" checkbox row */
.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8888a0;
    font-size: 0.85rem;
    cursor: pointer;
}

.woocommerce-form__label-for-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #db0000;
    cursor: pointer;
}

/* Lost password link */
.woocommerce-LostPassword a,
.woocommerce-form-login__rememberme + a {
    font-size: 0.82rem;
    color: #8888a0;  /* WCAG AA */
    transition: color 0.2s ease;
}

.woocommerce-LostPassword a:hover,
.woocommerce-form-login__rememberme + a:hover {
    color: #db0000;
}


/* ── 10. Checkout — "Create an Account?" Checkbox ────────────────────────── */

.woocommerce-checkout .create-account {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--aor-radius-sm);
}

.woocommerce-checkout .create-account label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8888a0;
    font-size: 0.85rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.woocommerce-checkout .create-account input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #db0000;
    cursor: pointer;
    flex-shrink: 0;
}

.woocommerce-checkout #createaccount ~ .create-account-fields {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.04);
}


/* ── 11. Avatar Upload ────────────────────────────────────────────────────── */

.aor-avatar-upload {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.aor-avatar-preview {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow:
        0 0 0 3px rgba(219,0,0,0.15),
        var(--aor-shadow);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aor-avatar-preview:hover {
    border-color: rgba(219,0,0,0.5);
    box-shadow:
        0 0 0 3px rgba(219,0,0,0.3),
        var(--aor-shadow);
}

.aor-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aor-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #f0f0f5;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 8px;
    line-height: 1.3;
}

.aor-avatar-preview:hover .aor-avatar-overlay {
    opacity: 1;
}

.aor-avatar-info {
    flex: 1;
}

.aor-avatar-info p {
    font-size: 0.82rem;
    color: #8888a0;  /* WCAG AA */
    margin: 0 0 10px;
    line-height: 1.5;
}

.aor-avatar-upload-btn {
    display: inline-block;
    background: linear-gradient(180deg, #2a2a40 0%, #18181f 100%);
    color: #dcdce5;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 8px 16px;
    border-radius: var(--aor-radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07);
}

.aor-avatar-upload-btn:hover {
    background: linear-gradient(180deg, #3a3a52 0%, #2a2a3a 100%);
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    transform: translateY(-1px);
}

.aor-avatar-upload input[type="file"] {
    display: none;
}


/* ── 12. 2FA Setup Section ────────────────────────────────────────────────── */

.aor-2fa-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-top-color: rgba(255,255,255,0.08);
    border-radius: var(--aor-radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.aor-2fa-section h3 {
    color: #f0f0f5;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.aor-2fa-section .aor-2fa-desc {
    font-size: 0.85rem;
    color: #8888a0;  /* WCAG AA */
    margin-bottom: 20px;
    line-height: 1.6;
}

/* QR code container */
.aor-2fa-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 12px;
    border-radius: var(--aor-radius-sm);
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.aor-2fa-qr img {
    display: block;
    width: 160px;
    height: 160px;
}

/* Secret key display */
.aor-2fa-secret {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.85rem;
    color: #00d4ff;
    background: rgba(0,212,255,0.06);
    border: 1px solid rgba(0,212,255,0.15);
    padding: 8px 14px;
    border-radius: var(--aor-radius-sm);
    letter-spacing: 0.1em;
    word-break: break-all;
    margin-bottom: 16px;
    display: block;
}

/* Verification code input */
.aor-2fa-verify {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.aor-2fa-verify input[type="text"],
.aor-2fa-verify input[type="number"] {
    width: 160px;
    padding: 10px 14px;
    background: #14141c;
    border: 1px solid #2a2a38;
    border-radius: var(--aor-radius-sm);
    color: #f0f0f5;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: center;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aor-2fa-verify input:focus {
    outline: none;
    border-color: #db0000;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 0 2px rgba(219,0,0,0.3);
}

/* Recovery codes block */
.aor-2fa-recovery-codes {
    background: #0a0a0f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--aor-radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.aor-2fa-recovery-codes p {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8888a0;  /* WCAG AA */
    margin-bottom: 10px;
}

.aor-2fa-recovery-codes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.aor-2fa-recovery-codes ul li {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9rem;
    color: #dcdce5;
    letter-spacing: 0.05em;
}

.aor-2fa-recovery-codes ul li.used {
    text-decoration: line-through;
    color: #3a3a4a;
}

/* Status badge */
.aor-2fa-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.aor-2fa-status.enabled {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.2);
}

.aor-2fa-status.disabled {
    background: rgba(255,255,255,0.04);
    color: #8888a0;  /* WCAG AA */
    border: 1px solid rgba(255,255,255,0.06);
}

.aor-2fa-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}


/* ── 13. Empty States ─────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce-message.is-empty,
.aor-account-empty {
    text-align: center;
    padding: 48px 24px;
    color: #8888a0;  /* WCAG AA */
}

.aor-account-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.aor-account-empty h3 {
    color: #8888a0;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.aor-account-empty p {
    font-size: 0.9rem;
    color: #8888a0;  /* WCAG AA */
    margin-bottom: 24px;
}

/* No orders message WooCommerce default */
.woocommerce-notice.woocommerce-notice--info {
    text-align: center;
    padding: 40px 24px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--aor-radius);
    color: #8888a0;  /* WCAG AA */
    font-size: 0.9rem;
}

.woocommerce-notice.woocommerce-notice--info .aor-btn,
.woocommerce-notice .button,
.aor-account-empty .aor-btn {
    display: inline-block;
    margin-top: 16px;
    background: linear-gradient(180deg, #ff2222 0%, #e81010 25%, #c20000 50%, #a00000 75%, #800000 100%);
    color: #f0f0f5;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 11px 28px;
    border-radius: var(--aor-radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    text-shadow: 0 2px 3px rgba(0,0,0,0.6);
    box-shadow:
        0 2px 6px rgba(219,0,0,0.4),
        0 6px 20px rgba(219,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.5);
}

.woocommerce-notice .button:hover,
.aor-account-empty .aor-btn:hover {
    background: linear-gradient(180deg, #ff4444 0%, #ff1a1a 25%, #d00000 50%, #b80000 75%, #900000 100%);
    box-shadow:
        0 4px 14px rgba(219,0,0,0.5),
        0 10px 30px rgba(219,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    transform: translateY(-2px);
}


/* ── 14. WooCommerce Notices in Account Context ───────────────────────────── */

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
    padding: 12px 18px;
    border-radius: var(--aor-radius-sm);
    margin-bottom: 20px;
    font-size: 0.88rem;
    color: #dcdce5;
    list-style: none;
}

.woocommerce-MyAccount-content .woocommerce-message {
    background: rgba(34,197,94,0.08);
    border-left: 3px solid #22c55e;
}

.woocommerce-MyAccount-content .woocommerce-info {
    background: rgba(56,189,248,0.08);
    border-left: 3px solid #38bdf8;
}

.woocommerce-MyAccount-content .woocommerce-error {
    background: rgba(219,0,0,0.08);
    border-left: 3px solid #db0000;
}

.woocommerce-MyAccount-content .woocommerce-message a,
.woocommerce-MyAccount-content .woocommerce-info a {
    color: #38bdf8;
}

.woocommerce-MyAccount-content .woocommerce-error a {
    color: #ff5555;
}


/* ── 15. Header Account Icon / Avatar Link ────────────────────────────────── */

.aor-account-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aor-white) !important;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, #3388ee 0%, #2266cc 30%, #1a4f99 70%, #133d7a 100%);
    transition: all 0.25s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    box-shadow:
        0 2px 8px rgba(34, 102, 204, 0.35),
        0 6px 20px rgba(34, 102, 204, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 2px 1px rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        inset 0 -2px 1px rgba(0,0,0,0.2);
}

.aor-account-link:hover {
    color: var(--aor-white) !important;
    background: linear-gradient(180deg, #4499ff 0%, #3377dd 30%, #2266bb 70%, #1a5599 100%);
    box-shadow:
        0 4px 16px rgba(34, 102, 204, 0.45),
        0 8px 30px rgba(34, 102, 204, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    transform: translateY(-2px);
}

.aor-account-link:active {
    transform: translateY(1px);
    background: linear-gradient(180deg, #133d7a 0%, #1a4f99 50%, #1a5599 100%);
    box-shadow:
        0 1px 3px rgba(34, 102, 204, 0.3),
        inset 0 3px 6px rgba(0,0,0,0.5),
        inset 0 1px 1px rgba(0,0,0,0.3);
}

.aor-account-link svg,
.aor-account-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Small avatar in header when logged in */
.aor-account-link .aor-account-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 0 2px rgba(219,0,0,0.2);
    flex-shrink: 0;
}

.aor-account-link:hover .aor-account-avatar {
    box-shadow: 0 0 0 2px rgba(219,0,0,0.5);
}

/* v1.28.1 — Logged-in avatar-only mode: strip pill styling, render just the
   circle, vertically centered in the header next to the other nav items.
   The `.aor-account-link-avatar` modifier class is added in header.php only
   when a user is logged in (avatar takes the place of the icon-pill button). */
.aor-account-link-avatar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-self: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.aor-account-link-avatar:hover,
.aor-account-link-avatar:active {
    background: transparent !important;
    box-shadow: 0 0 0 3px rgba(219,0,0,0.45) !important;
    transform: translateY(-1px);
}
.aor-account-link-avatar .aor-avatar-img,
.aor-account-link-avatar .aor-avatar-initials {
    display: block;
    border: 1px solid rgba(255,255,255,0.18);
}

/* Label: show on larger screens inside pill */
.aor-account-label {
    display: none;
}

@media (min-width: 768px) {
    .aor-account-label {
        display: inline;
    }
}


/* ── 16. aor-reveal Compatibility ────────────────────────────────────────── */

/* Content sections can use aor-reveal for entrance animation */
.woocommerce-MyAccount-content.aor-reveal,
.aor-2fa-section.aor-reveal,
.woocommerce-column.aor-reveal {
    /* aor-reveal handles opacity/transform — ensure no overflow clip issues */
    overflow: visible;
}

/* Stagger the two address columns */
.woocommerce-columns--2 .woocommerce-column:nth-child(1) { transition-delay: 0ms; }
.woocommerce-columns--2 .woocommerce-column:nth-child(2) { transition-delay: 80ms; }


/* ── 17. Misc / Polish ────────────────────────────────────────────────────── */

/* Section divider inside content */
.aor-account-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin: 24px 0;
}

/* Fieldset reset inside account forms */
.woocommerce-account fieldset {
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--aor-radius-sm);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.woocommerce-account fieldset legend {
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8888a0;  /* WCAG AA */
}

/* Price amounts */
.woocommerce-account .woocommerce-Price-amount {
    color: #f0f0f5;
    font-weight: 700;
}

/* View order / pay buttons in orders table */
.woocommerce-orders-table .woocommerce-button,
.woocommerce-orders-table td .button {
    background: linear-gradient(180deg, #2a2a40 0%, #18181f 100%);
    color: #dcdce5;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 7px 14px;
    border-radius: var(--aor-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}

.woocommerce-orders-table td .button:hover {
    background: linear-gradient(180deg, #3a3a52 0%, #2a2a3a 100%);
    color: #f0f0f5;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

/* Pay now — accent treatment */
.woocommerce-orders-table td .button.pay {
    background: linear-gradient(180deg, #ff2222 0%, #e81010 30%, #b80000 100%);
    color: #f0f0f5;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(219,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}

.woocommerce-orders-table td .button.pay:hover {
    background: linear-gradient(180deg, #ff4040 0%, #ff1a1a 30%, #d00000 100%);
    box-shadow: 0 4px 16px rgba(219,0,0,0.45);
}

/* Save button at bottom of forms */
.woocommerce-account .woocommerce-form-row input[type="submit"],
.woocommerce-account form .button[type="submit"],
.woocommerce-account .form-row input[type="submit"] {
    background: linear-gradient(180deg, #ff2222 0%, #e81010 25%, #c20000 50%, #a00000 75%, #800000 100%);
    color: #f0f0f5;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px 28px;
    border-radius: var(--aor-radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 2px 3px rgba(0,0,0,0.6);
    box-shadow:
        0 2px 6px rgba(219,0,0,0.4),
        0 6px 20px rgba(219,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.5);
    width: auto;
}

.woocommerce-account .woocommerce-form-row input[type="submit"]:hover,
.woocommerce-account form .button[type="submit"]:hover,
.woocommerce-account .form-row input[type="submit"]:hover {
    background: linear-gradient(180deg, #ff4444 0%, #ff1a1a 25%, #d00000 50%, #b80000 75%, #900000 100%);
    box-shadow:
        0 4px 14px rgba(219,0,0,0.5),
        0 10px 30px rgba(219,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    transform: translateY(-2px);
}

.woocommerce-account .woocommerce-form-row input[type="submit"]:active,
.woocommerce-account form .button[type="submit"]:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 3px rgba(219,0,0,0.3),
        inset 0 3px 8px rgba(0,0,0,0.5);
}


/* ── 18. Lost / Reset Password Card ──────────────────────────────────────── */

/* Centered card for the lost-password and reset-password pages.
   These pages render outside the two-column account layout, so we
   give them their own contained card that sits in the page content area. */

.aor-password-card {
    max-width: 480px;
    margin: 60px auto;
    background:
        var(--aor-carbon),
        #18181f;
    border: 1px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.1);
    border-radius: var(--aor-radius);
    padding: 36px 32px 28px;
    box-shadow:
        var(--aor-shadow-raised),
        inset 0 1px 0 rgba(255,255,255,0.06);
    color: #dcdce5;
}

.aor-password-card__title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #f0f0f5;
    letter-spacing: -0.2px;
}

.aor-password-card__desc {
    margin: 0 0 24px;
    color: #8888a0;
    font-size: 0.92rem;
    line-height: 1.6;
}

.aor-password-card label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #8888a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aor-password-card .woocommerce-form-row {
    margin-bottom: 20px;
}

.aor-password-card .input-text {
    width: 100%;
    padding: 11px 14px;
    background: #14141c;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--aor-radius-sm, 6px);
    color: #dcdce5;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.aor-password-card .input-text:focus {
    outline: none;
    border-color: #db0000;
    box-shadow: 0 0 0 3px rgba(219,0,0,0.15);
}

.aor-password-card .aor-btn-primary,
.aor-password-card .button[type="submit"] {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(180deg, #e81010 0%, #b80000 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--aor-radius-sm, 6px);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(219,0,0,0.35);
}

.aor-password-card .aor-btn-primary:hover,
.aor-password-card .button[type="submit"]:hover {
    background: linear-gradient(180deg, #ff2020 0%, #d00000 100%);
    box-shadow: 0 4px 14px rgba(219,0,0,0.45);
}

.aor-password-card .aor-btn-primary:active,
.aor-password-card .button[type="submit"]:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(219,0,0,0.3);
}

@media (max-width: 540px) {
    .aor-password-card {
        margin: 32px 16px;
        padding: 28px 20px 22px;
    }
}


/* ── 19. Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .aor-avatar-overlay { transition: none; }
    .aor-account-link { transition: none; }
    .woocommerce-MyAccount-navigation ul li a { transition: none; }
    .woocommerce-password-strength { transition: none; }
    .aor-2fa-status { animation: none; }
}