/**
 * BB Floating CTAs - Unified Styles
 * All CTA buttons + About modal in one stylesheet
 */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
    --bbfcta-button-size: clamp(48px, 8vmin, 64px);
    --bbfcta-base-bottom: clamp(16px, 3vmin, 24px);
    --bbfcta-offset-right: clamp(12px, 3vmin, 24px);
    --bbfcta-gap: clamp(10px, 2vmin, 14px);
    --bbfcta-slot: calc(var(--bbfcta-button-size) + var(--bbfcta-gap));

    --bbfcta-tooltip-bg: rgba(26, 26, 30, 0.95);
    --bbfcta-tooltip-text: #f5f5f7;
    --bbfcta-tooltip-shadow: rgba(0, 0, 0, 0.3);

    --bbfcta-float-duration: 3s;
}

/* ========================================
   Wrapper Positioning (dynamic via data-position)
   ======================================== */
.bbfcta-wrapper {
    position: fixed !important;
    right: var(--bbfcta-offset-right) !important;
    z-index: 999996 !important;
    pointer-events: auto !important;
}

.bbfcta-wrapper[data-position="0"] { bottom: var(--bbfcta-base-bottom) !important; z-index: 999999 !important; }
.bbfcta-wrapper[data-position="1"] { bottom: calc(var(--bbfcta-base-bottom) + var(--bbfcta-slot)) !important; z-index: 999998 !important; }
.bbfcta-wrapper[data-position="2"] { bottom: calc(var(--bbfcta-base-bottom) + var(--bbfcta-slot) * 2) !important; z-index: 999997 !important; }
.bbfcta-wrapper[data-position="3"] { bottom: calc(var(--bbfcta-base-bottom) + var(--bbfcta-slot) * 3) !important; z-index: 999996 !important; }

/* Prevent duplicates */
.bbfcta-wrapper ~ .bbfcta-wrapper[data-cta] { }

/* ========================================
   Shared CTA Button Base
   ======================================== */
.bbfcta-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--bbfcta-button-size) !important;
    height: var(--bbfcta-button-size) !important;
    min-width: var(--bbfcta-button-size) !important;
    min-height: var(--bbfcta-button-size) !important;
    max-width: var(--bbfcta-button-size) !important;
    max-height: var(--bbfcta-button-size) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    text-decoration: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    animation: bbfcta-float var(--bbfcta-float-duration) ease-in-out infinite !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

@keyframes bbfcta-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .bbfcta-button { animation: none !important; }
}

/* ========================================
   Button Image
   ======================================== */
.bbfcta-image {
    width: calc(var(--bbfcta-button-size) - 8px) !important;
    height: calc(var(--bbfcta-button-size) - 8px) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    pointer-events: none !important;
    aspect-ratio: 1 / 1 !important;
}

/* ========================================
   Glow Effect (radial for all)
   ======================================== */
