/* --- Styles Généraux --- */

.text{
    text-align: center !important;
    font-size: 27px;
    /* margin-bottom: 15px; */
    padding-bottom: 35px;
    font-family: ui-monospace;

}

h2.vr-grid-title {
    font-family: 'eicons';
    font-size: 25px;
}
div#vr-requirements-section {
    margin-top: -20px;
}

.elementor-2508 .elementor-element.elementor-element-cdf125b {margin-top: -11px !important;}
.elementor-2508 .elementor-element.elementor-element-cdf125b:not(.elementor-motion-effects-element-type-background), .elementor-2508 .elementor-element.elementor-element-cdf125b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #113146 !important;
}


.vr-main-nav-next { margin-left: 10px; }

/* START: Added Code for Country Name Display */
.vr-country-name-display {
    text-align: center;
    color: #a2c8f5;
    font-size: 1.6em;
    font-weight: 700;
    margin-top: 15px;
    padding-bottom: 20px;
}

/* END: Added Code */

/* START: Styles pour la statistique mise en avant (ex: Rang) */
.vr-highlight-stat-container {
    text-align: center;
    /*background-color: #1a3a69;*/
    color: #fff;
    padding: 15px 10px;
    border-radius: 8px;
    margin-top: 20px;
    /* Propriétés ajoutées pour la disposition en 2 colonnes */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.vr-highlight-stat-container .stat-item {
    flex: 1; /* Chaque item prend une part égale de l'espace */
}

.vr-highlight-stat-container .count-label {
    display: block;
    font-size: 1.1em;
    color: #a2c8f5;
    margin-bottom: 5px;
}

.vr-highlight-stat-container .count-number {
    font-size: 2.2em;
    font-weight: 700;
    color: #ffffff;
}
/* END: Styles pour la statistique */

.vr-country-select { width: 100%; padding: 12px; margin-top:15px;background-color: #1a3a69; color: #fff; border: 1px solid #444; border-radius: 8px; margin-bottom: 20px; }


.vr-country-select { width: 100%; padding: 12px; margin-top:15px;background-color: #1a3a69; color: #fff; border: 1px solid #444; border-radius: 8px; margin-bottom: 20px; }
#broeck-passport-index-wrapper { font-family: 'Inter', sans-serif; background-color: #051332; }
.vr-column { background:#113146; padding: 20px; color: #fff; margin-bottom: 8px; margin-top: 0px; }
.vr-section-title { text-align: center; color: #a2c8f5; margin-top: 0; margin-bottom: 20px; font-size: 1.6em; font-weight: 400; border-bottom: 1px solid #24508a; padding-bottom: 29px; padding-top:14px;}

/* --- Grille des Passeports (Haut) --- */
.vr-passport-grid-container .vr-grid-title { text-align: center; color: #fff; font-weight: 300; font-size: 2.1em; margin: 0 0 20px 0; }
.vr-passport-grid { display: grid !important; grid-template-columns: repeat(auto-fit, 70px); justify-content: center; gap: 10px; }
.vr-passport-grid-item { width: 100%; height: 85px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; background-color: #1a3a69; }
.vr-passport-grid-item:hover { transform: scale(1.15); box-shadow: 0 0 15px rgba(0, 123, 255, 0.7); z-index: 10; position: relative; }

/* --- Section Info (Haut) en 3 colonnes --- */
.vr-top-info-section { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 20px; align-items: stretch;margin-top: -22px; }
.vr-top-info-section > .vr-column { margin-bottom: 0; }
.vr-passport-column { flex: 1 1 320px; min-width: 300px; }
.vr-details-column { flex: 1 1 350px; min-width: 300px; }
.vrr-video-player { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* --- Contenu des panneaux supérieurs --- */
.vr-main-selector { display: flex; align-items: center; justify-content: space-between; height: 100%; margin-top: 60px; }
.vr-main-display { flex-grow: 0; text-align: center; /*background-color: #1a3a69;*/ border-radius: 12px; overflow: hidden;margin-top:50px; }
.vr-single-passport-img { max-width: 100%; height: auto; image-rendering: high-quality; }
.vr-main-nav-btn { background: #1a3a69; border: 1px solid #444; color: #fff; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px; line-height: 38px; text-align: center; transition: background-color 0.2s; }
.vr-main-nav-btn:hover { background: #24508a; }
.vr-main-nav-prev { margin-right: 10px; }
.vr-main-nav-next { margin-left: 10px; }
.psprt-dashboard-info .info-item { 
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 1px dashed #444;
    font-size: 1.2em;
}
.vr-video-column {
    flex: 2 1 450px;
    min-width: 300px;
    padding: 0;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-around;
    align-content: flex-start;
    margin-top:-85px;
}
.psprt-dashboard-info .info-item:last-of-type { border-bottom: none; }
.psprt-dashboard-info .info-item span:first-child { color: #a2c8f5; }
.psprt-dashboard-info .info-item .dashicons { font-size: 1.5em; }
.psprt-dashboard-info .dashicons-yes-alt { color: #28a745; }
.psprt-dashboard-info .dashicons-no-alt { color: #dc3545; }

/* --- Styles pour le drapeau --- */
#vr-static-flag-container {
    text-align: center;
    padding-top: 15px;
}
#vr-static-flag {
    font-size: 200px; /* Taille du drapeau */
    line-height: 1;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* --- Section Exigences Visa (Bas) --- */
#vr-requirements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.requirements-col .col-header { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid; font-size: 1.1em; text-align: center; }
.requirements-col ul.country-list { list-style: none; margin: 0; padding: 10px; height: 500px; overflow-y: auto; /*background:#113146; */border-radius: 8px; }
.country-list::-webkit-scrollbar { width: 8px; }
.country-list::-webkit-scrollbar-track { background:     #0a263a; }
.country-list::-webkit-scrollbar-thumb { background: #15345e; border-radius: 4px; }
.country-list::-webkit-scrollbar-thumb:hover { background: #1a394e; }
.country-list li.country-item { display: flex; align-items: center; padding: 8px; border-radius: 4px; transition: background-color 0.2s ease; }
.country-list li.vr-clickable-country:hover { background-color: #1a3547; cursor: pointer; }
.country-item .flag-icon { font-size: 65px; margin-right: 10px; flex-shrink: 0; }
.country-item .country-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-item.citizen-item { background-color: rgba(224, 193, 112, 0.1); border-left: 3px solid #E0C170; font-weight: bold; }

/* --- Styles du Popup & Carrousel --- */
.vr-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.vr-modal-content { background: #0f28495e; color: #fff; border-radius: 12px; width: 100%; max-width: 950px; height: auto; max-height: 90vh; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; align-items: center;}
.vr-modal-close { position: absolute; top: 10px; right: 20px; background: none; border: none; color: #fff; font-size: 1.5em; cursor: pointer; line-height: 1; opacity: 0.7; transition: opacity 0.2s; z-index: 1001; }
.vr-modal-close:hover { opacity: 1; }
.vr-carousel { position: relative; width: 100%; }
.vr-carousel-track-container { width: 100%; overflow: hidden; }
.vr-carousel-track { display: flex; transition: transform 0.3s ease-in-out; }
.vr-carousel-slide { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; padding: 20px 60px; box-sizing: border-box; }
.vr-carousel-slide .passport-container { flex: 1 1 300px; text-align: center; }
.vr-carousel-slide .details-container { flex: 2 1 400px; }
.vr-carousel-slide .vr-single-passport-img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); }

.vr-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: 1px solid #444; color: #fff; width: 50px; height: 50px; cursor: pointer; font-size: 24px; z-index: 10; transition: background-color 0.2s; }
.vr-carousel-btn:hover { background: rgba(255, 255, 255, 0.2); }
.vr-carousel-prev { left: 0px; }
.vr-carousel-next { right: 0px; }

/* --- Responsive --- */
@media (max-width: 1200px) { .vr-top-info-section > .vr-column { flex-basis: 100%; } #vr-requirements-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .vr-carousel-slide { flex-direction: column; text-align: center; padding: 20px; } }
@media (max-width: 768px) { #vr-requirements-grid { grid-template-columns: 1fr; } .requirements-col ul.country-list { height: 300px; } }
@media (max-width: 600px) { .vr-carousel-btn { width: 40px; height: 40px; left: 5px; } .vr-carousel-next { right: 5px; } .vr-modal-content { padding: 40px 10px 20px 10px; } }


/* --- AMÉLIORATIONS POUR LA RÉACTIVITÉ MOBILE --- */

/* Cible les appareils mobiles (taille d'écran inférieure à 768px) */
@media (max-width: 768px) {

    /* --- Styles Généraux --- */
    .vr-column {
        padding: 15px; /* On réduit le padding pour maximiser l'espace. */
    }

    .vr-section-title {
        font-size: 1.2em; /* On diminue la taille du titre pour une meilleure lisibilité. */
    }

    /* --- Section Info (Haut) --- */
    .vr-passport-grid-container .vr-grid-title {
        font-size: 1.4em; /* On réduit la taille du titre principal. */
        margin-bottom: 15px;
    }

    .vr-top-info-section {
        margin-top: -15px; /* On ajuste la marge négative. */
        gap: 15px; /* On ajoute un espacement quand les éléments se superposent. */
    }

    .psprt-dashboard-info .info-item {
        font-size: 1em; /* On s'assure que la police n'est pas trop grande. */
        padding: 10px 0;
    }

    #vr-static-flag {
        font-size: 160px; /* On réduit la taille du drapeau sur mobile. */
    }

    /* --- Grille des Exigences (Bas) --- */
    #vr-requirements-grid {
        gap: 15px; /* On réduit l'espacement entre les colonnes. */
    }
    
    /* Le passage à 1 colonne est déjà géré, ce qui est parfait ! */
    .requirements-col ul.country-list {
        height: 350px; /* On peut légèrement augmenter la hauteur pour voir plus de pays. */
    }

    /* --- Popup / Carrousel --- */
    .vr-modal-content {
        /* On s'assure que le modal ne touche pas les bords de l'écran. */
        max-width: calc(100% - 20px);
        max-height: 90vh;
    }
    
    .vr-carousel-slide {
        /* La direction en colonne à 900px est bonne. On ajuste le padding. */
        padding: 20px 20px; /* Moins de padding horizontal pour plus de place. */
        gap: 15px; /* On réduit l'espace entre l'image et le texte. */
    }

    .vr-carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .vr-carousel-prev { left: 5px; }
    .vr-carousel-next { 
        position: fixed;
        margin-left: 347px;
        margin-top: 10px; }
}

/* Cible les très petits écrans (inférieurs à 480px) */
@media (max-width: 480px) {
    .vr-main-selector {
        /* Sur de très petits écrans, on peut empiler les flèches et l'image. */
        flex-direction: column;
        gap: 10px;
    }

    .vr-main-nav-prev {
        margin-right: 0;
    }

    .vr-main-nav-next {
        margin-left: 0;
    }
.vr-carousel-slide .vr-single-passport-img
 {
    max-width: 100%;
    height: 250px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    margin-top: 204px;
}


}

@media (max-width: 900px) {
    .vr-carousel-slide {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .vr-carousel-slide .passport-container {
        display: flex;
        justify-content: center; /* Centre parfaitement l'image horizontalement */
        width: 100%; /* S'assure que le conteneur prend toute la largeur */
    }
}