/**
 * CMS Component Specifieke CSS - Straatzoeker & Vlaggenzoeker
 * Locatie: css/layout_straatzoeker.css
 */

/* =========================================================================
   🟢 1. UNIVERSELE OPMAAK (Geldt voor ELK scherm: Desktop en GSM)
   ========================================================================= */
.street-search-container, .street-search-inner {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.btn-street-search {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background-color: #198754 !important; 
    color: #ffffff !important;
    border: none !important;
    padding: 6px 10px !important;
    font-family: sans-serif;
    font-size: 13px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: background-color 0.15s ease-in-out;
}
.btn-street-search:hover { background-color: #146c43 !important; }
.btn-street-search .fa-road { font-size: 14px !important; color: #ffffff !important; }

.flag-badge-container {
    display: none; 
    align-items: center !important;
    gap: 6px !important;
    width: fit-content !important;
    margin-top: 6px !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    border-radius: 3px !important;
}
.flag-badge-img { width: 22px !important; height: auto !important; display: block !important; }
.flag-badge-code { font-size: 11px !important; font-weight: bold !important; text-transform: uppercase !important; }
.flag-badge-caret { font-size: 11px !important; margin-left: 1px !important; }

/* FIX: Dropdown eist een absolute z-index op en dwingt ondoorzichtigheid af */
.flag-picker-dropdown {
    display: none; 
    margin-top: 2px !important;
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 99999 !important;     
    left: 0 !important;            
    width: 100% !important;        
    max-width: 100% !important;
}

.flag-search-input {
    width: 100% !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
}

.street-dropdowns-container { display: none; margin-top: 6px !important; width: 100%; }
.search-environment-block { display: block; width: 100%; }
.street-label { font-family: sans-serif; font-size: 11px !important; font-weight: bold !important; display: block !important; margin-bottom: 1px !important; }
.street-input, .street-select { width: 100% !important; margin-bottom: 5px !important; padding: 3px 6px !important; border-radius: 3px !important; font-size: 12px !important; height: 26px !important; box-sizing: border-box !important; }
.street-error-msg { display: none; color: #ff3333 !important; font-size: 10px !important; font-weight: bold !important; margin-bottom: 4px !important; }

.flag-scroll-list {
    max-height: 140px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; 
    box-sizing: border-box !important;
    width: 100% !important;        
    display: flex !important;
    flex-direction: column !important;
}

.vlag-keuze-rij {
    display: flex !important;
    align-items: center !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.flag-picker-img { width: 18px !important; height: auto !important; margin-right: 6px !important; display: block !important; }


/* =========================================================================
   🖥️ 2. DESKTOP STYLING (Licht & Dekkend)
   ========================================================================= */
	/* GECORRIGEERDE REGEL 102 (Desktop): */
/* =========================================================================
   🖥️ 2. DESKTOP STYLING (Alleen actief als er GEEN simulator-modus aan staat)
   ========================================================================= */
@media screen and (min-width: 901px) {
    /* Als de body GEEN env-klassen heeft, toon dan het lichte desktop thema */
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .street-search-container {
        margin: 5px 0 !important;
    }

    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .street-search-inner {
        background: #fdfdfd !important;
        border: 1px solid #cccccc !important;
        border-radius: 4px !important;
        padding: 6px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        overflow: visible !important;
    }

    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-badge-container { background: #ffffff !important; border: 1px solid #bbbbbb !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-badge-container:hover { background: #f5f5f5 !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-badge-img { border: 1px solid #eeeeee !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-badge-code { color: #333333 !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-badge-caret { color: #666666 !important; }

    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-picker-dropdown { background: #ffffff !important; border: 1px solid #aaaaaa !important; border-radius: 4px !important; padding: 6px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-search-input { background: #ffffff !important; border: 1px solid #cccccc !important; color: #333333 !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-counter-text { color: #666666 !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-scroll-list { border: 1px solid #dddddd !important; background: #ffffff !important; }
    
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .vlag-keuze-rij { border-bottom: 1px solid #eeeeee !important; color: #333333 !important; background-color: #ffffff !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .vlag-keuze-rij:hover { background: #f0f0f0 !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-active-row { background: #fff9e6 !important; font-weight: bold !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .flag-picker-img { border: 1px solid #eeeeee !important; }

    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .street-dropdowns-container { border-top: 1px solid #eeeeee !important; padding-top: 6px !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .street-label { color: #222222 !important; }
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .street-input, 
    body:not(.env-gsm):not(.env-tablet):not(.env-landscape) .street-select { border: 1px solid #cccccc !important; color: #000000 !important; background: #ffffff !important; }
}

/* =========================================================================
   📱 3. MOBIEL & SIMULATOR STYLING (Donker thema voor gsm / simulators)
   ========================================================================= */
/* Activeer ALTIJD op schermen onder de 900px */
@media screen and (max-width: 900px) {
    .street-search-container { margin: 10px 0 !important; }
    .street-search-inner { background: var(--bg-dark-panel) !important; border: 1px solid var(--border-dark) !important; border-radius: 6px !important; padding: 10px !important; overflow: visible !important; }
    .flag-badge-container { background: var(--bg-dark-core) !important; border: 1px solid var(--border-dark) !important; }
    .flag-badge-container:hover { border-color: var(--border-light) !important; }
    .flag-badge-img { border: 1px solid var(--border-dark) !important; }
    .flag-badge-code { color: var(--text-main) !important; }
    .flag-badge-caret { color: var(--text-muted) !important; }
    .flag-picker-dropdown { background: var(--bg-dark-panel) !important; border: 1px solid var(--border-dark) !important; border-radius: 6px !important; padding: 6px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
    .flag-search-input { background: var(--bg-dark-core) !important; border: 1px solid var(--border-dark) !important; color: #ffffff !important; }
    .flag-counter-text { color: var(--text-muted) !important; }
    .flag-scroll-list { border: 1px solid var(--border-dark) !important; background-color: var(--bg-dark-core) !important; }
    .vlag-keuze-rij { border-bottom: 1px solid var(--border-dark) !important; color: var(--text-main) !important; background-color: var(--bg-dark-core) !important; }
    .vlag-keuze-rij:hover { background: rgba(255,255,255,0.08) !important; }
    .flag-active-row { background: rgba(255, 152, 0, 0.25) !important; font-weight: bold !important; color: var(--btn-warning-hover) !important; }
    .flag-picker-img { border: 1px solid var(--border-dark) !important; }
    .street-dropdowns-container { border-top: 1px solid var(--border-dark) !important; padding-top: 8px !important; }
    .street-label { color: var(--text-muted) !important; }
    .street-input, .street-select { border: 1px solid var(--border-dark) !important; color: #ffffff !important; background: var(--bg-dark-core) !important; }
    .street-input::placeholder { color: #555555 !important; }
    .street-select option { background: var(--bg-dark-panel) !important; color: #ffffff !important; }
}

/* KRACHTVLEUGEL VOOR DESKTOP SIMULATOR: Activeer het donkere thema zodra de body een simulatorklasse heeft */
body.env-gsm .street-search-container, body.env-tablet .street-search-container, body.env-landscape .street-search-container { margin: 10px 0 !important; }
body.env-gsm .street-search-inner, body.env-tablet .street-search-inner, body.env-landscape .street-search-inner { background: var(--bg-dark-panel) !important; border: 1px solid var(--border-dark) !important; border-radius: 6px !important; padding: 10px !important; overflow: visible !important; }
body.env-gsm .flag-badge-container, body.env-tablet .flag-badge-container, body.env-landscape .flag-badge-container { background: var(--bg-dark-core) !important; border: 1px solid var(--border-dark) !important; }
body.env-gsm .flag-badge-container:hover, body.env-tablet .flag-badge-container:hover, body.env-landscape .flag-badge-container:hover { border-color: var(--border-light) !important; }
body.env-gsm .flag-badge-img, body.env-tablet .flag-badge-img, body.env-landscape .flag-badge-img { border: 1px solid var(--border-dark) !important; }
body.env-gsm .flag-badge-code, body.env-tablet .flag-badge-code, body.env-landscape .flag-badge-code { color: var(--text-main) !important; }
body.env-gsm .flag-badge-caret, body.env-tablet .flag-badge-caret, body.env-landscape .flag-badge-caret { color: var(--text-muted) !important; }
body.env-gsm .flag-picker-dropdown, body.env-tablet .flag-picker-dropdown, body.env-landscape .flag-picker-dropdown { background: var(--bg-dark-panel) !important; border: 1px solid var(--border-dark) !important; border-radius: 6px !important; padding: 6px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
body.env-gsm .flag-search-input, body.env-tablet .flag-search-input, body.env-landscape .flag-search-input { background: var(--bg-dark-core) !important; border: 1px solid var(--border-dark) !important; color: #ffffff !important; }
body.env-gsm .flag-counter-text, body.env-tablet .flag-counter-text, body.env-landscape .flag-counter-text { color: var(--text-muted) !important; }
body.env-gsm .flag-scroll-list, body.env-tablet .flag-scroll-list, body.env-landscape .flag-scroll-list { border: 1px solid var(--border-dark) !important; background-color: var(--bg-dark-core) !important; }
body.env-gsm .vlag-keuze-rij, body.env-tablet .vlag-keuze-rij, body.env-landscape .vlag-keuze-rij { border-bottom: 1px solid var(--border-dark) !important; color: var(--text-main) !important; background-color: var(--bg-dark-core) !important; }
body.env-gsm .vlag-keuze-rij:hover, body.env-tablet .vlag-keuze-rij:hover, body.env-landscape .vlag-keuze-rij:hover { background: rgba(255,255,255,0.08) !important; }
body.env-gsm .flag-active-row, body.env-tablet .flag-active-row, body.env-landscape .flag-active-row { background: rgba(255, 152, 0, 0.25) !important; font-weight: bold !important; color: var(--btn-warning-hover) !important; }
body.env-gsm .flag-picker-img, body.env-tablet .flag-picker-img, body.env-landscape .flag-picker-img { border: 1px solid var(--border-dark) !important; }
body.env-gsm .street-dropdowns-container, body.env-tablet .street-dropdowns-container, body.env-landscape .street-dropdowns-container { border-top: 1px solid var(--border-dark) !important; padding-top: 8px !important; }
body.env-gsm .street-label, body.env-tablet .street-label, body.env-landscape .street-label { color: var(--text-muted) !important; }
body.env-gsm .street-input, body.env-tablet .street-input, body.env-landscape .street-input, body.env-gsm .street-select, body.env-tablet .street-select, body.env-landscape .street-select { border: 1px solid var(--border-dark) !important; color: #ffffff !important; background: var(--bg-dark-core) !important; }
body.env-gsm .street-input::placeholder, body.env-tablet .street-input::placeholder, body.env-landscape .street-input::placeholder { color: #555555 !important; }
body.env-gsm .street-select option, body.env-tablet .street-select option, body.env-landscape .street-select option { background: var(--bg-dark-panel) !important; color: #ffffff !important; }