/**
 * Blade Boss Signup Modal CSS
 * NUCLEAR 2035 UI/UX VERSION - UNFUCKWITHABLE EDITION
 * 
 * !important on EVERYTHING because WordPress themes can eat shit
 */

/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* ===== BLADE BOSS COLOR SYSTEM ===== */
:root {
    /* Primary Colors */
    --bb-tactical-green: #1E5E34;
    --bb-high-vis-orange: #F57842;
    --bb-stealth-navy: #0A0F15;
    
    /* Extended Palette */
    --bb-forest: #2A7A48;
    --bb-emerald: #3A8B5A;
    --bb-sage: #87A96B;
    --bb-mint: #E8F5E9;
    --bb-orange-hover: #E86A2E;
    --bb-orange-active: #D95F28;
    --bb-orange-glow: rgba(245, 120, 66, 0.6);
    
    /* Neutrals */
    --bb-white: #FFFFFF;
    --bb-off-white: #F9F9F7;
    --bb-smoke: #F5F5F5;
    --bb-ash: #E0E0E0;
    --bb-mid-gray: #9A9A9A;
    --bb-charcoal: #1A1A1A;
    
    /* Status Colors */
    --bb-success: #10B981;
    --bb-error: #EF4444;
    --bb-warning: #F59E0B;
    --bb-info: #3B82F6;
    
    /* Typography */
    --bb-font-display: 'Montserrat', sans-serif;
    --bb-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== NUCLEAR RESET FOR MODAL =====
   Scoped to #bbModalContent (not #bbModalContainer) so zone warning
   overlay — which sits outside bbModalContent — keeps its padding/margins */
#bbModalContent *:not(.bb-card-bottom),
#bbModalContent *::before,
#bbModalContent *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: baseline !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ═══ FLOATING CTA ═══════════════════════════════════════════════════
   Rewritten 2026-08-28. History matters here, so read before editing.

   This button was authored under Elementor + Astra, whose stylesheets
   loaded after ours and overrode everything. The defence was ~90
   !important declarations keyed to the ID, plus an mu-plugin injecting
   more !important CSS at wp_footer priority 999 just to hide it on
   mobile, because the base rule hardcoded display:block !important and
   nothing could beat it.

   THAT ENEMY IS GONE. class-bb-public-pages.php renders its own
   document, never calls get_header()/get_footer(), and dequeues
   elementor-frontend, elementor-pro, hfe-* and Astra. Blog posts and
   guides intercept the template the same way. Every page this button
   appears on is theme-free.

   So: styling moves to a CLASS. The ID stays on the element purely as a
   JS handle - signup.js, nav.js, pricing.js and shared.js all reach for
   #bbFloatingCTA - but it no longer carries a single visual property.
   That is what makes the element safe to change: moving or renaming the
   ID can no longer unstyle it in four files at once.

   Also fixed here:
     - font-family used var(--bb-font-body), which does not exist. The
       token is --font-body. The declaration was silently dropping.
     - @keyframes heartbeat was dead code, referenced by nothing.
     - buttonPulse ran an infinite scale on a fixed, z-index 99999
       element on every page, forever - a permanently repainting
       compositor layer on a site that is 85% mobile. Replaced with a
       single entrance, which reads as arrival rather than nagging.
     - Mobile hiding is now HERE, so the mu-plugin can be deleted. */

.bb-floating-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: var(--z-toast, 99999);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 20px 40px;
    border: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--bb-orange) 0%, var(--bb-orange-hover) 100%);
    color: #FFFFFF;
    cursor: pointer;

    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        0 4px 14px rgba(245, 120, 66, 0.4),
        0 0 40px rgba(245, 120, 66, 0);

    transition:
        background 240ms var(--ease-out),
        transform 240ms var(--ease-out),
        box-shadow 240ms var(--ease-out),
        bottom 500ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Enters once, on arrival. Does not loop. */
    animation: bbFabIn 520ms var(--ease-spring) 600ms backwards;
}

/* Children inherit rather than being force-coloured individually. */
.bb-floating-cta > * { color: inherit; }

@keyframes bbFabIn {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.bb-floating-cta:hover {
    background: linear-gradient(135deg, var(--bb-orange-hover) 0%, var(--bb-orange-active) 100%);
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 12px 32px rgba(245, 120, 66, 0.6),
        0 0 80px rgba(245, 120, 66, 0.4);
}

.bb-floating-cta:active {
    background: var(--bb-orange-active);
    transform: translateY(-1px) scale(0.98);
}

.bb-floating-cta:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* Label swap. Scoped to the component so these generic class names
   cannot collide with anything else on the page. */
.bb-floating-cta .bb-cta-text-desktop { display: inline; }
.bb-floating-cta .bb-cta-text-mobile  { display: none; }

/* Mobile: hidden. This is what hide-mobile-cta.php was doing from an
   mu-plugin with four !important declarations. It belongs here. */
@media (max-width: 767px) {
    .bb-floating-cta { display: none; }
}

@media (max-width: 480px) {
    .bb-floating-cta .bb-cta-text-desktop { display: none; }
    .bb-floating-cta .bb-cta-text-mobile  { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .bb-floating-cta { animation: none; transition: none; }
    .bb-floating-cta:hover,
    .bb-floating-cta:active { transform: none; }
}

/* ===== MODAL OVERLAY WITH BACKDROP BLUR ===== */
#bbModalOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 15, 21, 0.9) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    z-index: 100000 !important;
    
    /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#bbModalOverlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== MODAL CONTAINER - ULTIMATE CENTERING ===== */
#bbModalContainer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100001 !important;
    
    /* Hidden by default */
    display: none !important;
    
    /* Padding for small screens */
    padding: 20px !important;
    box-sizing: border-box !important;
    
    /* Ensure no scrollbar */
    overflow: hidden !important;
}

/* When active - ULTIMATE FLEXBOX CENTERING */
#bbModalContainer.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-align: center !important;
    -ms-flex-pack: center !important;
    flex-direction: column !important;
}

/* Scrollable container for modal content */
.bb-modal-scroll-container {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-behavior: smooth !important;
}

.bb-modal-scroll-container::-webkit-scrollbar {
    display: none !important;
}

/* Allowing X Button to Stay Sticky on Userform */
.bb-modal-position-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
}

/* Modal content wrapper */
#bbModalContent {
    position: relative !important;
    width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
}

/* Scroll indicator */
.bb-scroll-indicator {
    position: fixed !important;
    right: 40px !important;
    bottom: 60px !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100002 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.bb-scroll-indicator.visible {
    opacity: 1 !important;
    visibility: visible !important;
    animation: bounce 2s ease-in-out infinite !important;
}

/* ═══ GOOGLE PLACES DROPDOWN ═════════════════════════════════════════
   Google appends .pac-container to <body> with a default z-index of
   1000. This modal renders at 100001, so the dropdown sits BEHIND it -
   populated, correctly positioned, and completely invisible. Every
   keystroke produced results nobody could see, no suggestion could be
   selected, city/state/ZIP never filled, and the hidden ZIP field then
   failed validation pointing at a field the user could not find.

   scan.css:247 solves this with var(--z-modal), which is sufficient
   there because that page has no modal above it. Here it has to clear
   100002 explicitly.

   Styling matches scan.css deliberately - same component, same job,
   same look on both surfaces. */

.pac-container {
    z-index: 100010 !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--bb-glass-border);
    background: #131B26;
    box-shadow: var(--shadow-xl);
    font-family: var(--font-body);
    margin-top: 6px;
}

.pac-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--bb-mid-gray);
    padding: 10px 12px;
    cursor: pointer;
}

.pac-item:hover,
.pac-item-selected {
    background: rgba(255, 255, 255, 0.05);
}

.pac-item-query {
    color: var(--bb-white);
}

.pac-icon {
    display: none;
}

/* Google's attribution row. Required by the Places terms when results
   are not displayed on a Google Map - do not hide it. */
.pac-container:after {
    background-color: #131B26;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bb-scroll-indicator svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--bb-white) !important;
    stroke-width: 2 !important;
}

/* ===== CLOSE BUTTON - POSITIONED ON MODAL ===== */
#bbModalClose {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10003 !important;
    
    /* Button styling — frosted glass premium */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    
    /* Center the X */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    
    /* Effects */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#bbModalClose:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transform: rotate(90deg) scale(1.1) !important;
}

