/*
 * HOUARA-SHOP Child Theme
 * Inherits everything from Astra parent.
 * Put site-wide overrides here.
 */

/* Mobile sticky CTA bar for single product pages is injected via
   wp_footer hook in functions.php (houarashop_sticky_product_bar).
   All its CSS lives there — do not duplicate here. */


/* ── REMOVE BLUE TAP HIGHLIGHT on mobile (applies to every page) ── */
html {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
*, *::before, *::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
a, button, input, select, textarea, label, [role="button"], [tabindex] {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    outline: none !important;
}

/* ── LOGO — global sizing, applies to ALL pages ── */
.logo-img-link {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* Header logo — 44px tall, auto width (200px cap matches home page size) */
.site-logo-img {
    height: 44px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Mobile nav logo — slightly smaller */
.site-logo-img--mobile {
    height: 36px !important;
    width: auto !important;
    max-width: 130px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Footer logo — white inverted, same size as header */
.site-logo-img--footer {
    height: 38px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.85 !important;
    margin: 0 auto !important;
}

/* Checkout header — slightly smaller */
.houara-header .site-logo-img {
    height: 40px !important;
}

@media (max-width: 768px) {
    .site-logo-img { height: 36px !important; }
    .site-logo-img--mobile { height: 30px !important; }
    .site-logo-img--footer { height: 32px !important; }
}

/* ══════════════════════════════════════════════════════════════
   HIDE ASTRA THEME'S SITE-TITLE TEXT on custom template pages
   Astra renders "هوارة شوب" as text — we only want the logo image.
   Comprehensive selector coverage for Astra 3.x / 4.x + mobile.
   ══════════════════════════════════════════════════════════════ */
.ast-site-identity .site-title,
.ast-site-identity .site-description,
.site-branding .site-title,
.site-branding .site-description,
span.site-title,
h1.site-title,
h2.site-title,
p.site-title,
.site-title a,
.site-title,
.site-description,
.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-description,
.ast-header-break-point .site-title,
.ast-header-break-point .site-description,
.ast-mobile-header-wrap .site-title,
.ast-mobile-header-wrap .site-description,
.ast-logo-title-inline .site-title,
.ast-logo-title-inline .site-description,
#masthead .site-title,
#masthead .site-description,
header .site-title,
header .site-description { display: none !important; visibility: hidden !important; }

/* ══════════════════════════════════════════════════════════════
   WOOCOMMERCE ORDER DETAILS & SUMMARY STYLING
   Fixing bad italic fonts, and improving overall presentation
   ══════════════════════════════════════════════════════════════ */
.woocommerce-order-details,
.woocommerce-customer-details {
    font-style: normal !important;
}

.woocommerce-order-details address,
.woocommerce-customer-details address {
    font-style: normal !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    font-style: normal !important;
    font-family: inherit !important;
}

/* Ensure no italic text in product item meta (like Free shipping, variations) */
.woocommerce-table--order-details .wc-item-meta,
.woocommerce-table--order-details .wc-item-meta li,
.woocommerce-table--order-details .wc-item-meta p {
    font-style: normal !important;
    font-family: inherit !important;
}

/* Fix default italic text in shipping method string */
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
    font-style: normal !important;
}

ul.order_details li strong,
ul.order_details li,
.woocommerce-thankyou-order-details {
    font-style: normal !important;
    font-family: inherit !important;
}

/* Also reset mark tag which is often italic in some themes */
mark.order-number,
mark.order-date,
mark.order-status,
.woocommerce-order-overview mark {
    font-style: normal !important;
    font-family: inherit !important;
    font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════
   CTA URGENCY COLOR SWAP — Apr 21, 2026
   Primary CTAs use Temu-style #FA7500 for buy-now psychology.
   Accents / nav / headings keep warm #FF6B00.
   WhatsApp buttons stay #25D366 (never touch).
   ══════════════════════════════════════════════════════════════ */

/* --- Primary conversion buttons (Add to Cart / Buy Now / Checkout / Confirm Order) --- */
.single_add_to_cart_button,
button.single_add_to_cart_button,
.buy-now-btn,
.buy-now-button,
#place_order,
button#place_order,
.checkout-button,
a.checkout-button,
.wc-proceed-to-checkout .button,
.woocommerce-button--checkout,
.button.alt,
button.button.alt,
.product-buy-now,
a.product-buy-now,
.houara-cta,
.ajax_add_to_cart,
.add_to_cart_button {
    background-color: #FA7500 !important;
    background: #FA7500 !important;
    border-color: #FA7500 !important;
    color: #fff !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
}

.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
.buy-now-btn:hover,
.buy-now-button:hover,
#place_order:hover,
button#place_order:hover,
.checkout-button:hover,
.wc-proceed-to-checkout .button:hover,
.woocommerce-button--checkout:hover,
.button.alt:hover,
button.button.alt:hover,
.product-buy-now:hover,
.houara-cta:hover {
    background-color: #e06600 !important;
    background: #e06600 !important;
    transform: translateY(-1px) !important;
}

/* Shop card "Add to Cart" → dark navy on hover/active/focus (mobile tap + desktop hover) */
/* High-specificity selectors to beat .button.alt:hover orange rule above */
.woocommerce ul.products li.product a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button.add_to_cart_button:active,
.woocommerce ul.products li.product a.button.add_to_cart_button:focus,
.woocommerce ul.products li.product a.button.ajax_add_to_cart:hover,
.woocommerce ul.products li.product a.button.ajax_add_to_cart:active,
.woocommerce ul.products li.product a.button.ajax_add_to_cart:focus,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:active,
.woocommerce ul.products li.product .button.add_to_cart_button:focus,
.ajax_add_to_cart:hover,
.ajax_add_to_cart:active,
.ajax_add_to_cart:focus,
.add_to_cart_button:hover,
.add_to_cart_button:active,
.add_to_cart_button:focus {
    background-color: #2a2a45 !important;
    background: #2a2a45 !important;
    transform: translateY(-1px) !important;
}

/* --- Sale / urgency badges (low-stock, discount) use #FA7500 --- */
.houara-stock-badge.low-stock,
.houara-sale-badge,
.onsale,
span.onsale {
    background-color: #FA7500 !important;
    color: #fff !important;
}

/* --- Explicitly PROTECT WhatsApp green — overrides nothing, just a safety net --- */
.whatsapp-btn,
.wa-btn,
.houara-whatsapp {
    background-color: #25D366 !important;
    background: #25D366 !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   HEADER — ACCOUNT LINK (تسجيل الدخول / حسابي)
   Centered between تواصل معنا and basket counter on desktop.
   Hidden in desktop nav on mobile (falls into mobile drawer).
   ══════════════════════════════════════════════════════════════ */

/* Account pill — very high specificity so nothing (Astra/Woo) can override */
a.header-account-link,
.header-account-wrap a.header-account-link,
.hs-site-header a.header-account-link,
.site-header a.header-account-link {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    background-color: transparent !important;
    border: 1.5px solid #FA7500 !important;
    padding: 6px 14px !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    height: auto !important;
    max-width: none !important;
    transition: all 0.2s ease;
}

a.header-account-link:hover,
a.header-account-link:focus,
.header-account-wrap a.header-account-link:hover,
.header-account-wrap a.header-account-link:focus {
    background-color: #FA7500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Force the icon small + beside the text, override any parent-theme img sizing */
a.header-account-link img.header-account-icon,
.header-account-wrap a.header-account-link img.header-account-icon,
.hs-site-header a.header-account-link img.header-account-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    filter: brightness(0) invert(1) !important; /* force icon to render pure white */
}

a.header-account-link .header-account-label,
.header-account-wrap a.header-account-link .header-account-label {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Push the account link to the END of the flex row (left in RTL) so it
   groups with the cart — the nav is absolutely centered, so the account
   link must NOT absorb free space on both sides or it ends up overlapping
   the nav in the visual center.
   Hardened Apr 24 2026: !important + explicit margin-left/margin-right:0
   to defeat any cached or legacy rule that once did `margin: 0 auto`. */
/* ── Unified Header Absolute Layout ── 
   Nav is at 50% screen center. Cart is at the far left edge (40px).
   Account Link is between them (160px from left).
   Logo stays in normal flow (pinned to the right in RTL). */
.site-header, .hs-site-header, .houara-header-inner {
    display: flex !important;
    align-items: center !important;
    direction: rtl !important;
    width: 100% !important;
    min-height: 70px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Nav: 50% Center */
.header-nav, .hs-header-nav, .houara-nav {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    display: flex !important;
    gap: 22px !important;
    z-index: 5 !important;
}

/* Cart: Far Left (40px) */
.header-cart, .hs-header-cart, .houara-cart-icon {
    position: absolute !important;
    left: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
}

/* Account/Login: Between Nav and Cart (160px from left) */
.header-account-wrap {
    position: absolute !important;
    left: 170px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
}

/* Logo: Flows naturally to the right in RTL header */
.header-left, .hs-header-left, .logo-img-link, .hs-logo, .houara-header-inner > div:first-child {
    margin-inline-start: 0 !important;
    display: flex !important;
}


/* Responsive Overrides */
@media (max-width: 768px) {
    .site-header, .hs-site-header, .houara-header-inner {
        display: flex !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
    }
    .header-nav, .hs-header-nav, .houara-nav, .header-account-wrap {
        display: none !important;
    }
}

/* On mobile, hide the desktop-header account link — it appears in the mobile drawer instead */
@media (max-width: 768px) {
    .header-account-wrap,
    html[dir="rtl"] .header-account-wrap,
    .site-header .header-account-wrap,
    .hs-site-header .header-account-wrap {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   THANKYOU / ORDER-RECEIVED PAGE
   Styled order summary + "تم تأكيد الطلب" + "المتجر" button
   ══════════════════════════════════════════════════════════════ */

.woocommerce-order {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    font-family: 'Cairo', sans-serif;
}

/* Big green confirmation heading (Amazon-style) */
.houara-order-confirmed {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-right: 6px solid #25D366;
    padding: 24px 28px;
    border-radius: 12px;
    margin-bottom: 24px;
    text-align: center;
}

.houara-order-confirmed h2 {
    color: #1b5e20;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.houara-order-confirmed p {
    color: #2e7d32;
    font-size: 16px;
    margin: 0;
}

/* Order overview boxes (order #, date, total, payment) */
.woocommerce-order-overview {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    background: #f8f9fa;
    padding: 20px !important;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.woocommerce-order-overview li {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    font-size: 13px;
    color: #6c757d;
    text-transform: none;
    font-weight: 600;
}

.woocommerce-order-overview li strong,
.woocommerce-order-overview li mark {
    color: #1A1A2E;
    font-size: 16px;
    font-weight: 800;
    background: transparent !important;
    margin-top: 4px;
}

/* Order details section header */
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
section.woocommerce-order-details > h2,
section.woocommerce-customer-details > h2 {
    color: #1A1A2E;
    font-size: 22px;
    font-weight: 800;
    margin: 24px 0 12px;
    padding-bottom: 10px;
    border-bottom: 3px solid #FA7500;
}

/* Order details table — clean card style */
.woocommerce-table--order-details,
table.shop_table.order_details {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.woocommerce-table--order-details thead th {
    background: #1A1A2E !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
    font-size: 14px;
    text-align: right !important;
}

.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f3f5 !important;
    font-size: 15px !important;
}

.woocommerce-table--order-details tbody tr:last-child td {
    border-bottom: 2px solid #e9ecef !important;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    background: #fff8f0 !important;
    color: #1A1A2E !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    border-bottom: none !important;
}

.woocommerce-table--order-details .product-name a {
    color: #1A1A2E !important;
    font-weight: 700;
    text-decoration: none;
}

.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details .woocommerce-Price-amount {
    color: #FA7500;
    font-weight: 700;
}

/* Customer address boxes */
.woocommerce-customer-details address {
    background: #f8f9fa;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    font-style: normal !important;
    line-height: 1.8;
    font-size: 15px;
    color: #495057;
}

/* "المتجر" Continue-Shopping button after order summary
   — body+selector specificity to beat Astra/Woo theme styles */
body a.houara-continue-shopping,
body .woocommerce a.houara-continue-shopping,
body .woocommerce-order a.houara-continue-shopping,
.woocommerce-page a.houara-continue-shopping {
    display: inline-block !important;
    width: auto !important;
    min-width: 240px !important;
    margin: 36px auto 28px auto !important;
    padding: 18px 56px !important;
    background: #FA7500 !important;
    background-color: #FA7500 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 50px !important;
    line-height: 1.2 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(250, 117, 0, 0.35) !important;
    cursor: pointer !important;
    text-shadow: none !important;
}

body a.houara-continue-shopping:hover,
body a.houara-continue-shopping:focus,
body .woocommerce a.houara-continue-shopping:hover,
body .woocommerce-order a.houara-continue-shopping:hover {
    background: #e06600 !important;
    background-color: #e06600 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(250, 117, 0, 0.45) !important;
    text-decoration: none !important;
}

/* Center the button — wrap target in a flex container via the parent <p> Woo emits */
body .woocommerce-order .houara-continue-shopping-wrap,
body .woocommerce .houara-continue-shopping-wrap {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide default "Order again" button if present — we have our own */
.woocommerce-order .order-again {
    display: none !important;
}

@media (max-width: 600px) {
    .houara-order-confirmed h2 { font-size: 22px; }
    .woocommerce-order { padding: 12px; }
    .woocommerce-table--order-details thead th,
    .woocommerce-table--order-details tbody td,
    .woocommerce-table--order-details tfoot td,
    .woocommerce-table--order-details tfoot th {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }
    .houara-continue-shopping {
        padding: 14px 32px;
        font-size: 15px;
    }
}

/* Checkout sticky order button on mobile */
@media (max-width: 768px) {
    .woocommerce-checkout #place_order {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 99999 !important;
        padding: 20px !important;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.15) !important;
        font-size: 1.15rem !important;
    }
    
    /* Add padding to bottom of checkout page so nothing is hidden behind the fixed button */
    .woocommerce-checkout {
        padding-bottom: 90px !important;
    }
    
    /* Adjust WooCommerce payment wrapper if needed */
    #payment .place-order {
        padding: 0 !important;
    }
}

/* Hide the subtotal row under the quantity in the checkout table */
.woocommerce-checkout-review-order-table .cart-subtotal {
    display: none !important;
}

/* ── Out-of-stock button: nuclear override (child theme = highest priority) ── */
body.woocommerce-page ul.products li.product.houara-out-of-stock a.button,
body ul.products li.product.houara-out-of-stock a.button,
.woocommerce ul.products li.product.houara-out-of-stock a.button,
.woocommerce ul.products li.product.houara-out-of-stock a.button:hover {
    background: #e8e8e8 !important;
    background-color: #e8e8e8 !important;
    color: #aaa !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    width: calc(100% - 32px) !important;
    margin: auto 16px 16px !important;
    padding: 12px 16px !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* ── Shop hero: compact ── */
.shop-hero { margin-bottom: 0 !important; padding-bottom: 14px !important; }
.hs-filter-pills { margin-top: 0 !important; padding-top: 10px !important; }