/**
 * Theme Name: Astra Child
 * Author: CloudZex
 * Author URI: https://cloudzex.com
 * Description: Astra Child Theme - High-performance, modular WooCommerce architecture by CloudZex.
 * Version: 1.3.2
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: astra-child
 * Template: astra
 */

/* ==========================================================================
   0. CASCADING COLOR & BUTTON VARIABLES (FALLBACK DEFAULTS)
   - Synchronized dynamically with Astra Global Palette & Customizer Buttons.
   ========================================================================== */
:root {
    --ast-btn-primary-bg: var(--ast-global-color-0, #8f2b8c);
    --ast-btn-primary-h-bg: var(--ast-global-color-1, #f48736);
    --ast-btn-primary-color: #ffffff;
    --ast-btn-primary-h-color: #ffffff;
    --ast-btn-radius: 4px;
    --ast-btn-secondary-bg: var(--ast-global-color-4, #ffffff);
    --ast-btn-secondary-color: var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c));
    --ast-btn-secondary-border: var(--ast-btn-secondary-color);
    --ast-btn-secondary-h-bg: var(--ast-global-color-5, #f0f5fa);
    --ast-btn-secondary-h-color: var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c));
    --ast-btn-secondary-radius: var(--ast-btn-radius, 4px);
    --ast-btn-shadow-color: rgba(0, 0, 0, 0.10);
    --ast-btn-shadow-hover: rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   1. GLOBAL ACCESSIBILITY & FOCUS STYLING
   - Clean, modern aesthetic without browser default dotted focus rings.
   ========================================================================== */
*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   2. TIER 3: GLOBAL SHARED UTILITIES & COMMON STYLES (DRY ARCHITECTURE)
   - Central source of truth for UI patterns used across multiple modules.
   - Eliminates CSS code duplication across modules.
   - Fully synchronized with Astra Global Palette variables.
   ========================================================================== */

/* Shared Loading Spinner */
.ast-child-loader,
.ast-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ast-child-spinner,
.ast-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--ast-global-color-0, #8f2b8c);
    border-radius: 50%;
    animation: astChildSpin 0.75s linear infinite;
    box-sizing: border-box;
    display: inline-block;
}

@keyframes astChildSpin {
    to { transform: rotate(360deg); }
}

/* Empty Star Rating Utility */
.star-rating .ast-rating-empty {
    width: 0 !important;
    display: inline-block;
    overflow: hidden;
}

