/* ══════════════════════════════════════════════
   WC Popup Order — popup.css  v1.3
   All popup rules use #wcpo-overlay prefix for
   maximum specificity against theme conflicts.
══════════════════════════════════════════════ */

/* ── Custom properties (overridden by inline <style>) ── */
:root {
    --wcpo-primary:       #E8721A;
    --wcpo-secondary:     #e91e8c;
    --wcpo-overlay:       rgba(0,0,0,0.6);
    --wcpo-overlay-blur:  4px;
    --wcpo-radius:        20px;
    --wcpo-btn-r:         12px;
    --wcpo-width:         680px;
    --wcpo-fs:            15px;
    --wcpo-fs-m:          13px;
}

/* ══ OVERLAY — default HIDDEN ══════════════════
   Three layers of hiding:
   1. This CSS rule
   2. HTML inline style attribute
   3. JS on DOMReady
   ─────────────────────────────────────────── */
#wcpo-overlay {
    display:        none !important;
    visibility:     hidden !important;
    opacity:        0 !important;
    pointer-events: none !important;
}

/* ══ OVERLAY — OPEN state (JS adds .wcpo-open) ══ */
#wcpo-overlay.wcpo-open {
    display:        flex !important;
    visibility:     visible !important;
    opacity:        1 !important;
    pointer-events: auto !important;

    position:       fixed !important;
    inset:          0 !important;
    z-index:        999990 !important;
    align-items:    center !important;
    justify-content:center !important;
    padding:        16px !important;
    box-sizing:     border-box !important;
    background:     var(--wcpo-overlay) !important;
    backdrop-filter:        blur(var(--wcpo-overlay-blur)) !important;
    -webkit-backdrop-filter:blur(var(--wcpo-overlay-blur)) !important;
    animation: wcpoFadeIn .2s ease !important;
}
@keyframes wcpoFadeIn { from{opacity:0} to{opacity:1} }

/* ══ MODAL BOX ══════════════════════════════ */
#wcpo-overlay .wcpo-modal {
    background:    #fff !important;
    border-radius: var(--wcpo-radius) !important;
    width:         100% !important;
    max-width:     var(--wcpo-width) !important;
    max-height:    90vh !important;
    overflow-y:    auto !important;
    position:      relative !important;
    padding:       28px 28px 24px !important;
    box-sizing:    border-box !important;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size:     var(--wcpo-fs) !important;
    animation:     wcpoSlideUp .25s cubic-bezier(.34,1.4,.64,1) !important;
    box-shadow:    0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1) !important;
}
@keyframes wcpoSlideUp {
    from { transform:translateY(22px) scale(.97); opacity:0 }
    to   { transform:translateY(0)    scale(1);   opacity:1 }
}

/* ══ CLOSE BUTTON ════════════════════════════
   Force-override everything a theme might apply.
══════════════════════════════════════════════ */
#wcpo-overlay button#wcpo-close {
    /* size & shape */
    width:          34px !important;
    height:         34px !important;
    min-width:      34px !important;
    min-height:     34px !important;
    max-width:      34px !important;
    max-height:     34px !important;
    border-radius:  50% !important;

    /* position */
    position:       absolute !important;
    top:            12px !important;
    right:          12px !important;

    /* colours */
    background:       #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color:            #6b7280 !important;
    border:           1.5px solid #e5e7eb !important;

    /* layout */
    display:        flex !important;
    align-items:    center !important;
    justify-content:center !important;
    padding:        0 !important;
    margin:         0 !important;
    line-height:    1 !important;
    cursor:         pointer !important;
    z-index:        10 !important;
    flex-shrink:    0 !important;

    /* reset */
    box-shadow:     none !important;
    text-shadow:    none !important;
    outline:        none !important;
    text-decoration:none !important;
    font-size:      0 !important;       /* hides any stray text */
    appearance:     none !important;
    -webkit-appearance: none !important;
    transition:     background .15s, color .15s !important;
}
#wcpo-overlay button#wcpo-close:hover {
    background:       #e5e7eb !important;
    background-color: #e5e7eb !important;
    color:            #111827 !important;
    border-color:     #d1d5db !important;
}
#wcpo-overlay button#wcpo-close svg {
    display:    block !important;
    width:      16px !important;
    height:     16px !important;
    min-width:  16px !important;
    min-height: 16px !important;
    flex-shrink:0 !important;
    pointer-events: none !important;
    fill:       none !important;
}

