/**
 * IPTV Pro — woocommerce.css
 * Dark-theme overrides for WooCommerce: cart, checkout, My Account,
 * order received, notices, form fields, and buttons.
 * All colours reference the CSS variables injected by theme-options.php.
 */

/* ── 1. Global WC resets ────────────────────────────────────────────────── */

/* Force dark background on all WC pages at every level */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-order-received {
    background-color: var(--color-bg, #0a0a0f) !important;
}

.woocommerce-cart .woo-content-wrapper,
.woocommerce-checkout .woo-content-wrapper,
.woocommerce-account .woo-content-wrapper,
.woocommerce,
.woocommerce-page {
    color: var(--color-text);
    background-color: var(--color-bg, #0a0a0f);
}

/* All direct WC wrapper divs */
.woocommerce-cart #page-wrapper,
.woocommerce-checkout #page-wrapper {
    background-color: var(--color-bg, #0a0a0f);
}

.woo-content-wrapper {
    padding-block: clamp(3rem, 6vw, 5rem);
    min-height: 60vh;
    background-color: var(--color-bg, #0a0a0f);
}

/* Headings */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-page h4 {
    color: var(--color-heading, #ffffff);
}

/* All text inside WC pages */
.woocommerce p,
.woocommerce span,
.woocommerce label,
.woocommerce td,
.woocommerce th,
.woocommerce-page p,
.woocommerce-page span,
.woocommerce-page label,
.woocommerce-page td,
.woocommerce-page th {
    color: var(--color-text, #c8c8d8);
}

/* ── 2. Notices ─────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
    background: var(--color-surface) !important;
    border-top-color: var(--color-primary) !important;
    color: var(--color-text) !important;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: none;
    padding: 1rem 1.25rem 1rem 3rem;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.woocommerce-error {
    border-top-color: #f87171 !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
    background: var(--color-primary);
    color: #000;
    border-radius: var(--border-radius);
    font-weight: 700;
    padding: .5rem 1.25rem;
    border: none;
    float: right;
}

/* ── 3. Form fields ─────────────────────────────────────────────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.wc-block-components-text-input input,
.wc-block-components-select select {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    color: var(--color-text) !important;
    padding: .75rem 1rem !important;
    font-size: .9rem !important;
    font-family: var(--font-body) !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255,.12) !important;
    outline: none !important;
}

.woocommerce form .form-row label,
.wc-block-components-form-step__title {
    color: var(--color-text);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .4rem;
    display: block;
}

/* Select arrow */
.woocommerce form .form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .85rem center !important;
    padding-right: 2.5rem !important;
}

/* ── 4. Checkout page ───────────────────────────────────────────────────── */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3#order_review_heading {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    font-size: .9rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-align: left;
}

.woocommerce table.shop_table thead th {
    background: var(--color-surface);
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.woocommerce table.shop_table tr:last-child td { border-bottom: none; }

.woocommerce table.shop_table .order-total td strong,
.woocommerce table.shop_table tfoot tr:last-child td {
    color: var(--color-primary);
    font-size: 1.1rem;
    font-family: var(--font-heading);
    font-weight: 800;
}

/* Payment box */
#payment {
    background: var(--color-surface) !important;
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--color-border) !important;
}

#payment ul.payment_methods {
    border-bottom: 1px solid var(--color-border) !important;
    padding: 1rem !important;
}

#payment ul.payment_methods li label {
    color: var(--color-text) !important;
    font-size: .9rem;
}

#payment div.payment_box {
    background: rgba(0,229,255,.05) !important;
    color: var(--color-text) !important;
    font-size: .875rem;
    border-radius: 0 0 8px 8px;
}

#payment div.payment_box::before {
    border-bottom-color: rgba(0,229,255,.05) !important;
}

/* ── 5. Buttons ─────────────────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.wc-block-components-checkout-place-order-button {
    background: var(--color-primary) !important;
    color: #000 !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: .85rem 1.75rem !important;
    cursor: pointer !important;
    transition: transform .25s, box-shadow .25s !important;
    box-shadow: 0 0 20px rgba(0,229,255,.25) !important;
    letter-spacing: .02em;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #place_order:hover {
    background: var(--color-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 35px rgba(0,229,255,.4) !important;
    color: #000 !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--color-secondary) !important;
    box-shadow: 0 0 20px rgba(255,107,107,.25) !important;
    color: #fff !important;
}

/* Remove / secondary actions */
.woocommerce a.button.wc-backward,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
}

/* ── 6. Cart page ───────────────────────────────────────────────────────── */
.woocommerce-cart table.cart {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 10px);
}

.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
    vertical-align: middle;
    background: transparent;
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

