/* Consolidated :root variables */
/*controlls*/

div.font-family{
    display: flex;
    flex-direction: column;
    margin-bottom: 10vh;
}

/* Ensure the dropdown itself maintains consistent styling */
select#font-family {
    font-family: inherit; /* or specify a default font */
}

/* For the options - this might not work in all browsers */
select#font-family option {
    font-family: inherit;
}

/*controlls*/



:root {
    /* Color variables */
    --bg-color: #f1f6f6;
    --text-color: #020202;
    --primary-color: #006cdc;
    --primary-color-rgb: 0, 108, 220;
    --border-color: #757575;
    --input-bg-color: #aeabab;
    --placeholder-color: #b5b1b1;
    --header-color: #f1f6f6;




    /* Font variables */
    --font-size: 16px;
    --input-padding: 8px;
    --font-family: Arial, sans-serif;
}

input::placeholder,
textarea::placeholder {
    color: var(--placeholder-color);
    opacity: 1; /* Ensures full visibility (some browsers reduce opacity) */
}

/* Theme overrides */


/*/////////////////////////////////                            ///////////////////////////////////////////////////////*/


[data-theme="dark"] {
    --bg-color: #232323;
    --text-color: #f1ecec;
    --primary-color: #8ab4f8;
    --primary-color-rgb: 138, 180, 248;
    --border-color: #c1baba;
    --placeholder-color: #f1ecec;
    --header-color: #f1f6f6;

}
/*/////////////////////////////////         BLUE                   ///////////////////////////////////////////////////////*/

[data-theme="blue"] {
    --bg-color: #e6f0ff;
    --text-color: #131001;
    --primary-color: #0066cc;
    --primary-color-rgb: 0, 102, 204;
    --border-color: #99c2ff;
    --placeholder-color: #000000;
}

[data-theme="blue"] input, center_container zoeken{
    --bg-color: #58a0e1;
    --text-color: #020e19;
}



[data-theme="blue"] button{
    --bg-color: #58a0e1;
    --text-color: #010d17;
}


/*overview*/

[data-theme="blue"] .next-transfer-block {

    --bg-color: #58a0e1;
    --text-color: #020e19;


}
[data-theme="blue"] header {

    --bg-color: #58a0e1;
    --text-color: #020e19;


}

[data-theme="blue"] div.optie {

    --bg-color: #58a0e1;
    --text-color: #020e19;


}
[data-theme="blue"] div.optie {

    --bg-color: #58a0e1;
    --text-color: #020e19;


}
[data-theme="blue"] #tripCounter {

    --bg-color: #58a0e1;
    --text-color: #020e19;


}

[data-theme="blue"] p {

    --bg-color: #58a0e1;
    --text-color: #020e19;


}


/*/////////////////////////////////                            ///////////////////////////////////////////////////////*/


[data-theme="lilac"]  {
    --bg-color: #291b39;
    --text-color: #dccfa3;
    --primary-color: #504f2b;
    --primary-color-rgb: 80, 79, 43;
    --border-color: #fff2a0;
    --placeholder-color: #1c1601;
    --header-color: #ede194;

}

[data-theme="lilac"] input{
    --bg-color: #ede194;
    --text-color: #1c1601;


}

[data-theme="lilac"] button {
    --bg-color: #ede194;
    --text-color: #291b39;
    --border-color: #fff2a0;;

}

[data-theme="lilac"] #settings-button-id {
    --bg-color: #88CCEE;
    --text-color: #291b39;
    --border-color: #fff2a0;;

}

/*overview*/

[data-theme="lilac"] .next-transfer-block {

    --bg-color: #fff2a0;
    --text-color: #291b39;


}
[data-theme="lilac"] header {

    --bg-color: #ede194;
    --text-color: #291b39;


}

[data-theme="lilac"] div.optie {

    --bg-color: #ede194;
    --text-color: #291b39;


}
[data-theme="lilac"] div.optie {

    --bg-color: #ede194;
    --text-color: #291b39;


}
[data-theme="lilac"] #tripCounter {

    --bg-color: #291b39;
    --text-color: #ede194;


}

[data-theme="lilac"] section#transfer {
    --bg-color: #291b39;
    --text-color: #ede194;
}

