/* ==========================================================================
   1. Centreer de complete rij met de 5 knoppen 100% op de website
   ========================================================================== */
.mijn-unieke-knoppenrij, 
.mijn-unieke-knoppenrij .panel-row-style {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Zet de rij exact in het midden van de pagina */
    align-items: stretch !important;    /* Alle 5 de knoppen exact even hoog */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Herstel de cellen binnen deze specifieke rij */
.mijn-unieke-knoppenrij .panel-grid-cell {
    float: none !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin: 8px !important;             /* Ruimte tussen de knoppen onderling */
    transition: transform 0.3s ease !important; /* Zorgt voor een vloeiende zoom-animatie */
}

/* ==========================================================================
   2. HOVER EFFECT: Laat de knoppen vloeiend inzoomen (hvr-grow combinatie)
   ========================================================================== */
.mijn-unieke-knoppenrij.hvr-grow .panel-grid-cell:hover, 
.mijn-unieke-knoppenrij .panel-grid-cell:hover {
    transform: scale(1.05) !important;  /* Zoomt de knop met 5% in bij muis-hover */
    z-index: 10 !important;             /* Zorgt dat de zoomende knop netjes over de andere valt */
}

/* ==========================================================================
   3. Maak de individuele knoppen BREDER, GECENTREERD en RANDLOOS
   ========================================================================== */
.mijn-unieke-knoppenrij .sow-button-element, 
.mijn-unieke-knoppenrij .ow-button-base a {
    display: flex !important;
    flex-direction: column !important;  /* Logo BOVEN de tekst */
    align-items: center !important;     /* Centreert logo en tekst horizontaal exact in het midden */
    justify-content: center !important; /* Centreert logo en tekst verticaal exact in het midden */
    text-align: center !important;
    min-width: 170px !important;        /* Geeft de knoppen een mooie brede basis */
    width: auto !important;
    padding: 14px 22px !important;
    
    /* Wist alle (witte) randen en schaduwen volledig uit */
    border: none !important;
    border-top: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   4. Containerbox voor het logo (VERBREED TEGEN HET AFSNIJDEN VAN LOGO 5)
   ========================================================================== */
.mijn-unieke-knoppenrij .sow-icon-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* GOUDEN RESETS: Breedte verhoogd naar 62px om de rechterkant van logo 5 te redden */
    width: 62px !important;             /* WAS 52px -> Nu 62px breed voor extra ademruimte rechts */
    height: 52px !important;            /* Behouden op 52px hoog zodat knop 3 en 4 goed blijven */
    font-size: 52px !important;
    float: none !important;
    margin: 0 auto 12px auto !important;/* Ruimte onder het logo tot de tekst */
    padding: 0 !important;
}

/* ==========================================================================
   5. DE AFBEELDING ZELF (STRENG BEPERKT TOT DE ROW CLASS)
   ========================================================================== */
.mijn-unieke-knoppenrij .sow-icon-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;     /* Voorkomt dat brede of hoge logo's afsnijden */
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ==========================================================================
   6. Dwing de tekst op ÉÉN regel en centreer deze netjes
   ========================================================================== */
.mijn-unieke-knoppenrij span {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    text-align: center !important;
    white-space: nowrap !important;     /* Dwingt de tekst om ALTIJD op 1 regel te blijven */
}

/* ==========================================================================
   7. Ruimte tussen de Slider (Rij 1) en de Knoppen (Rij 2) volledig sluiten
   ========================================================================== */
/* Haal de marge aan de onderkant van de slider-rij weg */
.sow-slider-row, 
.sow-slider-row-style, 
.panel-grid:first-of-type {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

/* Trek de knoppenrij strak tegen de slider aan */
.mijn-unieke-knoppenrij {
    margin-top: 0px !important;
    padding-top: 0px !important;
}


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer a, 
.site-footer li {
    color: #ffffff !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important; /* Verwijdert eventuele schaduwblokken */
}

/* Zorgt dat de link ook bij het aanwijzen doorzichtig blijft */
.site-footer a:hover, 
.site-footer li:hover {
    color: #e0e0e0 !important;
    background-color: transparent !important;
    background: transparent !important;
}