/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* reserveert de exacte breedte zodat niets kan “schuiven” */
.rplg-rating /* container-class Business Reviews */{
    min-width: 118px;      /* breedte 5 sterren + tekst “4.9” */
}

/* ============================================================
   FIX: Google Rating Badge - Forceer zichtbaarheid
   ============================================================
   Probleem: Badge heeft inline style="display:none"
   Oplossing: Override met !important en toon ALTIJD
   ============================================================ */

/* Verberg badge STANDAARD tot JavaScript klaar is */
.rpi .rpi-badge {
    display: inline-block !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Toon badge alleen als 'rpi-ready' class is toegevoegd */
.rpi.rpi-ready .rpi-badge {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Disable alle animaties die flits veroorzaken */
.rpi,
.rpi *,
.rpi .rpi-badge,
.rpi .rpi-badge * {
    transition: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    -webkit-animation: none !important;
}

/* ==============================================================
   DEFINITIEVE FIX V4: Checkbox uitlijning met CSS Grid
   ==============================================================
   Fix werkt nu op ALLE pagina's (niet alleen homepage)
   ============================================================== */

#gform_wrapper_2 .gfield_checkbox .gchoice {
  /* Activeer CSS Grid en creëer 2 kolommen */
  display: grid !important;
  grid-template-columns: auto 1fr !important; /* 1e kolom voor checkbox, 2e voor de rest */

  /* Centreer alles verticaal in de grid-rij */
  align-items: center !important;

  /* Voeg ruimte toe tussen de checkbox en de box */
  gap: 15px !important;

  /* Reset eventuele foute positionering van het thema */
  position: static !important;
  padding: 0 !important;
}

/* Zorg dat de box zelf de volledige breedte van zijn kolom pakt */
#gform_wrapper_2 .gfield_checkbox .gchoice .gform-field-label--type-inline {
  width: 100% !important;
}

/* Reset de positie van de checkbox zelf */
#gform_wrapper_2 .gfield_checkbox .gchoice input[type="checkbox"] {
  position: static !important;
  margin: 0 !important;
}


/* ================================================================
   ULTIEME FIX: Gravity Forms Image Checkboxes - Werkt ALTIJD
   ================================================================
   Deze fix werkt ongeacht:
   - Pagina ID
   - Template
   - Schermgrootte
   - Aanwezigheid van .img-checkbox class
   ================================================================ */

/* Forceer <br> tag te negeren in alle Gravity Forms labels */
#gform_wrapper_2 .gfield_checkbox .gform-field-label--type-inline br {
  display: none !important;
}

/* Base styling - werkt zonder .img-checkbox class nodig */
#gform_wrapper_2 .gfield_checkbox .gform-field-label--type-inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* Afbeelding altijd eerst (links) */
#gform_wrapper_2 .gfield_checkbox .gform-field-label--type-inline img {
  order: 1 !important;
  max-width: 100px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Tekst altijd daarna (rechts) */
#gform_wrapper_2 .gfield_checkbox .gform-field-label--type-inline span {
  order: 2 !important;
  flex-grow: 1 !important;
  font-size: 1.25em;
  padding-left: 0 !important; /* gap handelt spacing af */
}

/* Mobiel aanpassingen */
@media only screen and (max-width: 800px) {
  #gform_wrapper_2 .gfield_checkbox .gform-field-label--type-inline img {
    max-width: 75px !important;
  }
  
  #gform_wrapper_2 .gfield_checkbox .gform-field-label--type-inline span {
    font-size: 1.1em;
  }
}

/* ================================================================
   FIX: Reduce CLS (Homepage)
   ================================================================
   Doel:
   - reserveer ruimte voor dynamische widgets (reviews slider, galleries)
   - voorkom zichtbare verspringing tijdens load
   Opzet:
   - alleen minimale CSS constraints, geen layout redesign
   ================================================================ */

/* Existing: Top header row moet fixed width elements hebben */
.top-header .fusion-column-wrapper {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.top-header .fusion-text {
  flex-shrink: 0 !important;
  min-width: 150px !important;
  white-space: nowrap !important;
}

.top-header .rpi[data-id="6358"] {
  flex-shrink: 0 !important;
  min-width: 165px !important;
  min-height: 20px !important;
}

.top-header .rpi[data-id="6358"]:not(.rpi-ready) {
  visibility: hidden !important;
}

.top-header .rpi[data-id="6358"].rpi-ready {
  visibility: visible !important;
}

/* 1) Reserve space for the above-the-fold reviews slider/cards */
.rpi-cards {
  min-height: 170px;
}

/* 2) Reserve space for Modula gallery area to avoid late reflow */
.modula.modula-gallery {
  min-height: 110px;
}

/* ================================================================
   FIX: Grijze strepen op alle fullwidth containers
   ================================================================
   Oorzaak: Avada's --full_width_border_sizes_left:-100px maakt
   de border-width shorthand ongeldig. Browser valt terug op
   initial value "medium" (3px), wat grijze borders toont.
   ================================================================ */
.fusion-fullwidth {
  border: none !important;
}
.fusion-fullwidth.header.fusion-sticky-container,
.fusion-fullwidth.header.fusion-sticky-transition {
  border: none !important;
}