#bbModalClose svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    stroke: var(--bb-charcoal) !important;
    stroke-width: 2.5 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Nuclear override — prevent reset from collapsing SVG lines */
#bbModalClose svg line {
    stroke: inherit !important;
    stroke-width: inherit !important;
}

/* ===== SIGNUP PAGE AUTO-OPEN EFFECT ===== */
body.bb-modal-loading {
    overflow: hidden !important;
}

/* Smooth fade-in for auto-open */
body.bb-modal-loading #bbModalContainer,
body.bb-modal-loading #bbModalOverlay {
    animation: smoothFadeIn 0.6s ease-out !important;
}

@keyframes smoothFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== SIGNUP FORM WRAPPER ===== */
#bbModalContent .signup-wrapper {
    background: var(--bb-white) !important;
    border-radius: 24px !important;
    box-shadow: 
        0 25px 50px rgba(10, 15, 21, 0.15),
        0 0 100px rgba(30, 94, 52, 0.05) !important;
    overflow: clip !important;
    position: relative !important;
    transform: scale(0.95) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#bbModalContainer.active .signup-wrapper {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* ===== PROGRESS BAR — sticky at top of scroll ===== */
#bbModalContent .progress-bar {
    height: 4px !important;
    background: var(--bb-ash) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    overflow: hidden !important;
}

#bbModalContent .progress-fill {
    width: 33.33% !important;
    height: 100% !important;
    background: linear-gradient(90deg, var(--bb-tactical-green) 0%, var(--bb-forest) 50%, var(--bb-emerald) 100%) !important;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

/* Progress shimmer effect */
#bbModalContent .progress-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
    animation: shimmer 2s infinite !important;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ===== FORM CONTENT AREA ===== */
#bbModalContent .form-content {
    padding: 40px 36px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== FORM STEPS ===== */
#bbModalContent .step {
    display: none !important;
    transform: translateY(20px) !important;
}

#bbModalContent .step.active {
    display: block !important;
    opacity: 1 !important;
    animation: stepIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes stepIn {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ===== STEP HEADER ===== */
#bbModalContent .step-header {
    text-align: center !important;
    margin-bottom: 24px !important;
}

#bbModalContent .step-indicator {
    display: inline-block !important;
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bb-mid-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 12px !important;
    opacity: 0.8 !important;
}

#bbModalContent .step-title {
    display: block !important;
    font-family: var(--bb-font-display) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--bb-charcoal) !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.5px !important;
}

#bbModalContent .step-description {
    display: block !important;
    font-family: var(--bb-font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--bb-mid-gray) !important;
    line-height: 1.6 !important;
    opacity: 0.9 !important;
}

/* ===== FORM ELEMENTS ===== */
#bbModalContent .form-group {
    margin-bottom: 2px !important;
    position: relative !important;
}

#bbModalContent .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

#bbModalContent .form-label {
    display: block !important;
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bb-charcoal) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 4px !important;
    opacity: 0.9 !important;
}

/* ===== INPUT FIELDS WITH HOVER EFFECTS ===== */
#bbModalContent .form-input,
#bbModalContent input[type="text"],
#bbModalContent input[type="email"],
#bbModalContent input[type="password"],
#bbModalContent input[type="number"],
#bbModalContent input[type="tel"] {
    /* Reset everything */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Sizing */
    width: 100% !important;
    height: auto !important;
    padding: 14px 60px 14px 10px !important;
    
    /* Typography */
    font-family: var(--bb-font-body) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--bb-charcoal) !important;
    line-height: 1.4 !important;
    
    /* Styling */
    background: var(--bb-white) !important;
    border: 2px solid var(--bb-ash) !important;
    border-radius: 14px !important;
    outline: none !important;
    box-shadow: 
        0 2px 4px rgba(10, 15, 21, 0.04),
        inset 0 0 0 0 rgba(30, 94, 52, 0) !important;
    
    /* Transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Force iOS keyboard navigation */
#bbModalContent input,
#bbModalContent textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Auto-capitalize name fields */
#firstName,
#lastName,
#billingName {
    text-transform: capitalize !important;
}

/* Hover state */
#bbModalContent .form-input:hover {
    border-color: var(--bb-mid-gray) !important;
    background: var(--bb-off-white) !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        0 4px 8px rgba(10, 15, 21, 0.08),
        inset 0 0 0 0 rgba(30, 94, 52, 0) !important;
}

/* Focus state */
#bbModalContent .form-input:focus {
    border-color: var(--bb-tactical-green) !important;
    background: var(--bb-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 8px 16px rgba(30, 94, 52, 0.15),
        inset 0 0 0 3px rgba(30, 94, 52, 0.08) !important;
}

/* Success state */
#bbModalContent .form-input.success {
    border-color: var(--bb-success) !important;
    background: rgba(16, 185, 129, 0.02) !important;
}

/* Error state */
#bbModalContent .form-input.error {
    border-color: var(--bb-error) !important;
    background: rgba(239, 68, 68, 0.02) !important;
    animation: shake 0.5s ease-in-out !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Input placeholder */
/* Placeholders inherit the input's family explicitly. Without it some
   browsers render placeholder text in their own UI font, which is why
   "123 Maple St" looked like a different typeface from everything else. */
#bbModalContent .form-input::placeholder {
    font-family: inherit !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    color: var(--bb-mid-gray) !important;
    opacity: 0.55 !important;
    font-weight: 400 !important;
}

/* ===== INPUT WRAPPERS ===== */
#bbModalContent .input-wrapper {
    position: relative !important;
}

#bbModalContent .password-wrapper {
    position: relative !important;
}

/* ===== PASSWORD FIELD CONTROLS - PROPERLY SPACED ===== */
/* Clear button (X) - leftmost */
#bbModalContent .password-clear {
    position: absolute !important;
    right: 68px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    color: var(--bb-mid-gray) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

#bbModalContent .password-wrapper:hover .password-clear,
#bbModalContent .form-input:focus ~ .password-clear {
    opacity: 0.6 !important;
    visibility: visible !important;
}

#bbModalContent .password-clear:hover {
    color: var(--bb-error) !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.2) !important;
}

/* Validation checkmark - middle */
#bbModalContent .validation-check {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
    color: var(--bb-success) !important;
}

#bbModalContent .form-input.success ~ .validation-check {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    animation: checkPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes checkPop {
    0% { transform: translateY(-50%) scale(0); }
    100% { transform: translateY(-50%) scale(1); }
}

/* Eye toggle - rightmost */
#bbModalContent .password-toggle {
    position: absolute !important;
    right: 36px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    color: var(--bb-mid-gray) !important;
    transition: all 0.2s ease !important;
}

#bbModalContent .password-toggle:hover {
    color: var(--bb-tactical-green) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

#bbModalContent .password-toggle svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

/* Adjust padding for password field to accommodate all controls */
#bbModalContent input[type="password"] {
    padding: 14px 120px 14px 20px !important;
}

/* ===== PASSWORD STRENGTH METER ===== */
#bbModalContent .password-strength {
    display: flex !important;
    gap: 4px !important;
    margin-top: 10px !important;
    height: 4px !important;
}

#bbModalContent .strength-bar {
    flex: 1 !important;
    background: var(--bb-ash) !important;
    border-radius: 4px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

#bbModalContent .strength-bar.active {
    background: var(--bb-success) !important;
}

#bbModalContent .strength-bar.active::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    animation: strengthPulse 1s ease-out !important;
}

@keyframes strengthPulse {
    to { left: 100%; }
}

#bbModalContent .strength-bar.active.weak {
    background: var(--bb-error) !important;
}

#bbModalContent .strength-bar.active.medium {
    background: var(--bb-warning) !important;
}

#bbModalContent .strength-bar.active.strong {
    background: var(--bb-success) !important;
}

