/* ==================================== */
/* 1. GLOBALE STIJLEN (body, html) */
/* ==================================== */
body { 
    /* Gebruik de standaard browser fallback tot we Fira Sans toepassen */
    font-family: sans-serif; 
    
    /* Belangrijk: margin 0 om de volledige controle te hebben */
    margin: 0; 
    
    /* De lichte, zanderige achtergrondkleur */
    background-color: #FFF8F3; 
}

/* ==================================== */
/* 2. CONTAINER STIJLEN */
/* ==================================== */
.container { 
    /* Maximaal breedte voor leesbaarheid op grote schermen */
    max-width: 800px; 
    
    /* FIX VOOR STICKY HEADER OP MOBIEL: 
       Geef voldoende marge bovenaan de container (bijv. 60px) om
       onder de vaste header te beginnen. */
    margin: 290px auto 30px auto; 
    
    /* Interne witruimte */
    padding: 20px; 
    
    /* Witte achtergrond voor de inhoud */
    background-color: white; 
    
    /* Schaduw en afgeronde hoeken */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    border-radius: 8px; 
}

/* ==================================== */
/* 3. KNOPPEN & ACTIE-ELEMENTEN */
/* ==================================== */
.back-button { 
    display: inline-block; 
    margin-bottom: 20px; 
    padding: 8px 15px;
    text-decoration: none; 
    
    /* Gravelstrook.cc kleuren */
    color: white; 
    background-color: #E67300; 
    
    border-radius: 4px;
    transition: background-color 0.3s ease; 
}

.back-button:hover {
    /* Donkerdere kleur voor de hover-state */
    background-color: #B35A00; 
}

/* ==================================== */
/* 4. EMBEDS & LAYOUT COMPONENTEN */
/* ==================================== */
.embed-section { 
    margin-top: 30px; 
    padding-top: 20px; 
    /* Lichte scheidingslijn tussen embeds */
    border-top: 1px solid #ddd; 
}

iframe { 
    /* Standaard styling voor Komoot/kaart embeds */
    border: 1px solid #ddd; 
    border-radius: 4px;
}

.loading { 
    text-align: center; 
    padding: 50px; 
}

.instagram-media a {
    display: none !important;
}

/* ==================================== */
/* 5. Formulier Stijlen (Upload Pagina) */
/* ==================================== */

/* Zorg dat de container de juiste layout heeft */
.container {
    padding-top: 140px; 
    padding-bottom: 40px;
    max-width: 600px; 
    margin: 0 auto;
}

/* Stijl voor ALLE labels: forceer ze om een eigen regel in te nemen */
.container label {
    display: block; /* Essentieel: zorgt voor nieuwe regel en volle breedte */
    margin-top: 20px;
    margin-bottom: 5px; /* Ruimte onder het label */
    font-weight: bold;
}

/* Stijl voor alle input-velden, textarea's en selects: forceer ze om een eigen regel in te nemen */
.container input[type="text"],
.container input[type="file"],
.container textarea,
.container select,
/* De 'fieldset' moet ook een block zijn als je wilt dat de elementen eromheen goed uitlijnen */
.container fieldset { 
    width: 100%;
    padding: 10px;
    /* De padding op de velden zelf kan je aanpassen, maar ze moeten onder de label staan */
    
    /* Input, textarea en select stijlen */
    box-sizing: border-box; /* Zorgt dat padding binnen de 100% breedte blijft */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 20px; /* Ruimte onder het invoerveld */
    display: block; /* Essentieel: zorgt voor nieuwe regel en volle breedte */
}

