/* --- Jouw Wrijf! Kleurenpalet --- */
:root {
    --wrijf-oranje: #ea8914;
    --wrijf-blauw: #026eb3;
    --wrijf-rood: #e62b2a;
    --wrijf-groen: #86b957;
    --wrijf-paars: #7a4896;
    --wrijf-geel: #f8c016;

    --wrijf-licht: #fffcf6;
    --wrijf-donker: #343338;
    --wrijf-wit: #ffffff;
}

/* --- Algemene Styling --- */
.text-oranje {
    color: var(--wrijf-oranje);
}

.text-blauw {
    color: var(--wrijf-blauw);
}

.text-rood {
    color: var(--wrijf-rood);
}

.text-groen {
    color: var(--wrijf-groen);
}

.text-paars {
    color: var(--wrijf-paars);
}

.text-geel {
    color: var(--wrijf-geel);
}

.text-dark {
    color: var(--wrijf-donker);
}

.text-light {
    color: var(--wrijf-licht);
}

.bg-light {
    background-color: var(--wrijf-licht) !important;
}

.bg-dark {
    background-color: var(--wrijf-donker) !important;
}


body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--wrijf-licht);
    color: var(--wrijf-donker);
    padding-top: 76px;
    /* Ruimte voor de fixed navbar */
}

/* --- Typografie voor Koppen en Merknaam --- */
h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title {
    font-family: 'skippy-sharp', sans-serif;
}

p, a, span {
    font-family: 'Nunito', sans-serif;
}

/* --- Skippy Sharp Vergroten --- */
/* Omdat dit lettertype kleiner uitvalt, vergroten we de specifieke elementen */

/* Het logo linksboven */
.navbar-brand {
    font-size: 2.5rem !important;
    color: var(--wrijf-oranje) !important;
    /* Was ongeveer 1.75rem */
}

/* Styling voor de menu-linkjes (Nunito) */
.nav-link {
    color: var(--wrijf-donker) !important;
    transition: color 0.3s ease;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
}

/* Bij hoveren of als je in dat specifieke deel van de site bent: Wrijf-oranje! */
.nav-link:hover,
.nav-link.active {
    color: var(--wrijf-oranje) !important;
}

/* --- Transparante Navigatiebalk (Glassmorphism) --- */
.nav-glass {
    /* De achtergrond is wit, maar voor 15% doorzichtig (0.85) */
    background-color: rgba(255, 255, 255, 0.85) !important;

    /* Dit is de magie: het vervaagt de elementen die ACHTER de menubalk scrollen */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Zorgt dat het ook op Apple-apparaten (Safari) perfect werkt */

    /* Een soepele overgang voor als de pagina laadt */
    transition: all 0.3s ease-in-out;
}

/* De grote hoofdtitel ("Liefde in een flesje") */
.hero-section h1 {
    font-size: calc(1.8rem + 4.5vw) !important;
    /* Schaaft mooi mee op mobiel, maar is groter dan standaard */
}

/* De sectietitel ("Kies jouw moment") */
h2.display-5 {
    font-size: calc(1.6rem + 2.5vw) !important;
}

/* --- Hero Sectie (MET ACHTERGROND FOTO) --- */
.hero-section {
    min-height: 90vh;
    /* Iets hoger gemaakt voor maximale impact */
    position: relative;
    /* Nodig voor de overlay */

    /* DE BELANGRIJKSTE REGELS VOOR DE FOTO */
    background-image: url('../images/wrijf-regenboogpakket-5.jpg');
    /* Vervang door jouw bestandspad */
    background-size: cover;
    /* De foto bedekt de hele ruimte */
    background-position: center;
    /* Het midden van de foto is altijd zichtbaar */
    background-repeat: no-repeat;
}

/* De Overlay: Een subtiele tint voor leesbaarheid */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 51, 56, 0.4);
    /* We gebruiken jouw wrijf-donker kleur, deels transparant */
    z-index: 1;
    /* Staat ACHTER de tekst, maar VOOR de foto */
}

/* De Content: Zorgen dat de tekst VOOR de overlay staat */
.hero-content {
    position: relative;
    z-index: 2;
    /* Staat VOOR de overlay */
}

/* Zorg dat de Skippy Sharp koppen in de hero wit zijn */
.hero-section h1 {
    color: var(--wrijf-wit) !important;
}

/* Speciale Actieknop (wit op deze achtergrond) */
.btn-hoofd {
    background-color: var(--wrijf-wit);
    /* Wit contrastreert beter op de foto */
    color: var(--wrijf-oranje);
    /* Tekst in merk-oranje */
    border: none;
    transition: all 0.3s ease;
}

.btn-hoofd:hover {
    background-color: var(--wrijf-oranje);
    /* Oranje op hover */
    color: var(--wrijf-wit);
    /* Witte tekst op hover */
    transform: scale(1.05);
}

/* --- Product Cards --- */
/* De namen van de oliën in de kaarten ("Relax", "Slaap", etc.) */
.card-title {
    font-size: 2.3rem !important;
    /* Zorgt dat de namen echt van het scherm knallen */
}

.product-card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(52, 51, 56, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--wrijf-wit);
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-10px);
    /* Kaart komt iets omhoog */
    box-shadow: 0 15px 30px rgba(52, 51, 56, 0.1);
}

/* --- Zorgen dat de knoppen altijd mooi onderaan uitlijnen --- */
.product-card .card-body {
    display: flex;
    flex-direction: column;
}