/* Password strength text */
.password-strength-text {
    font-family: var(--bb-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.password-strength-text.active {
    opacity: 1 !important;
}

.password-strength-text.weak {
    color: var(--bb-error) !important;
}

.password-strength-text.medium {
    color: var(--bb-warning) !important;
}

.password-strength-text.strong {
    color: var(--bb-success) !important;
}


/* ===== ERROR MESSAGES ===== */
/* Error text takes NO vertical space until there is an error.
   min-height:20px + margin-top:8px reserved 28px under every single
   field permanently, which is what made a 3-field form look empty and
   stretched. Collapsed by default, expands when .active lands.

   font-family was var(--bb-font-body), which does not exist - the token
   is --font-body. The declaration was silently dropping. */
#bbModalContent .error-message {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--bb-error) !important;
    margin-top: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    transition: max-height 0.25s ease, margin-top 0.25s ease,
                opacity 0.25s ease, transform 0.25s ease !important;
}

#bbModalContent .error-message.active,
#bbModalContent .error-message.checking {
    max-height: 60px !important;
    margin-top: 8px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#bbModalContent .error-message.checking {
    color: var(--bb-mid-gray) !important;
    opacity: 1 !important;
}

/* Hint text under a field. Introduced with the address field and never
   styled, so it rendered at browser-default size and weight - on the one
   field that most needs to look deliberate.
   
   Sits ABOVE the error message in the DOM, so it keeps its own spacing
   and does not move when an error expands below it. */
#bbModalContent .form-hint {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: var(--bb-mid-gray) !important;
    opacity: 0.75 !important;
    margin-top: 6px !important;
    letter-spacing: 0.01em !important;
}

/* Shake on validation failure. The AJAX email/username checks only ever
   added .error (red border) with no motion, so an already-registered
   email failed silently in the corner of the eye.

   Reuses @keyframes shake at line 667 - the same wiggle the discount
   field and billing name already use, so every rejection on this form
   moves identically. A tenth shake keyframe in this codebase would just
   be one more thing to drift. */
#bbModalContent .form-input.error {
    animation: shake 0.5s ease-in-out !important;
}

@media (prefers-reduced-motion: reduce) {
    #bbModalContent .form-input.error { animation: none !important; }
}

/* ===== ZONE BADGE ===== */
#bbModalContent .zone-badge {
    display: none !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, var(--bb-success) 0%, #34D399 100%) !important;
    color: var(--bb-white) !important;
    border-radius: 12px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

#bbModalContent .zone-badge::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%) !important;
    animation: zoneShine 3s ease-in-out infinite !important;
}

@keyframes zoneShine {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

#bbModalContent .zone-badge.active {
    display: block !important;
    animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== BILLING TOGGLE ===== */
#bbModalContent .billing-toggle {
    display: flex !important;
    justify-content: center !important;
    gap: 0 !important;
    background: var(--bb-smoke) !important;
    border-radius: 14px !important;
    padding: 4px !important;
    margin-bottom: 28px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

#bbModalContent .billing-option {
    flex: 1 !important;
    padding: 14px 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bb-mid-gray) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

#bbModalContent .billing-option.active {
    background: var(--bb-white) !important;
    color: var(--bb-tactical-green) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transform: scale(1.02) !important;
}

#bbModalContent .save-badge {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--bb-success) 0%, #34D399 100%) !important;
    color: var(--bb-white) !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-left: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    animation: pulse 2s ease-in-out infinite !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
}

/* ===== TIER SELECTION CARDS — 2040 iOS PREMIUM ===== */
#bbModalContent .tier-grid {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 28px !important;
}

#bbModalContent .tier-option {
    display: block !important;
    padding: 14px 18px !important;
    background: var(--bb-white) !important;
    border: 1.5px solid var(--bb-ash) !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
}

/* Clean cards — no shimmer effect */
#bbModalContent .tier-option::before {
    display: none !important;
}

#bbModalContent .tier-option:hover {
    border-color: var(--bb-tactical-green) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(30, 94, 52, 0.1) !important;
}

#bbModalContent .tier-option:hover::before {
    display: none !important;
}

/* Selected tier — visible green fill */
#bbModalContent .tier-option:has(.tier-radio:checked) {
    border-color: var(--bb-tactical-green) !important;
    box-shadow: 0 0 0 3px rgba(30, 94, 52, 0.1) !important;
    background: linear-gradient(145deg, #E6F4EA 0%, #DCEEDF 100%) !important;
}

/* Stripe Master selected — keep the orange theme, don't go green */
#bbModalContent .tier-option.recommended:has(.tier-radio:checked) {
    border-color: var(--bb-high-vis-orange) !important;
    box-shadow: 0 0 0 3px rgba(245, 120, 66, 0.12) !important;
    background: linear-gradient(145deg, #FFF5EE 0%, #FFEDE0 100%) !important;
}

/* Recommended tier — warm glow */
#bbModalContent .tier-option.recommended {
    border-color: var(--bb-high-vis-orange) !important;
    background: linear-gradient(145deg, #FFFAF7 0%, #FFF5EE 100%) !important;
    box-shadow: 0 4px 16px rgba(245, 120, 66, 0.1) !important;
}

#bbModalContent .tier-option.recommended::after {
    content: 'RECOMMENDED' !important;
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    background: linear-gradient(135deg, var(--bb-high-vis-orange) 0%, #E86A2E 100%) !important;
    color: var(--bb-white) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 8px rgba(245, 120, 66, 0.25) !important;
    z-index: 10 !important;
}

/* Tier radio (hidden) */
#bbModalContent .tier-radio {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Tier info container */
#bbModalContent .tier-info {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 32px !important;
    position: relative !important;
    gap: 6px !important;
}

/* Radio circle — aligned with header row */
#bbModalContent .tier-info::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--bb-ash) !important;
    border-radius: 50% !important;
    background: var(--bb-white) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: none !important;
}

#bbModalContent .tier-radio:checked ~ .tier-info::before {
    border-color: var(--bb-tactical-green) !important;
    background: var(--bb-tactical-green) !important;
    box-shadow: 0 0 0 3px rgba(30, 94, 52, 0.1) !important;
}

#bbModalContent .tier-radio:checked ~ .tier-info::after {
    content: '✓' !important;
    position: absolute !important;
    left: 5px !important;
    top: 4px !important;
    color: var(--bb-white) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    transform: none !important;
}

/* ===== TIER HEADER: Name (left) + Price (right) ===== */
#bbModalContent .tier-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 28px !important;
}

#bbModalContent .tier-name {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--bb-font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bb-charcoal) !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

#bbModalContent .tier-name span {
    font-size: 22px !important;
}

/* Price — right-aligned, large dollar amount */
#bbModalContent .tier-price {
    font-family: var(--bb-font-display) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--bb-charcoal) !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 1px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    line-height: 1.2 !important;
}

/* Small unit text (/mo, forever, one-time) */
#bbModalContent .tier-price .price-unit {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--bb-mid-gray) !important;
    letter-spacing: -0.2px !important;
    margin-left: 1px !important;
}

/* ===== ANNUAL PRICING IN HEADER ===== */
#bbModalContent .tier-price .monthly-strike {
    color: var(--bb-mid-gray) !important;
    font-size: 14px !important;
    text-decoration: line-through !important;
    opacity: 0.5 !important;
    margin-right: 4px !important;
    font-weight: 500 !important;
}

.tier-price .annual-price {
    font-weight: 800 !important;
    color: var(--bb-charcoal) !important;
}

#bbModalContent .tier-price .annual-savings {
    /* Floating pill — positioned like RECOMMENDED badge but on right side */
    /* Positions relative to .tier-info (nearest positioned ancestor) */
    /* top: -25px = -11px from .tier-option top edge (14px padding offset) */
    /* right: 0 = 18px from card edge = directly above price numbers */
    position: absolute !important;
    top: -22px !important;
    right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, var(--bb-success) 0%, #34D399 100%) !important;
    color: var(--bb-white) !important;
    font-family: var(--bb-font-body) !important;
    font-size: 10px !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    letter-spacing: 1px !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
    z-index: 10 !important;
    margin: 0 !important;
    order: unset !important;
}

/* ===== FEATURE ITEMS — Clean individual lines ===== */
#bbModalContent .tier-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    position: relative !important;
    padding-top: 2px !important;
}

#bbModalContent .tier-feature-item {
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    color: #6B7280 !important;
    line-height: 1.4 !important;
}

/* Testimonial quotes — subtle italic styling */
#bbModalContent .tier-feature-item.testimonial {
    font-style: italic !important;
    color: #8B8B8B !important;
    font-size: 12px !important;
}

/* ===== PULSE "FREE" FOR STRIPE ===== */
.free-pulse {
    color: var(--bb-high-vis-orange) !important;
    font-weight: 800 !important;
    font-size: inherit !important;
    display: inline !important;
    animation: pulse 2s ease-in-out infinite !important;
}

