/* Solira /my-account/ skin — Phase 3.2 Path B */

:root {
    --sol-navy: #1B2A4A;
    --sol-navy-light: #2a3d6b;
    --sol-cream: #fef7e6;
    --sol-amber: #d97706;
    --sol-amber-tint: #fef3c7;
    --sol-amber-border: #fcd34d;
    --sol-text: #3f3f46;
    --sol-muted: #6b7280;
    --sol-border: #e5e7eb;
}

/* ====== Magic-link login form ====== */
.sol-magic-login {
    max-width: 480px;
    margin: 0 auto 32px auto;
    padding: 32px;
    background: var(--sol-amber-tint);
    border: 1px solid var(--sol-amber-border);
    border-left: 5px solid var(--sol-amber);
    border-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.sol-magic-login__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--sol-navy);
    margin: 0 0 8px 0;
}
.sol-magic-login__lede {
    color: var(--sol-text);
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.55;
}
.sol-magic-login__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sol-navy);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.sol-magic-login__input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 14px;
    font-family: inherit;
}
.sol-magic-login__input:focus {
    outline: none;
    border-color: var(--sol-navy);
    box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.1);
}
.sol-magic-login__btn {
    width: 100%;
    padding: 13px 20px;
    background: var(--sol-navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s;
}
.sol-magic-login__btn:hover { background: var(--sol-navy-light); }
.sol-magic-login__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sol-magic-login__status {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
}
.sol-magic-login__pwtoggle {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed rgba(27, 42, 74, 0.18);
    font-size: 13px;
    color: var(--sol-muted);
}
.sol-magic-login__pwtoggle summary {
    cursor: pointer;
    color: var(--sol-navy);
    font-weight: 500;
    padding: 4px 0;
}

/* Hide the WC default username/password form (and its orphaned "Login"
   heading) unless the disclosure is open — i.e. the user opted into password
   sign-in.

   🔴 The previous version of this block NEVER WORKED and left "Or sign in with
   password" as a dead control: it revealed the form with
   `.sol-magic-login__pwtoggle[open] ~ .woocommerce-form-login`, but the
   <details> is nested INSIDE .sol-magic-login while the form is a sibling of
   that wrapper — the sibling combinator cannot reach out of a parent, so the
   rule never matched. The DOM is:
       div.woocommerce
         ├ div.sol-magic-login   (contains details.sol-magic-login__pwtoggle)
         ├ h2 "Login"
         └ form.woocommerce-form-login
   Hence :has() on the WRAPPER, not the <details>. It also hid only the form,
   leaving WooCommerce's <h2>Login</h2> visible above an empty gap. */
.woocommerce-form-login,
.woocommerce h2:has(+ .woocommerce-form-login) {
    display: none;
}
.sol-magic-login:has(.sol-magic-login__pwtoggle[open]) ~ .woocommerce-form-login,
.sol-magic-login:has(.sol-magic-login__pwtoggle[open]) ~ h2:has(+ .woocommerce-form-login) {
    display: block;
}

/* ====== Dashboard set-password form ====== */
.sol-account-pwsetter {
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid var(--sol-border);
    border-radius: 8px;
    background: #fff;
}
.sol-account-pwsetter summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--sol-navy);
    font-size: 14px;
}
.sol-account-setpw {
    margin: 16px 0;
}
.sol-account-setpw__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sol-navy);
    margin: 0 0 6px 0;
}
.sol-account-setpw__lede {
    margin: 0 0 14px 0;
    color: var(--sol-muted);
    font-size: 13px;
    line-height: 1.55;
}
.sol-account-setpw__form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sol-navy);
    margin-bottom: 6px;
}
.sol-account-setpw__form input[type="password"] {
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 15px;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.sol-account-setpw__btn {
    padding: 10px 20px;
    background: var(--sol-navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.sol-account-setpw__btn:hover { background: var(--sol-navy-light); }
.sol-account-setpw__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sol-account-setpw__status { margin-top: 10px; font-size: 13px; }

/* ====== /my-account/ structure & menu ====== */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}
.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--sol-border);
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 14px;
    color: var(--sol-navy);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--sol-cream);
}
.woocommerce-MyAccount-navigation ul li--solira-delete-account a {
    color: #991b1b;
}

/* Orders table */
.woocommerce-orders-table {
    border: 1px solid var(--sol-border);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-orders-table thead th {
    background: #f9fafb;
    color: var(--sol-navy);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sol-border);
    text-align: left;
}
.woocommerce-orders-table tbody td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--sol-text);
    border-bottom: 1px solid var(--sol-border);
}

/* Form styling consistency */
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"] {
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
}

.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content .button {
    background: var(--sol-navy);
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    text-decoration: none;
    display: inline-block;
}
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content .button:hover {
    background: var(--sol-navy-light);
    color: #fff;
}

@media (max-width: 600px) {
    .sol-magic-login {
        padding: 22px 18px;
        margin: 0 0 24px 0;
    }
    .sol-magic-login__title { font-size: 19px; }
    .woocommerce-orders-table thead { display: none; }
    .woocommerce-orders-table tbody td {
        display: block;
        text-align: left;
        padding: 8px 16px;
    }
    .woocommerce-orders-table tbody td:first-child {
        padding-top: 16px;
        font-weight: 600;
    }
}