/* ===== Core ===== */
.bcr-reveal-btn {
    padding: 12px 22px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 50px;
    transition: all 0.35s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    display:inline-block;
    min-width: 220px;
    text-align:center;
}
.bcr-reveal-btn:hover { opacity: .95; transform: translateY(-1px); }
.bcr-reveal-btn:active { transform: translateY(0); }

.bcr-hidden-content {
    margin-top: 12px;
    padding: 14px;
    background-color: #f7f7f9;
    border-left: 4px solid #7855ff;
    border-radius: 6px;
}

.bcr-ad img {
    border-radius: 6px;
    display: inline-block;
}

/* ===== Overlay base ===== */
.bcr-overlay {
    position: fixed; inset: 0; background: rgba(10,12,20,.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
    z-index: 999999;
}
.bcr-overlay.bcr-open { opacity: 1; pointer-events: auto; }
.bcr-overlay .bcr-overlay-inner { transform: translateY(10px); animation: bcrFloatIn .35s ease forwards; }
@keyframes bcrFloatIn { to { transform: translateY(0); } }

.bcr-count-bubble {
    width: 140px; height: 140px; border-radius: 999px;
    display:flex; align-items:center; justify-content:center;
    background: #111; color:#fff; font-size:48px; font-weight:800;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 8px rgba(255,255,255,.06);
    transition: all 0.4s ease;
}
.bcr-count-num { 
    display:block; 
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Mini thumbnail count */
.bcr-count-mini {
    background:; color:#fff;
}

/* ===== 20 Button Styles ===== */
.bcr-btn-style-1 { border-radius: 10px; }
.bcr-btn-style-2 { border-radius: 999px; box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.bcr-btn-style-3 { border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(0,0,0,.08)); backdrop-filter: blur(6px); }
.bcr-btn-style-4 { border-radius: 12px; border: 2px solid rgba(255,255,255,.5); }
.bcr-btn-style-5 { border-radius: 16px; box-shadow: 0 14px 30px rgba(120,85,255,.35); }
.bcr-btn-style-6 { border-radius: 8px; letter-spacing:.4px; text-transform:uppercase; }
.bcr-btn-style-7 { border-radius: 20px; box-shadow: 0 8px 0 rgba(0,0,0,.2) inset; }
.bcr-btn-style-8 { border-radius: 12px; background-image: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.25), rgba(0,0,0,.1)); }
.bcr-btn-style-9 { border-radius: 12px; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 0 0 3px rgba(255,255,255,.08) inset; }
.bcr-btn-style-10{ border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25); }

/* New 10 */
.bcr-btn-style-11{ border-radius: 30px; background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(0,0,0,.1)); }
.bcr-btn-style-12{ border-radius: 12px; border: 1px solid rgba(0,0,0,.1); backdrop-filter: blur(4px); }
.bcr-btn-style-13{ border-radius: 8px; text-transform: lowercase; letter-spacing:.6px; }
.bcr-btn-style-14{ border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) inset; }
.bcr-btn-style-15{ border-radius: 10px; position: relative; overflow:hidden; }
.bcr-btn-style-15:after{ content:''; position:absolute; inset:0; background: radial-gradient(60% 80% at 30% 10%, rgba(255,255,255,.25), transparent); }
.bcr-btn-style-16{ border-radius: 999px; border: 2px solid rgba(255,255,255,.25); }
.bcr-btn-style-17{ border-radius: 14px; box-shadow: 0 0 0 6px rgba(255,255,255,.06) inset; }
.bcr-btn-style-18{ border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.2), transparent); }
.bcr-btn-style-19{ border-radius: 24px; transform: skewX(-6deg); }
.bcr-btn-style-20{ border-radius: 12px; background: linear-gradient(135deg, rgba(0,0,0,.1), rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.15); }

