/**
 * Beats parent hardcoded indigo in wallet dashboard + checkout wallet highlight.
 * Loaded after child Vite CSS; uses theme tokens from @theme.
 */

/*
 * Woo Wallet plugin UI (woo-wallet-my-wallet-container) — plugin sets --wallet-primary-color: #483de0.
 */
.woo-wallet-my-wallet-container {
    --wallet-primary-color: var(--color-primary);
}

.woo-wallet-my-wallet-container .woo-wallet-balance-card {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%
    ) !important;
}

.woo-wallet-my-wallet-container .woo-wallet-nav-tabs {
    background: var(--color-gray-50) !important;
}

.woo-wallet-my-wallet-container .woo-wallet-nav-tab {
    background: var(--color-gray-50) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-gray-200) !important;
}

.woo-wallet-my-wallet-container .woo-wallet-nav-tab:hover,
.woo-wallet-my-wallet-container .woo-wallet-nav-tab:focus {
    background: var(--color-gray-100) !important;
    color: var(--color-text-primary) !important;
}

.woo-wallet-my-wallet-container .woo-wallet-nav-tab.active {
    color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) !important;
}

/*
 * Transactions — date range filter (plugin: white input + color #555).
 * Use dark ink on #fff field, not light theme text tokens.
 */
body.woocommerce-account .woo-wallet-my-wallet-container .dataTables_filter input[type='search'],
body.woocommerce-account
    .woo-wallet-my-wallet-container
    #wc-wallet-transaction-details_filter
    input {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-weight: 600 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' viewBox='0 0 24 24'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important;
    background-position: 10px center !important;
    background-repeat: no-repeat !important;
}

body.woocommerce-account .woo-wallet-my-wallet-container .dataTables_filter input[type='search']::placeholder {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/*
 * Date range picker popup (body-appended; white panel + inherited light theme text).
 */
body.woocommerce-account .daterangepicker {
    color: #111827;
}

body.woocommerce-account .daterangepicker .ranges li {
    color: #111827;
    font-weight: 600;
}

body.woocommerce-account .daterangepicker .ranges li:hover {
    color: #111827;
}

body.woocommerce-account .daterangepicker .ranges li.active {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

body.woocommerce-account .daterangepicker .calendar-table thead th {
    color: #111827;
    font-weight: 700;
}

body.woocommerce-account .daterangepicker .calendar-table tbody td {
    color: #111827;
    font-weight: 500;
}

body.woocommerce-account .daterangepicker th.month,
body.woocommerce-account .daterangepicker .drp-selected {
    color: #111827 !important;
    font-weight: 600 !important;
}

body.woocommerce-account .daterangepicker td.off,
body.woocommerce-account .daterangepicker td.disabled {
    color: #6b7280 !important;
}

body.woocommerce-account .daterangepicker td.active,
body.woocommerce-account .daterangepicker td.active:hover {
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
    color: var(--color-on-primary) !important;
}

body.woocommerce-account .daterangepicker .drp-buttons .applyBtn.btn-primary,
body.woocommerce-account .daterangepicker .drp-buttons button.btn-primary {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%
    ) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-on-primary) !important;
    font-weight: 600;
}

body.woocommerce-account .daterangepicker .drp-buttons .applyBtn.btn-primary:hover,
body.woocommerce-account .daterangepicker .drp-buttons button.btn-primary:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-on-primary) !important;
}

/* My Account — Woo Wallet endpoint */
.nera-wallet-dashboard .woocommerce-Input:focus,
.nera-wallet-dashboard input:focus,
.nera-wallet-dashboard select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}

.nera-wallet-dashboard .woocommerce-Button,
.nera-wallet-dashboard button[type='submit'] {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%
    ) !important;
    color: var(--color-on-primary) !important;
    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}

.nera-wallet-dashboard .woocommerce-Button:hover,
.nera-wallet-dashboard button[type='submit']:hover {
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
}

/*
 * Checkout — payment methods (parent forces #ffffff on li + payment_box).
 * #payment prefix beats wallet-balance.php inline .nera-wallet-payment-highlighted when needed.
 */
#payment.woocommerce-checkout-payment .wc_payment_methods,
#payment.woocommerce-checkout-payment .wc_payment_methods > li.wc_payment_method {
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
}

#payment.woocommerce-checkout-payment .wc_payment_method:hover,
#payment.woocommerce-checkout-payment .wc_payment_method.active {
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
}

#payment.woocommerce-checkout-payment .payment_box,
#payment.woocommerce-checkout-payment .payment_box .nera-wallet-gateway-description {
    background-color: var(--color-background-light) !important;
    color: var(--color-text-secondary) !important;
}

#payment.woocommerce-checkout-payment .payment_box .nera-wallet-gateway-description {
    border-color: var(--color-gray-200) !important;
}

/* Wallet row emphasis — dark base + lime border (replaces inline indigo tint) */
#payment.woocommerce-checkout-payment
    ul.payment_methods
    > li.wc_payment_method.payment_method_wallet.nera-wallet-payment-highlighted {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) 0%,
        color-mix(in srgb, var(--color-primary) 8%, var(--color-background-light)) 100%
    ) !important;
    border: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

#payment.woocommerce-checkout-payment
    ul.payment_methods
    > li.wc_payment_method.payment_method_wallet.nera-wallet-payment-highlighted:hover {
    border-color: color-mix(in srgb, var(--color-primary) 55%, transparent) !important;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}

