/* ============================================================
   BQ Freebies — fbw.css
   All colors reference CSS custom properties set by PHP.
   !important on every color rule defeats theme overrides.
   Zero global styles — everything scoped to .fbw-* classes.
============================================================ */

/* ── Banner wrapper ── */
.fbw-wrap {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Banner strip ── */
.fbw-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    /* Colors set via inline style in PHP — no theme can override */
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
}

.fbw-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.fbw-emoji {
    font-size: 20px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    font-style: normal !important;
}

.fbw-texts {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.fbw-main {
    font-size: 12px !important;
    font-weight: 800 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    /* color set via inline style in PHP */
}

.fbw-sub2 {
    font-size: 10px !important;
    font-weight: 500 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    line-height: 1.3 !important;
    opacity: 0.85 !important;
    display: block !important;
    /* color set via inline style in PHP */
}

/* ── Claim button — ALL styles here + inline style from PHP ── */
.fbw-btn {
    font-size: 10px !important;
    font-weight: 800 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    /* background-color + color set via inline style in PHP */
    padding: 7px 11px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    display: inline-block !important;
    /* Reset any theme button styles */
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    transition: opacity 0.15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.fbw-btn:hover {
    opacity: 0.88 !important;
}

.fbw-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================================
   POPUP OVERLAY
============================================================ */
/* display is controlled entirely by JS (show/hide).
   CSS must NOT set display here — that caused the popup
   to randomly ignore clicks when JS tried to toggle it. */
#fbw-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    /* display: intentionally omitted — JS sets display:flex / display:none */
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

#fbw-obg {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

#fbw-popup {
    position: relative !important;
    z-index: 1 !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 340px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
    animation: fbwPopIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

@keyframes fbwPopIn {
    from { transform: scale(0.7) translateY(30px); opacity: 0; }
    to   { transform: scale(1) translateY(0);      opacity: 1; }
}

/* Close button */
#fbw-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    z-index: 2 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    /* all other styles via inline in PHP */
}

/* ── Top section of popup ── */
.fbw-ptop {
    position: relative !important;
    background: linear-gradient(160deg, #fffde7 0%, #fff8e1 100%) !important;
    padding: 36px 24px 24px !important;
    text-align: center !important;
    overflow: hidden !important;
}

.fbw-star {
    position: absolute !important;
    animation: fbwTwinkle 1.8s ease-in-out infinite alternate !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

@keyframes fbwTwinkle {
    from { opacity: 0.4; transform: scale(0.85); }
    to   { opacity: 1;   transform: scale(1.15); }
}

.fbw-gift {
    font-size: 52px !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
    display: block !important;
    animation: fbwBounce 1.4s ease-in-out infinite alternate !important;
}

@keyframes fbwBounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}

.fbw-badge {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    margin-bottom: 12px !important;
    /* background-color + color set via inline style in PHP */
}

.fbw-ptitle {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

.fbw-ptitle span {
    background: linear-gradient(135deg, #e65100, #f57f17) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.fbw-psubt {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #555 !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

/* ── Bottom section of popup ── */
.fbw-pbot {
    padding: 20px 24px 24px !important;
    text-align: center !important;
}

.fbw-thanks {
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    /* color set via inline style in PHP */
}

.fbw-pdesc {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

/* ── Coupon section ── */
.fbw-coupon-wrap {
    background: #f9f9f9 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-top: 4px !important;
}

.fbw-coupon-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #888 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

.fbw-coupon-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1.5px dashed #ccc !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
    user-select: all !important;
    -webkit-user-select: all !important;
}

.fbw-coupon-row:hover {
    border-color: #999 !important;
}

.fbw-coupon-code {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    color: #1a1a1a !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

.fbw-copy-msg {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #4caf50 !important;
    margin-top: 6px !important;
    display: block !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

/* ── Confetti ── */
#fbw-confetti {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1000000 !important;
    overflow: hidden !important;
}

.fbw-c {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
    animation: fbwFall linear forwards !important;
}

@keyframes fbwFall {
    0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}