/*! CountrySelect Pro v6.6.0 | MIT | https://github.com/nikmauro/country-select-pro — CSS */
:root { --cs-css: 1; } /* σήμανση: το JS δεν προσθέτει <style> */

.cs-wrapper { position: relative; display: block; width: 100%; font-family: inherit; text-align: start; outline: none; color: var(--cs-color, var(--bs-body-color, #212529)); }
.cs-wrapper, .cs-wrapper *, .cs-wrapper *::before, .cs-wrapper *::after { box-sizing: border-box; }
.cs-trigger {
    position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer;
    min-height: calc(1.5em + .75rem + 2px); padding-block: .375rem; padding-inline: .75rem 2.25rem;
    font-size: var(--cs-font-size, 1rem); font-weight: 400; line-height: 1.5;
    color: var(--cs-color, var(--bs-body-color, #212529)); background-color: var(--cs-bg, var(--bs-body-bg, #fff)); background-clip: padding-box;
    border: 1px solid var(--cs-border-color, var(--bs-border-color, #ced4da)); border-radius: var(--cs-radius, var(--bs-border-radius, .375rem));
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.cs-trigger::after {
    content: ""; position: absolute; inset-inline-end: .75rem; top: 50%; width: 16px; height: 12px; margin-top: -6px; pointer-events: none;
    background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px 12px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px 12px;
    transition: transform .15s ease-in-out;
}
.cs-wrapper.open .cs-trigger::after { transform: rotate(180deg); }
.cs-wrapper:focus-within .cs-trigger {
    border-color: var(--cs-focus-border, #86b7fe); outline: 0;
    box-shadow: 0 0 0 .25rem var(--cs-focus-ring, var(--bs-focus-ring-color, rgba(13, 110, 253, .25)));
}
.cs-selected-content { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1; }
.cs-selected-content.cs-placeholder { color: var(--cs-muted, var(--bs-secondary-color, #6c757d)); }

.input-group > .cs-wrapper { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .cs-wrapper:not(:last-child) .cs-trigger { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group > * + .country-select + .cs-wrapper .cs-trigger { border-start-start-radius: 0; border-end-start-radius: 0; }

.cs-wrapper.is-invalid .cs-trigger, .is-invalid + .cs-wrapper .cs-trigger, .was-validated :invalid + .cs-wrapper .cs-trigger {
    border-color: var(--cs-invalid, var(--bs-form-invalid-border-color, #dc3545)) !important;
}
.cs-error-msg { display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 10; margin-top: 4px; font-size: .825em; color: var(--cs-invalid, var(--bs-form-invalid-color, #dc3545)); }
.cs-wrapper.is-invalid .cs-error-msg:not(:empty) { display: block; }
.cs-wrapper.cs-disabled .cs-trigger, :disabled + .cs-wrapper .cs-trigger { cursor: default; opacity: 1; background-color: var(--cs-disabled-bg, var(--bs-secondary-bg, #e9ecef)); }

.cs-dropdown {
    position: absolute; left: 0; right: 0; z-index: var(--cs-z-index, 2050); display: none; max-width: 95vw; margin-top: .125rem; overflow: hidden;
    color: var(--cs-color, var(--bs-body-color, #212529)); background: var(--cs-dropdown-bg, var(--cs-bg, var(--bs-body-bg, #fff)));
    border: 1px solid var(--cs-dropdown-border-color, var(--bs-border-color-translucent, rgba(0, 0, 0, .15)));
    border-radius: var(--cs-radius, var(--bs-border-radius, .375rem)); box-shadow: var(--cs-shadow, 0 .5rem 1rem rgba(0, 0, 0, .175));
}
.cs-wrapper.drop-up .cs-dropdown { bottom: calc(100% + .25rem); top: auto; box-shadow: var(--cs-shadow-up, 0 -.5rem 1rem rgba(0, 0, 0, .175)); }
.cs-wrapper.open .cs-dropdown { display: block; }
/* Popover (top layer): θέση από το JS — χωρίς τα προεπιλεγμένα του browser (inset / margin / padding / overflow) */
.cs-dropdown[popover] { position: fixed; inset: auto; margin: 0; padding: 0; height: auto; overflow: hidden; }

.cs-search-box { padding: 8px; background: var(--cs-search-bg, var(--bs-tertiary-bg, #f8f9fa)); border-bottom: 1px solid var(--cs-divider-color, var(--bs-border-color, #dee2e6)); }
.cs-search-input { font-size: .875rem; }
.cs-wrapper input.cs-search-input { /* πιο ισχυρό από γενικούς κανόνες του θέματος (input[type=text] { ... }) */
    display: block; width: 100%; height: auto; margin: 0; padding: .375rem .75rem; font-family: inherit; line-height: 1.5; outline: none;
    color: inherit; background: var(--cs-bg, var(--bs-body-bg, #fff)); box-shadow: none;
    border: 1px solid var(--cs-border-color, var(--bs-border-color, #ced4da)); border-radius: .25rem;
}
.cs-wrapper input.cs-search-input:focus { border-color: var(--cs-focus-border, #86b7fe); box-shadow: 0 0 0 .2rem var(--cs-focus-ring, var(--bs-focus-ring-color, rgba(13, 110, 253, .25))); }
@media (pointer: coarse) { .cs-search-input { font-size: 16px; } }

.cs-list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-behavior: auto; min-height: 50px; padding: .375rem 0; }
.cs-option { display: flex; align-items: center; gap: 10px; padding: .5rem .75rem; font-size: .9rem; cursor: pointer; transition: background-color .1s; }
.cs-option:hover { background-color: var(--cs-hover-bg, var(--bs-tertiary-bg, #f8f9fa)); }
.cs-option[aria-selected="true"] { font-weight: 600; }
.cs-option.active { background-color: var(--cs-active-bg, var(--bs-primary, #0d6efd)); color: var(--cs-active-color, #fff); }
.cs-divider { height: 1px; margin: .375rem 0; pointer-events: none; background: var(--cs-divider-color, var(--bs-border-color, #dee2e6)); }
.cs-no-results, .cs-loading, .cs-load-error { padding: 10px; text-align: center; font-style: italic; cursor: default; color: var(--cs-muted, var(--bs-secondary-color, #6c757d)); }
.cs-load-error { color: var(--cs-invalid, var(--bs-form-invalid-color, #dc3545)); }

.cs-flag-img { display: inline-block; width: 22px !important; height: 16px !important; object-fit: cover; vertical-align: middle; margin-inline-end: 8px; border-radius: 2px; }
.cs-wrapper img { width: 20px !important; height: 14px !important; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.cs-hidden { display: none !important; }
/* <country-select>: block · χώρος πριν φορτώσει το JS (χωρίς μετακίνηση της σελίδας) · validation */
country-select { display: block; }
country-select:not(:defined) { min-height: calc(1.5em + .75rem + 2px); }
.input-group > country-select { flex: 1 1 auto; width: 1%; min-width: 0; }
.was-validated country-select:invalid .cs-trigger { border-color: var(--cs-invalid, var(--bs-form-invalid-border-color, #dc3545)) !important; }
.cs-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (prefers-reduced-motion: reduce) { .cs-trigger, .cs-trigger::after, .cs-option { transition: none; } }
@media (forced-colors: active) {
    .cs-trigger::after { forced-color-adjust: none; background-color: CanvasText; }
    .cs-option.active { forced-color-adjust: none; background-color: Highlight; color: HighlightText; }
}