/* File inputs zien er vaak anders uit, maar we geven ze hier dezelfde layout */
.container input[type="file"] {
    padding: 10px 0; /* Padding iets aanpassen voor file input */
    border: none;
}
/* Stijlen voor de groepering van radio buttons en checkboxes */
.radio-group,
.checkbox-group {
    /* Zorg dat de fieldset zelf netjes uitlijnt */
    display: block;
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

.radio-group legend {
    font-weight: bold;
    margin-bottom: 10px;
}

/* NIEUWE STIJL: Dwing elke optie op een nieuwe regel */
.radio-group .radio-option {
    display: block;
    /* Zorgt dat elke div op een nieuwe regel start */
    margin-bottom: 10px;
    /* Creëert ruimte tussen de opties */
    line-height: 1.4;
    /* Betere leesbaarheid */
}

/* Zorg dat de elementen binnen de div weer 'inline' zijn */
.radio-group .radio-option input[type="radio"],
.radio-group .radio-option label {
    display: inline-block;
    vertical-align: middle;
    /* Lijnt het bolletje en de tekst netjes uit */
    margin-top: 0;
    margin-bottom: 0;
}

/* Zorg dat de label niet vetgedrukt is in deze groep (als er een algemene label stijl is) */
.radio-group .radio-option label {
    font-weight: normal;
    cursor: pointer;
}

/* Zorg dat de checkbox groep wat ruimte heeft */
.checkbox-group {
    margin-top: 20px; 
    margin-bottom: 20px;
}

/* De wrapper div dwingt de hele optie op een nieuwe regel */
.checkbox-group .checkbox-option {
    display: block; 
    line-height: 1.4;
    margin-bottom: 5px;
}

/* Zorg dat de elementen binnen de div weer 'inline' zijn */
.checkbox-group .checkbox-option input[type="checkbox"],
.checkbox-group .checkbox-option label {
    display: inline-block;
    vertical-align: middle; /* Lijnt het vinkje en de tekst netjes uit */
    margin-top: 0;
    margin-bottom: 0;
}

/* Zorg ervoor dat de labelstijl niet botst met algemene stijlen */
.checkbox-group .checkbox-option label {
    font-weight: normal; 
    cursor: pointer;
    /* Extra marge tussen checkbox en tekst */
    margin-left: 5px; 
}

/* Zorg dat de checkbox input zelf niet 100% breed is */
.checkbox-group .checkbox-option input[type="checkbox"] {
    width: auto;
}

/* ==================================== */
/* 7. KNOPPEN & ACTIE-ELEMENTEN */
/* ==================================== */

/* Basisstijl voor alle knoppen en ankerlinks die als knop fungeren */
.popup-button,
.copy-button-fix,
.submit-button {
    /* Layout */
    display: block; /* Maakt de knoppen even breed als hun container */
    width: 100%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box; /* Zorgt dat padding binnen de breedte valt */
    
    /* Typografie en Uiterlijk */
    color: white;
    font-size: 14px;
    font-weight: normal !important;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px; 
    transition: background-color 0.2s, opacity 0.2s;
}

/* 1. Hoofdkleur (Oranje: Download GPX, Coördinaten Kopiëren, Verzenden) */
.gpx-button,
.copy-button-fix,
.submit-button {
    background-color: #E67300; /* Gravelstrook Oranje */
}

/* 2. Secundaire kleur (Grijs: Meer Details) */
.details-button {
    background-color: #6A6A6A; 
}

/* 3. Hover Effect */
.popup-button:hover,
.copy-button-fix:hover,
.submit-button:hover,
.details-button:hover {
    opacity: 0.9;
    /* Specifieke donkerder hover kleur voor Oranje knoppen */
    background-color: #cc6600; 
}

/* Uitzondering voor de grijze knop, zodat de hover kleur niet oranje wordt */
.details-button:hover {
    background-color: #5a5a5a;
}

/* 4. Visuele Feedback (voor de Kopieerfunctie in JS) */
.copy-button-fix.copied-feedback {
    background-color: #4CAF50 !important; /* Groen (succes) */
}

/* ==================================== */
/* 9. STICKY KNOP RECHTS ONDER */
/* ==================================== */

.sticky-button {
    /* 1. Positionering */
    position: fixed; /* Zorgt dat de knop 'vast' blijft tijdens het scrollen */
    bottom: 50px;    /* 25 pixels van de onderkant */
    right: 40px;     /* 25 pixels van de rechterkant */
    z-index: 1000;   /* Zorgt dat hij boven alle andere elementen ligt */

    /* 2. Stijl (Gebruikt Gravelstrook Oranje) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: #E67300; /* Oranje */
    color: white;
    text-decoration: none;
    
    /* 3. Vorm en Grootte */
    width: 50px;       /* Breedte */
    height: 50px;      /* Hoogte */
    border-radius: 50%; /* Maak de knop perfect rond */
    
    /* 4. Typografie en Effecten */
    font-size: 30px;   /* Groot plus-teken */
    line-height: 1;    /* Zorgt dat de '+' gecentreerd is */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Duidelijke schaduw */
    transition: background-color 0.2s, transform 0.2s;
}

.sticky-button:hover {
    background-color: #cc6600; /* Donkerder oranje bij hover */
    transform: scale(1.05);    /* Lichte vergroting bij interactie */
}