/* Zorg dat alle footers exact even hoog zijn, zodat de knoppen op 1 lijn blijven */
.product-card .card-footer {
    min-height: 120px;
    /* Dit is genoeg ruimte voor de langste ingrediëntenlijst */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centreert de tekst netjes verticaal in de footer */
}

/* Gekleurde lijnen boven de kaarten */
.card-relax {
    border-top: 6px solid var(--wrijf-oranje);
}

.card-slaap {
    border-top: 6px solid var(--wrijf-blauw);
}

.card-kracht {
    border-top: 6px solid var(--wrijf-rood);
}

.card-blij {
    border-top: 6px solid var(--wrijf-groen);
}

.card-nest {
    border-top: 6px solid var(--wrijf-paars);
}

.card-nog {
    border-top: 6px solid var(--wrijf-geel);
}

/* Visuele weergave van de flesjes/kleuren (Tijdelijke 'blobs' totdat je foto's hebt) */
.kleur-blob {
    width: 80px;
    height: 80px;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 8s ease-in-out infinite;

    /* NIEUW: Maak de blob een Flex-container voor centering */
    display: flex;
    justify-content: center;
    /* Horizontaal centreren */
    align-items: center;
    /* Verticaal centreren */
    overflow: hidden;
}

/* Styling voor het icon zelf binnen de blob */
.blob-icon {
    width: 50px;
    /* Stel hier de gewenste breedte van je icon in */
    height: auto;
    /* Behoud de verhoudingen */
    display: block;
    /* Zorgt voor correcte centering in flex */
}

.blob-relax {
    background-color: var(--wrijf-oranje);
}

.blob-slaap {
    background-color: var(--wrijf-blauw);
}

.blob-kracht {
    background-color: var(--wrijf-rood);
}

.blob-blij {
    background-color: var(--wrijf-groen);
}

.blob-nest {
    background-color: var(--wrijf-paars);
}

.blob-nog {
    background-color: var(--wrijf-geel);
}

/* Simpele organische animatie voor de kleuren */
@keyframes morph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    34% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    }
}

/* --- Basis styling voor de Wrijf! productknoppen --- */
.btn-wrijf {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    /* Een mooie, zachte pill-vorm */
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-top: auto;
    /* Dit duwt de knop altijd helemaal naar beneden! */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Een soepele animatie als je met je muis over de knop gaat */
.btn-wrijf:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(52, 51, 56, 0.15);
}

/* --- Kleurspecifieke Knoppen --- */
.btn-oranje {
    background-color: var(--wrijf-oranje);
    color: var(--wrijf-wit);
}

.btn-oranje:hover {
    background-color: #d1780d;
    color: var(--wrijf-wit);
}

/* Iets donkerder bij hover */

.btn-blauw {
    background-color: var(--wrijf-blauw);
    color: var(--wrijf-wit);
}

.btn-blauw:hover {
    background-color: #015891;
    color: var(--wrijf-wit);
}

.btn-rood {
    background-color: var(--wrijf-rood);
    color: var(--wrijf-wit);
}

.btn-rood:hover {
    background-color: #cc2524;
    color: var(--wrijf-wit);
}

.btn-groen {
    background-color: var(--wrijf-groen);
    color: var(--wrijf-wit);
}

.btn-groen:hover {
    background-color: #72a148;
    color: var(--wrijf-wit);
}

.btn-paars {
    background-color: var(--wrijf-paars);
    color: var(--wrijf-wit);
}

.btn-paars:hover {
    background-color: #643b7c;
    color: var(--wrijf-wit);
}

.btn-geel {
    background-color: var(--wrijf-geel);
    color: var(--wrijf-wit);
}

.btn-geel:hover {
    background-color: #e0ac10;
    color: var(--wrijf-wit);
}


/* --- Universeel Fotokader voor Modals (Pop-ups) --- */

/* 1. Het Frame zelf: Bepaalt de vorm en centering */
.modal-product-frame {
    /* We dwingen een vaste verhouding af (staand, 4:5 is mooi voor flesjes) */
    aspect-ratio: 3 / 4;

    /* Zorgt voor perfecte verticale en horizontale centering van de foto */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Een heel zachtgrijze achtergrond voor als de foto kleiner is */
    background-color: var(--wrijf-licht);

    /* Zorgt dat foto's niet buiten het kader treden */
    overflow: hidden;

    /* Subtiele binnenwaartse schaduw voor een echt 'frame' effect */
    box-shadow: inset 0 2px 10px rgba(52, 51, 56, 0.05);

    /* Ruimte aan de onderkant op mobiel */
    margin-bottom: 1.5rem;
}

/* Op grotere schermen halen we de margin-bottom weg omdat de tekst er naast staat */
@media (min-width: 768px) {
    .modal-product-frame {
        margin-bottom: 0;
    }
}

/* 2. De Foto binnen het frame */
.modal-product-image {
    /* De magische regel: De foto past zich aan aan het kader ZONDER vervorming */
    object-fit: cover;

    /* De foto moet 100% van de breedte en hoogte van het frame innemen */
    width: 100%;
    height: 100%;

    /* Zorgt dat het midden van de foto altijd zichtbaar blijft */
    object-position: center;

    /* Een zachte schaduw onder de fles voor diepte */
    filter: drop-shadow(0 5px 15px rgba(52, 51, 56, 0.1));
}

/* --- Footer --- */
.footer {
    background-color: var(--wrijf-donker);
    color: var(--wrijf-licht);
}