/* =====================================================================
   Burn Credits — Frontend CSS
   Brand: #E9E9E9 bg | #FF9800 accent | #000 text | Poppins
   Breakpoints: mobile <600px | tablet 601–1024px | desktop 1025px+
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ── base reset for all BCP elements ── */
.bcp-product-credits-badge,
#bcp-fire-popup,
.bcp-cart-block,
.bcp-checkout-box,
.bcp-thankyou-box,
.bcp-account-wrap,
.bcp-account-banner,
.bcp-redeem-box,
.bcp-explainer,
.bcp-order-credits-row {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
.bcp-account-wrap *,
.bcp-cart-block *,
.bcp-checkout-box * { box-sizing: border-box; }

/* ── brand button ── */
.bcp-btn {
    display: inline-block;
    background: #FF9800;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .9em;
    padding: 10px 22px;
    border: 2px solid #FF9800;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s;
    line-height: 1.4;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.bcp-btn:hover,
.bcp-btn:focus {
    background: #000;
    color: #fff;
    border-color: #000;
    outline: none;
}

/* =====================================================================
   FIRE POPUP
   ===================================================================== */
#bcp-fire-popup {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: #000;
    color: #fff;
    padding: 14px 22px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95em;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    z-index: 99999;
    pointer-events: none;
    max-width: 320px;
    border: 2px solid #FF9800;
    opacity: 0;
    transform: translateY(20px) scale(.9);
    transition: opacity .3s ease, transform .3s ease;
}
#bcp-fire-popup.bcp-popup-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.bcp-popup-fire {
    font-size: 1.6em;
    flex-shrink: 0;
    animation: bcp-flicker .55s infinite alternate;
}
@keyframes bcp-flicker {
    0%   { transform: scale(1)    rotate(-4deg); }
    100% { transform: scale(1.18) rotate(4deg);  }
}
.bcp-popup-text { line-height: 1.35; }
.bcp-popup-text strong { color: #FF9800; }
.bcp-popup-text small  { color: #ccc; font-size: .82em; display: block; }

/* =====================================================================
   PRODUCT PAGE BADGE (below price, updates per variation)
   ===================================================================== */
.bcp-product-credits-badge {
    display: block;
    background: #000;
    color: #fff;
    font-size: .88em;
    padding: 10px 16px;
    border-radius: 8px;
    margin: 10px 0 16px;
    border-left: 4px solid #FF9800;
    line-height: 1.5;
    transition: all .2s ease;
}
.bcp-product-credits-badge strong { color: #FF9800; }
.bcp-product-credits-badge small  { color: #bbb; }
.bcp-product-credits-badge a      { color: #FF9800; font-weight: 600; }

/* =====================================================================
   CART CREDITS BLOCK
   ===================================================================== */
.bcp-cart-block {
    background: #000;
    border: 2px solid #FF9800;
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 16px;
    width: 100%;
}
.bcp-cart-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.bcp-cart-flame {
    font-size: 2em;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
    animation: bcp-flicker .55s infinite alternate;
}
.bcp-cart-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.bcp-cart-text strong {
    color: #FF9800;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.3;
}
.bcp-cart-val  { color: #ccc; font-size: .85em; margin-left: 4px; }
.bcp-cart-note { color: #bbb; font-size: .82em; display: block; line-height: 1.4; }
.bcp-cart-block a { color: #FF9800; font-weight: 600; }

/* =====================================================================
   CHECKOUT ORDER-REVIEW TABLE ROW
   ===================================================================== */
.bcp-order-credits-row th,
.bcp-order-credits-row td {
    background: #fff8ee !important;
    font-family: 'Poppins', sans-serif;
    font-size: .92em;
    padding: 10px 12px !important;
}
.bcp-order-credits-row th { font-weight: 700; }
.bcp-orange { color: #FF9800; font-weight: 700; }

/* =====================================================================
   CHECKOUT SUMMARY BOX
   ===================================================================== */
.bcp-checkout-box {
    background: #E9E9E9;
    border: 2px solid #FF9800;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: .93em;
    color: #000;
    width: 100%;
}
.bcp-checkout-box-hdr {
    font-weight: 700;
    font-size: 1.05em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,.12);
}
.bcp-cko-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.bcp-cko-row:last-child { border-bottom: none; }
.bcp-earn-strong  { color: #2e7d32; font-weight: 700; }
.bcp-cko-redeem strong { color: #c62828; }
.bcp-cko-apply    { margin-top: 8px; font-size: .9em; }
.bcp-cko-apply a  { color: #FF9800; font-weight: 600; }
.bcp-cko-guest    { font-size: .9em; color: #333; }
.bcp-cko-guest a  { color: #FF9800; font-weight: 600; }

/* =====================================================================
   THANK YOU BOX
   ===================================================================== */
.bcp-thankyou-box {
    background: #000;
    color: #fff;
    padding: 18px 24px;
    border-radius: 10px;
    margin: 20px 0;
    font-size: .95em;
    border-left: 5px solid #FF9800;
    line-height: 1.5;
}
.bcp-thankyou-box strong { color: #FF9800; }
.bcp-thankyou-box a      { color: #FF9800; font-weight: 600; }

/* =====================================================================
   MY ACCOUNT — BANNER (before account content)
   ===================================================================== */
.bcp-account-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #E9E9E9;
    border: 2px solid #FF9800;
    padding: 16px 22px;
    border-radius: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    width: 100%;
}
.bcp-banner-fire { font-size: 2em; flex-shrink: 0; }
.bcp-account-banner strong { font-size: 1.1em; font-weight: 700; }
.bcp-banner-link { margin-left: auto; }

/* =====================================================================
   MY ACCOUNT — BURN CREDITS PAGE
   ===================================================================== */
.bcp-account-wrap {
    max-width: 720px;
    width: 100%;
}

/* Balance card */
.bcp-account-balance {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #000;
    color: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 28px;
    width: 100%;
}
.bcp-fire-icon  { font-size: 3.2em; flex-shrink: 0; }
.bcp-balance-number {
    font-size: 2.2em;
    font-weight: 800;
    color: #FF9800;
    line-height: 1.1;
}
.bcp-balance-number span {
    display: block;
    font-size: .44em;
    font-weight: 400;
    color: #ccc;
    margin-top: 2px;
}
.bcp-balance-value { font-size: 1em; color: #ccc; margin-top: 6px; }

/* Explainer */
.bcp-explainer {
    background: #E9E9E9;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    padding: 22px 26px;
    margin-bottom: 24px;
    width: 100%;
}
.bcp-explainer h3 { margin-top: 0; font-weight: 700; font-size: 1.1em; }
.bcp-explainer h4 { font-size: .95em; font-weight: 700; color: #000; }
.bcp-explainer p  { font-size: .9em; line-height: 1.6; margin: 6px 0 10px; }
.bcp-explainer ul, .bcp-explainer ol { margin: 6px 0 12px 20px; }
.bcp-explainer li { font-size: .9em; margin-bottom: 5px; line-height: 1.5; }

/* Value table */
.bcp-table-mini { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bcp-table-mini table {
    border-collapse: collapse;
    font-size: .9em;
    min-width: 200px;
    width: 100%;
    max-width: 320px;
}
.bcp-table-mini th,
.bcp-table-mini td {
    border: 1px solid #ccc;
    padding: 7px 16px;
    text-align: center;
}
.bcp-table-mini th { background: #000; color: #fff; }
.bcp-table-mini tr:nth-child(even) td { background: #f9f9f9; }

/* Redeem box */
.bcp-redeem-box {
    background: #fff;
    border: 2px solid #FF9800;
    border-radius: 10px;
    padding: 22px 26px;
    margin-bottom: 24px;
    width: 100%;
}
.bcp-redeem-box h3 { margin-top: 0; font-weight: 700; font-size: 1.1em; }
.bcp-redeem-box p  { font-size: .9em; line-height: 1.5; }
.bcp-redeem-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
}
.bcp-redeem-row input {
    padding: 10px 14px;
    border: 2px solid #FF9800;
    border-radius: 8px;
    font-size: 1em;
    width: 150px;
    font-family: 'Poppins', sans-serif;
    color: #000;
    -moz-appearance: textfield;
    touch-action: manipulation;
}
.bcp-redeem-row input::-webkit-inner-spin-button,
.bcp-redeem-row input::-webkit-outer-spin-button { -webkit-appearance: none; }
.bcp-redeem-row input:focus { outline: none; border-color: #000; }
.bcp-redeem-calc { font-size: 1em; font-weight: 600; white-space: nowrap; }
.bcp-redeem-note { font-size: .82em; color: #666; margin: 0; }
.bcp-redeem-locked { border-color: #ccc; background: #E9E9E9; }
.bcp-redeem-locked p { color: #555; font-size: .9em; margin: 0; }

/* Messages */
.bcp-msg {
    display: block;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .92em;
    line-height: 1.5;
}
.bcp-msg-success { background: #d1fae5; color: #065f46; }
.bcp-msg-error   { background: #fee2e2; color: #991b1b; }
.bcp-msg-success a { color: #FF9800; font-weight: 700; }

/* Redemption history */
.bcp-redemption-history { margin-top: 28px; width: 100%; }
.bcp-redemption-history h3 { font-weight: 700; font-size: 1.05em; }
.bcp-redemption-history .shop_table { font-size: .88em; }
.bcp-redemption-history .shop_table th { font-family: 'Poppins', sans-serif; }

/* =====================================================================
   FRONT-END PRODUCT IMAGE FLAME
   JS injects .bcp-img-flame inside the img parent (set to relative).
   Works on all devices — mobile, tablet, desktop.
   ===================================================================== */
ul.products li.product,
.woocommerce ul.products li.product {
    position: relative;
}
.bcp-img-flame {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 1.3em;
    line-height: 1;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
    animation: bcp-flame-pulse 2.4s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}
@keyframes bcp-flame-pulse {
    0%,100% { transform: scale(1)    rotate(-3deg); opacity: .9; }
    50%      { transform: scale(1.15) rotate(2deg);  opacity: 1;  }
}


/* =====================================================================
   TABLET — 601px to 1024px
   ===================================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
    /* Popup — keep in corner but smaller */
    #bcp-fire-popup {
        bottom: 20px;
        right: 20px;
        max-width: 280px;
        font-size: .9em;
        padding: 12px 18px;
    }

    /* Balance card — slightly smaller text */
    .bcp-account-balance {
        padding: 22px 24px;
        gap: 16px;
    }
    .bcp-balance-number { font-size: 1.9em; }
    .bcp-fire-icon      { font-size: 2.8em; }

    /* Cart block — compact */
    .bcp-cart-block { padding: 14px 16px; }

    /* Checkout box — full width, slightly smaller */
    .bcp-checkout-box { font-size: .9em; }

    /* Value table — scrollable if needed */
    .bcp-table-mini { overflow-x: auto; }

    /* Redeem row — stack button below on narrow tablets */
    .bcp-redeem-row { gap: 10px; }

    /* Account banner */
    .bcp-account-banner { gap: 12px; padding: 14px 18px; }
    .bcp-banner-link    { flex-basis: 100%; text-align: center; margin-left: 0; margin-top: 4px; }
}

/* =====================================================================
   MOBILE — up to 600px
   ===================================================================== */
@media (max-width: 600px) {
    /* Popup — full width at bottom */
    #bcp-fire-popup {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: 100%;
        border-radius: 14px 14px 0 0;
        padding: 14px 20px;
        font-size: .9em;
        border-bottom: none;
    }

    /* Product badge — full width */
    .bcp-product-credits-badge {
        display: block;
        font-size: .85em;
        padding: 10px 14px;
    }

    /* Cart block — stack */
    .bcp-cart-block  { padding: 14px 16px; border-radius: 8px; }
    .bcp-cart-inner  { gap: 10px; }
    .bcp-cart-flame  { font-size: 1.6em; }
    .bcp-cart-text strong { font-size: 1em; }

    /* Checkout box — full width, compact */
    .bcp-checkout-box {
        padding: 14px 16px;
        font-size: .88em;
        border-radius: 8px;
    }
    .bcp-cko-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    /* Thank you box */
    .bcp-thankyou-box { padding: 14px 18px; font-size: .9em; }

    /* Account banner — stack vertically */
    .bcp-account-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }
    .bcp-banner-link { margin-left: 0; width: 100%; text-align: center; }

    /* Balance card — stack */
    .bcp-account-balance {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 22px 20px;
        gap: 12px;
    }
    .bcp-fire-icon      { font-size: 2.8em; }
    .bcp-balance-number { font-size: 1.8em; }
    .bcp-balance-info   { width: 100%; }

    /* Explainer — compact */
    .bcp-explainer { padding: 16px 18px; }
    .bcp-explainer h3 { font-size: 1em; }
    .bcp-explainer p, .bcp-explainer li { font-size: .88em; }

    /* Value table — scrollable */
    .bcp-table-mini { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .bcp-table-mini table { min-width: 180px; }

    /* Redeem box — stack everything */
    .bcp-redeem-box { padding: 16px 18px; }
    .bcp-redeem-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .bcp-redeem-row input { width: 100%; max-width: 220px; }
    .bcp-btn { width: 100%; text-align: center; padding: 12px 16px; font-size: .95em; }

    /* History table — scrollable */
    .bcp-redemption-history { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .bcp-redemption-history .shop_table { font-size: .82em; min-width: 380px; }

    /* Image flame — slightly smaller */
    .bcp-img-flame { font-size: 1em; top: 5px; left: 6px; }
}

/* =====================================================================
   DESKTOP — 1025px and up
   ===================================================================== */
@media (min-width: 1025px) {
    .bcp-account-wrap { max-width: 720px; }

    .bcp-account-balance { padding: 28px 36px; }
    .bcp-balance-number  { font-size: 2.4em; }
    .bcp-fire-icon       { font-size: 3.4em; }

    .bcp-explainer       { padding: 24px 28px; }
    .bcp-redeem-box      { padding: 24px 28px; }
    .bcp-cart-block      { padding: 18px 22px; }

    #bcp-fire-popup { bottom: 32px; right: 32px; }

    /* Banner link stays right-aligned */
    .bcp-banner-link { margin-left: auto; }
}

/* ── Saved custom description in account page ── */
.bcp-saved-desc {
    font-size: .9em;
    line-height: 1.7;
    color: #000;
    white-space: pre-wrap;
    font-family: 'Poppins', sans-serif;
    padding: 4px 0;
}