/* Shared Card Surface Utility */
.ast-child-card {
    background: var(--ast-global-color-5, #ffffff);
    border: 1px solid var(--ast-border-color, var(--ast-global-color-7, #e2e8f0));
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Shared Discount / Sale Badge */
.ast-child-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    background-color: var(--ast-global-color-0, #8f2b8c);
    color: #ffffff;
    line-height: 1.2;
}

/* Shared Archive Loop Action Buttons (Available on Shop, Home & Related Products) */
.ast-ct-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: auto !important;
    margin-bottom: 4px !important;
    padding: 0 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    align-items: center !important;
}

/* Layout 1: Side by Side (50% - 50%) */
.ast-ct-actions.ast-ct-layout-1,
.ast-ct-actions.ast-ct-layout_1 {
    grid-template-columns: 1fr 1fr !important;
    height: 36px !important;
    min-height: 36px !important;
}

/* Layout 2: Cart Icon Button + Wide Buy Now Button ([🛒] [অর্ডার করুন]) */
.ast-ct-actions.ast-ct-layout-2,
.ast-ct-actions.ast-ct-layout_2 {
    grid-template-columns: 44px 1fr !important;
    gap: 6px !important;
    height: 36px !important;
    min-height: 36px !important;
}

.ast-ct-actions.ast-ct-layout-2 .ast-ct-btn-cart,
.ast-ct-actions.ast-ct-layout_2 .ast-ct-btn-cart {
    padding: 0 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-width: 1.75px !important;
}

.ast-ct-actions.ast-ct-layout-2 .ast-ct-btn-cart .ast-ct-btn-icon,
.ast-ct-actions.ast-ct-layout_2 .ast-ct-btn-cart .ast-ct-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.ast-ct-actions.ast-ct-layout-2 .ast-ct-btn-cart .ast-ct-btn-icon svg,
.ast-ct-actions.ast-ct-layout_2 .ast-ct-btn-cart .ast-ct-btn-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 2.4px !important;
    fill: none !important;
    display: block !important;
}

.ast-ct-actions.ast-ct-layout-2 .ast-ct-btn-order,
.ast-ct-actions.ast-ct-layout_2 .ast-ct-btn-order {
    width: 100% !important;
}

/* Layout 3: Vertical Stacked (Full Width Dual Rows) */
.ast-ct-actions.ast-ct-layout-3,
.ast-ct-actions.ast-ct-layout_3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    height: auto !important;
    min-height: unset !important;
}

.ast-ct-actions.ast-ct-layout-3 .ast-ct-btn,
.ast-ct-actions.ast-ct-layout_3 .ast-ct-btn {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
}

/* Single Button Layout (Only Buy Now OR Only Add to Cart) & Out of Stock */
.ast-ct-actions.ast-ct-single-btn,
.ast-ct-actions.ast-ct-actions-outofstock {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
}

.ast-ct-actions.ast-ct-single-btn .ast-ct-btn,
.ast-ct-actions.ast-ct-actions-outofstock .ast-ct-btn {
    width: 100% !important;
}

.ast-ct-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: normal !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: var(--ast-btn-radius, 6px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ast-ct-btn-cart {
    background: var(--ast-btn-secondary-bg, var(--ast-global-color-4, #ffffff)) !important;
    background-color: var(--ast-btn-secondary-bg, var(--ast-global-color-4, #ffffff)) !important;
    color: var(--ast-btn-secondary-color, var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c))) !important;
    border: 1.5px solid var(--ast-btn-secondary-border, var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c))) !important;
    border-radius: var(--ast-btn-secondary-radius, var(--ast-btn-radius, 6px)) !important;
}

.ast-ct-btn-cart:hover {
    background: var(--ast-btn-secondary-h-bg, var(--ast-global-color-5, #f0f5fa)) !important;
    background-color: var(--ast-btn-secondary-h-bg, var(--ast-global-color-5, #f0f5fa)) !important;
    color: var(--ast-btn-secondary-h-color, var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c))) !important;
    border-color: var(--ast-btn-secondary-border, var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c))) !important;
}

.ast-ct-btn-order {
    background: var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c)) !important;
    background-color: var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c)) !important;
    color: var(--ast-btn-primary-color, #ffffff) !important;
    border: 1.5px solid var(--ast-btn-primary-bg, var(--ast-global-color-0, #8f2b8c)) !important;
    border-radius: var(--ast-btn-radius, 6px) !important;
    box-shadow: 0 2px 6px var(--ast-btn-shadow-color, rgba(0, 0, 0, 0.10)) !important;
}

.ast-ct-btn-order:hover {
    background: var(--ast-btn-primary-h-bg, var(--ast-global-color-1, #f48736)) !important;
    background-color: var(--ast-btn-primary-h-bg, var(--ast-global-color-1, #f48736)) !important;
    border-color: var(--ast-btn-primary-h-bg, var(--ast-global-color-1, #f48736)) !important;
    color: var(--ast-btn-primary-h-color, #ffffff) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px var(--ast-btn-shadow-hover, rgba(0, 0, 0, 0.18)) !important;
}

.ast-ct-btn.ast-ct-btn-disabled,
.ast-ct-btn[aria-disabled="true"] {
    background-color: var(--ast-global-color-3, #8c9ba5) !important;
    color: var(--ast-global-color-4, #ffffff) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    user-select: none !important;
    box-shadow: none !important;
    border-radius: var(--ast-btn-radius, 6px) !important;
    height: 36px !important;
    min-height: 36px !important;
}

/* ==========================================================================
   3. WHATSAPP FLOATING CHAT BUTTON (OPTIMIZED - SINGLE ELEMENT, 0 BLOAT)
   ========================================================================== */
.wh-btn {
    position: fixed;
    bottom: 30px;
    right: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #2ecc71 url("/wp-content/uploads/2026/09/whatsapp-icon.webp") center / 60% no-repeat;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    display: block;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wh-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28);
}

.wh-btn::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: #10b418;
    border-radius: 50%;
    opacity: .35;
    animation: whPulse 2.6s ease-out infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes whPulse {
    0% { transform: scale(.75); opacity: 0; }
    50% { transform: scale(1.05); opacity: .35; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* ==========================================================================
   TIER 3: NATIVE DISCOUNT BADGE SYSTEM (Zero Bloat, High Conversion)
   ========================================================================== */

/* Base Discount Badge Container (Overrides Default WooCommerce .onsale) */
.woocommerce ul.products li.product .onsale.ast-child-discount-badge,
.woocommerce-page ul.products li.product .onsale.ast-child-discount-badge,
.ast-child-discount-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 9 !important;
    margin: 0 !important;
    background: var(--ast-global-color-0, #8f2b8c) !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    line-height: 1 !important;
    border: none !important;
}

/* 2. Shape 1: Circular */
.ast-child-discount-badge.ast-discount-shape-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 13px !important;
}

/* 3. Shared Baseline for all Horizontal Badges (Pill, Badge, Tag, Slanted, Ribbon) */
.ast-child-discount-badge:not(.ast-discount-shape-circle) {
    width: auto !important;
    min-width: unset !important;
    height: 24px !important;
    min-height: 24px !important;
    font-size: 11.5px !important;
}

/* Shape 2: Pill / Button */
.ast-child-discount-badge.ast-discount-shape-pill {
    padding: 0 9px !important;
    border-radius: 20px !important;
}

/* Shape 3: Rounded Square Badge */
.ast-child-discount-badge.ast-discount-shape-badge {
    padding: 0 8px !important;
    border-radius: 4px !important;
}

/* Shared Silhouette Drop-Shadow & Border Radius for Clipped Shapes (Tag, Slanted, Ribbon) */
.ast-child-discount-badge.ast-discount-shape-tag,
.ast-child-discount-badge.ast-discount-shape-slanted,
.ast-child-discount-badge.ast-discount-shape-ribbon {
    border-radius: 3px 0 0 3px !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16)) !important;
}

/* Shape 4: Tag (Arrow Point & Hole) */
.ast-child-discount-badge.ast-discount-shape-tag {
    padding: 0 16px 0 8px !important;
    clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%) !important;
    position: relative !important;
}

.ast-child-discount-badge.ast-discount-shape-tag::after {
    content: '' !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3.5px !important;
    height: 3.5px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: inset 0 0.5px 1px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important;
}

/* Shape 5: Slanted / Angled Cut */
.ast-child-discount-badge.ast-discount-shape-slanted {
    padding: 0 13px 0 8px !important;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 7px) 100%, 0% 100%) !important;
}

/* Shape 6: Ribbon / Flag Tail */
.ast-child-discount-badge.ast-discount-shape-ribbon {
    padding: 0 13px 0 8px !important;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 6px) 50%, 100% 100%, 0% 100%) !important;
}

/* 4. Single Product Gallery Overlay (When enabled) */
.single-product .woocommerce-product-gallery .onsale.ast-child-discount-badge,
.single-product div.product > .onsale.ast-child-discount-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    margin: 0 !important;
}

.single-product .woocommerce-product-gallery .onsale.ast-child-discount-badge.ast-badge-pos-right,
.single-product div.product > .onsale.ast-child-discount-badge.ast-badge-pos-right,
.ast-single-badge-right .single-product .woocommerce-product-gallery .onsale.ast-child-discount-badge {
    left: auto !important;
    right: 14px !important;
}

/* If badge is positioned on the right, shift zoom trigger below so they do not overlap */
.single-product .woocommerce-product-gallery:has(.ast-badge-pos-right) .woocommerce-product-gallery__trigger,
.ast-single-badge-right .single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    top: 50px !important;
}

.single-product .woocommerce-product-gallery .onsale.ast-child-discount-badge.ast-discount-shape-circle,
.single-product div.product > .onsale.ast-child-discount-badge.ast-discount-shape-circle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    font-size: 13.5px !important;
}

.single-product .woocommerce-product-gallery .onsale.ast-child-discount-badge:not(.ast-discount-shape-circle),
.single-product div.product > .onsale.ast-child-discount-badge:not(.ast-discount-shape-circle) {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 13px !important;
}

@media (max-width: 768px) {
    .single-product .woocommerce-product-gallery .onsale.ast-child-discount-badge,
    .single-product div.product > .onsale.ast-child-discount-badge {
        top: 10px !important;
        left: 10px !important;
    }
    .single-product .woocommerce-product-gallery .onsale.ast-child-discount-badge.ast-badge-pos-right,
    .single-product div.product > .onsale.ast-child-discount-badge.ast-badge-pos-right,
    .ast-single-badge-right .single-product .woocommerce-product-gallery .onsale.ast-child-discount-badge {
        left: auto !important;
        right: 10px !important;
    }
}

/* 5. Single Product Summary Price Discount Badge (Beside Price Line) */
.single-product .summary.entry-summary p.price,
.single-product .summary.entry-summary .woocommerce-variation-price .price {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.single-product .summary.entry-summary .price .ast-single-price-discount-badge,
.single-product .summary.entry-summary .ast-single-price-discount-badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Price Badge Shape: Pill / Rounded Capsule (Default Clean) */
.single-product .summary.entry-summary .ast-single-price-discount-badge.ast-discount-shape-pill {
    padding: 3px 9px !important;
    border-radius: 20px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 11.5px !important;
    background: var(--ast-global-color-0, #8f2b8c) !important;
    color: #ffffff !important;
}

/* Price Badge Shape: Badge (4px Radius) */
.single-product .summary.entry-summary .ast-single-price-discount-badge.ast-discount-shape-badge {
    padding: 3px 8px !important;
    border-radius: 4px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 11.5px !important;
    background: var(--ast-global-color-0, #8f2b8c) !important;
    color: #ffffff !important;
}

/* Price Badge Shape: Circle (Mini Circular Stamp) */
.single-product .summary.entry-summary .ast-single-price-discount-badge.ast-discount-shape-circle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    padding: 0 !important;
    background: var(--ast-global-color-0, #8f2b8c) !important;
    color: #ffffff !important;
}

/* Price Badge Shape: Outlined Pill */
.single-product .summary.entry-summary .ast-single-price-discount-badge.ast-discount-shape-outline {
    background: transparent !important;
    color: var(--ast-global-color-0, #8f2b8c) !important;
    border: 1.5px solid var(--ast-global-color-0, #8f2b8c) !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 11.5px !important;
}

/* Price Badge Shape: Soft Pastel Tint */
.single-product .summary.entry-summary .ast-single-price-discount-badge.ast-discount-shape-soft {
    background: var(--ast-global-color-4, rgba(143, 43, 140, 0.12)) !important;
    color: var(--ast-global-color-0, #8f2b8c) !important;
    border: 1px solid var(--ast-border-color, rgba(143, 43, 140, 0.2)) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 11.5px !important;
}

/* Price Badge Shapes: Slanted, Tag, Ribbon */
.single-product .summary.entry-summary .ast-single-price-discount-badge.ast-discount-shape-slanted {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 11.5px !important;
    padding: 0 11px 0 7px !important;
}

.single-product .summary.entry-summary .ast-single-price-discount-badge.ast-discount-shape-tag {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 11.5px !important;
    padding: 0 14px 0 7px !important;
}

.single-product .summary.entry-summary .ast-single-price-discount-badge.ast-discount-shape-ribbon {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 11.5px !important;
    padding: 0 12px 0 7px !important;
}

/* 6. Suppress loop added_to_cart "View cart" text link since side drawer opens automatically */
.woocommerce a.added_to_cart.wc-forward {
    display: none !important;
}

/* 7. Suppress WooCommerce default checkmark (::after) and spinner on dual action buttons */
.woocommerce a.button.ast-ct-btn.added::after,
.woocommerce a.button.ast-ct-btn-cart.added::after,
.woocommerce a.button.ast-ct-btn-order.added::after,
.ast-ct-actions .ast-ct-btn.added::after,
.ast-ct-actions .ast-ct-btn-cart.added::after,
.ast-ct-actions .ast-ct-btn-order.added::after,
.ast-ct-actions .ast-ct-btn-icon-only.added::after,
.single_add_to_cart_button.added::after,
.woocommerce a.button.ast-ct-btn.loading::after,
.woocommerce a.button.ast-ct-btn-cart.loading::after,
.woocommerce a.button.ast-ct-btn-order.loading::after,
.ast-ct-actions .ast-ct-btn.loading::after,
.ast-ct-actions .ast-ct-btn-cart.loading::after,
.ast-ct-actions .ast-ct-btn-order.loading::after,
.ast-ct-actions .ast-ct-btn-icon-only.loading::after,
.single_add_to_cart_button.loading::after {
    display: none !important;
    content: none !important;
}

.ast-ct-actions .ast-ct-btn.loading,
.ast-ct-actions .ast-ct-btn-cart.loading,
.single_add_to_cart_button.loading {
    opacity: 0.65 !important;
    cursor: wait !important;
}