/* ===== LEGEND SPOTS — URGENCY RED PULSE ===== */
.legend-spots-pulse {
    color: var(--bb-error) !important;
    font-weight: 800 !important;
    font-size: inherit !important;
    display: inline !important;
    animation: legendSpotsPulse 2s ease-in-out infinite !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.3) !important;
}

@keyframes legendSpotsPulse {
    0%, 100% { 
        opacity: 1; 
        color: var(--bb-error) !important;
        text-shadow: 0 0 8px rgba(239, 68, 68, 0.3) !important;
    }
    50% { 
        opacity: 0.8; 
        color: #DC2626 !important;
        text-shadow: 0 0 16px rgba(239, 68, 68, 0.5) !important;
    }
}

/* ===== ORDER SUMMARY ===== */
#bbModalContent .order-summary {
    background: linear-gradient(135deg, var(--bb-smoke) 0%, #F0F0F0 100%) !important;
    border: 2px solid var(--bb-ash) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 28px !important;
    position: relative !important;
    overflow: hidden !important;
}

#bbModalContent .order-summary::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -50% !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle, rgba(30, 94, 52, 0.05) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

#bbModalContent .order-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 1 !important;
}

#bbModalContent .order-label {
    font-family: var(--bb-font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--bb-tactical-green) !important;
}

#bbModalContent .order-price {
    font-family: var(--bb-font-display) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--bb-charcoal) !important;
}

#bbModalContent .order-benefits {
    border-top: 1px solid var(--bb-ash) !important;
    padding-top: 20px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;  /* ADD THIS */
}

#bbModalContent .benefit-item {
    font-family: var(--bb-font-body) !important;
    font-size: 14px !important;
    color: var(--bb-mid-gray) !important;
    margin-bottom: 10px !important;
    padding-left: 20px !important;
    position: relative !important;
}

#bbModalContent .benefit-item.playbook-highlight {
    background: linear-gradient(135deg, rgba(245, 120, 66, 0.1) 0%, rgba(245, 120, 66, 0.05) 100%) !important;
    padding: 8px 12px 8px 20px !important;
    margin: 8px -12px !important;
    border-radius: 8px !important;
    animation: playbookPulse 3s ease-in-out infinite !important;
    font-size: 15px !important;
    position: relative !important;
    overflow: visible !important;
}

#bbModalContent .benefit-item.playbook-highlight::before {
    content: '💰' !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    opacity: 0.6 !important;
}

#bbModalContent .benefit-item.playbook-highlight::after {
    content: 'VALUE' !important;
    position: absolute !important;
    top: -12px !important;
    right: 8px !important;
    background: var(--bb-high-vis-orange) !important;
    color: var(--bb-white) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    letter-spacing: 0.5px !important;
}

#bbModalContent .benefit-item::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--bb-success) !important;
    font-weight: 700 !important;
}

#bbModalContent .benefit-item.playbook-highlight {
    color: var(--bb-high-vis-orange) !important;
    font-weight: 600 !important;
}

/* ===== DISCOUNT FIELD STYLING ===== */
#bbModalContent #bbDiscountSection {
    margin-bottom: 24px !important;
}

#bbModalContent #bbDiscountSection .input-wrapper {
    position: relative !important;
}

#bbModalContent #bbDiscountInput {
    padding-right: 175px !important; /* Room for: checkmark + X clear + APPLY button */
}

/* Apply button — 2040 iOS premium pill inside input */
#bbModalContent .discount-apply-btn {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 10px 24px !important;
    background: linear-gradient(135deg, var(--bb-tactical-green) 0%, var(--bb-forest) 100%) !important;
    color: var(--bb-white) !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--bb-font-display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2 !important;
    height: calc(100% - 12px) !important;
    box-shadow: 0 2px 6px rgba(30, 94, 52, 0.2) !important;
}

#bbModalContent .discount-apply-btn:hover {
    background: linear-gradient(135deg, var(--bb-forest) 0%, var(--bb-emerald) 100%) !important;
    transform: translateY(-50%) scale(1.03) !important;
    box-shadow: 0 4px 12px rgba(30, 94, 52, 0.3) !important;
}

#bbModalContent .discount-apply-btn:active {
    transform: translateY(-50%) scale(0.97) !important;
    box-shadow: 0 1px 4px rgba(30, 94, 52, 0.2) !important;
}

/* X clear button — sits between checkmark and APPLY */
#bbModalContent .discount-clear-btn {
    position: absolute !important;
    right: 100px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    display: none !important;  /* Hidden by default, shown via JS */
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
    padding: 0 !important;
}

#bbModalContent .discount-clear-btn svg {
    stroke: var(--bb-mid-gray) !important;
    transition: stroke 0.2s ease !important;
}

#bbModalContent .discount-clear-btn:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

#bbModalContent .discount-clear-btn:hover svg {
    stroke: var(--bb-error) !important;
}

#bbModalContent .discount-clear-btn:active {
    transform: translateY(-50%) scale(0.9) !important;
}

#bbModalContent .discount-clear-btn.visible {
    display: flex !important;
}

/* Discount checkmark — sits left of X clear button */
#bbModalContent #bbDiscountCheck {
    position: absolute !important;
    right: 136px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
    color: var(--bb-success) !important;
    z-index: 2 !important;
}

#bbModalContent #bbDiscountInput.success ~ #bbDiscountCheck {
    opacity: 1 !important;
    animation: checkPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* Discount message */
#bbModalContent #bbDiscountMessage {
    margin-top: 8px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    display: none !important;
}

#bbModalContent #bbDiscountMessage.show {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#bbModalContent #bbDiscountMessage.success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--bb-forest) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

#bbModalContent #bbDiscountMessage.loading {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--bb-charcoal) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* ===== ORDER SUMMARY DISCOUNT STYLING ===== */
.discount-applied {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px dashed var(--bb-ash);
    color: var(--bb-forest);
    font-weight: 600;
}

.discount-amount {
    color: var(--bb-tactical-green);
}

.total-line {
    display: flex;
    justify-content: space-between;
    padding: 16px 0 12px;
    border-top: 2px solid var(--bb-charcoal);
    font-size: 18px;
    font-weight: 800;
}

/* ===== SQUARE CARD FORM STYLING ===== */
.square-card-container {
    background: #FFFFFF;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    margin-bottom: 60px !important;  /* Make room for name field below */
    transition: all 0.3s ease;
    position: relative;
}

.square-card-container:hover {
    border-color: #9A9A9A;
}

.square-card-container.processing {
    opacity: 0.6;
    pointer-events: none;
}

.square-card-container.processing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #1E5E34;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

/* ===== SUCCESS SCREEN LOADING BAR ===== */
.loading-section {
    width: 400px;
    max-width: 90vw;
    margin: 0 auto;
    animation: fadeUp 0.5s ease-out 1.2s both;
}

.loading-bar {
    height: 8px;
    background: rgba(0,0,0,0.06);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #1E5E34 0%, #3A8B5A 100%);
    width: 0;
    border-radius: 100px;
    animation: loadProgress 3s ease-out 0.5s forwards;
}

@keyframes loadProgress {
    to { width: 100%; }
}

.loading-text {
    margin-top: 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    text-align: center;
}

/* ===== SUCCESS ANIMATION SCREEN ===== */
#successScreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100002 !important; /* Higher than modal */
}

#successScreen.active {
    display: flex !important;
}

.success-content {
    text-align: center;
    animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-icon {
    width: 140px;
    height: 140px;
    margin: 0 auto 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    border-radius: 50%;
    box-shadow: 0 25px 60px rgba(16, 185, 129, 0.4);
    animation: iconPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s both;
}

@keyframes iconPop {
    from {
        transform: scale(0) rotate(-180deg);
    }
    to {
        transform: scale(1) rotate(0deg);
    }
}

.success-icon svg {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    stroke: white;
    stroke-width: 5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: checkDraw 0.8s ease-out 0.8s forwards;
}

@keyframes checkDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.success-title {
    font-size: 56px;
    font-weight: 900;
    color: #1A1A1A;
    margin-bottom: 24px;
    animation: fadeUp 0.8s ease-out 0.6s both;
}

.success-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 50px;
    animation: fadeUp 0.8s ease-out 0.8s both;
}

