/* Language Settings Interface Improvements */

/* Container Styles */
.setting-option-page {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    padding: 16px;
}

.form-account-settings {
    flex: 1;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 24px;
    background: #1d1d1d;
    padding: 24px;
    padding-top: 60px;
    border-radius: 16px;
    border: 1px solid #2a313a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

    .form-account-settings .title-cate {
        height: 32px;
        display: flex;
        align-items: center;
        color: #f2f4f7;
        font-size: 18px;
        font-weight: 700;
        border-bottom: 2px solid #3a4450;
        padding-bottom: 8px;
    }

/* Label Styles */
.select-current-setting-lang,
.select-more-lang {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

    .select-current-setting-lang span[real-value],
    .select-more-lang span[real-value] {
        color: #e6e9ee;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
    }

/* Bootstrap Select Dropdown */
.bootstrap-select {
    width: 100% !important;
}

    .bootstrap-select > .dropdown-toggle {
        background: #2a2a2a !important;
        border: 1px solid #3a3a3a !important;
        color: #e6e9ee !important;
        padding: 4px 12px;
        border-radius: 8px;
        height: var(--px-40);
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        text-align: left;
        transition: all 0.3s ease;
    }

        .bootstrap-select > .dropdown-toggle:hover {
            border-color: #f28745;
            background: #323232 !important;
        }

        .bootstrap-select > .dropdown-toggle:focus,
        .bootstrap-select > .dropdown-toggle.active {
            outline: 0 !important;
            box-shadow: 0 0 0 3px rgba(238, 97, 25, 0.25) !important;
            border-color: #f28745 !important;
        }

    /* Dropdown Menu */
    .bootstrap-select .dropdown-menu {
        background: var(--bs-gray-900) !important;
        border: 1px solid #3a3a3a;
        border-radius: 8px;
        padding: 8px;
        margin-top: 4px;
        max-height: 320px;
        overflow-y: auto;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        max-height: unset !important;
        min-height: unset !important;
    }

    .bootstrap-select [role="listbox"] {
        max-height: var(--px-500) !important;
    }

    .bootstrap-select .dropdown-menu .dropdown-item {
        color: #e6e9ee;
        padding: 10px 12px;
        border-radius: 6px;
        transition: all 0.2s ease;
        font-size: 14px;
    }

        .bootstrap-select .dropdown-menu .dropdown-item:hover {
            background: #3a3a3a;
            color: #ffffff;
        }

        .bootstrap-select .dropdown-menu .dropdown-item.active {
            background: #ee6119;
            color: #ffffff;
        }

        .bootstrap-select .dropdown-menu .dropdown-item.selected {
            background: #40120a;
            color: #f7b17a;
            font-weight: 600;
        }

/* Search Box */
.bs-searchbox {
    padding: 8px;
}

    .bs-searchbox input {
        background: var(--bs-gray-800) !important;
        border: 1px solid #747474 !important;
        color: #e6e9ee !important;
        padding: 10px 12px;
        border-radius: 6px;
        margin-bottom: 8px;
        width: 100%;
        font-size: 14px;
    }

        .bs-searchbox input:focus {
            border-color: #f28745 !important;
            outline: 0;
            box-shadow: 0 0 0 3px rgba(242, 135, 69, 0.2);
        }

        .bs-searchbox input::placeholder {
            color: #7e8a96;
        }

/* Actions Box (Select/Deselect All) */
.bs-actionsbox {
    padding: 8px !important;
    margin: 8px;
    border-radius: 8px;
    background: #1a1a1a;
    width: calc(100% - 16px) !important;
}

.btn-group.btn-group-sm {
    display: flex !important;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.bs-actionsbox .actions-btn {
    flex: 1;
    border: 0;
    display: flex;
    background: unset;
    align-items: center;
    justify-content: center;
    color: var(--bs-main-100);
    border-radius: 8px !important;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    top: unset;
    right: unset;
}

    .bs-actionsbox .actions-btn:hover {
        background: #3a3a3a;
        color: #ffffff;
    }

    .bs-actionsbox .actions-btn:active {
        background: #ee6119;
        color: #ffffff;
    }

/* No Results Message */
.bootstrap-select .no-results {
    width: calc(100% - 16px);
    background: #1a1a1a;
    border-radius: 8px;
    padding: 16px 24px;
    color: #7e8a96;
    white-space: normal;
    text-align: center;
    font-size: 13px;
    margin: 8px;
}

/* Filter Option Display */
.bootstrap-select .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scrollbar Customization */
.bootstrap-select .dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.bootstrap-select .dropdown-menu::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
}

    .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: #4a4a4a;
    }

/* Save Button */
.form-account-settings button[onclick*="updateLanguageOfOutlet"] {
    position: absolute;
    right: 24px;
    top: 20px;
    min-width: 120px;
    height: 40px;
    font-size: 14px;
    background: #ee6119;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(238, 97, 25, 0.3);
}

    .form-account-settings button[onclick*="updateLanguageOfOutlet"]:hover {
        background: #e04d16;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(238, 97, 25, 0.4);
    }

    .form-account-settings button[onclick*="updateLanguageOfOutlet"]:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(238, 97, 25, 0.3);
    }

/* Multiple Selection Display */
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    position: absolute;
    display: inline-block;
    right: 12px;
    margin-top: 2px;
}

.bootstrap-select.show-tick .dropdown-menu li a span.text {
    margin-right: 24px;
}

/* Disabled State */
.bootstrap-select.disabled > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.disabled {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #7e8a96 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .setting-option-page {
        grid-template-columns: 1fr;
    }

    .form-account-settings {
        padding: 16px;
        padding-top: 56px;
    }

        .form-account-settings button[onclick*="updateLanguageOfOutlet"] {
            right: 16px;
            top: 12px;
            min-width: 80px;
            height: 36px;
            font-size: 12px;
        }
}

/* Animation for dropdown */
.bootstrap-select .dropdown-menu {
    animation: fadeIn 0.2s ease-in-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Flag/Icon Support (if using country flags) */
.bootstrap-select .dropdown-menu li a span.flag-icon {
    margin-right: 8px;
}

/* Caret icon */
.bootstrap-select .dropdown-toggle .caret {
    margin-left: auto;
}