/* =========================================================================
   Zybroz — WooCommerce My Account Dark Theme
   Covers: Login / Register, Dashboard, Navigation sidebar, all account pages
   ========================================================================= */

/* ── Page wrapper ──────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce-page {
    padding: 60px 0 80px !important;
    background: transparent !important;
}
body.woocommerce-account {
    background: #0f1117 !important;
}
body.woocommerce-account .site-content,
body.woocommerce-account .content-area,
body.woocommerce-account #primary {
    background: transparent !important;
}

/* ── My Account layout: nav sidebar + content side by side ────────────── */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    background: transparent !important;
    border: none !important;
}
/* Astra wraps these in a two-col layout via Flexbox/Grid — kill white borders */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    border: none !important;
    box-shadow: none !important;
}

/* ── Navigation sidebar ────────────────────────────────────────────────── */
.zy-account-nav {
    background: #1a1e26 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    overflow: hidden !important;
}
.zy-account-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.zy-account-nav ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.zy-account-nav ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 9px !important;
    color: #aab2c0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
    border: none !important;
    background: transparent !important;
}
.zy-account-nav ul li a:hover {
    background: rgba(255,255,255,.05) !important;
    color: #eef0f4 !important;
}
.zy-account-nav ul li.is-active a,
.zy-account-nav ul li[class*="current"] a,
.zy-account-nav ul li a[aria-current="page"] {
    background: rgba(6,182,212,.1) !important;
    color: #06b6d4 !important;
    font-weight: 600 !important;
}
/* Logout: red tint */
.zy-account-nav ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #f08080 !important;
}
.zy-account-nav ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: rgba(240,128,128,.08) !important;
    color: #f08080 !important;
}
/* Icon colour inherits from link */
.zy-account-nav ul li a svg { flex-shrink: 0; opacity: .75; }
.zy-account-nav ul li a:hover svg,
.zy-account-nav ul li.is-active a svg { opacity: 1; }

