/**
 * Select2 Transtoyou Override Styles
 * Dit overschrijft ALLE Select2 styling op de site met Transtoyou design
 */

/* Reset WooCommerce SelectWoo styling */
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single,
.select2-container .select2-selection--single {
    height: 50px;
    border: 1px solid var(--tty-border-light, #eaeaea) !important;
    border-radius: var(--tty-radius-sm, 8px) !important;
    background-color: var(--tty-bg-primary, #ffffff) !important;
    padding: 0 !important;
    outline: none !important;
    transition: var(--tty-transition-fast, all 0.2s ease) !important;
}

/* Header Country Selector Specific Fixes */
.tty-header-top .country-selector .select2-container {
  min-width: 150px !important;
  max-width: 150px !important;
}

.tty-header-top .country-selector .select2-container .select2-selection--single {
    height: 32px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tty-header-top .country-selector .select2-selection__rendered {
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 30px !important;
    padding: 0 32px 0 10px !important;
}

.tty-header-top .country-selector .select2-selection__arrow {
    height: 30px !important;
    right: 8px !important;
    top: 1px !important;
}

.tty-header-top .country-selector .select2-selection__arrow b {
    border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent !important;
}

/* Ensure consistent dropdown styling */
.select2-dropdown {
    border: 1px solid var(--tty-border-light) !important;
    border-radius: var(--tty-radius-sm) !important;
    box-shadow: var(--tty-shadow-md) !important;
}

/* Country flag consistency */
.tty-modal-country-flag,
.tty-modal-country-flag-small {
    object-fit: cover !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}


.select2-container--default .select2-selection--single:hover {
    border-color: var(--tty-primary, #005F5F) !important;
    background-color: var(--tty-bg-secondary, #f9f9f9) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tty-primary, #005F5F) !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 95, 0.1) !important;
}

/* Rendered text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--tty-text-primary, #121212) !important;
    line-height: 38px !important;
    padding: 0 40px 0 12px !important;
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
}

/* Arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 12px !important;
    top: 1px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tty-text-secondary, #555) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--tty-text-secondary, #555) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* Dropdown */
.select2-dropdown {
    border: 1px solid var(--tty-border-light, #eaeaea) !important;
    border-radius: var(--tty-radius-sm, 8px) !important;
    box-shadow: var(--tty-shadow-md, 0px 4px 11px rgba(0, 0, 0, 0.1)) !important;
    background-color: var(--tty-bg-primary, #ffffff) !important;
    margin-top: 4px !important;
}

/* Search field */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--tty-border-light, #eaeaea) !important;
    border-radius: var(--tty-radius-sm, 8px) !important;
    padding: 10px 12px !important;
    font-family: 'Figtree', sans-serif !important;
    font-size: 14px !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--tty-primary, #005F5F) !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 95, 0.1) !important;
    outline: none !important;
}

/* Results */
.select2-results__options {
    max-height: 300px !important;
    padding: 4px 0 !important;
    overflow: scroll;
}

.select2-container--default .select2-results__option {
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: var(--tty-text-primary, #121212) !important;
    transition: var(--tty-transition-fast, all 0.2s ease) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tty-primary-bg, #edf7f5) !important;
    color: var(--tty-primary, #005F5F) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--tty-bg-secondary, #edf4f6) !important;
    font-weight: 500 !important;
}

/* Multi-select */
.select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    border: 1px solid var(--tty-border-light, #eaeaea) !important;
    border-radius: var(--tty-radius-sm, 8px) !important;
    background-color: var(--tty-bg-primary, #ffffff) !important;
    padding: 4px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tty-primary, #005F5F) !important;
    border: none !important;
    border-radius: 4px !important;
    color: white !important;
    padding: 4px 8px !important;
    margin: 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white !important;
    margin-right: 5px !important;
    font-weight: bold !important;
}

/* WooCommerce specific overrides */
.woocommerce table.form-table .select2-container,
.woocommerce-checkout .select2-container,
.woocommerce-cart .select2-container {
    width: 100% !important;
}

/* Clear button */
.select2-container--default .select2-selection__clear {
    color: var(--tty-text-muted, #56778f) !important;
    font-size: 18px !important;
    margin-right: 10px !important;
}

/* Loading */
.select2-container--default .select2-results__option.loading-results {
    padding: 20px !important;
    text-align: center !important;
    color: var(--tty-text-muted, #56778f) !important;
}

/* No results */
.select2-results__message {
    padding: 16px !important;
    text-align: center !important;
    color: var(--tty-text-muted, #56778f) !important;
}

/* Dark mode */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--tty-bg-secondary, #1e2a2e) !important;
    border-color: var(--tty-border-medium, #2e2e2e) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection__rendered {
    color: var(--tty-text-primary, #f0f0f0) !important;
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--tty-bg-secondary, #1e2a2e) !important;
    border-color: var(--tty-border-medium, #2e2e2e) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--tty-text-primary, #f0f0f0) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--tty-bg-primary, #121212) !important;
    border-color: var(--tty-border-medium, #2e2e2e) !important;
    color: var(--tty-text-primary, #f0f0f0) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .select2-container--default .select2-selection--single {
        height: 48px !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 46px !important;
        font-size: 16px !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
    }
}

/* Z-index fixes voor modals en popups */
.select2-container--open .select2-dropdown {
    z-index: 99999 !important;
}

/* Transtoyou custom classes */
.tty-select2-container .select2-selection--single {
    /* Al onze custom styling wordt hier toegepast */
}

.tty-select2-dropdown {
    /* Al onze custom dropdown styling */
}