/* =====================================================================
   FORTHING CTA BADGE
   ===================================================================== */

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

/* ── Wrapper ───────────────────────────────────────────────────────── */
/* Padding-top maakt ruimte voor de sluitknop boven de ballon;
   de wrapper is daardoor groot genoeg om hover te behouden
   terwijl je van ballon naar sluitknop beweegt.                       */
.fgb-wrap {
    position: fixed;
    right: 16px;
    z-index: 9999;
    padding-top:    40px;
    padding-bottom: 58px;
}

/* ── Ballon ────────────────────────────────────────────────────────── */
.fgb-badge {
    --fgb-bg:    #d7000f;
    --fgb-color: #ffffff;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 82px;
    height: 96px;

    /* Breed boven, smaller onder */
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;

    background: var(--fgb-bg);
    color: var(--fgb-color);
    text-decoration: none;
    text-align: center;
    cursor: pointer;

    box-shadow:
        -4px 8px 28px rgba(0,0,0,.30),
        -2px 3px 8px  rgba(0,0,0,.18);

    animation: fgb-float 3.2s ease-in-out infinite;
    user-select: none;
    -webkit-user-select: none;
}

/* Hover: alleen schalen */
.fgb-wrap:hover .fgb-badge {
    animation-play-state: paused;
    transform: scale(1.07);
    box-shadow:
        -5px 12px 36px rgba(0,0,0,.35),
        -2px 4px 10px  rgba(0,0,0,.20);
    transition: transform .22s ease, box-shadow .22s ease;
}
.fgb-badge,
.fgb-badge:hover,
.fgb-badge:focus,
.fgb-badge:visited,
.fgb-badge span,
.fgb-badge svg {
    color: var(--fgb-color) !important;
    text-decoration: none !important;
}

/* Knoopje */
.fgb-badge::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 12px;
    background: var(--fgb-bg);
    border-radius: 50%;
    filter: brightness(.72);
}

/* Touwtje */
.fgb-badge::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: calc(50% + 1px);
    width: 1.5px;
    height: 54px;
    background: linear-gradient(to bottom, rgba(0,0,0,.32) 0%, rgba(0,0,0,.08) 100%);
}

.fgb-badge svg  { flex-shrink: 0; opacity: .9; }

.fgb-badge__r1 {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.fgb-badge__r2 {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: .85;
}

/* ── Sluitknop (X) — boven de ballon, buiten de ballonrand ──────────── */
.fgb-sluit,
.fgb-sluit:hover,
.fgb-sluit:focus,
.fgb-sluit:active,
.fgb-sluit:focus-visible {
    -webkit-appearance: none !important;
    appearance:         none !important;
    outline:     none !important;
    box-shadow:  none !important;
    border:      none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    color: #ffffff !important;
}

.fgb-sluit {
    position: absolute;
    top: 4px;        /* in de padding-top zone, boven de ballon */
    /* left / right gezet via inline CSS vanuit admin-instelling */

    width: 24px;
    height: 24px;
    border-radius: 50% !important;
    padding: 0 !important;
    cursor: pointer;

    background: rgba(0,0,0,.55) !important;

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

    /* Verborgen standaard — verschijnt bij hover op wrap.
       De transition-delay op het verdwijnen zorgt dat de knop
       nog ~300ms zichtbaar blijft nadat de muis de wrap verlaat,
       zodat je hem kunt klikken zonder de ballon te raken.         */
    opacity: 0;
    pointer-events: none;
    transform: scale(.75);
    transition: opacity .15s ease .30s, transform .15s ease .30s;
}

.fgb-wrap:hover .fgb-sluit,
.fgb-touch-actief .fgb-sluit {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
    transition: opacity .15s ease 0s, transform .15s ease 0s;
}

.fgb-sluit:hover,
.fgb-sluit:focus-visible {
    background: rgba(0,0,0,.78) !important;
}
.fgb-sluit:active {
    background: rgba(0,0,0,.92) !important;
}
.fgb-sluit svg {
    pointer-events: none;
    flex-shrink: 0;
    color: #ffffff !important;
}

/* ── Mobiel touch-state ────────────────────────────────────────────── */
/* Na eerste tap zichtbaar totdat timer reset of gesloten wordt */
.fgb-touch-actief .fgb-badge {
    animation-play-state: paused;
    transform: scale(1.04);
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fgb-badge { animation: none; }
}

/* ── Mobiel responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fgb-wrap  { padding-bottom: 46px; right: 12px; }
    .fgb-badge { width: 70px; height: 82px; gap: 3px; }
    .fgb-badge svg    { width: 18px; height: 18px; }
    .fgb-badge__r1    { font-size: 11px; }
    .fgb-badge__r2    { font-size: 7px; }
    .fgb-badge::after { height: 42px; bottom: -48px; }
}

.forthing-badge { font-family: 'Manrope', sans-serif; }

.forthing-badge h1,
.forthing-badge h2,
.forthing-badge h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
}