.bbfcta-glow {
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.bbfcta-button:hover .bbfcta-glow {
    opacity: 0.6 !important;
}

/* ========================================
   Per-CTA Themes
   ======================================== */

/* --- OptimismAI: Pink/Purple --- */
[data-cta="optimismai"] .bbfcta-button {
    background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1e 50%, #0a0a0a 100%) !important;
    border: 2px solid rgba(232, 121, 249, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(232, 121, 249, 0.15), inset 0 0 20px rgba(232, 121, 249, 0.1) !important;
}
[data-cta="optimismai"] .bbfcta-button:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(232, 121, 249, 0.5), 0 0 30px 8px rgba(232, 121, 249, 0.3) !important;
    border-color: rgba(232, 121, 249, 0.8) !important;
}
[data-cta="optimismai"] .bbfcta-glow {
    background: radial-gradient(circle, rgba(232, 121, 249, 0.6) 0%, transparent 70%) !important;
}
[data-cta="optimismai"] .bbfcta-image {
    filter: brightness(1.05) !important;
}

/* --- Ask Richard: Gold/Brass --- */
[data-cta="askrichard"] .bbfcta-button {
    background: linear-gradient(145deg, #1a1a1e 0%, #0d0d0f 100%) !important;
    border: 2px solid rgba(184, 149, 106, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
}
[data-cta="askrichard"] .bbfcta-button:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(184, 149, 106, 0.6), 0 0 30px 8px rgba(184, 149, 106, 0.25) !important;
    border-color: rgba(184, 149, 106, 0.9) !important;
}
[data-cta="askrichard"] .bbfcta-glow {
    background: radial-gradient(circle, rgba(184, 149, 106, 0.6) 0%, transparent 70%) !important;
}

/* --- Ask The Founders: Navy/Gold --- */
[data-cta="askthefounders"] .bbfcta-button {
    background: linear-gradient(145deg, #1a2a3e 0%, #0a1628 100%) !important;
    border: 2px solid rgba(184, 149, 106, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
}
[data-cta="askthefounders"] .bbfcta-button:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(184, 149, 106, 0.6), 0 0 30px 8px rgba(184, 149, 106, 0.25) !important;
    border-color: rgba(184, 149, 106, 0.9) !important;
}
[data-cta="askthefounders"] .bbfcta-glow {
    background: radial-gradient(circle, rgba(184, 149, 106, 0.6) 0%, transparent 70%) !important;
}

/* --- About: Dark/Gold --- */
[data-cta="about"] .bbfcta-button {
    background: linear-gradient(145deg, #1a1a1e 0%, #0d0d0f 100%) !important;
    border: 2px solid rgba(184, 149, 106, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    animation-delay: 0.4s !important;
}
[data-cta="about"] .bbfcta-button:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(184, 149, 106, 0.6), 0 0 30px 8px rgba(184, 149, 106, 0.25) !important;
    border-color: rgba(184, 149, 106, 0.9) !important;
}
[data-cta="about"] .bbfcta-glow {
    background: radial-gradient(circle, rgba(184, 149, 106, 0.6) 0%, transparent 70%) !important;
}

/* About icon "i" */
.bbfcta-icon {
    font-family: 'Georgia', 'Times New Roman', serif !important;
    font-size: clamp(20px, 4vmin, 32px) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #c4a06a !important;
    line-height: 1 !important;
    user-select: none !important;
    pointer-events: none !important;
    background: transparent !important;
}

/* ========================================
   Hover States (shared)
   ======================================== */
.bbfcta-button:hover {
    animation-play-state: paused !important;
    transform: translateY(-3px) scale(1.08) !important;
}
.bbfcta-button:hover .bbfcta-image {
    transform: scale(1.02) !important;
}
.bbfcta-button:focus { outline: none !important; }
.bbfcta-button:focus-visible {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(184, 149, 106, 0.9), 0 0 0 6px rgba(255, 255, 255, 0.9) !important;
}
.bbfcta-button:active {
    transform: translateY(0) scale(0.96) !important;
}

/* ========================================
   Tooltip
   ======================================== */
.bbfcta-tooltip {
    position: absolute !important;
    right: calc(100% + 10px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000000 !important;
    background: var(--bbfcta-tooltip-bg) !important;
    color: var(--bbfcta-tooltip-text) !important;
    padding: clamp(4px, 1vmin, 8px) clamp(24px, 4vmin, 36px) clamp(4px, 1vmin, 8px) clamp(8px, 2vmin, 14px) !important;
    border-radius: clamp(4px, 1vmin, 8px) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(10px, 1.5vmin, 13px) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 16px var(--bbfcta-tooltip-shadow) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.bbfcta-tooltip.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Tooltip arrow */
.bbfcta-tooltip::after {
    content: '' !important;
    position: absolute !important;
    right: -4px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
    width: clamp(6px, 1vmin, 10px) !important;
    height: clamp(6px, 1vmin, 10px) !important;
    background: var(--bbfcta-tooltip-bg) !important;
    z-index: -1 !important;
}

/* ========================================
   Tooltip Close Button
   ======================================== */
.bbfcta-tooltip-close {
    position: absolute !important;
    right: clamp(4px, 1vmin, 8px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: clamp(12px, 2vmin, 18px) !important;
    height: clamp(12px, 2vmin, 18px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    opacity: 0.5 !important;
    transition: opacity 0.2s ease !important;
}
.bbfcta-tooltip-close:hover { opacity: 1 !important; }

.bbfcta-tooltip-close .close-icon {
    width: clamp(10px, 1.5vmin, 14px) !important;
    height: clamp(10px, 1.5vmin, 14px) !important;
    object-fit: contain !important;
    background: transparent !important;
    filter: brightness(0.6) contrast(1.2) !important;
}
.bbfcta-tooltip-close:hover .close-icon {
    filter: brightness(0.9) contrast(1.2) !important;
}

/* ========================================
   About Modal Overlay
   ======================================== */
.bbfcta-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(12px, 3vmin, 24px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.bbfcta-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================
   Modal Container
   ======================================== */
.bbfcta-modal {
    position: relative !important;
    width: 100% !important;
    max-width: min(640px, 90vw) !important;
    max-height: 90vh !important;
    background: rgba(15, 12, 10, 0.98) !important;
    border: 1px solid rgba(196, 160, 106, 0.2) !important;
    border-radius: clamp(8px, 2vmin, 16px) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
    transform: scale(0.9) translateY(20px) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.bbfcta-modal-overlay.active .bbfcta-modal {
    transform: scale(1) translateY(0) !important;
}

/* Modal close */
.bbfcta-modal-close {
    position: absolute !important;
    top: clamp(8px, 2vmin, 16px) !important;
    right: clamp(8px, 2vmin, 16px) !important;
    width: clamp(24px, 4vmin, 32px) !important;
    height: clamp(24px, 4vmin, 32px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    padding: 0 !important;
}
.bbfcta-modal-close .modal-close-icon {
    width: clamp(18px, 3vmin, 28px) !important;
    height: clamp(18px, 3vmin, 28px) !important;
    object-fit: contain !important;
    opacity: 0.5 !important;
    background: transparent !important;
    filter: brightness(0.5) !important;
}
.bbfcta-modal-close:hover .modal-close-icon {
    opacity: 0.8 !important;
}

/* ========================================
   Modal Content
   ======================================== */
.bbfcta-modal-content {
    padding: clamp(32px, 6vmin, 48px) clamp(20px, 5vmin, 40px) clamp(24px, 5vmin, 40px) !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 32px) !important;
}
.bbfcta-about-section {
    margin-bottom: clamp(20px, 4vmin, 32px) !important;
}
.bbfcta-about-title {
    font-family: 'Coolvetica Rg', 'Inter', sans-serif !important;
    font-size: clamp(1.1rem, 3vmin, 1.5rem) !important;
    color: #c4a06a !important;
    margin: 0 0 clamp(8px, 1.5vmin, 12px) 0 !important;
}
.bbfcta-about-text {
    font-family: 'IBM Plex Sans', 'Inter', sans-serif !important;
    font-size: clamp(0.85rem, 2vmin, 1rem) !important;
    line-height: 1.7 !important;
    color: #d4b896 !important;
    margin: 0 !important;
}

/* ========================================
   Modal Action Buttons
   ======================================== */
.bbfcta-modal-actions {
    display: flex !important;
    gap: clamp(10px, 2vmin, 16px) !important;
    flex-wrap: wrap !important;
    padding-top: clamp(16px, 3vmin, 24px) !important;
    border-top: 1px solid rgba(196, 160, 106, 0.2) !important;
}
.bbfcta-modal-btn {
    flex: 1 !important;
    min-width: clamp(120px, 20vmin, 160px) !important;
    padding: clamp(10px, 2vmin, 14px) clamp(16px, 3vmin, 24px) !important;
    border-radius: clamp(6px, 1vmin, 8px) !important;
    font-size: clamp(0.8rem, 1.5vmin, 0.95rem) !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.bbfcta-modal-btn:hover {
    transform: translateY(-1px) !important;
}

/* OptimismAI button in modal */
.bbfcta-modal-btn-optimismai {
    background: rgba(232, 121, 249, 0.15) !important;
    border: 1px solid rgba(232, 121, 249, 0.4) !important;
    color: #e879f9 !important;
}
.bbfcta-modal-btn-optimismai:hover {
    background: rgba(232, 121, 249, 0.25) !important;
}

/* Ask Richard button in modal */
.bbfcta-modal-btn-askrichard {
    background: rgba(196, 160, 106, 0.15) !important;
    border: 1px solid rgba(196, 160, 106, 0.4) !important;
    color: #c4a06a !important;
}
.bbfcta-modal-btn-askrichard:hover {
    background: rgba(196, 160, 106, 0.25) !important;
}

/* Ask The Founders button in modal */
.bbfcta-modal-btn-askthefounders {
    background: rgba(10, 22, 40, 0.5) !important;
    border: 1px solid rgba(184, 149, 106, 0.4) !important;
    color: #c4a06a !important;
}
.bbfcta-modal-btn-askthefounders:hover {
    background: rgba(10, 22, 40, 0.7) !important;
}

/* ========================================
   Mobile
   ======================================== */
@media (max-width: 768px) {
    .bbfcta-modal-actions {
        flex-direction: column !important;
    }
}

/* ========================================
   Print
   ======================================== */
@media print {
    .bbfcta-wrapper,
    .bbfcta-modal-overlay {
        display: none !important;
    }
}