.success-subtitle .highlight {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #1E5E34 0%, #3A8B5A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 24px;
    display: block;
    margin-top: 8px;
}

.tier-badge {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 20px 40px;
    background: linear-gradient(135deg, #1E5E34 0%, #3A8B5A 100%);
    color: white;
    border-radius: 100px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 40px;
    animation: fadeUp 0.8s ease-out 1s both, badgePulse 2s ease-in-out 2s infinite;
    box-shadow: 
        0 20px 40px rgba(30, 94, 52, 0.4),
        0 0 80px rgba(30, 94, 52, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.tier-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    animation: badgeShine 3s ease-in-out 2s infinite;
}

@keyframes badgeShine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@keyframes badgePulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 20px 40px rgba(30, 94, 52, 0.4),
            0 0 80px rgba(30, 94, 52, 0.2),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 
            0 25px 50px rgba(30, 94, 52, 0.5),
            0 0 100px rgba(30, 94, 52, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.4);
    }
}

.tier-badge.show {
    display: inline-flex !important;
}

/* STRIPE MASTER - PREMIUM ORANGE */
.tier-badge.master {
    background: linear-gradient(135deg, #F57842 0%, #E86A2E 100%);
    box-shadow: 
        0 20px 40px rgba(245, 120, 66, 0.4),
        0 0 80px rgba(245, 120, 66, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* LAWN LEGEND - PURE GOLD */
.tier-badge.legend {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    box-shadow: 
        0 20px 40px rgba(255, 215, 0, 0.4),
        0 0 100px rgba(255, 215, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

/* ===== BLADE BOSS CREDIT CARD ===== */
.payment-section-title {
    margin-bottom: 20px !important;
}

.bb-credit-card {
    position: relative;
    width: 100%;
    max-width: 100%;  /* Full width to match other elements */
    margin: 0 0 24px 0;  /* Remove auto margins */
    aspect-ratio: 1.586;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    border-radius: 16px;
    padding: 24px !important;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(30, 94, 52, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* ===== SQUARE PAYMENT FIELDS INTEGRATION ===== */
/* Keep the container minimal - positioning handled by inline styles */
#card-container {
    background: transparent !important;
    border: none !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Style the Square input containers */
#card-container .sq-input-container {
    border: none !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
}

/* Remove bottom margin from last input */
#card-container .sq-input-container:last-child {
    margin-bottom: 0 !important;
}

/* Hover state for Square inputs */
#card-container .sq-input-container:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Focus state */
#card-container .sq-input-container.is-focus {
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 2px var(--bb-high-vis-orange) !important;
}

/* Error state */
#card-container .sq-input-container.is-error {
    background: rgba(239, 68, 68, 0.1) !important;
    box-shadow: 0 0 0 2px var(--bb-error) !important;
}

/* Square input text styling */
/* Square input text styling - FORCE DARK TEXT */
#card-container input,
#card-container .sq-input,
#card-container input[type="text"],
#card-container input[type="tel"],
#card-container input::placeholder {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    font-size: 16px !important;
    font-family: var(--bb-font-body) !important;
}

/* Square placeholder text */
#card-container .sq-input::placeholder {
    color: #9A9A9A !important; /* Mid-gray instead of white */
    font-size: 14px !important;
}

/* Square error messages */
#card-container .sq-error-message {
    color: #FF6B6B !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* Cardholder name field styling */
.bb-card-field input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

.bb-card-field input:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.bb-card-field input:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 2px var(--bb-high-vis-orange) !important;
    outline: none !important;
}

.bb-card-field input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#bbModalContent .bb-card-field input:not(:placeholder-shown):not(:focus) {
    color: #FFFFFF !important;  /* White text when filled */
    background: rgba(255, 255, 255, 0.05) !important;  /* Very subtle background */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;  /* Embossed effect */
}

/* Remove uppercase transform for typed text */
.bb-card-field input#billingName {
    text-transform: uppercase !important;
}

/* ===== BILLINGNAME NUCLEAR OVERRIDE =====
   This input lives on a dark credit card but inherits light-theme .form-input styling.
   These overrides MUST win the specificity war against #bbModalContent .form-input rules. */
#bbModalContent .bb-credit-card .bb-card-field input#billingName {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

#bbModalContent .bb-credit-card .bb-card-field input#billingName:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: none !important;
    transform: none !important;
    box-shadow: none !important;
}

#bbModalContent .bb-credit-card .bb-card-field input#billingName:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 0 0 2px var(--bb-high-vis-orange) !important;
    transform: none !important;
    outline: none !important;
}

#bbModalContent .bb-credit-card .bb-card-field input#billingName.success,
#bbModalContent .bb-credit-card .bb-card-field input#billingName.error {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

#bbModalContent .bb-credit-card .bb-card-field input#billingName::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

/* ===== CHROME AUTOFILL OVERRIDE FOR DARK CREDIT CARD =====
   Chrome forces a light bg on autofilled fields. These rules nuke it. */
#bbModalContent .bb-credit-card .bb-card-field input#billingName:-webkit-autofill,
#bbModalContent .bb-credit-card .bb-card-field input#billingName:-webkit-autofill:hover,
#bbModalContent .bb-credit-card .bb-card-field input#billingName:-webkit-autofill:focus,
#bbModalContent .bb-credit-card .bb-card-field input#billingName:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #2D2D2D inset !important;  /* Matches card gradient midpoint */
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;  /* Prevents Chrome from ever showing its color */
    caret-color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Loading state for Square */
.square-loading {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    text-align: center !important;
}

.square-loading svg {
    animation: spin 1s linear infinite !important;
}

/* Card shimmer effect */
.bb-credit-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 70%
    );
    transform: rotate(45deg);
    animation: cardShimmer 3s ease-in-out infinite;
}

@keyframes cardShimmer {
    0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Card logo */
.bb-card-logo {
    text-align: right;
    margin-bottom: 40px;
}

.bb-card-logo img {
    height: 40px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Card bottom info - Full width name field with padding */
.bb-card-bottom {
    margin-top: 20px !important;
    padding: 0 24px 24px 24px !important;  /* Force the padding */
}

/* Remove the margin-bottom we added to card-container */
#card-container {
    margin-bottom: 0 !important;  /* Reset this */
}

.bb-card-field {
    width: 100% !important;  /* Full width of container */
}

.bb-card-bottom .bb-card-field {
    width: 95%;
    margin: 0 auto;  /* Center it horizontally */
}

.bb-card-field label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bb-card-field {
    position: relative;
}

.bb-card-field label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.bb-card-field input:focus {
    outline: none;
    border-bottom-color: var(--bb-high-vis-orange);
}

/* Card type icon — shows detected card network logo */
.bb-card-type {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 32px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.bb-card-type.active {
    opacity: 0.9;
}

.bb-card-type svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Payment error styling */
.payment-error {
    background: #FEE2E2;
    border: 1px solid #F87171;
    color: #991B1B;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 14px;
    display: none;
}

.payment-error:before {
    content: '⚠️';
    margin-right: 8px;
}

/* Billing details styling */
.billing-details {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #ECECEC;
}

.billing-details .form-row {
    gap: 16px;
}

/* Order summary styling */
.order-summary {
    background: #F9F9F7;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E0E0E0;
}

.order-label {
    font-weight: 600;
    color: #1A1A1A;
    font-size: 18px;
}

.order-price {
    font-size: 24px;
    font-weight: 700;
    color: #1E5E34;
}

.order-benefits {
    margin-top: 12px;
}

/* .benefit-item rules moved to #bbModalContent scope at lines 1197-1252 */

/* Security note */
.security-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #666;
    font-size: 13px;
    justify-content: center;
}

.security-note svg {
    color: #10B981;
}

/* ===== TERMS CHECKBOX ===== */
#bbModalContent .checkbox-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 28px 0 !important;
}

#bbModalContent .checkbox {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid var(--bb-ash) !important;
    border-radius: 6px !important;
    background: var(--bb-white) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

#bbModalContent .checkbox:hover {
    border-color: var(--bb-mid-gray) !important;
}

#bbModalContent .checkbox:checked {
    background: var(--bb-tactical-green) !important;
    border-color: var(--bb-tactical-green) !important;
    animation: checkboxPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes checkboxPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

#bbModalContent .checkbox:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--bb-white) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

