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