/*
 * File: style.css
 * Theme Name:        ASEEL_CLINIC_22_4
 * Theme URI:         https://example.com/beauty-center
 * Author:            Abanoubmaurice
 * Author URI:        https://example.com
 * Description:       Production-ready WooCommerce theme converted from static HTML/CSS/JS.
 *                    Supports bilingual AR/HE, dark mode, animated product cards,
 *                    hero slider, before/after comparison, WC cart fragments & AJAX.
 * Version:           1.0.0
 * Requires at least: 6.4
 * Tested up to:      6.7
 * Requires PHP:      8.1
 * WC requires at least: 8.0
 * WC tested up to:      9.x
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       custom-woo-theme
 * Tags:              woocommerce, rtl-language, e-commerce, custom-logo, custom-menu,
 *                    dark-mode, full-width-template, translation-ready
 */

/*
 * NOTE: All design CSS lives in assets/css/theme.css (enqueued via functions.php).
 * This file intentionally contains only the WP theme header and minimal WooCommerce
 * normalisation overrides that must load before WC's own stylesheet.
 */

/* ==========================================================================
   WooCommerce UI Normalisation — map WC classes to our design system
   ========================================================================== */

/* Inherit our CSS variables into WC's default wrappers */
.woocommerce,
.woocommerce-page {
    font-family: var(--font-body-ar, 'Tajawal', 'Arial', sans-serif);
    color: var(--text-primary, #1A1A1A);
}

/* Product loop — remove WC float layout; we use CSS Grid */
.woocommerce ul.products {
    display: contents !important; /* children become direct grid participants */
}

/* Buttons — map WC's .button to our .btn styles */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-block;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.85rem 2rem;
    border-radius: 2px;
    transition: all 0.2s;
    cursor: pointer;
    border: 1.5px solid var(--text-primary, #1A1A1A);
    color: var(--text-primary, #1A1A1A);
    background: transparent;
    font-family: inherit;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--text-primary, #1A1A1A);
    color: var(--bg-page, #fff);
    transform: translateY(-2px);
}

/* Sale badge — use our product-card__badge style */
.woocommerce span.onsale {
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 3;
    background: var(--color-badge-bg, #111);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: 0.05em;
    min-height: auto;
    min-width: auto;
    line-height: 1.6;
    margin: 0;
}

/* Star ratings — use our gold colour */
.woocommerce .star-rating span::before {
    color: var(--color-stars, #F5A623);
}

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid var(--border-color, #E5E0D8);
    border-radius: 3px;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-primary, #1A1A1A);
    background: var(--bg-page, #fff);
    transition: border-color 0.2s;
    width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--color-brown, #7A5C44);
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 92, 68, 0.12);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top: none;
    border-inline-start: 4px solid var(--color-brown, #7A5C44);
    border-radius: 0 4px 4px 0;
    background: var(--bg-section, #F7F3EF);
    color: var(--text-primary, #1A1A1A);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
}
.woocommerce-error {
    border-inline-start-color: #E8636B;
}

/* Dark-mode compatibility */
[data-theme="dark"] .woocommerce a.button,
[data-theme="dark"] .woocommerce button.button {
    border-color: var(--text-primary);
    color: var(--text-primary);
}