/* ══ LOADER ══════════════════════════════════ */
#wcpo-overlay .wcpo-loader {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    padding:         56px 0 !important;
}
#wcpo-overlay .wcpo-loader span {
    display:       block !important;
    width:         10px !important;
    height:        10px !important;
    border-radius: 50% !important;
    background:    var(--wcpo-primary) !important;
    animation:     wcpoBounce .6s ease infinite alternate !important;
}
#wcpo-overlay .wcpo-loader span:nth-child(2){animation-delay:.15s!important;opacity:.7!important}
#wcpo-overlay .wcpo-loader span:nth-child(3){animation-delay:.3s!important;opacity:.35!important}
@keyframes wcpoBounce{ from{transform:scale(1)} to{transform:scale(.45)} }

/* ══ TOP ROW — always side-by-side ══════════ */
#wcpo-overlay .wcpo-top-row {
    display:       flex !important;
    flex-direction:row !important;
    gap:           18px !important;
    align-items:   flex-start !important;
    margin-bottom: 20px !important;
}

/* Product image */
#wcpo-overlay .wcpo-product-image {
    width:     130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    height:    130px !important;
    border-radius: 12px !important;
    overflow:  hidden !important;
    background:#f3f4f6 !important;
    flex-shrink:0 !important;
}
#wcpo-overlay .wcpo-product-image img {
    width:       100% !important;
    height:      100% !important;
    object-fit:  cover !important;
    display:     block !important;
}

/* Product info text */
#wcpo-overlay .wcpo-product-info { flex:1!important; min-width:0!important; }

#wcpo-overlay .wcpo-product-title {
    font-size:   16px !important;
    font-weight: 800 !important;
    color:       #111827 !important;
    line-height: 1.35 !important;
    margin:      0 0 8px !important;
    padding:     0 !important;
}
#wcpo-overlay .wcpo-product-price {
    display:     flex !important;
    align-items: baseline !important;
    gap:         6px !important;
    flex-wrap:   wrap !important;
    margin-bottom:8px !important;
}
#wcpo-overlay #wcpo-price,
#wcpo-overlay .wcpo-price-html {
    font-size:   21px !important;
    font-weight: 800 !important;
    color:       var(--wcpo-primary) !important;
    display:     block !important;
}
#wcpo-overlay #wcpo-price ins,
#wcpo-overlay .wcpo-price-html ins {
    text-decoration:none !important;
    color: var(--wcpo-primary) !important;
}
#wcpo-overlay #wcpo-price del,
#wcpo-overlay .wcpo-price-html del {
    color:       #c9c9c9 !important;
    font-size:   14px !important;
    font-weight: 400 !important;
    margin-left: 4px !important;
}
#wcpo-overlay #wcpo-price .amount { color:inherit!important; }

/* Stock badge */
#wcpo-overlay .wcpo-stock-badge {
    display:      inline-flex !important;
    align-items:  center !important;
    gap:          5px !important;
    font-size:    12px !important;
    font-weight:  600 !important;
    padding:      4px 10px !important;
    border-radius:50px !important;
    margin-top:   4px !important;
}
#wcpo-overlay .wcpo-stock-badge.in-stock    { color:#166534!important; background:#dcfce7!important; }
#wcpo-overlay .wcpo-stock-badge.out-of-stock{ color:#991b1b!important; background:#fee2e2!important; }
#wcpo-overlay .wcpo-stock-dot {
    width:         7px !important;
    height:        7px !important;
    border-radius: 50% !important;
    background:    currentColor !important;
    display:       inline-block !important;
    flex-shrink:   0 !important;
}

/* ══ DIVIDER ═════════════════════════════════ */
#wcpo-overlay .wcpo-divider {
    border:     none !important;
    border-top: 1px solid #f0f0f0 !important;
    margin:     0 0 18px !important;
    padding:    0 !important;
    height:     0 !important;
    background: none !important;
}

/* ══ SECTION LABEL ═══════════════════════════ */
#wcpo-overlay .wcpo-section-label {
    display:       block !important;
    font-size:     11px !important;
    font-weight:   700 !important;
    color:         #9ca3af !important;
    text-transform:uppercase !important;
    letter-spacing:.7px !important;
    margin-bottom: 9px !important;
}

