/* ══════════════════════════════════════════════════════════════════
   Waffle Tone — woocommerce.css
   WooCommerce Integration Styles
   Matches the dark acoustic dessert salon theme.
══════════════════════════════════════════════════════════════════ */

#wt-woocommerce-page {
    padding: var(--margin) var(--gutter);
    max-width: 1200px;
    margin: 0 auto;
    color: var(--text-ivory);
    font-family: var(--font-body-ar);
}

/* ─── GENERAL WC COMPONENTS ─────────────────────────────────────── */
.woocommerce form .form-row label {
    color: var(--text-ivory);
    margin-bottom: var(--space-xs);
    font-weight: 500;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    background: var(--bg-container-low);
    border: 1px solid var(--outline-variant);
    color: var(--text-ivory);
    border-radius: var(--radius-input);
    padding: var(--space-sm) var(--space-md);
    transition: var(--transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--gold-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--gold-glow);
}

.woocommerce-button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
    background-color: var(--gold-primary);
    color: var(--text-on-gold);
    border-radius: var(--radius-pill);
    padding: var(--space-sm) var(--space-xl);
    font-weight: 600;
    transition: var(--transition);
    border: none;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--gold-light);
    box-shadow: var(--shadow-cta-hover);
    transform: translateY(-2px);
}

/* ─── CHECKOUT PAGE ─────────────────────────────────────────────── */
.woocommerce-checkout h3 {
    color: var(--gold-primary);
    font-family: var(--font-display-ar);
    border-bottom: 1px solid var(--outline-variant);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
}

.woocommerce-checkout #payment {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: var(--space-md);
    border: 1px solid var(--outline-variant);
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--outline-variant);
    padding-bottom: var(--space-md);
}

.woocommerce-checkout #payment div.payment_box {
    background-color: var(--bg-container-high);
    color: var(--text-ivory);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--bg-container-high);
}

/* Order Review Table */
.woocommerce table.shop_table {
    border-radius: var(--radius-sm);
    border-collapse: collapse;
    width: 100%;
    border: 1px solid var(--outline-variant);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: var(--space-sm);
    border-top: 1px solid var(--outline-variant);
    color: var(--text-ivory);
}

.woocommerce table.shop_table thead th {
    background-color: var(--bg-container-high);
    color: var(--gold-light);
    border-top: none;
}

/* Notices */
.woocommerce-notices-wrapper .woocommerce-message {
    background-color: var(--bg-container-high);
    border-top-color: var(--gold-primary);
    color: var(--text-ivory);
}

.woocommerce-notices-wrapper .woocommerce-error {
    background-color: var(--bg-container-high);
    border-top-color: var(--pink-primary);
    color: var(--text-ivory);
}

.woocommerce-notices-wrapper .woocommerce-info {
    background-color: var(--bg-container-high);
    border-top-color: var(--gold-light);
    color: var(--text-ivory);
}

/* Custom Gateway styles inside checkout */
.wc-payment-form {
    background: var(--bg-container-low) !important;
    border-color: var(--outline-variant) !important;
}

.wc-payment-form p {
    color: var(--text-ivory) !important;
}

.wc-payment-form span {
    background: var(--bg-container-high) !important;
    border-color: var(--gold-primary) !important;
    color: var(--gold-light) !important;
}