[data-theme="lilac"] div.richting, #timeDiv {

    --bg-color: #ed94ac;
    --text-color: #f5f9fa;


}



/*/////////////////////////////////                            ///////////////////////////////////////////////////////*/

[data-theme="yellow"] {
    --bg-color: #fff2a0;
    --text-color: #062c0d;
    --border-color: #CC6677;
    --primary-color: #CC6677;
    --primary-color-rgb: 204, 102, 119;
    --placeholder-color: #062c0d;
}

[data-theme="yellow"] input, center_container zoeken{
    --bg-color: #CC6677;
    --text-color: #062c0d;
}



[data-theme="yellow"] button {

    --bg-color: #CC6677;
    --text-color: #062c0d;

}

/*overview*/
[data-theme="yellow"] .next-transfer-block {

    --bg-color: #CC6677;
    --text-color: #0f1d21;


}
[data-theme="yellow"] header {

    --bg-color: #CC6677;
    --text-color: #011004;


}
[data-theme="yellow"] div.optie {

    --bg-color: #CC6677;
    --text-color: #011004;


}
[data-theme="yellow"] div.optie {

    --bg-color: #CC6677;
    --text-color: #011004;


}
[data-theme="yellow"] #tripCounter {


    --text-color: #011004;


}
[data-theme="yellow"] section#transfer {
    --bg-color: #CC6677;
    --text-color: #011004;
}


/*/////////////////////////////////                            ///////////////////////////////////////////////////////*/



[data-theme="green"] {
    --bg-color: #21231d;
    --text-color: #e6e4ba;
    --border-color: #2a4c20;
    --primary-color: #337521;
    --primary-color-rgb: 51, 117, 33;
    --placeholder-color: #e6e4ba;

}



[data-theme="green"] input, center_container zoeken{
    --bg-color: #2b7c23;
    --text-color: #e6e4ba;

}



[data-theme="green"] button {

    --bg-color: #2b7c23;
    --text-color: #fff2a0;
    --zoeken-color: #2b7c23;

}

/*overview*/
[data-theme="green"] .next-transfer-block {

    --bg-color: #2b7c23;
    --text-color: #fff2a0;


}
[data-theme="green"] header {

    --bg-color: #2b7c23;
    --text-color: #fff2a0;


}
[data-theme="green"] div.optie {

    --bg-color: #2b7c23;
    --text-color: #fff2a0;


}
[data-theme="green"] div.optie {

    --bg-color: #2b7c23;
    --text-color: #fff2a0;


}
[data-theme="green"] #tripCounter {


    --text-color: #fff2a0;


}
[data-theme="green"] section#transfer {
    --bg-color: #fff2a0;
    --text-color: #206719;
}


/*/////////////////////////////////                            ///////////////////////////////////////////////////////*/

[data-theme="high-contrast"] {
    --bg-color: #153a45;
    --text-color: #fbf9f9;
    --border-color: #FFA500;
    --primary-color: #4169E1;
    --primary-color-rgb: 65, 105, 225;
    --placeholder-color: #314da3;

}

[data-theme="high-contrast"] input, center_container zoeken {
    --bg-color: #FFA500;
    --text-color: #000000;
}



[data-theme="high-contrast"] button {

    --bg-color: #FFA500;
    --text-color: #000000;
    --zoeken-color: #FFA500;

}

[data-theme="high-contrast"] div.optie {

    --bg-color: #FFA500;
    --text-color: #000000;


}
[data-theme="high-contrast"] div.optie {

    --bg-color: #FFA500;
    --text-color: #000000;


}
[data-theme="high-contrast"] #tripCounter {

    --text-color: #faf6f6;


}

[data-theme="high-contrast"] section#transfer {

    --text-color: #faf6f6;
}


/* Base styles */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    margin: 0;
    padding: 20px;
    transition: all 0.3s ease;
    max-width: 100%;
    overflow-x: hidden;
}

/* Form elements */
.route, .time, select, button, textarea, .test-class,
#startpunt, #eindpunt, #label-time, #label-datum, #tijd, #datum, .zoeken button, settings-button, a,
div.optie, #nextButton, #prevButton, #tripCounter, .next-transfer-block, div.richting, h3
, section#transfer

