/*
 * WooCommerce CSS Overrides for Telaa Coffee
 * This file ensures native WooCommerce pages (Cart, Checkout, My Account)
 * visually match the premium dark mode React frontend.
 */

/* Global WooCommerce Container */
.woocommerce {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

/* Forms and Inputs */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 12px;
    border-radius: 4px;
}

/* Primary Buttons (Matching bg-terra) */
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    background-color: #FF6B35;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    border-radius: 2px;
    padding: 16px 32px;
    transition: all 0.3s ease;
}

.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover {
    background-color: #e55a2b;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 53, 0.4);
}

/* Tables (Cart / Order Details) */
.woocommerce table.shop_table {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.woocommerce table.shop_table th {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.woocommerce table.shop_table td {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Checkout Payment Box */
#add_payment_method #payment, 
.woocommerce-cart #payment, 
.woocommerce-checkout #payment {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

#add_payment_method #payment div.payment_box, 
.woocommerce-cart #payment div.payment_box, 
.woocommerce-checkout #payment div.payment_box {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
}