#bbModalContent .checkbox-label {
    font-family: var(--bb-font-body) !important;
    font-size: 14px !important;
    color: var(--bb-mid-gray) !important;
    line-height: 1.6 !important;
}

#bbModalContent .checkbox-label a {
    color: var(--bb-tactical-green) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#bbModalContent .checkbox-label a:hover {
    text-decoration: underline !important;
    color: var(--bb-forest) !important;
}

/* ===== BUTTONS - ULTRA MODERN ===== */
#bbModalContent .button-group {
    display: flex !important;
    gap: 16px !important;
    margin-top: 32px !important;
}

/* Mobile button spacing fix for browser bars */
@media (max-width: 640px) {
    #bbModalContent .button-group {
        margin-bottom: 80px !important;
    }
}

#bbModalContent .btn {
    flex: 1 !important;
    padding: 20px 28px !important;
    border: none !important;
    border-radius: 14px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    transform: translateZ(0) !important;
}

/* Primary Button - THE CONVERTER */
#bbModalContent .btn-primary {
    background: linear-gradient(135deg, var(--bb-high-vis-orange) 0%, var(--bb-orange-hover) 100%) !important;
    color: var(--bb-white) !important;
    box-shadow: 
        0 4px 14px rgba(245, 120, 66, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

#bbModalContent .btn-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.5s ease !important;
}

#bbModalContent .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--bb-orange-hover) 0%, var(--bb-orange-active) 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 
        0 8px 24px rgba(245, 120, 66, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

#bbModalContent .btn-primary:hover::before {
    left: 100% !important;
}

#bbModalContent .btn-primary:active {
    background: var(--bb-orange-active) !important;
    transform: translateY(-1px) !important;
}

/* Secondary Button */
#bbModalContent .btn-secondary {
    background: transparent !important;
    color: var(--bb-tactical-green) !important;
    border: 2px solid var(--bb-tactical-green) !important;
    position: relative !important;
}

#bbModalContent .btn-secondary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 100% !important;
    background: var(--bb-tactical-green) !important;
    transition: width 0.3s ease !important;
    z-index: -1 !important;
}

#bbModalContent .btn-secondary:hover {
    color: var(--bb-white) !important;
    border-color: var(--bb-tactical-green) !important;
    box-shadow: 0 4px 14px rgba(30, 94, 52, 0.3) !important;
}

#bbModalContent .btn-secondary:hover::before {
    width: 100% !important;
}

/* Disabled state */
#bbModalContent .btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Full width button */
#bbModalContent .btn-full {
    width: 100% !important;
}

/* Loading state */
#bbModalContent .btn-loading {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

#bbModalContent .btn.loading .btn-text {
    display: none !important;
}

#bbModalContent .btn.loading .btn-loading {
    display: inline-flex !important;
}

#bbModalContent .spinner {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: var(--bb-white) !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    margin-right: 10px !important;
}

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

/* ===== SUCCESS STATE ===== */
#bbModalContent .success-message {
    text-align: center !important;
    padding: 60px 24px !important;
}

#bbModalContent .success-icon {
    width: 100px !important;
    height: 100px !important;
    background: linear-gradient(135deg, var(--bb-success) 0%, #34D399 100%) !important;
    border-radius: 50% !important;
    margin: 0 auto 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 12px 32px rgba(16, 185, 129, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
    animation: successPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes successPop {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.1) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

#bbModalContent .success-icon svg {
    width: 50px !important;
    height: 50px !important;
    color: var(--bb-white) !important;
    fill: var(--bb-white) !important;
}

#countdown {
    font-weight: 700 !important;
    color: var(--bb-high-vis-orange) !important;
    font-size: 1.2em !important;
    display: inline-block !important;
    animation: countPulse 1s ease-in-out infinite !important;
}

@keyframes countPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===== SECURITY NOTE ===== */
#bbModalContent .security-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 20px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    color: var(--bb-mid-gray) !important;
    opacity: 0.8 !important;
}

#bbModalContent .security-note svg {
    width: 16px !important;
    height: 16px !important;
    color: var(--bb-success) !important;
    fill: var(--bb-success) !important;
}

/* ===== PAYMENT ERROR ===== */
#bbModalContent .payment-error {
    display: none !important;
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--bb-error) !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 640px) {
    #bbModalContent {
        min-height: calc(100vh + 100px) !important;
        padding: 0, 0, 60px, 0 !important;
    }
    
    #bbModalContent .signup-wrapper {
        border-radius: 0 !important;
        min-height: auto !important;
        padding-bottom: 60px !important;
        overflow: clip !important;
    }
    
    #bbModalClose {
        background: rgba(0, 0, 0, 0.7) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }
    
    #bbModalClose svg {
        stroke: var(--bb-white) !important;
    }
    
    .bb-scroll-indicator {
        right: 20px !important;
        bottom: 40px !important;
    }

    #bbModalContainer {
        height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Mobile-only: Hide cardholder inside card, show it outside */
@media (max-width: 640px) {
    .bb-credit-card .bb-card-bottom {
        display: none !important;
    }
    
    .bb-mobile-cardholder {
        display: block !important;
    }
}

/* More specific selectors to beat nuclear reset */
@media (max-width: 640px) {
    #bbModalContent .bb-credit-card .bb-card-bottom {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #bbModalContent .bb-mobile-cardholder {
        display: block !important;
        margin-top: 20px !important; /* Padding above field */
    }
}

/* Desktop: Hide mobile cardholder field */
@media (min-width: 641px) {
    .bb-mobile-cardholder {
        display: none !important;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes playbookPulse {
    0%, 100% {
        background: linear-gradient(135deg, rgba(245, 120, 66, 0.1) 0%, rgba(245, 120, 66, 0.05) 100%);
        transform: scale(1);
    }
    50% {
        background: linear-gradient(135deg, rgba(245, 120, 66, 0.15) 0%, rgba(245, 120, 66, 0.08) 100%);
        transform: scale(1.02);
    }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* ===== NUCLEAR FONT OVERRIDES ===== */
#bbModalContainer,
#bbModalContainer * {
    font-family: var(--bb-font-body) !important;
    text-transform: none !important;
    text-decoration: unset !important;
    font-style: normal !important;
}

/* Override for monthly strike-through */
#bbModalContainer .monthly-strike {
    text-decoration: line-through !important;
}

/* Display font overrides */
#bbModalContainer .step-title,
#bbModalContainer .tier-name,
#bbModalContainer .tier-price,
#bbModalContainer .order-label,
#bbModalContainer .order-price {
    font-family: var(--bb-font-display) !important;
}

/* ===== HIDE WORDPRESS ADMIN BAR WHEN MODAL IS OPEN ===== */
body.modal-open #wpadminbar {
    z-index: 99999 !important;
}

/* ===== PREVENT BODY SCROLL WHEN SIGNUP MODAL IS OPEN ===== */
body.signup-modal-open {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}

/* ===== ERROR TOAST NOTIFICATION ===== */
.bb-error-toast {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    background: var(--bb-error) !important;
    color: var(--bb-white) !important;
    padding: 20px 28px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3) !important;
    z-index: 100002 !important;
    max-width: 400px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes slideInRight {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== MISC OVERALL ADDITIONS ===== */

/* Smooth scroll behavior for steps */
.bb-modal-scroll-container {
    scroll-behavior: smooth !important;
}

/* Step transition overlay */
.step-transition-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--bb-white) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
    z-index: 50 !important;
}

.step-transition-overlay.active {
    opacity: 0.8 !important;
}

/* Add subtle fade to steps */
#bbModalContent .step {
    transition: opacity 0.4s ease !important;
}

#bbModalContent .step.fading {
    opacity: 0.3 !important;
}

/* ===== FAILSAFE VISIBILITY FIX ===== */
#bbModalContainer.active #bbModalContent,
#bbModalContainer.active .signup-wrapper,
#bbModalContainer.active .step.active,
#bbModalContainer.active .form-content {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =============================================================
   ZONE COMPATIBILITY WARNING — Transition & Unsupported Modals
   ============================================================= */

.bb-zone-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 15, 21, 0.75) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.bb-zone-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Modal card */
.bb-zone-modal {
    width: 100% !important;
    max-width: 420px !important;
    background: var(--bb-white) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255,255,255,0.05) !important;
    transform: scale(0.88) translateY(30px) !important;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
}

.bb-zone-overlay.active .bb-zone-modal {
    transform: scale(1) translateY(0) !important;
}