{

    font-family: var(--font-family);
    font-size: calc(var(--font-size) * 0.9);
    padding: calc(var(--input-padding) * 0.8);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-color);
    color: var(--text-color);

    margin: 1vh 0;
    width: 100%;
}

/* Form elements */
div.time,.next-transfer-title, #travelOptions, .trein, .duratie,  header.header-overview,
div.train_div, route-header, info-train {

    border: 2px transparent var(--border-color);
    font-family: var(--font-family);
    font-size: calc(var(--font-size) * 0.9);
    padding: calc(var(--input-padding) * 0.8);
    border-radius: 10px;
    background-color: var(--bg-color);
    color: var(--text-color);

    margin: 1vh 0;
    width: 100%;
}

/* Update to routeDetails.css */

/* Replace this in routeDetails.css */
header {
    background-color: var(--bg-color, #003082); /* Use CSS variable with fallback */
    color: var(--text-color, white); /* Use CSS variable with fallback */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Match shadow style from .optie */
    text-align: center;
    margin-bottom: 20px;
    width: calc(100% - 50px); /* Account for main's padding */
    max-width: 850px; /* 900px - 50px padding */
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px; /* Add rounded corners */
    box-sizing: border-box; /* Ensure padding is included in width */
}

header h2 {
    font-size: 1.6rem;
    line-height: 1.3;
    color: var(--text-color, white); /* Add this line to ensure text color changes too */
}

/* Thema kleuren voor tijdweergave */
[data-theme="blue"] .time h3,
[data-theme="blue"] .time h3 b {
    color: var(--text-color) !important;
}

[data-theme="lilac"] .time h3,
[data-theme="lilac"] .time h3 b {
    color: var(--text-color) !important;
}

[data-theme="yellow"] .time h3,
[data-theme="yellow"] .time h3 b {
    color: var(--text-color) !important;
}

[data-theme="green"] .time h3,
[data-theme="green"] .time h3 b {
    color: var(--text-color) !important;
}

[data-theme="high-contrast"] .time h3,
[data-theme="high-contrast"] .time h3 b {
    color: var(--text-color) !important;
}

/* Verbeterde styling voor de settings pagina */

/* Titel styling */
h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2rem;
    color: var(--text-color);
}

h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: var(--text-color);
}

/* Main container styling */
main {
    width: 95%;
    max-width: 550px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--bg-color);
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Controls container */
.controls {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

/* Thema opties sectie */
.theme-options {
    background-color: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Radio buttons container */
.font-family {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 10px;
}

/* Styling voor radio button labels */
.font-family label {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.font-family label:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Verbeterde radio buttons */
.font-family input[type="radio"] {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Font size sectie */
.font-size-section, div:has(> #font-size) {
    background-color: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Font size label */
.font-size-section label, div:has(> #font-size) label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 1.2rem;
}

/* Font size waarde weergave */
#font-size-value {
    font-weight: bold;
    color: var(--primary-color);
}

/* Font size slider */
#font-size {
    width: 100%;
    height: 30px;
    cursor: pointer;
}

/* Font family sectie */
.font-family-section, div:has(> #font-family) {
    background-color: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Font family label */
.font-family-section label, div:has(> #font-family) label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 1.2rem;
}

/* Font family dropdown */
#font-family {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
}

#font-family option {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Home link styling */
.home-button-container, div:has(> a[href="index.html"]) {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.home-button, a[href="index.html"] {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--primary-color, #006cdc);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.2rem;
    text-align: center;
    width: 90%;
    max-width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.home-button:hover, a[href="index.html"]:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Themaselectie indicator - dit zorgt voor visuele feedback op de geselecteerde optie */
.font-family input[type="radio"]:checked + span {
    font-weight: bold;
}

.font-family label:has(> input[type="radio"]:checked) {
    background-color: rgba(var(--primary-color-rgb, 0, 108, 220), 0.3);
    border-left: 4px solid var(--primary-color, #006cdc);
}

/* Media queries voor responsiviteit */
@media screen and (max-width: 480px) {
    body {
        padding: 10px;
    }

    h1 {
        font-size: 1.8rem;
    }

    main {
        padding: 15px;
    }

    .font-family label {
        font-size: 1.1rem;
    }

    .home-button, a[href="index.html"] {
        padding: 12px 20px;
        font-size: 1.1rem;
    }
}