.woocommerce-cart table.cart thead th {
    background: rgba(255,255,255,.04);
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-cart table.cart td.product-name a {
    color: var(--color-heading);
    font-weight: 600;
}

.woocommerce-cart table.cart td.product-name a:hover {
    color: var(--color-primary);
}

.woocommerce-cart .cart-collaterals {
    margin-top: 2rem;
}

.woocommerce-cart .cart_totals,
.woocommerce-cart .cross-sells {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cross-sells h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

/* Quantity input */
.woocommerce .quantity .qty {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    padding: .5rem .75rem;
    width: 70px;
    text-align: center;
    font-size: .9rem;
}

/* Remove item */
.woocommerce-cart table.cart a.remove {
    color: #f87171 !important;
    font-size: 1.2rem;
    line-height: 1;
}
.woocommerce-cart table.cart a.remove:hover {
    background: rgba(248,113,113,.1);
    color: #f87171 !important;
}

/* Coupon */
.woocommerce-cart .coupon input.input-text { width: auto !important; }

/* ── 7. My Account ──────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 2rem;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--color-border);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: .85rem 1.25rem;
    color: var(--color-text);
    font-size: .9rem;
    font-weight: 500;
    transition: background .2s, color .2s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: rgba(0,229,255,.08);
    color: var(--color-primary);
}

.woocommerce-account .woocommerce-MyAccount-content {
    min-height: 300px;
}

/* Order history table */
.woocommerce-orders-table th {
    background: var(--color-surface);
    font-family: var(--font-heading);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark {
    background: transparent;
    font-weight: 700;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark.completed { color: #4ade80; }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark.processing { color: var(--color-primary); }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark.cancelled,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark.refunded  { color: #f87171; }

/* ── 8. Order received / Thank you ─────────────────────────────────────── */
.woocommerce-order {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 2rem;
}

.woocommerce-order-overview {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    list-style: none;
}

.woocommerce-order-overview li {
    font-size: .875rem;
}

.woocommerce-order-overview li strong {
    display: block;
    color: var(--color-heading);
    font-size: 1rem;
    margin-top: .2rem;
}

/* ── 9. Breadcrumb ──────────────────────────────────────────────────────── */
.woocommerce .woocommerce-breadcrumb {
    font-size: .8rem;
    color: var(--color-text);
    opacity: .6;
    margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--color-text);
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb-sep { opacity: .4; margin-inline: .25rem; }

/* ── 10. Lost password / auth forms ─────────────────────────────────────── */
.woocommerce-ResetPassword,
.woocommerce-form-login,
.woocommerce-form-register {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 2rem;
    max-width: 480px;
}

/* ── 11. Responsive ──────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    .woocommerce-account .woocommerce {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 2rem;
        align-items: start;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 0;
        position: sticky;
        top: 80px;
    }
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
        border-right: 1px solid var(--color-border);
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: .65rem 1rem;
        font-size: .8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce Block Cart & Checkout overrides
   The block-based cart/checkout (WC 8+) ships its own light-theme styles.
   These rules force our dark theme onto every block component.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Root background fix ────────────────────────────────────────────────── */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* ── Kill the default light skeleton / placeholder ──────────────────────── */
.wc-block-cart__skeleton,
.wc-block-checkout__skeleton,
.wc-block-components-loading-mask,
.wc-block-components-loading-mask__children {
    background: var(--color-surface) !important;
}

/* Skeleton shimmer bars */
.wc-block-cart__skeleton *,
.wc-block-checkout__skeleton * {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

/* ── Two-column layout ──────────────────────────────────────────────────── */
.wc-block-cart__main,
.wc-block-checkout__main {
    background: transparent !important;
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius, 10px) !important;
}

/* ── Cart line items ────────────────────────────────────────────────────── */
.wc-block-cart-items,
.wc-block-cart-items__header,
.wc-block-cart-item__wrap {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.wc-block-cart-items__header span,
.wc-block-cart-item__product-name,
.wc-block-cart-item__product-name a,
.wc-block-cart-item__prices,
.wc-block-cart-item__individual-prices {
    color: var(--color-text) !important;
}

.wc-block-cart-item__product-name a:hover {
    color: var(--color-primary) !important;
}

/* ── Order summary / totals ─────────────────────────────────────────────── */
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.wc-block-components-order-summary,
.wc-block-components-order-summary__content,
.wc-block-components-panel__content {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    color: var(--color-text) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--color-heading) !important;
    font-size: 1.1rem !important;
}

/* ── Form fields ────────────────────────────────────────────────────────── */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-textarea textarea {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    color: var(--color-text) !important;
    padding: .75rem 1rem !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255,.12) !important;
    outline: none !important;
}

.wc-block-components-form-step__title,
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label {
    color: var(--color-text) !important;
}

/* ── Notices ────────────────────────────────────────────────────────────── */
.wc-block-components-notice-banner,
.wc-block-components-validation-error p {
    background: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text) !important;
}

.wc-block-components-validation-error p {
    border-color: #f87171 !important;
    color: #f87171 !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button {
    background: var(--color-primary) !important;
    color: #000 !important;
    border: none !important;
    border-radius: var(--border-radius, 10px) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 20px rgba(0,229,255,.25) !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
    box-shadow: 0 0 35px rgba(0,229,255,.4) !important;
    transform: translateY(-2px) !important;
}

/* ── Payment methods ────────────────────────────────────────────────────── */
.wc-block-components-payment-methods,
.wc-block-components-payment-method-label,
.wc-block-components-radio-control__option {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* ── Quantity stepper ───────────────────────────────────────────────────── */
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__input {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.wc-block-components-quantity-selector__button {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.wc-block-components-quantity-selector__button:hover {
    background: rgba(0,229,255,.1) !important;
    color: var(--color-primary) !important;
}

/* ── Remove item button ─────────────────────────────────────────────────── */
.wc-block-cart-item__remove-link {
    color: #f87171 !important;
}

/* ── Express payment area ───────────────────────────────────────────────── */
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
    border-color: var(--color-border) !important;
}

.wc-block-components-express-payment-continue-rule span {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* ── Block cart/checkout page-level spacing ─────────────────────────────── */
/* Since page.php renders no wrapper on these pages, we add top padding     */
/* directly on the WC block root elements.                                  */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
    padding-top: calc(var(--nav-height, 80px) + 2rem) !important;
    padding-bottom: 4rem !important;
    padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
}