/*
    © 2024 élo consultancy. Alle rechten voorbehouden. Het gebruik of delen van deze code, 
    geheel of gedeeltelijk, is niet toegestaan zonder schriftelijke toestemming van élo consultancy. 

    Deze code vertegenwoordigt een zorgvuldig ontwikkelde intellectuele inspanning van élo consultancy, 
    en het behoud van exclusieve rechten is cruciaal om de integriteit van ons werk te waarborgen. 
    Het ongeoorloofd kopiëren, aanpassen of verspreiden van deze code kan leiden tot inbreuk op onze auteursrechten.
    
    Wij moedigen echter samenwerking en het delen van kennis aan. 
    Mocht u interesse hebben in het gebruik van deze code of delen ervan, 
    neem dan alstublieft contact met ons op via hallo@elo-consultancy.nl. 
    We staan open voor discussie en samenwerking, 
    en zijn bereid om passende toestemming te verlenen indien dit wederzijds overeengekomen is.
    
    Bedankt voor uw begrip en respect voor ons creatieve werk.
*/

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #e6f0ff, #f8f9fc);
    color: #333;
}

header {
    background: linear-gradient(135deg, #21468B, #FF5733);
    color: white;
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

header h1 {
    font-size: 4rem;
    margin: 0;
    animation: fadeIn 1.5s ease-in-out;
}

header p {
    font-size: 1.5rem;
    margin-top: 1rem;
    animation: slideIn 2s ease-in-out;
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: rotateShine 10s infinite;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes rotateShine {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.status-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(135deg, #ffffff, #f0f8ff);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
 /*   border: 3px solid #21468B; /* Dikkere rand voor visuele impact */
}

.status-container:hover {
    transform: translateY(-10px); /* Lift het element omhoog bij hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Icon-styling */
.status-container .status-icon {
    margin-bottom: 1.5rem;
}

.status-container .flag-icon {
    width: 120px;
    height: auto;
    animation: wave 1.5s infinite; /* Versnelde golfanimatie */
}

@keyframes wave {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

/* Titel styling */
.status-container h2 {
    font-size: 2.5rem;
    margin: 0.5rem 0;
    color: #21468B;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Beschrijving styling */
.status-container p {
    font-size: 1.3rem;
    color: #333;
    margin: 1rem 0;
    line-height: 1.6;
}

/* Wimpel styling als tekst */
.status-container .wimpel-text {
    margin-top: 1.5rem;
    font-size: 1.5rem;
    color: #FF5733; /* Oranje kleur voor tekst */
    font-weight: bold;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: popEffect 2s infinite ease-in-out; /* Nieuwe animatie toegevoegd */
}

.status-container .wimpel-text i {
    font-size: 1.8rem; /* Maak het icoon groter */
    color: #FF5733;
}

/* Nieuwe animatie voor pop-effect */
@keyframes popEffect {
    0% {
        transform: scale(1); /* Normale grootte */
    }
    50% {
        transform: scale(1.1); /* Iets groter */
    }
    100% {
        transform: scale(1); /* Terug naar normale grootte */
    }
}


/* Responsieve aanpassing */
@media (max-width: 768px) {
    .status-container {
        padding: 1.5rem;
    }

    .status-container h2 {
        font-size: 2rem;
    }

    .status-container p {
        font-size: 1.1rem;
    }

    .status-container .flag-icon {
        width: 90px;
    }

    .status-container .wimpel-text {
        font-size: 1.2rem;
    }
}


/* Confetti-container */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: #FF5733;
    opacity: 0.8;
    animation: fall 4s linear infinite;
}

.confetti-piece:nth-child(odd) {
    background-color: #21468B;
}

/* Confetti Animatie */
@keyframes fall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Countdown-widget */
.countdown-widget {
    text-align: center;
    margin: 20px 0;
    background: #f4f4f4;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-size: 2rem;
    font-weight: bold;
    color: #21468B;
    animation: fadeIn 1s ease-in-out;
}

.countdown-widget h3 {
    font-size: 2rem;
    margin: 0;
  /*   color: #FF5733; */
}
.countdown-widget .time-unit {
    color: #21468B; /* Blauw voor de woorden */
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0 5px;
}

.countdown-widget .time-value {
    color: #FF5733; /* Oranje voor de cijfers */
    font-weight: bold;
    font-size: 2rem;
    margin: 0 5px;
}
#countdown-timer {
    text-align: center;
    font-size: 1.5rem; /* Basisgrootte voor tekst */
    font-weight: bold;
}

#countdown-timer .time-value {
    color: #FF5733; /* Oranje voor cijfers */
    font-size: 2rem; /* Maak de cijfers groter */
    font-weight: bold;
}

#countdown-timer .time-unit {
    color: #21468B; /* Blauw voor de tekst */
    font-size: 1.5rem; /* Houd de tekst iets kleiner */
}



ul li {
    position: relative;
    padding-right: 40px;
}

ul li .ribbon-icon > i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #FF5733 !important;
    font-size: 1.8rem;
}

main {
    max-width: 1000px;
    margin: 3rem auto;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #21468B;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

p {
    font-size: 1.2rem;
    line-height: 1.8;
}

ul {
    list-style: none;
    padding: 0;
}

ul li {
    background: #f9fcff;
    padding: 1rem;
    margin: 0.5rem 0;
    border: 2px solid #d0d7e2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

ul li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

ul li i {
    font-size: 1.8rem;
    color: #21468B;
    margin-right: 1rem;
}

footer {
    text-align: center;
    padding: 1.5rem;
    background: #21468B;
    color: white;
    margin-top: 2rem;
}

footer a {
    color: #f4d03f;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.download-calendar {
    display: inline-block;
    margin: 20px 0;
    padding: 10px 20px;
    background-color: #FF5733;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.download-calendar:hover {
    background-color: #e14b2d;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.social-share {
    text-align: center;
    margin-top: 20px;
}

.social-share a {
    margin: 0 10px;
    text-decoration: none;
    font-size: 1.2rem;
    color: #21468B;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
}

.social-share a:hover {
    background-color: #FF5733;
    color: white;
}

/* Sticky balk met logo */
.logo-bar {
    background-color: white;
    text-align: center;
    padding: 1rem 0;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
    max-height: 60px;
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .logo {
        max-height: 50px;
    }
}

@media (max-width: 480px) {
    .logo {
        max-height: 40px;
    }
}
#faq {
    margin: 2rem auto;
    max-width: 800px;
    padding: 0 1rem;
}

#faq h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #21468B;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* FAQ Items met dunne scheidingslijn */
.faq-item {
    padding: 1rem 0;
    margin: 0;
    border-bottom: 1px solid #ddd; /* Dunne grijze scheidingslijn */
    cursor: pointer;
    position: relative;
    padding-left: 1rem; /* Ruimte voor de oranje rand */
}

.faq-item:last-child {
    border-bottom: none; /* Verwijder de lijn onder het laatste item */
}

/* Actieve FAQ met oranje rand links */
.faq-item.active {
    border-left: 4px solid #FF5733; /* Oranje rand links */
    padding-left: 0.8rem; /* Compenseer ruimte door de rand */
}

.faq-icon {
    font-size: 1.5rem;
    color: #21468B;
    margin-right: 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Draai de plus om in een kruisje */
    color: #FF5733;
}

.faq-question {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.faq-answer {
    font-size: 1rem;
    color: #555;
    margin-top: 0.5rem;
    line-height: 1.6;
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.faq-item.active .faq-answer {
    display: block;
}

/* Fade-in animatie */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 /* Hoofdcontainer voor de widget en advies */
.weather-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1rem;
    box-sizing: border-box;
}

/* Widget-container */
.weather-widget-container {
    flex: 1 1 48%; /* Naast elkaar op grote schermen, 48% breed */
    max-width: 600px;
    text-align: center;
    background: linear-gradient(145deg, #ffffff, #f3f4f7);
    border-radius: 20px;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.1),
        inset 0 2px 6px rgba(255, 255, 255, 0.6),
        inset 0 -2px 6px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
}

/* Weather-advice container */
.weather-advice {
    flex: 1 1 48%; /* Naast elkaar op grote schermen, 48% breed */
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 25px;
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.15), 
        inset 0 -4px 6px rgba(255, 255, 255, 0.8), 
        inset 0 4px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    border: 2px solid #d1d2d6;
    backdrop-filter: blur(15px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Icoon in Weather Advice */
.weather-icon {
    font-size: 3.5rem;
    color: #007AFF;
    margin-bottom: 1.5rem;
    animation: weatherIconFloat 3s infinite ease-in-out;
}

/* Animatie voor het icoon */
@keyframes weatherIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Responsive gedrag voor mobiele apparaten */
@media screen and (max-width: 768px) {
    .weather-container {
        flex-direction: column;
        gap: 20px;
    }

    .weather-widget-container, .weather-advice {
        flex: 1 1 100%; /* Volledige breedte */
    }
}


.refresh-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3; /* Lichtgrijze achtergrond */
    border-top: 6px solid #FF5733; /* Oranjerode kleur voor de bovenkant */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

body.pulling {
    background: linear-gradient(0deg, #f7f7f7, #eaeaea);
}