/* ══ COLOR SWATCHES ══════════════════════════ */
#wcpo-overlay .wcpo-color-options {
    display:      flex !important;
    gap:          9px !important;
    flex-wrap:    wrap !important;
    margin-bottom:18px !important;
}
#wcpo-overlay .wcpo-color-swatch {
    width:         36px !important;
    height:        36px !important;
    min-width:     36px !important;
    min-height:    36px !important;
    border-radius: 50% !important;
    cursor:        pointer !important;
    border:        3px solid transparent !important;
    outline:       none !important;
    padding:       0 !important;
    display:       inline-block !important;
    box-sizing:    border-box !important;
    transition:    transform .15s !important;
}
#wcpo-overlay .wcpo-color-swatch:hover   { transform:scale(1.12)!important; }
#wcpo-overlay .wcpo-color-swatch.active  {
    border-color: var(--wcpo-primary) !important;
    box-shadow:   0 0 0 2px #fff, 0 0 0 4px var(--wcpo-primary) !important;
}

/* ══ SIZE / TEXT ATTRS ═══════════════════════ */
#wcpo-overlay .wcpo-size-options {
    display:      flex !important;
    gap:          7px !important;
    flex-wrap:    wrap !important;
    margin-bottom:18px !important;
}
#wcpo-overlay .wcpo-size-btn {
    padding:       8px 15px !important;
    border-radius: 50px !important;
    border:        1.5px solid #e5e7eb !important;
    background:    #fff !important;
    font-size:     12.5px !important;
    font-weight:   600 !important;
    cursor:        pointer !important;
    color:         #374151 !important;
    transition:    all .14s !important;
    display:       inline-block !important;
    box-sizing:    border-box !important;
    line-height:   1.3 !important;
}
#wcpo-overlay .wcpo-size-btn:hover  { border-color:var(--wcpo-primary)!important; color:var(--wcpo-primary)!important; }
#wcpo-overlay .wcpo-size-btn.active { background:var(--wcpo-primary)!important; color:#fff!important; border-color:var(--wcpo-primary)!important; }

/* ══ QUANTITY ════════════════════════════════ */
#wcpo-overlay .wcpo-qty-row {
    display:       flex !important;
    align-items:   center !important;
    gap:           12px !important;
    margin-bottom: 18px !important;
}
#wcpo-overlay .wcpo-qty-label {
    font-size:     11px !important;
    font-weight:   700 !important;
    color:         #9ca3af !important;
    text-transform:uppercase !important;
    letter-spacing:.7px !important;
}
#wcpo-overlay .wcpo-qty-control {
    display:       inline-flex !important;
    align-items:   center !important;
    border:        1.5px solid #e5e7eb !important;
    border-radius: 50px !important;
    overflow:      hidden !important;
    background:    #fff !important;
}
#wcpo-overlay .wcpo-qty-btn {
    width:        38px !important;
    height:       38px !important;
    min-width:    38px !important;
    border:       none !important;
    background:   transparent !important;
    font-size:    20px !important;
    font-weight:  600 !important;
    cursor:       pointer !important;
    color:        #374151 !important;
    display:      flex !important;
    align-items:  center !important;
    justify-content:center !important;
    padding:      0 !important;
    line-height:  1 !important;
    box-shadow:   none !important;
    transition:   background .12s !important;
}
#wcpo-overlay .wcpo-qty-btn:hover { background:#f3f4f6!important; }
#wcpo-overlay .wcpo-qty-input {
    width:       44px !important;
    height:      38px !important;
    border:      none !important;
    border-left: 1px solid #f0f0f0 !important;
    border-right:1px solid #f0f0f0 !important;
    text-align:  center !important;
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       #111827 !important;
    outline:     none !important;
    background:  #fff !important;
    padding:     0 !important;
    box-shadow:  none !important;
    -moz-appearance:textfield !important;
}
#wcpo-overlay .wcpo-qty-input::-webkit-outer-spin-button,
#wcpo-overlay .wcpo-qty-input::-webkit-inner-spin-button { -webkit-appearance:none!important; }

