/* =========================================================
   Sticky Footer Bar – Frontend CSS
   De Wouw Factor Internet | https://wouwfactor.com
   ========================================================= */

:root {
    --sfb-bg:         #ffffff;
    --sfb-bg-hover:   #f0f0f0;
    --sfb-text:       #333333;
    --sfb-text-hover: #0055aa;
    --sfb-icon:       #0055aa;
    --sfb-icon-hover: #003388;
    --sfb-divider:    #dddddd;
    --sfb-count:      4;
    --sfb-height:     64px;
    --sfb-transition: 0.18s ease;
}

/* ── Balk ─────────────────────────────────────────────── */
.sfb-bar {
    display:         none; /* standaard verborgen, mobiel zichtbaar */
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         99999;
    height:          var(--sfb-height);
    background:      var(--sfb-bg);
    box-shadow:      0 -2px 12px rgba(0,0,0,.12);
    flex-direction:  row;
    align-items:     stretch;
    /* safe area voor iPhones */
    padding-bottom:  env(safe-area-inset-bottom, 0px);
}

/* Alleen weergeven op mobiel */
@media (max-width: 767px) {
    .sfb-bar {
        display: flex;
    }

    /* Ruimte zodat content niet achter balk verdwijnt */
    body {
        padding-bottom: calc(var(--sfb-height) + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Knop ─────────────────────────────────────────────── */
.sfb-btn {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    text-decoration: none !important;
    background:      var(--sfb-bg) !important;
    color:           var(--sfb-text) !important;
    transition:      background var(--sfb-transition), color var(--sfb-transition);
    -webkit-tap-highlight-color: transparent;
    cursor:          pointer;
    padding:         6px 4px;
    min-width:       0;
}

.sfb-btn:hover,
.sfb-btn:focus,
.sfb-btn:active {
    background: var(--sfb-bg-hover) !important;
    color:      var(--sfb-text-hover) !important;
    outline:    none;
}

/* Scheidingsstreepje rechts van elke knop (behalve laatste) */
.sfb-btn--divider {
    border-right: 1px solid var(--sfb-divider);
}

/* ── Icoon ────────────────────────────────────────────── */
.sfb-btn__icon {
    display:     flex;
    align-items: center;
    font-size:   1.25rem;
    color:       var(--sfb-icon) !important;
    transition:  color var(--sfb-transition);
    line-height: 1;
}

.sfb-btn:hover   .sfb-btn__icon,
.sfb-btn:focus   .sfb-btn__icon,
.sfb-btn:active  .sfb-btn__icon {
    color: var(--sfb-icon-hover) !important;
}

/* ── Label ────────────────────────────────────────────── */
.sfb-btn__label {
    font-size:      0.65rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      100%;
    color:          var(--sfb-text) !important;
    transition:     color var(--sfb-transition);
}

.sfb-btn:hover  .sfb-btn__label,
.sfb-btn:focus  .sfb-btn__label,
.sfb-btn:active .sfb-btn__label {
    color: var(--sfb-text-hover) !important;
}

/* ── Calendly-knop ────────────────────────────────────── */
.sfb-btn--calendly {
    cursor: pointer;
}

/* Calendly-popup overlay boven de footerbar tonen */
.calendly-overlay {
    z-index: 100000 !important;
}

/* ── Taalswitcher — eigen uitklapbaar vlagmenu ─────────── */

/* Verberg TranslatePress' eigen floating switcher */
.sfb-bar--with-lang ~ .trp-language-switcher,
.sfb-bar--with-lang + .trp-language-switcher {
    display: none !important;
}

/* ── Knop in de footerbar ────────────────────────────── */
.sfb-lang-btn {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--sfb-bg) !important;
    cursor:          pointer;
    position:        relative;
    -webkit-tap-highlight-color: transparent;
    overflow:        visible;
}

/* ── Actieve vlag (altijd zichtbaar in de balk) ──────── */
.sfb-lang-btn__current {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    position:        relative;
    z-index:         2;
}

.sfb-lang-btn__current img {
    width:         26px;
    height:        19px;
    object-fit:    contain;
    display:       block;
    border-radius: 2px;
}

/* Klein pijltje als indicator */
.sfb-lang-btn__current::after {
    content:     '';
    position:    absolute;
    bottom:      6px;
    left:        50%;
    transform:   translateX(-50%);
    width:       0;
    height:      0;
    border-left:  3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 3px solid var(--sfb-icon);
    transition:  transform 0.2s ease;
}

.sfb-lang-btn.sfb-lang-open .sfb-lang-btn__current::after {
    transform: translateX(-50%) rotate(180deg);
}

.sfb-lang-btn__code {
    font-size:   0.65rem;
    font-weight: 700;
    color:       var(--sfb-icon) !important;
    line-height: 1;
}

/* ── Popup container ─────────────────────────────────── */
.sfb-lang-btn__popup {
    position:       absolute;
    bottom:         100%;
    left:           0;
    right:          0;
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    pointer-events: none;
    border-radius:  8px 8px 0 0;
    overflow:       visible;
    box-shadow:     none;
}

.sfb-lang-btn.sfb-lang-open .sfb-lang-btn__popup {
    pointer-events: auto;
    box-shadow:     -4px -8px 20px rgba(0,0,0,.15);
}

/* ── Items: standaard volledig verborgen ─────────────── */
.sfb-lang-btn__item {
    display:         none;
    align-items:     center;
    justify-content: center;
    height:          var(--sfb-height, 64px);
    background:      var(--sfb-bg) !important;
    border-top:      1px solid var(--sfb-divider);
    text-decoration: none;
    flex-shrink:     0;
    transition:      background 0.15s;
}

/* JS zet .sfb-visible op elk item — dan zichtbaar + animatie */
.sfb-lang-btn__item.sfb-visible {
    display:   flex;
    animation: sfb-slide-up 0.3s cubic-bezier(.16,1,.3,1) both;
}

@keyframes sfb-slide-up {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sfb-lang-btn__item.sfb-visible { animation: none; }
}

/* ── Hover / actieve taal ─────────────────────────────── */
.sfb-lang-btn__item:hover,
.sfb-lang-btn__item:focus {
    background: var(--sfb-bg-hover) !important;
    outline:    none;
}

.sfb-lang-btn__item--active {
    background: var(--sfb-bg-hover) !important;
    cursor:     default;
}

.sfb-lang-btn__item img {
    width:         26px;
    height:        19px;
    object-fit:    contain;
    display:       block;
    border-radius: 2px;
}

/* ── Sticky sidebar knop ──────────────────────────────────── */
.sfb-sidebar {
    position:       fixed;
    right:          0;
    top:            50%;
    transform:      translate(0, -50%);
    z-index:        1000;
    animation:      sfb-slide-in .8s cubic-bezier(.16,1,.3,1) both;
}

.sfb-sidebar__btn {
    box-sizing:      border-box;
    width:           40px;
    padding:         16px 8px;
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    background:      var(--sfb-sb-color, #59b79f);
    color:           var(--sfb-sb-text, #ffffff);
    border-radius:   14px 0 0 14px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    box-shadow:      -8px 10px 26px rgba(27,30,35,.22);
    transition:      width .34s cubic-bezier(.16,1,.3,1),
                     background .3s,
                     color .3s,
                     box-shadow .3s;
}

.sfb-sidebar__btn:hover,
.sfb-sidebar__btn:focus-visible {
    width:      60px;
    background: #ffffff;
    color:      var(--sfb-sb-color, #59b79f);
    box-shadow: -16px 14px 36px rgba(27,30,35,.28);
    outline:    none;
}

/* ── Sidebar logo — onderdeel van de knop ─────────────── */
.sfb-sidebar__logo {
    display:    block;
    width:      26px;
    height:     auto;
    max-height: 34px;
    object-fit: contain;
    flex-shrink: 0;
    transition: opacity .3s;
}

/* Hover-logo standaard verbergen */
.sfb-sidebar__logo--hover {
    display: none;
}

/* Bij hover: wissel logo */
.sfb-sidebar__btn:hover .sfb-sidebar__logo--default,
.sfb-sidebar__btn:focus-visible .sfb-sidebar__logo--default {
    display: none;
}

.sfb-sidebar__btn:hover .sfb-sidebar__logo--hover,
.sfb-sidebar__btn:focus-visible .sfb-sidebar__logo--hover {
    display: block;
}

.sfb-sidebar__label {
    writing-mode:   vertical-rl;
    transform:      rotate(180deg);
    font-size:      13px;
    font-weight:    700;
    line-height:    1;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space:    nowrap;
    color:          inherit;
}

@keyframes sfb-slide-in {
    from { transform: translate(150%, -50%); opacity: 0; }
    to   { transform: translate(0, -50%);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sfb-sidebar { animation: none; }
}

/* ── Click-to-call pulse (Lite) ───────────────────────── */
/* Keyframe: puls duurt 0.6s, de rest van de 20s staat het icoon stil */
@keyframes sfb-ctc-pulse {
    0%                          { transform: scale(1);   opacity: 1; }
    1.5%                        { transform: scale(1.3); opacity: .65; }
    3%                          { transform: scale(1);   opacity: 1; }
    100%                        { transform: scale(1);   opacity: 1; }
}

.sfb-btn--pulse .sfb-btn__icon {
    overflow: visible;
}

.sfb-btn--pulse .sfb-btn__icon i {
    animation:  sfb-ctc-pulse 20s ease-in-out infinite;
    display:    inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .sfb-btn--pulse .sfb-btn__icon i { animation: none; }
}