#payment.woocommerce-checkout-payment
    ul.payment_methods
    > li.wc_payment_method.payment_method_wallet.nera-wallet-payment-highlighted::before {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%
    ) !important;
    color: var(--color-on-primary) !important;
}

/*
 * My Account dashboard — recent orders card uses parent gray text utilities.
 * On Rusboy dark shell, force readable light text for that card only.
 */
.nera-account-dashboard > .bg-surface.rounded-2xl.border.border-gray-100.shadow-sm.p-6:not(.mb-8) {
    color: var(--color-text-primary);
}

.nera-account-dashboard > .bg-surface.rounded-2xl.border.border-gray-100.shadow-sm.p-6:not(.mb-8) .text-gray-900 {
    color: var(--color-text-primary) !important;
}

.nera-account-dashboard > .bg-surface.rounded-2xl.border.border-gray-100.shadow-sm.p-6:not(.mb-8) .text-gray-600 {
    color: var(--color-text-primary) !important;
}

.nera-account-dashboard > .bg-surface.rounded-2xl.border.border-gray-100.shadow-sm.p-6:not(.mb-8) .text-gray-400 {
    color: var(--color-text-secondary) !important;
}

/*
 * My Account dashboard — stats grid + quick actions card.
 * Parent template uses gray text utilities that read too dark on this theme.
 */
.nera-account-dashboard > .grid.grid-cols-1.md\:grid-cols-3.gap-6.mb-8,
.nera-account-dashboard > .bg-surface.rounded-2xl.border.border-gray-100.shadow-sm.p-6.mb-8 {
    color: var(--color-text-primary);
}

.nera-account-dashboard > .grid.grid-cols-1.md\:grid-cols-3.gap-6.mb-8 .text-gray-900,
.nera-account-dashboard > .grid.grid-cols-1.md\:grid-cols-3.gap-6.mb-8 .text-gray-700,
.nera-account-dashboard > .grid.grid-cols-1.md\:grid-cols-3.gap-6.mb-8 .text-gray-600,
.nera-account-dashboard > .bg-surface.rounded-2xl.border.border-gray-100.shadow-sm.p-6.mb-8 .text-gray-900,
.nera-account-dashboard > .bg-surface.rounded-2xl.border.border-gray-100.shadow-sm.p-6.mb-8 .text-gray-700,
.nera-account-dashboard > .bg-surface.rounded-2xl.border.border-gray-100.shadow-sm.p-6.mb-8 .text-gray-600 {
    color: var(--color-text-primary) !important;
}

/*
 * My Account tab content — parent templates use dark gray Tailwind utilities.
 * Force readable light text inside account content (orders, addresses, edit forms, view order).
 */
body.woocommerce-account.logged-in
    .woocommerce-MyAccount-content
    :is(
        .nera-account-orders,
        .nera-account-addresses,
        .nera-edit-account,
        .nera-edit-address,
        .nera-view-order
    ) {
    color: var(--color-text-primary);
}

body.woocommerce-account.logged-in
    .woocommerce-MyAccount-content
    :is(
        .nera-account-orders,
        .nera-account-addresses,
        .nera-edit-account,
        .nera-edit-address,
        .nera-view-order
    )
    :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .\!text-gray-800) {
    color: var(--color-text-primary) !important;
}

body.woocommerce-account.logged-in
    .woocommerce-MyAccount-content
    :is(
        .nera-account-orders,
        .nera-account-addresses,
        .nera-edit-account,
        .nera-edit-address,
        .nera-view-order
    )
    :is(.text-gray-500, .text-gray-400) {
    color: var(--color-text-secondary) !important;
}

/* Form fields + placeholders stay legible on dark account panels */
body.woocommerce-account.logged-in
    .woocommerce-MyAccount-content
    :is(
        .nera-account-orders,
        .nera-account-addresses,
        .nera-edit-account,
        .nera-edit-address,
        .nera-view-order
    )
    :is(input.woocommerce-Input, input.input-text, select, textarea) {
    color: var(--color-text-primary) !important;
}

body.woocommerce-account.logged-in
    .woocommerce-MyAccount-content
    :is(
        .nera-account-orders,
        .nera-account-addresses,
        .nera-edit-account,
        .nera-edit-address,
        .nera-view-order
    )
    :is(input.woocommerce-Input, input.input-text, select, textarea)::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

/*
 * Select2 / selectWoo — plugin default blue highlight → brand lime (dropdown is on body).
 */
body.woocommerce-account .select2-container--default .select2-results__option--highlighted,
body.woocommerce-account
    .select2-container--default
    .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted,
body.woocommerce-checkout
    .select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)) !important;
    color: var(--color-text-primary) !important;
}

body.woocommerce-account .select2-container--default .select2-results__option--selected,
body.woocommerce-checkout .select2-container--default .select2-results__option--selected {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

/*
 * Wallet “Sufficient Balance” pill — checkout, view order, order received.
 */
body.woocommerce-checkout form.checkout #payment .bg-success-bg.text-success-text,
body.woocommerce-order-received .woocommerce-order .bg-success-bg.text-success-text,
body.woocommerce-account.logged-in
    .woocommerce-MyAccount-content
    .nera-view-order
    .bg-success-bg.text-success-text {
    background-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
}

/*
 * Edit-account deactivate dialog uses light surfaces (e.g. white Cancel button).
 * Revert gray utility colors so parent Tailwind grays win over the tab overrides above.
 */
body.woocommerce-account.logged-in
    .woocommerce-MyAccount-content
    #nera-deactivate-account-dialog
    :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: revert !important;
}