/* ── Content area ──────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content {
    color: #c8d1e0 !important;
}
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content th,
.woocommerce-MyAccount-content li { color: #c8d1e0 !important; }
.woocommerce-MyAccount-content a { color: #06b6d4 !important; text-decoration: none !important; }
.woocommerce-MyAccount-content a:hover { text-decoration: underline !important; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { color: #eef0f4 !important; }

/* ── Dashboard greeting ────────────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-MyAccount-content .woocommerce-notice {
    background: #1a1e26 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-left: 3px solid #06b6d4 !important;
    border-radius: 0 10px 10px 0 !important;
    color: #c8d1e0 !important;
    padding: 16px 20px !important;
}

/* ── Tables (orders, downloads) ────────────────────────────────────────── */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-MyAccount-downloads {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.woocommerce-account table thead th {
    background: #20252f !important;
    color: #eef0f4 !important;
    padding: 12px 16px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    border-right: none !important;
}
.woocommerce-account table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    color: #c8d1e0 !important;
    background: transparent !important;
    border-right: none !important;
}
.woocommerce-account table tbody tr:last-child td { border-bottom: none !important; }
.woocommerce-account table tbody tr:hover td { background: rgba(255,255,255,.02) !important; }
/* Order status badges */
.woocommerce-account .woocommerce-orders-table .order-status {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: rgba(6,182,212,.12) !important;
    color: #06b6d4 !important;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.woocommerce-account .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
    background: #06b6d4 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 10px 24px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity .2s !important;
    text-decoration: none !important;
}
.woocommerce-account .button:hover,
.woocommerce-account input[type="submit"]:hover { opacity: .85 !important; color: #000 !important; }
.woocommerce-account .button.alt { background: #161922 !important; color: #c8d1e0 !important; border: 1px solid rgba(255,255,255,.1) !important; }
.woocommerce-account .button.alt:hover { background: #20252f !important; color: #eef0f4 !important; }

/* ── Form fields — broad selector covers address + account + login forms ── */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"],
.woocommerce-account .woocommerce-EditAccountForm input,
.woocommerce-account .woocommerce-address-fields input,
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-address-fields textarea,
.zy-auth-panel input[type="text"],
.zy-auth-panel input[type="email"],
.zy-auth-panel input[type="password"] {
    background: #1c2030 !important;
    background-color: #1c2030 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    color: #eef0f4 !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    transition: border-color .18s !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-text-fill-color: #eef0f4 !important;
}
/* Focus */
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
    border-color: rgba(6,182,212,.45) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(6,182,212,.08) !important;
}
/* Placeholder */
.woocommerce-account input::placeholder,
.zy-auth-panel input::placeholder { color: #5e6777 !important; }

/* Labels */
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-address-fields label,
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account label {
    color: #c8d1e0 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

/* ── Browser autofill override (Chrome forces white bg on autofilled fields) */
/* -webkit-box-shadow inset trick is the ONLY reliable override              */
.woocommerce-account input:-webkit-autofill,
.woocommerce-account input:-webkit-autofill:hover,
.woocommerce-account input:-webkit-autofill:focus,
.woocommerce-account input:-webkit-autofill:active,
.zy-auth-panel input:-webkit-autofill,
.zy-auth-panel input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1c2030 inset !important;
    box-shadow: 0 0 0 1000px #1c2030 inset !important;
    -webkit-text-fill-color: #eef0f4 !important;
    caret-color: #eef0f4 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 9px !important;
}

/* ── Select2 dark theme (WooCommerce country/state dropdowns) ───────────── */
.woocommerce-account .select2-container--default .select2-selection--single {
    background: #1c2030 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #eef0f4 !important;
    line-height: 44px !important;
    padding: 0 12px !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    right: 10px !important;
    top: 0 !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8c96a8 transparent transparent transparent !important;
}
.woocommerce-account .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent #06b6d4 transparent !important;
}
/* Dropdown panel — NOT scoped to .woocommerce-account as Select2 appends to body */
.select2-dropdown {
    background: #1a1e26 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 9px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
    overflow: hidden !important;
}
.select2-search--dropdown {
    padding: 10px !important;
    background: #1a1e26 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.select2-search--dropdown .select2-search__field {
    background: #0f1117 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 6px !important;
    color: #eef0f4 !important;
    padding: 7px 10px !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.select2-results { background: #1a1e26 !important; }
.select2-results__options { max-height: 240px !important; }
.select2-results__option {
    color: #c8d1e0 !important;
    background: transparent !important;
    padding: 9px 14px !important;
    font-size: 0.875rem !important;
}
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted {
    background: rgba(6,182,212,.15) !important;
    color: #06b6d4 !important;
}
.select2-results__option[aria-selected="true"] {
    background: rgba(6,182,212,.08) !important;
    color: #06b6d4 !important;
}

/* ── Password show/hide toggle button (WooCommerce eye icon — orange override) */
.woocommerce-account .woocommerce-Input__show-hide-button,
.woocommerce-account button.woocommerce-button.wp-element-button.woocommerce-Input__show-hide-button,
.woocommerce-account .show-password-input {
    background: #20252f !important;
    background-color: #20252f !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    color: #8c96a8 !important;
    border-radius: 0 9px 9px 0 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: background .15s !important;
    box-shadow: none !important;
}
.woocommerce-account .woocommerce-Input__show-hide-button:hover,
.woocommerce-account .show-password-input:hover {
    background: #262c38 !important;
    color: #c8d1e0 !important;
}
.woocommerce-account .woocommerce-Input__show-hide-button svg,
.woocommerce-account .woocommerce-Input__show-hide-button path {
    fill: currentColor !important;
    stroke: currentColor !important;
}
/* Password field + button inline */
.woocommerce-account .woocommerce-form-row .password-input,
.woocommerce-account .password-input {
    display: flex !important;
    align-items: stretch !important;
    background: #1c2030 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
}
.woocommerce-account .password-input input,
.woocommerce-account .woocommerce-form-row .password-input input {
    border: none !important;
    border-radius: 0 !important;
    flex: 1 !important;
    background: transparent !important;
}

/* ── "Copy billing to shipping" button ──────────────────────────────────── */
.zy-copy-billing-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(6,182,212,.1);
    border: 1px solid rgba(6,182,212,.3);
    border-radius: 8px;
    color: #06b6d4;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 14px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background .15s;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.zy-copy-billing-btn:hover { background: rgba(6,182,212,.18); }

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN / REGISTER FORMS  (shown to logged-out users)
   ═══════════════════════════════════════════════════════════════════════ */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    background: #1a1e26 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 16px !important;
    padding: 36px 40px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
}
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #eef0f4 !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
/* Lost password link */
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .lost_password a {
    color: #aab2c0 !important;
    font-size: 0.82rem !important;
    text-decoration: none !important;
    transition: color .15s !important;
}
.woocommerce-account .woocommerce-LostPassword a:hover,
.woocommerce-account .lost_password a:hover { color: #06b6d4 !important; }
/* Remember me checkbox */
.woocommerce-account .woocommerce-form__label-for-checkbox {
    color: #8c96a8 !important;
    font-size: 0.85rem !important;
}

/* ── Our own auth layout (form-login.php override uses .zy-auth-wrap) ───── */
.zy-auth-wrap {
    width: 100%;
}
.zy-auth-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: start !important;
}
.zy-auth-one-col {
    max-width: 520px;
    margin: 0 auto;
}
.zy-auth-panel {
    background: #1a1e26 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 16px !important;
    padding: 36px 40px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
}
.zy-auth-heading {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #eef0f4 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: none !important;
}
.zy-auth-sub {
    font-size: 0.82rem !important;
    color: #5e6777 !important;
    margin: 0 0 24px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    padding-bottom: 20px !important;
}
.zy-auth-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.zy-auth-note {
    font-size: 0.82rem !important;
    color: #8c96a8 !important;
    margin-bottom: 16px !important;
}
.zy-auth-privacy {
    font-size: 0.78rem !important;
    color: #5e6777 !important;
    margin-bottom: 14px !important;
}
.zy-auth-privacy a { color: #06b6d4 !important; }

/* Fallback: WooCommerce's original u-columns if override template not used */
.woocommerce-account #customer_login,
.woocommerce-account .u-columns.col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Address grid (my-address.php override uses .zy-address-grid) ──────── */
.zy-address-intro {
    color: #8c96a8 !important;
    font-size: 0.875rem !important;
    margin-bottom: 24px !important;
}
.zy-address-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}
.zy-address-one-col {
    max-width: 500px;
}
.zy-address-card {
    background: #1a1e26 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
    padding: 24px 26px !important;
    box-sizing: border-box !important;
}
.zy-address-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: transparent !important;
    border-top: none !important; border-left: none !important; border-right: none !important;
}
.zy-address-card-header h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #eef0f4 !important;
    margin: 0 !important;
    background: transparent !important;
}
.zy-address-edit {
    font-size: 0.78rem !important;
    color: #06b6d4 !important;
    text-decoration: none !important;
    border: 1px solid rgba(6,182,212,.3) !important;
    border-radius: 6px !important;
    padding: 3px 10px !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    flex-shrink: 0 !important;
}
.zy-address-edit:hover {
    background: rgba(6,182,212,.1) !important;
    text-decoration: none !important;
}
.zy-address-body {
    font-style: normal !important;
    font-size: 0.875rem !important;
    color: #8c96a8 !important;
    line-height: 1.65 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.zy-address-empty {
    color: #5e6777 !important;
    font-style: italic !important;
}

/* Fallback: style WooCommerce's original markup too */
.woocommerce-account .woocommerce-Address {
    background: #1a1e26 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
    padding: 24px 26px !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}
.woocommerce-account .woocommerce-Address-title,
.woocommerce-account .woocommerce-Address header.title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    border-top: none !important; border-left: none !important; border-right: none !important;
    background: transparent !important;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #eef0f4 !important;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-Address address,
.woocommerce-account .woocommerce-Address > address {
    color: #8c96a8 !important;
    font-size: 0.875rem !important;
    font-style: normal !important;
    line-height: 1.65 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-Address a.edit {
    font-size: 0.78rem !important;
    color: #06b6d4 !important;
    text-decoration: none !important;
    border: 1px solid rgba(6,182,212,.3) !important;
    border-radius: 6px !important;
    padding: 3px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.woocommerce-account .woocommerce-Address a.edit:hover {
    background: rgba(6,182,212,.1) !important;
}

@media (max-width: 768px) {
    .zy-auth-two-col,
    .zy-address-two-col,
    .woocommerce-account #customer_login,
    .woocommerce-account .u-columns.col2-set,
    .woocommerce-account .woocommerce-Addresses,
    .woocommerce-account .addresses.col2-set { grid-template-columns: 1fr !important; }
    .zy-auth-panel,
    .zy-address-card,
    .woocommerce-account .woocommerce-form-login,
    .woocommerce-account .woocommerce-form-register { padding: 20px !important; }
}

/* ── Notices / errors ──────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-error {
    background: rgba(42,16,16,.8) !important;
    border-left: 3px solid #f08080 !important;
    color: #f08080 !important;
    border-radius: 0 9px 9px 0 !important;
    list-style: none !important;
    padding: 14px 18px !important;
}
.woocommerce-account .woocommerce-message {
    background: rgba(14,46,32,.8) !important;
    border-left: 3px solid #5cd9a0 !important;
    color: #5cd9a0 !important;
    border-radius: 0 9px 9px 0 !important;
    padding: 14px 18px !important;
}
.woocommerce-account .woocommerce-info {
    background: rgba(21,32,51,.8) !important;
    border-left: 3px solid #7ab8ff !important;
    color: #7ab8ff !important;
    border-radius: 0 9px 9px 0 !important;
    padding: 14px 18px !important;
}