/*
 * AreaSpy — WooCommerce-specific CSS overrides
 * Loaded only when WooCommerce is active (see functions.php)
 */

/* ============================================================
   GLOBAL WOO OVERRIDES
   ============================================================ */
.woocommerce-page .entry-content,
.woocommerce .entry-content { padding: 0; }

/* Remove GeneratePress default padding on woo pages */
.is-shop-page .content-area,
.is-product-page .content-area,
.is-cart-page .content-area,
.is-checkout-page .content-area {
    padding: 0;
    max-width: 100%;
}

/* ============================================================
   ADD TO CART BUTTON STATES
   ============================================================ */
.woocommerce a.button.loading,
.woocommerce button.button.loading {
    opacity: 0.65;
    cursor: wait;
    position: relative;
    padding-right: 40px !important;
}

.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

.woocommerce a.button.added {
    background: var(--color-success) !important;
}

/* ============================================================
   VARIATION SWATCHES (if plugin installed)
   ============================================================ */
.woocommerce table.variations {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.woocommerce table.variations td,
.woocommerce table.variations th {
    padding: 6px 0 !important;
    border: none !important;
    vertical-align: middle;
}

.woocommerce table.variations td.label label {
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    font-size: .875rem !important;
}

.woocommerce table.variations select {
    border: 1px solid var(--color-light-gray) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font-size: .875rem !important;
    color: var(--color-text) !important;
    background: var(--color-white) !important;
    width: 100% !important;
}

/* Reset button */
.woocommerce .reset_variations {
    font-size: .8rem !important;
    color: var(--color-text-light) !important;
    margin-top: 4px !important;
    display: inline-block !important;
}

/* ============================================================
   PRODUCT IMAGES (single)
   ============================================================ */
.woocommerce div.product div.images img {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-light-gray) !important;
}

.woocommerce div.product div.images .flex-viewport {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

/* ============================================================
   CHECKOUT SECTION HIGHLIGHTS
   ============================================================ */
#customer_details h3,
#order_review_heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--color-accent) !important;
    margin-bottom: 16px !important;
}

/* ============================================================
   PAYMENT METHOD RADIO BUTTONS
   ============================================================ */
.woocommerce #payment ul.payment_methods li label {
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.woocommerce #payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--color-accent);
}

/* ============================================================
   PESAPAL SPECIFIC STYLES
   ============================================================ */
.woocommerce #payment .payment_method_pesapal label img {
    max-height: 28px;
    vertical-align: middle;
    margin-left: 8px;
}

/* ============================================================
   ORDER TABLE (thank you & account)
   ============================================================ */
.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--color-accent) !important;
}

/* ============================================================
   RESPONSIVE TABLE FIXES
   ============================================================ */
@media (max-width: 640px) {
    .woocommerce-checkout .col2-set { display: block !important; }
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; }
}