/* ══ ACTION BUTTONS ══════════════════════════ */
#wcpo-overlay .wcpo-action-row {
    display:  flex !important;
    gap:      10px !important;
    flex-wrap:wrap !important;
}
#wcpo-overlay .wcpo-btn-cart,
#wcpo-overlay .wcpo-btn-buy {
    flex:         1 !important;
    min-width:    110px !important;
    height:       50px !important;
    border-radius:var(--wcpo-btn-r) !important;
    font-size:    14px !important;
    font-weight:  700 !important;
    cursor:       pointer !important;
    display:      flex !important;
    align-items:  center !important;
    justify-content:center !important;
    gap:          7px !important;
    transition:   all .18s !important;
    border:       none !important;
    outline:      none !important;
    text-decoration:none !important;
    box-sizing:   border-box !important;
    padding:      0 16px !important;
    line-height:  1 !important;
    box-shadow:   none !important;
    text-shadow:  none !important;
}
#wcpo-overlay .wcpo-btn-cart {
    background:  #fff !important;
    color:       var(--wcpo-primary) !important;
    border:      2px solid var(--wcpo-primary) !important;
}
#wcpo-overlay .wcpo-btn-cart:hover {
    background:  var(--wcpo-primary) !important;
    color:       #fff !important;
}
#wcpo-overlay .wcpo-btn-buy {
    background:  linear-gradient(135deg, var(--wcpo-secondary) 0%, var(--wcpo-primary) 100%) !important;
    color:       #fff !important;
}
#wcpo-overlay .wcpo-btn-buy:hover {
    opacity:.88 !important;
    box-shadow: 0 5px 16px rgba(232,114,26,.35) !important;
}
#wcpo-overlay .wcpo-btn-cart svg,
#wcpo-overlay .wcpo-btn-buy  svg { flex-shrink:0!important; display:block!important; }
#wcpo-overlay .wcpo-btn-cart.wcpo-loading,
#wcpo-overlay .wcpo-btn-buy.wcpo-loading  { opacity:.65!important; pointer-events:none!important; }

/* ══ TOAST ════════════════════════════════════ */
#wcpo-toast {
    position:     fixed !important;
    bottom:       24px !important;
    left:         50% !important;
    transform:    translateX(-50%) translateY(18px) !important;
    background:   #1f2937 !important;
    color:        #fff !important;
    padding:      11px 22px !important;
    border-radius:50px !important;
    font-size:    13.5px !important;
    font-weight:  600 !important;
    opacity:      0 !important;
    transition:   all .28s cubic-bezier(.34,1.4,.64,1) !important;
    pointer-events:none !important;
    white-space:  nowrap !important;
    z-index:      999999 !important;
    box-shadow:   0 6px 20px rgba(0,0,0,.22) !important;
    font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
#wcpo-toast.wcpo-t-success { background:#166534!important; }
#wcpo-toast.wcpo-t-error   { background:#991b1b!important; }
#wcpo-toast.wcpo-t-show    {
    opacity:  1 !important;
    transform:translateX(-50%) translateY(0) !important;
}

/* ══ TRIGGER BUTTON (on product cards) ═══════ */
.wcpo-trigger-btn {
    display:        inline-flex !important;
    align-items:    center !important;
    justify-content:center !important;
    gap:            5px !important;
    padding:        10px 20px !important;
    background:     var(--wcpo-primary) !important;
    color:          #fff !important;
    border:         none !important;
    border-radius:  8px !important;
    font-size:      13.5px !important;
    font-weight:    700 !important;
    cursor:         pointer !important;
    transition:     all .18s !important;
    margin-top:     8px !important;
    width:          100% !important;
    text-align:     center !important;
    box-sizing:     border-box !important;
    line-height:    1.3 !important;
    text-decoration:none !important;
    box-shadow:     none !important;
}
.wcpo-trigger-btn:hover {
    background:#d4651a !important;
    color:#fff !important;
    transform:translateY(-1px) !important;
    box-shadow:0 4px 12px rgba(232,114,26,.3) !important;
}

/* ══ MOBILE — keep image-left layout ═════════ */
@media (max-width:600px) {
    #wcpo-overlay .wcpo-modal {
        padding:      16px 14px 14px !important;
        font-size:    var(--wcpo-fs-m) !important;
        max-height:   92vh !important;
        border-radius:16px !important;
    }
    #wcpo-overlay .wcpo-top-row {
        flex-direction:row !important;
        gap:          11px !important;
        margin-bottom:15px !important;
    }
    #wcpo-overlay .wcpo-product-image {
        width:    86px !important;
        min-width:86px !important;
        max-width:86px !important;
        height:   86px !important;
    }
    #wcpo-overlay .wcpo-product-title { font-size:13.5px !important; }
    #wcpo-overlay #wcpo-price         { font-size:17px !important; }
    #wcpo-overlay .wcpo-size-btn      { padding:7px 12px!important; font-size:11.5px!important; }
    #wcpo-overlay .wcpo-action-row    { flex-wrap:nowrap!important; }
    #wcpo-overlay .wcpo-btn-cart,
    #wcpo-overlay .wcpo-btn-buy       { height:46px!important; font-size:13px!important; }
}