/* Hover accents (shared) */
.bcr-btn-style-2:hover  { box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.bcr-btn-style-5:hover  { box-shadow: 0 18px 36px rgba(120,85,255,.38); }
.bcr-btn-style-7:hover  { box-shadow: 0 10px 0 rgba(0,0,0,.18) inset; }
.bcr-btn-style-9:hover  { box-shadow: 0 0 0 4px rgba(255,255,255,.1) inset; }
.bcr-btn-style-14:hover { box-shadow: 0 12px 36px rgba(0,0,0,.16), 0 3px 7px rgba(0,0,0,.08) inset; }
.bcr-btn-style-17:hover { box-shadow: 0 0 0 7px rgba(255,255,255,.08) inset; }
.bcr-btn-style-19:hover { transform: skewX(-6deg) translateY(-1px); }

/* ===== 20 Countdown Styles (overlay variations) ===== */

/* 1. Pulse glow */
.bcr-count-style-1 .bcr-count-bubble { background:#14162b; box-shadow:0 0 0 0 rgba(120,85,255,.7); animation: bcrPulse 1s infinite; }
@keyframes bcrPulse { 0%{ box-shadow:0 0 0 0 rgba(120,85,255,.65);} 70%{ box-shadow:0 0 0 25px rgba(120,85,255,0);} 100%{ box-shadow:0 0 0 0 rgba(120,85,255,0);} }

/* 2. Neon ring */
.bcr-count-style-2 .bcr-count-bubble { background:#0f0f14; border:3px solid #6a5cff; box-shadow:0 0 24px rgba(106,92,255,.55), inset 0 0 24px rgba(106,92,255,.35); }

/* 3. Glass blur */
.bcr-count-style-3 .bcr-count-bubble { background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.25); }

/* 4. Gradient spin */
.bcr-count-style-4 .bcr-count-bubble { background: conic-gradient(from 0deg, #7855ff, #5bc0ff, #f06292, #7855ff); animation: bcrSpin 6s linear infinite; }
@keyframes bcrSpin { to { transform: rotate(360deg); } }

/* 5. Soft shadow */
.bcr-count-style-5 .bcr-count-bubble { background:#0b0e16; box-shadow:0 26px 60px rgba(0,0,0,.55); }

/* 6. Ring dash */
.bcr-count-style-6 .bcr-count-bubble { position:relative; background:#111; }
.bcr-count-style-6 .bcr-count-bubble:after{
    content:""; position:absolute; inset:-6px; border-radius:999px;
    border:4px dashed rgba(255,255,255,.55); animation:bcrDash 8s linear infinite;
}
@keyframes bcrDash { to { transform: rotate(360deg); } }

/* 7. Orbit dots */
.bcr-count-style-7 .bcr-count-bubble { position:relative; background:#121626; }
.bcr-count-style-7 .bcr-count-bubble:before{
    content:""; position:absolute; width:14px; height:14px; border-radius:999px; background:#7855ff; top:-10px; left:50%; transform:translateX(-50%); animation:bcrOrbit 2.4s linear infinite;
}
@keyframes bcrOrbit {
    0% { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

/* 8. Dual glow */
.bcr-count-style-8 .bcr-count-bubble { background:#0f1220; box-shadow: 0 0 60px rgba(120,85,255,.4), 0 0 120px rgba(91,192,255,.25); }

/* 9. Tilt in */
.bcr-count-style-9 .bcr-count-bubble { transform: rotate(-6deg) scale(.9); animation: bcrTilt .6s ease forwards; }
@keyframes bcrTilt { to { transform: rotate(0) scale(1); } }

/* 10. Bounce */
.bcr-count-style-10 .bcr-count-bubble { animation:bcrBounce 1s ease-in-out infinite; }
@keyframes bcrBounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* 11. Ripple */
.bcr-count-style-11 .bcr-count-bubble { position:relative; background:#0b1020; }
.bcr-count-style-11 .bcr-count-bubble:after{
    content:""; position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(120,85,255,.5); animation:bcrRipple 1.1s ease-out infinite;
}
@keyframes bcrRipple { 0%{ box-shadow:0 0 0 0 rgba(120,85,255,.5);} 100%{ box-shadow:0 0 0 28px rgba(120,85,255,0);} }

/* 12. Scanline */
.bcr-count-style-12 .bcr-count-bubble { background:#101426; overflow:hidden; }
.bcr-count-style-12 .bcr-count-bubble:after{
    content:""; position:absolute; left:0; right:0; top:-40%; height:40%; background:linear-gradient(to bottom, rgba(255,255,255,.25), transparent);
    animation:bcrScan 2.2s linear infinite;
}
@keyframes bcrScan { 0%{ top:-40%; } 100%{ top:140%; } }

/* 13. Pop */
.bcr-count-style-13 .bcr-count-bubble { animation:bcrPop .6s ease; }
@keyframes bcrPop { 0%{ transform: scale(.8);} 100%{ transform: scale(1);} }

/* 14. Flip */
.bcr-count-style-14 .bcr-count-bubble { animation:bcrFlip .8s ease; transform-style:preserve-3d; }
@keyframes bcrFlip { 0%{ transform: rotateY(90deg);} 100%{ transform: rotateY(0);} }

/* 15. Swing */
.bcr-count-style-15 .bcr-count-bubble { transform-origin: top center; animation:bcrSwing 1.6s ease-in-out infinite; }
@keyframes bcrSwing { 0%,100%{ transform: rotate(3deg);} 50%{ transform: rotate(-3deg);} }

/* 16. Radar */
.bcr-count-style-16 .bcr-count-bubble { position:relative; background:#0b0e16; }
.bcr-count-style-16 .bcr-count-bubble:after{
    content:''; position:absolute; inset:-2px; border-radius:999px; border:2px solid rgba(120,85,255,.45); box-shadow:0 0 20px rgba(120,85,255,.35);
}

/* 17. Breath */
.bcr-count-style-17 .bcr-count-bubble { animation:bcrBreath 2.2s ease-in-out infinite; }
@keyframes bcrBreath { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }

/* 18. Ring glow alt */
.bcr-count-style-18 .bcr-count-bubble { background:#0f0f14; border:3px solid #5bc0ff; box-shadow:0 0 24px rgba(91,192,255,.55), inset 0 0 24px rgba(91,192,255,.35); }

/* 19. Pixelate */
.bcr-count-style-19 .bcr-count-bubble { image-rendering: pixelated; background:#0f1220; }
.bcr-count-style-19 .bcr-count-bubble .bcr-count-num { font-size:52px; }

/* 20. Aurora */
.bcr-count-style-20 .bcr-count-bubble { background: radial-gradient(120% 140% at 30% 20%, #5bc0ff, transparent 60%), radial-gradient(120% 140% at 70% 80%, #7855ff, transparent 60%), #0b0e16; box-shadow: 0 0 80px rgba(120,85,255,.25); }