/* =================================
TITELS
================================= */
.slider-section h2 { color: #FF752B; }
.slider-main-title { text-align: center; color: #ff7a00; margin-bottom: 30px; font-size: 36px; }

/* =================================
SLIDER BASIS
================================= */
.slider-section { padding: 20px 0; position: relative; overflow-x: hidden; }

.slider-wrapper { position: relative; overflow: hidden; transition: height 0.6s cubic-bezier(.65,0,.35,1); }
.slide { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-100%); z-index: 1; }
.slide.is-active { transform: translateY(0); z-index: 2; }
.slide.animate-in { transition: transform 0.7s cubic-bezier(.65, 0, .35, 1); }

/* =================================
LOCATIE BLOKKEN
================================= */
.slider-location { margin-bottom: 120px; position: relative; }
.slider-location--eindhoven { margin-left: 40px; }
.slider-location--best { margin-right: 40px; }
.slider-location-title { color: #ff7a00; font-size: 28px; margin-bottom: 10px; }
.slider-location-subtext { margin-bottom: 25px; color: #000; }

/* =================================
HEADER UITLIJNING
================================= */
.slider-location-header { max-width: 1100px; }
.slider-location--eindhoven .slider-location-header { text-align: left; margin-right: auto; }
.slider-location--best .slider-location-header { text-align: right; margin-left: auto; }

/* =================================
SLIDE UITLIJNING
================================= */
.slide--left { display: flex; justify-content: flex-start; }
.slide--right { display: flex; justify-content: flex-end; }

/* =================================
Garage CARD
================================= */
.garage-card-wrapper { 
	position: relative; 
	height: 100%; 
	background-color: white;
}
.garage-card { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 0.6fr 1.2fr; border: 10px solid #ff7a00; border-radius: 18px; overflow: hidden; background: #fff; max-width: 1100px; width: 100%; }

.garage-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.garage-info { background: #000; color: #fff; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.garage-info ul { list-style: none; padding: 0; margin: 0; text-align: center; }
.garage-info li { margin-bottom: 12px; font-size: 12px; line-height: 1.6; }
.garage-info strong { color: #FF752B; }

/* =================================
DECORATIEVE BACKGROUND
================================= */
.slider-bg-image { position: absolute; top: 55%; width: 380px; height: 100%; background-size: 530px; background-repeat: no-repeat; background-position: center; transform: translateY(-45%); z-index: 0; opacity: 0.08; }
.slider-location--eindhoven .slider-bg-image { right: -120px; }
.slider-location--best .slider-bg-image { left: -120px; }

/* =================================
SLIDER PIJLEN
================================= */
.button-primary.slider-arrow { overflow: hidden; }
.button-primary.slider-arrow .inner { width: 44px; height: 44px; padding: 0 !important; display: flex; align-items: center; justify-content: center; background: #000; border-radius: 10px; transition: transform 0.35s cubic-bezier(.4, 0, .2, 1); }
.button-primary.slider-arrow:hover .inner { transform: translateY(110%); }

.arrow-right { position: absolute; top: 60%; right: 277px; transform: translateY(-50%); z-index: 5; }
.arrow-left { position: absolute; top: 60%; left: 277px; transform: translateY(-50%); z-index: 5; }

/* PIJL ICON HOVER */
.button-primary.slider-arrow::after { content: ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 20px; color: white; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.button-primary.slider-arrow.arrow-right::after { content: "\f054"; }
.button-primary.slider-arrow.arrow-left::after { content: "\f053"; }
.button-primary.slider-arrow:hover::after { opacity: 1; }

/* =================================
SLIDER DOTS
================================= */
.slider-dots { position: absolute; display: flex; gap: 10px; justify-content: center; z-index: 10; transition: left 0.6s cubic-bezier(.65,0,.35,1); margin-top: 20px; }
.slider-dot { width: 50px; height: 20px; border: solid 3px #ccc; border-radius: 3px; cursor: pointer; transition: background-color 0.25s ease, transform 0.25s ease; }
.slider-dot.is-active { border: solid 3px #ff7a00; transform: scale(1.2); }
.slider-dot:hover { background-color: #ff7a00; border: solid 3px #ff7a00; }

/* =================================
Huren garage button (Hero Style)
================================= */
.button-primary.huur-button { 
  position: relative; 
  display: inline-flex; /* Veranderd van inline-block naar inline-flex */
  background-color: #FF752B; 
  border-radius: .6em; 
  padding: .3rem; 
  text-transform: uppercase; 
  text-decoration: none; 
  overflow: hidden; 
  width: auto; /* Geen geforceerde breedte */
  min-width: 180px; /* Optioneel: minimale breedte voor uniformiteit */
  box-sizing: border-box;
}
.button-primary.huur-button .inner { 
  position: relative; 
  z-index: 2; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: .8em 1.4em; /* Terug naar je originele padding */
  background-color: #000; 
  color: #fff; 
  border-radius: .4em; 
  font-weight: 600; 
  font-size: 12px; 
  width: 100%; /* Vult nu netjes de auto-width van de parent */
  box-sizing: border-box;
}
.button-primary.huur-button:hover .inner { 
  transform: translateY(110%); 
}

.button-primary.huur-button::after { 
  content: attr(data-text); 
  position: absolute; 
  inset: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #fff; 
  font-weight: 700; 
  font-size: 12px; 
  opacity: 0; 
  transition: opacity 0.2s ease; 
}

.button-primary.huur-button:hover::after { 
  opacity: 1; 
}

/* =================================
   TABLET PIJLEN FIX (Tussen 993px en 1300px)
   ================================= */
@media (min-width: 993px) and (max-width: 1300px) {
    /* 1. Verberg de zij-pijlen van desktop */
    .desktop-only-arrow { 
        display: none !important; 
    }

    /* 2. Style de mobiele pijlen container (die nu boven de slider staat) */
    .mobile-only-arrows { 
        display: flex !important; 
        justify-content: flex-end !important; /* Pijlen strak naar rechts */
        max-width: 1100px;                    /* Zelfde breedte als de slider */
        margin: 0 auto !important;            /* Centreer de container */
        position: relative;
        z-index: 10;
        height: 0;                            /* Geen eigen hoogte innemen zodat ze 'zweven' */
        top: -45px;                           /* Trek ze omhoog naar de subtekst regel */
    }

    /* 3. De pijlen zelf */
    .mobile-only-arrows .slider-arrow {
        position: relative !important;
        transform: none !important;
        margin-left: 10px;                    /* Ruimte tussen de twee pijlen */
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    /* 4. Zorg dat de header niet over de pijlen heen valt */
    .slider-location-header {
        position: relative;
        z-index: 1;
        max-width: 1100px;
        margin: 0 auto 25px auto;             /* Ruimte onder de header voor de slider */
    }

    /* 1. Algemene instelling (Eindhoven / Standaard) */
    .mobile-only-arrows { 
        display: flex !important; 
        justify-content: flex-end !important; /* Rechts voor Eindhoven */
        max-width: 1100px !important;
        margin: 0 auto !important;
        position: relative !important;
        height: 0 !important;
        top: -80px !important;
        z-index: 50 !important;
        padding: 0 !important;
    }

    /* 2. SPECIFIEKE FIX VOOR BEST (Pijlen naar links) */
    .slider-location--best .mobile-only-arrows { 
        justify-content: flex-start !important; /* Forceer links voor Best */
    }

    /* 3. Pijl styling voor beide locaties */
    .mobile-only-arrows .slider-arrow {
        position: relative !important;
        display: flex !important;
        margin-left: 10px !important;
        margin-right: 10px !important;

        height: 44px !important;  /* De standaard hoogte van je desktop pijlen */
        width: 44px !important;   /* De standaard breedte */
        display: block !important;
        position: relative !important;
    }

    .mobile-only-arrows .slider-arrow .inner {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #000 !important; /* Zorg dat de zwarte kleur er is */
        border-radius: 10px !important;
        padding: 0 !important;
    }

    /* Zorg dat het icoontje (het witte pijltje) zichtbaar is */
    .mobile-only-arrows .slider-arrow .inner i {
        color: #ffffff !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* Verberg de desktop-pijlen aan de zijkanten */
    .desktop-only-arrow { display: none !important; }
     
    .slider-bg-image { 
        display: none !important; 
    }

    /* 1. Zorg dat de locatie-container nooit breder is dan het scherm */
    .slider-location {
        max-width: 100% !important;
        margin-left: 0 !important;   /* Reset de 40px margin van desktop */
        margin-right: 0 !important;  /* Reset de 40px margin van desktop */
        padding: 0 20px;             /* Kleine buffer zodat hij niet tegen de rand plak */
    }

    /* 2. Fix de breedte: gebruik border-box zodat de 10px border BINNEN de breedte valt */
    .slider-wrapper, 
    .garage-card {
        max-width: 1100px !important;

        margin: 0 auto !important;
        box-sizing: border-box !important;   /* Cruciaal: houdt de border binnen de breedte */
    }

    /* Nieuw: Forceer de slider van Best naar de rechterkant */
    .slider-location--best .slider-wrapper {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    /* Nieuw: Forceer de slider van Eindhoven naar de linkerkant */
    .slider-location--eindhoven .slider-wrapper {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* 3. Zorg dat de grid-kolommen binnen de kaart meeschalen */
    .garage-card {
        display: grid;
        grid-template-columns: 1fr 0.8fr 1fr; /* Iets meer ruimte voor de tekstkolom op tablet */
    }
}


/* =================================
MOBIEL SPECIFIEK
================================= */
.mobile-only-arrows { display: none; }

@media (max-width: 992px) {
    /* 1. Header en Titels centreren */
    .slider-location-header { 
        text-align: center !important; 
        margin: 0 auto 20px auto !important;
        width: 100%;
    }

    .slider-location-title, 
    .slider-location-subtext {
        text-align: center !important;
        display: block;
        width: 100%;
    }

    /* 2. Pijlen container: Forceer centreren voor ALLE locaties */
    .mobile-only-arrows { 
        display: flex !important; 
        justify-content: center !important; /* Altijd in het midden op mobiel */
        gap: 20px !important;              /* Vaste gap voor Eindhoven én Best */
        margin: 0 auto 20px auto !important;
        width: 100% !important;
        position: static !important;        /* Reset tablet positionering */
        height: auto !important;
        order: 1; 
    }

    /* 3. Reset de specifieke tablet margins op de pijlen zelf */
    .mobile-only-arrows .slider-arrow {
        position: relative !important;
        margin: 0 !important;              /* Verwijder margin zodat 'gap' het werk doet */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* 4. Algemene Mobiele Layout */
    /* 4. Algemene Mobiele Layout */
.slider-location { 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
    margin-bottom: 80px;
    padding: 0 15px; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* De wrapper bepaalt de 'view' van de slider */
.slider-wrapper { 
    order: 2; 
    width: 280px !important; /* Hier zet je de VASTE breedte voor alle items */
    margin: 0 auto !important;
    position: relative;
    overflow: hidden;
}

/* Elke slide MOET exact de breedte van de wrapper overnemen */
	.slide {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		box-sizing: border-box;
	}

	.garage-card-wrapper {
		width: 100% !important;
		display: flex;
		justify-content: center;
	}

	.garage-card { 
		display: flex !important; 
		flex-direction: column !important; 
		width: 100% !important;      /* Dwingt de kaart naar de 280px van de wrapper */
		max-width: 100% !important; 
		border-width: 6px !important; 
		box-sizing: border-box !important; /* Zorgt dat de border de breedte niet beïnvloedt */
		background: #fff;
	}

	.garage-image { 
		order: 1; 
		height: 180px; 
		width: 100%;
	}

	.garage-info { 
		order: 2; 
		width: 100%;
		box-sizing: border-box;
		padding: 30px 15px !important;
	}

    .slider-dots { 
        position: relative !important; 
        left: 0 !important; 
        order: 3; 
        margin-top: 20px; 
        justify-content: center;
    }

    /* 5. Content fixes (Zwarte blok en titels) */
    .slider-wrapper .garage-info {
        min-height: 185px !important; 
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; 
        align-items: center !important;    
        padding: 40px 20px 60px 20px !important; 
        box-sizing: border-box !important;
        text-align: center;
    }

    .slider-wrapper .garage-info h3 { margin-bottom: 10px !important; text-align: center; }
    .slider-wrapper .garage-info p { margin: 0 !important; text-align: center; }

    /* Verberg onnodige zaken */
    .desktop-only-arrow, .slider-bg-image { display: none !important; }
    .slider-wrapper div[style*="background"][style*="#f4f4f4"] { display: none !important; }
}