/* Close button */
.bb-zone-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
    backdrop-filter: blur(4px) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bb-zone-close:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

/* ===== STATUS HEADER ===== */
.bb-zone-header {
    position: relative !important;
    padding: 32px 28px 24px !important;
    text-align: center !important;
    overflow: hidden !important;
}

.bb-zone-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
}

.bb-zone-header.partial::before {
    background: linear-gradient(160deg, #92400E 0%, #B45309 40%, #D97706 100%) !important;
}

.bb-zone-header.unsupported::before {
    background: linear-gradient(160deg, #7F1D1D 0%, #991B1B 40%, #B91C1C 100%) !important;
}

.bb-zone-header::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E") !important;
    z-index: 0 !important;
    opacity: 0.5 !important;
}

.bb-zone-header > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Icon ring */
.bb-zone-icon-ring {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 34px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    animation: bbZoneIconPop 0.5s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    padding: 0 !important;
}

@keyframes bbZoneIconPop {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.bb-zone-header.partial .bb-zone-icon-ring {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3) !important;
}

.bb-zone-header.unsupported .bb-zone-icon-ring {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.25) !important;
}

/* Header text */
.bb-zone-title {
    font-family: var(--bb-font-display) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: white !important;
    letter-spacing: -0.3px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
}

.bb-zone-subtitle {
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.5 !important;
}

/* Zone badge pill in header */
.bb-zone-header .bb-zone-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 14px !important;
    padding: 6px 14px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 100px !important;
    font-family: var(--bb-font-display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: white !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(4px) !important;
}

.bb-zone-badge-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: 0 0 6px currentColor !important;
}

.partial .bb-zone-badge-dot { color: #FBBF24 !important; }
.unsupported .bb-zone-badge-dot { color: #FCA5A5 !important; }

/* ===== BODY CONTENT ===== */
.bb-zone-body {
    padding: 24px 28px 28px !important;
}

/* Info cards */
.bb-zone-info-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
}

.bb-zone-info-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: var(--bb-off-white) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.bb-zone-info-card:hover {
    background: var(--bb-smoke) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

.bb-zone-info-icon {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

.bb-zone-info-card.amber .bb-zone-info-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.08)) !important;
}

.bb-zone-info-card.red .bb-zone-info-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(185, 28, 28, 0.08)) !important;
}

.bb-zone-info-text h4 {
    font-family: var(--bb-font-display) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--bb-charcoal) !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
}

.bb-zone-info-text p {
    font-size: 12px !important;
    color: var(--bb-mid-gray) !important;
    line-height: 1.5 !important;
}

/* ===== EMAIL CAPTURE (unsupported modal only) ===== */
.bb-zone-email-capture {
    margin-bottom: 20px !important;
}

.bb-zone-email-label {
    font-family: var(--bb-font-display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--bb-charcoal) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.bb-zone-email-row {
    display: flex !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.bb-zone-email-input {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 2px solid var(--bb-ash) !important;
    border-radius: 10px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 14px !important;
    color: var(--bb-charcoal) !important;
    background: var(--bb-white) !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.bb-zone-email-input:focus {
    border-color: var(--bb-high-vis-orange) !important;
    box-shadow: 0 0 0 3px rgba(245, 120, 66, 0.12) !important;
}

.bb-zone-email-input::placeholder {
    color: var(--bb-mid-gray) !important;
}

.bb-zone-notify-btn {
    padding: 12px 20px !important;
    background: linear-gradient(135deg, var(--bb-high-vis-orange), var(--bb-orange-hover)) !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--bb-font-display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.bb-zone-notify-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(245, 120, 66, 0.35) !important;
}

.bb-zone-notify-btn:active {
    transform: translateY(0) !important;
}

.bb-zone-notify-btn.submitted {
    background: linear-gradient(135deg, var(--bb-success), #059669) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    font-size: 11px !important;
}

.bb-zone-notify-btn.loading {
    opacity: 0.85 !important;
    pointer-events: none !important;
}

/* Spinner inside notify button */
.bb-zone-btn-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
    border-radius: 50% !important;
    animation: bbZoneSpin 0.6s linear infinite !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
}

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

/* ===== ACTION BUTTONS ===== */
.bb-zone-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.bb-zone-btn {
    width: 100% !important;
    padding: 14px 20px !important;
    border: none !important;
    border-radius: 14px !important;
    font-family: var(--bb-font-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    overflow: hidden !important;
}

.bb-zone-btn.primary {
    background: linear-gradient(135deg, var(--bb-tactical-green), var(--bb-forest)) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(30, 94, 52, 0.3) !important;
}

.bb-zone-btn.primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(30, 94, 52, 0.4) !important;
}

.bb-zone-btn.primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(30, 94, 52, 0.3) !important;
}

.bb-zone-btn.secondary {
    background: var(--bb-smoke) !important;
    color: var(--bb-charcoal) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    border: 1.5px solid var(--bb-ash) !important;
    border-radius: 12px !important;
}

.bb-zone-btn.secondary:hover {
    color: var(--bb-charcoal) !important;
    background: var(--bb-ash) !important;
    border-color: var(--bb-mid-gray) !important;
}

/* ===== DIVIDER & FINE PRINT ===== */
.bb-zone-divider {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--bb-ash), transparent) !important;
    margin: 4px 0 16px !important;
}

.bb-zone-fine-print {
    text-align: center !important;
    font-size: 11px !important;
    color: var(--bb-mid-gray) !important;
    margin-top: 12px !important;
    line-height: 1.5 !important;
}

.bb-zone-fine-print a {
    color: var(--bb-forest) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.bb-zone-fine-print a:hover {
    text-decoration: underline !important;
}

/* ===== NEAREST NEIGHBOR BADGE VARIANT ===== */
#bbModalContent .zone-badge.bb-zone-nearest {
    background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

/* =============================================================
   CONSOLIDATED 480px RESPONSIVE OVERRIDES
   All phone-specific rules in one place. Previously scattered
   across 6 separate @media blocks throughout the file.
   ============================================================= */
@media (max-width: 480px) {

    /* --- Floating CTA Button ---
       Class-scoped now, and no !important. The label swap moved up into
       the component block; keeping a second copy here meant two rules
       fighting over the same spans in the same file. */
    .bb-floating-cta {
        bottom: 20px;
        right: 20px;
        padding: 16px 24px;
        font-size: 14px;
    }
    
    /* --- Form Layout --- */
    #bbModalContent .form-content {
        padding: 32px 24px 140px 24px !important;
    }
    
    #bbModalContent .form-row {
        grid-template-columns: 1fr !important;
    }
    
    /* --- Success Screen Tier Badge --- */
    .tier-badge {
        padding: 16px 32px;
        font-size: 16px;
    }
    
    /* --- Credit Card --- */
    .bb-credit-card {
        max-width: 100%;
        padding: 20px;
    }
    
    /* --- Order Summary --- */
    .order-summary {
        padding: 16px;
    }
    
    .order-label {
        font-size: 16px;
    }
    
    .order-price {
        font-size: 20px;
    }
    
    .billing-details .form-row {
        flex-direction: column;
    }
}

/* =============================================================
   MOBILE: PAGE 2 (TIER CARDS) + ZONE WARNING MODAL
   Premium 2040 iOS — optimized for 375px and down
   ============================================================= */
