/**
 * About CTA - Floating Button and Modal Styles
 * FORCED: Dark circular button with maximum specificity
 */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
    --aboutcta-glow-color: rgba(184, 149, 106, 0.6);
    --aboutcta-glow-color-strong: rgba(184, 149, 106, 0.9);
    --aboutcta-tooltip-bg: rgba(26, 26, 30, 0.95);
    --aboutcta-tooltip-text: #f5f5f7;
    --aboutcta-border-glow: rgba(184, 149, 106, 0.3);
}

/* ========================================
   CTA Wrapper
   ======================================== */
#about-cta-wrapper {
    position: fixed !important;
    bottom: clamp(16px, 3vmin, 24px) !important;
    right: clamp(12px, 3vmin, 24px) !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
}

#about-cta-wrapper~#about-cta-wrapper {
    display: none !important;
}

/* ========================================
   Main CTA Button - FORCED DARK CIRCLE
   Maximum specificity to override any other styles
   ======================================== */
#about-cta-wrapper .about-cta-button,
#about-cta-wrapper button.about-cta-button,
button#about-cta-button,
.about-cta-button {
    /* FORCED DIMENSIONS - Equal width and height */
    width: clamp(48px, 8vmin, 64px) !important;
    height: clamp(48px, 8vmin, 64px) !important;
    min-width: clamp(48px, 8vmin, 64px) !important;
    min-height: clamp(48px, 8vmin, 64px) !important;
    max-width: clamp(48px, 8vmin, 64px) !important;
    max-height: clamp(48px, 8vmin, 64px) !important;

    /* FORCED CIRCLE */
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;

    /* FORCED DARK BACKGROUND */
    background: #0d0d0f !important;
    background-color: #0d0d0f !important;
    background-image: linear-gradient(145deg, #1a1a1e 0%, #0d0d0f 100%) !important;

    /* Border */
    border: 2px solid rgba(184, 149, 106, 0.3) !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Prevent any distortion */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    /* Other */
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    outline: none !important;

    /* Shadow */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;

    /* Animation */
    animation: aboutcta-float 3s ease-in-out infinite !important;
    animation-delay: 0.4s !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

@keyframes aboutcta-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

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

/* ========================================
   Glow Effect
   ======================================== */
.about-cta-glow {
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, var(--aboutcta-glow-color) 0%, transparent 70%) !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* ========================================
   Icon - "i" text - RESPONSIVE
   ======================================== */
#about-cta-wrapper .about-cta-icon,
.about-cta-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;
}

/* ========================================
   Tooltip - Smaller text
   ======================================== */
#about-cta-wrapper .about-cta-tooltip,
.about-cta-tooltip {
    position: absolute !important;
    right: calc(100% + 10px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--aboutcta-tooltip-bg) !important;
    color: var(--aboutcta-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, 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 rgba(0, 0, 0, 0.3) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

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

/* Tooltip arrow */
.about-cta-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(--aboutcta-tooltip-bg) !important;
    z-index: -1 !important;
}

/* ========================================
   Close Button - COMPLETELY TRANSPARENT
   ======================================== */
#about-cta-wrapper .about-cta-tooltip-close,
.about-cta-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;
    /* NO BACKGROUND */
    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;
}

.about-cta-tooltip-close:hover {
    opacity: 1 !important;
}

.about-cta-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;
}

.about-cta-tooltip-close:hover .close-icon {
    filter: brightness(0.9) contrast(1.2) !important;
}

/* ========================================
   Hover States
   ======================================== */
.about-cta-button:hover {
    animation-play-state: paused !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 4px var(--aboutcta-glow-color), 0 0 30px 8px rgba(184, 149, 106, 0.25) !important;
    border-color: var(--aboutcta-glow-color-strong) !important;
}

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

/* ========================================
   Modal Overlay
   ======================================== */
.about-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;
}

.about-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================
   Modal Container
   ======================================== */
.about-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;
}

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

/* ========================================
   Modal Close Button - NO BACKGROUND
   ======================================== */
.about-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;
}

.about-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;
}

.about-modal-close:hover .modal-close-icon {
    opacity: 0.8 !important;
}

/* ========================================
   Modal Content
   ======================================== */
.about-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;
}

.about-section {
    margin-bottom: clamp(20px, 4vmin, 32px) !important;
}

.about-section-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;
}

.about-section-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
   ======================================== */
.about-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;
}

.about-modal-btn {
    flex: 1 !important;
    min-width: clamp(140px, 25vmin, 180px) !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;
}

.about-modal-btn-richard {
    background: rgba(196, 160, 106, 0.15) !important;
    border: 1px solid rgba(196, 160, 106, 0.4) !important;
    color: #c4a06a !important;
}

.about-modal-btn-optimism {
    background: rgba(232, 121, 249, 0.15) !important;
    border: 1px solid rgba(232, 121, 249, 0.4) !important;
    color: #e879f9 !important;
}

/* ========================================
   Mobile - Modal only adjustments (tooltip stays LEFT)
   ======================================== */
@media (max-width: 768px) {
    .about-modal-actions {
        flex-direction: column !important;
    }
}

/* ========================================
   Print
   ======================================== */
@media print {

    #about-cta-wrapper,
    .about-modal-overlay {
        display: none !important;
    }
}