@media (max-width: 640px) {
    
    /* ===== STEP 2 HEADER — breathable on mobile ===== */
    #bbModalContent .step-header {
        margin-bottom: 18px !important;
    }
    
    #bbModalContent .step-indicator {
        font-size: 11px !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 8px !important;
    }
    
    #bbModalContent .step-title {
        font-size: 24px !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 6px !important;
    }
    
    #bbModalContent .step-description {
        font-size: 14px !important;
        color: #6B7280 !important;
    }
    
    /* ===== BILLING TOGGLE — compact mobile ===== */
    #bbModalContent .billing-toggle {
        margin-bottom: 16px !important;
        border-radius: 12px !important;
        padding: 3px !important;
    }
    
    #bbModalContent .billing-option {
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }
    
    #bbModalContent .save-badge {
        font-size: 9px !important;
        padding: 2px 7px !important;
        margin-left: 5px !important;
    }
    
    /* ===== TIER GRID — more breathing room ===== */
    #bbModalContent .tier-grid {
        gap: 14px !important;
        margin-bottom: 24px !important;
    }
    
    /* ===== TIER CARDS — spacious, readable ===== */
    #bbModalContent .tier-option {
        padding: 18px 18px !important;
        border-radius: 16px !important;
        border-width: 2px !important;
    }
    
    /* RECOMMENDED badge — matches savings pill size + position */
    #bbModalContent .tier-option.recommended::after {
        top: -9px !important;
        left: 18px !important;
        right: auto !important;
        transform: none !important;
        padding: 4px 12px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.6px !important;
        line-height: 1.2 !important;
        border-radius: 20px !important;
    }
    
    /* Match other cards' padding so savings pills align consistently */
    #bbModalContent .tier-option.recommended {
        padding-top: 18px !important;
    }
    
    /* ===== TIER INFO — radio vertically centered ===== */
    #bbModalContent .tier-info {
        padding-left: 34px !important;
        gap: 8px !important;
    }
    
    /* Radio dot — vertically centered on card */
    #bbModalContent .tier-info::before {
        width: 22px !important;
        height: 22px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-width: 2px !important;
    }
    
    #bbModalContent .tier-radio:checked ~ .tier-info::before {
        box-shadow: 0 0 0 3px rgba(30, 94, 52, 0.12) !important;
    }
    
    #bbModalContent .tier-radio:checked ~ .tier-info::after {
        left: 6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 12px !important;
        line-height: 22px !important;
    }
    
    /* ===== TIER HEADER ROW — name + price ===== */
    #bbModalContent .tier-header {
        gap: 10px !important;
        flex-wrap: nowrap !important;
        min-height: 28px !important;
        align-items: center !important;
        margin-top: 4px !important;
    }
    
    /* Playbook tier: stack price below name (too long for one line) */
    #bbModalContent .tier-option:last-child .tier-header {
        flex-wrap: wrap !important;
    }
    
    #bbModalContent .tier-option:last-child .tier-name {
        width: 100% !important;
    }
    
    #bbModalContent .tier-option:last-child .tier-price {
        width: 100% !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin-top: -4px !important;
    }
    
    #bbModalContent .tier-name {
        font-size: 17px !important;
        gap: 8px !important;
        min-width: 0 !important;
        color: #1F2937 !important;
    }
    
    #bbModalContent .tier-name span {
        font-size: 20px !important;
    }
    
    /* ===== PRICE — bold and readable ===== */
    #bbModalContent .tier-price {
        font-size: 22px !important;
        flex-shrink: 0 !important;
        color: #1F2937 !important;
    }
    
    #bbModalContent .tier-price .price-unit {
        font-size: 12px !important;
        color: #9CA3AF !important;
    }
    
    /* Strikethrough original price — visible but clearly "old" */
    #bbModalContent .tier-price .monthly-strike {
        font-size: 14px !important;
        margin-right: 3px !important;
        color: #9CA3AF !important;
    }
    
    /* Savings badge — floating pill top-right like desktop */
    #bbModalContent .tier-price .annual-savings {
        position: absolute !important;
        top: -26px !important;
        right: 0 !important;
        display: inline-flex !important;
        font-size: 10px !important;
        padding: 4px 12px !important;
        margin: 0 !important;
        border-radius: 20px !important;
        font-weight: 800 !important;
        letter-spacing: 0.6px !important;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
        order: unset !important;
        z-index: 10 !important;
    }
    
    /* ===== FEATURES — readable, spaced ===== */
    #bbModalContent .tier-features {
        gap: 3px !important;
        padding-top: 4px !important;
    }
    
    #bbModalContent .tier-feature-item {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
        color: #374151 !important;
    }
    
    #bbModalContent .tier-feature-item.testimonial {
        font-size: 12.5px !important;
        color: #9CA3AF !important;
        margin-top: 2px !important;
    }
    
    /* ===== BUTTON GROUP ===== */
    #bbModalContent .button-group {
        gap: 10px !important;
        margin-top: 4px !important;
    }
    
    /* ===== ZONE WARNING MODAL — mobile-first redesign ===== */
    
    /* Overlay — centered on screen */
    .bb-zone-overlay {
        padding: 16px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    
    /* Modal card — centered, scrollable body */
    .bb-zone-modal {
        position: relative !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: calc(100% - 32px) !important;
        height: auto !important;
        overflow: hidden !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Animate from bottom on mobile (iOS sheet feel) */
    .bb-zone-overlay .bb-zone-modal {
        transform: translateY(100%) !important;
    }
    
    .bb-zone-overlay.active .bb-zone-modal {
        transform: translateY(0) !important;
    }
    
    /* Close button — tighter */
    .bb-zone-close {
        top: 12px !important;
        right: 12px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    
    /* Header — locked at top, never scrolls */
    .bb-zone-header {
        padding: 24px 20px 18px !important;
        flex-shrink: 0 !important;
    }
    
    .bb-zone-icon-ring {
        width: 56px !important;
        height: 56px !important;
        font-size: 26px !important;
        margin: 0 auto 12px !important;
    }
    
    .bb-zone-title {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }
    
    .bb-zone-subtitle {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    .bb-zone-header .bb-zone-badge {
        margin-top: 10px !important;
        padding: 4px 12px !important;
        font-size: 10px !important;
    }
    
    /* Body — scrollable area under sticky header */
    .bb-zone-body {
        padding: 16px 18px 20px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        min-height: 0 !important;
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 20px)) !important;
    }
    
    /* Info cards — more compact */
    .bb-zone-info-cards {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    
    .bb-zone-info-card {
        padding: 10px 12px !important;
        gap: 10px !important;
        border-radius: 10px !important;
    }
    
    .bb-zone-info-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
    
    .bb-zone-info-text h4 {
        font-size: 12px !important;
        margin-bottom: 1px !important;
    }
    
    .bb-zone-info-text p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    
    /* Email capture — stack vertically */
    .bb-zone-email-capture {
        margin-bottom: 14px !important;
    }
    
    .bb-zone-email-label {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
    
    .bb-zone-email-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .bb-zone-email-input {
        padding: 12px 14px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        width: 100% !important;
    }
    
    .bb-zone-notify-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    
    /* Action buttons */
    .bb-zone-actions {
        gap: 6px !important;
    }
    
    .bb-zone-btn {
        border-radius: 12px !important;
        font-size: 13px !important;
    }
    
    .bb-zone-btn.primary {
        padding: 14px 18px !important;
    }
    
    .bb-zone-btn.secondary {
        padding: 8px 18px !important;
        font-size: 12px !important;
    }
    
    /* Divider + fine print */
    .bb-zone-divider {
        margin: 2px 0 10px !important;
    }
    
    .bb-zone-fine-print {
        font-size: 10px !important;
        margin-top: 8px !important;
    }
}

/* ===== EXTRA SMALL (320-375px) — iPhone SE / mini ===== */
@media (max-width: 380px) {
    
    /* Tier header: if still too cramped, let price wrap below */
    #bbModalContent .tier-header {
        flex-wrap: wrap !important;
    }
    
    /* Full-width price when wrapped */
    #bbModalContent .tier-price {
        font-size: 17px !important;
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 2px !important;
    }
    
    /* Tier name can take full width */
    #bbModalContent .tier-name {
        font-size: 14px !important;
        width: 100% !important;
    }
    
    #bbModalContent .tier-name span {
        font-size: 16px !important;
    }
    
    /* Even tighter card padding */
    #bbModalContent .tier-option {
        padding: 10px 12px !important;
    }
    
    #bbModalContent .tier-info {
        padding-left: 24px !important;
    }
    
    #bbModalContent .tier-info::before {
        width: 16px !important;
        height: 16px !important;
    }
    
    #bbModalContent .tier-radio:checked ~ .tier-info::after {
        left: 3px !important;
        font-size: 9px !important;
        line-height: 16px !important;
    }
    
    /* Zone modal — even tighter */
    .bb-zone-header {
        padding: 20px 16px 14px !important;
    }
    
    .bb-zone-body {
        padding: 12px 14px 16px !important;
    }
    
    .bb-zone-title {
        font-size: 16px !important;
    }
    
    .bb-zone-icon-ring {
        width: 48px !important;
        height: 48px !important;
        font-size: 22px !important;
        margin: 0 auto 10px !important;
    }
}

/* Old 480px zone responsive block replaced by comprehensive 640px block above */