/* Base Custom Select Styles */
.custom-select {
    position: relative;
    font-family: var(--font-family-base);
    width: 100%;
    transition: padding-bottom 0.2s ease;
}

.custom-select select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

/* Selected Item Base */
.select-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border: 1px solid transparent;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: normal;
    cursor: pointer;
    position: relative;
    border-radius: var(--border-radius-sm);
}

.select-selected::after {
    content: "";
    position: absolute;
    right: 16px;
    width: 10px;
    height: 6px;
    background-image: var(--a21-asset-icon-down);
    background-size: cover;
    transition: transform 0.3s;
    background-position: center;
}

[data-theme="light"] .select-selected::after {
    filter: brightness(0) saturate(100%);
}

.select-selected.select-arrow-active::after {
    transform: rotate(180deg);
}

.select-selected.select-arrow-active {
    border: 1px solid var(--color-primary);
}

/* Options Container */
.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 100;
}

.select-items.select-items--top {
    top: auto;
    bottom: calc(100% + var(--spacing-md));
}

.custom-select--dark .select-items {
    background-color: var(--color-secondary);
}

.custom-select--black .select-items {
    background-color: var(--color-black);
}

.custom-select--accent .select-items {
    background-color: var(--color-accent);
}

.select-hide {
    display: none;
}

.select-options {
    flex: 1 1 auto;
    max-height: 301px; /* ~7 options */
    overflow-y: auto;
}

/* Option Items */
.select-items .option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.3s;

    height: 43px;
}

/* the checkmark */
.custom-select--checkmark .select-items .option.same-as-selected::after {
    content: '';
    width: 12px;
    height: 9px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9" fill="none"%3E%3Cpath d="M10.3667 1.04167L4.80007 6.60834L1.56674 3.37501C1.41061 3.2198 1.1994 3.13268 0.979241 3.13268C0.759086 3.13268 0.547876 3.2198 0.391741 3.37501C0.236532 3.53114 0.149414 3.74235 0.149414 3.96251C0.149414 4.18266 0.236532 4.39387 0.391741 4.55001L4.21674 8.37501C4.37288 8.53022 4.58409 8.61733 4.80424 8.61733C5.02439 8.61733 5.23561 8.53022 5.39174 8.37501L11.5417 2.22501C11.6198 2.14754 11.6818 2.05537 11.7241 1.95382C11.7665 1.85227 11.7882 1.74335 11.7882 1.63334C11.7882 1.52333 11.7665 1.41441 11.7241 1.31286C11.6818 1.21131 11.6198 1.11914 11.5417 1.04167C11.3856 0.886465 11.1744 0.799347 10.9542 0.799347C10.7341 0.799347 10.5229 0.886465 10.3667 1.04167Z" fill="%23016BFF"/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 8px;
}

/* Rounded Corners for First and Last Items */
.select-items .select-options .option:first-child {
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);
}

.select-items .select-options .option:last-child {
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}

/* Contextual Variants */

.custom-select .select-selected.select-arrow-active {
    border: 1px solid var(--color-primary);
}

/* Variant: Model One: Dark input with accent border */
.custom-select--dark .select-selected {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-accent);
    color: var(--color-text);
}

.custom-select--dark .select-selected::after {
    filter: grayscale(100%) brightness(50%);
}

.custom-select--dark .select-selected.selected::after {
    filter: none;
}

[data-theme="light"] .custom-select--dark .select-selected.selected::after {
    filter: brightness(0) saturate(100%);
}

.custom-select--dark .select-items .option {
    background-color: var(--color-secondary);
    color: var(--color-support-alt);
}

.custom-select--dark .select-items .option:hover,
.custom-select--dark .select-items .option.same-as-selected {
    background-color: var(--color-hover-action);
}

.custom-select--dark .select-items .option.same-as-selected {
    color: var(--color-primary);
}

.custom-select--dark .select-selected.selected {
    color: var(--color-secondary-alt);
}

/* Variant: Model Two: Borderless black input */
.custom-select--black .select-selected,
.custom-select--black .select-items .option {
    background-color: var(--color-black);
    color: var(--color-support-alt);
}

.custom-select--black .select-items .option:hover {
    background-color: var(--color-hover-action);
}

.custom-select--black .select-items .option.same-as-selected {
    background-color: var(--color-hover-action);
    color: var(--color-primary);
}

.custom-select--black .select-selected.selected {
    color: var(--color-secondary-alt);
}

/* Variant: Model Three: Accent background input */
.custom-select--accent .select-selected {
    color: var(--color-text);
    background-color: var(--color-accent);
}

.custom-select--accent .select-selected::after {
    filter: grayscale(100%) brightness(50%);
}

.custom-select--accent .select-selected.selected::after {
    filter: none;
}

[data-theme="light"] .custom-select--accent .select-selected.selected::after {
    filter: brightness(0) saturate(100%);
}

.custom-select--accent .select-items .option {
    color: var(--color-text);
    background-color: var(--color-accent);
}

.custom-select--accent .select-items .option.same-as-selected,
.custom-select--accent .select-items .option:hover {
    background-color: var(--color-hover-action);
    color: var(--color-support-alt);
}

.custom-select--accent .select-selected.selected {
    color: var(--color-secondary-alt);
}

/* Variant: Language Dropdown (Squared top, rounded bottom, border only on dropdown) */
.custom-select--lang .select-selected {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    border: 1px solid transparent;
}
.custom-select--lang .select-items {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid var(--color-primary);
    border-top: none;
    box-shadow: none;
    margin-top: 0;
}
.custom-select--lang .select-items div.option:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.custom-select--lang .select-items div.option:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Size Variants */

/* Large Size (50px) */
.custom-select--lg .select-selected {
    height: 50px;
    font-size: 18px;
}

.custom-select--lg .select-selected::after {
    width: 20px;
    height: 10px;
}

@media (max-width: 1024px) {
    .custom-select--lg .select-selected {
        height: 43px;
        font-size: 16px;
    }

    .custom-select--lg .select-selected::after {
        width: 15px;
        height: 7px;
    }
}

/* Medium Size (43px) */
.custom-select--md .select-selected {
    height: 43px;
    font-size: 16px;
}

.custom-select--md .select-selected::after {
    width: 15px;
    height: 7px;
}

/* Multi-select Apply Button */
.apply-button {
    width: 100%;
    padding: 10px 16px;
    height: 50px;
    background-color: var(--color-primary);
    color: var(--color-secondary-alt);
    font-family: var(--font-family-base);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    border: none;
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}

@media (max-width: 768px) {
    .apply-button {
        height: 43px;
        font-size: 16px;
    }
}

.select-items div.option {
    border-right: none
}

.iti__country-list::-webkit-scrollbar,
.select-items .select-options::-webkit-scrollbar {
    margin-right: 2px;
    width: 8px;
    background-color: var(--color-secondary);
    border-radius: 6px;
}

/* Scrollbar Thumb */
.iti__country-list::-webkit-scrollbar-thumb ,
.select-items .select-options::-webkit-scrollbar-thumb {
    background-color: var(--color-support);
    border-radius: 6px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Scrollbar Track */
.iti__country-list::-webkit-scrollbar-track,
.select-items .select-options::-webkit-scrollbar-track {
    background-color: var(--color-black); /* default */
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Contextual Variants */
.custom-select--dark .select-items .select-options::-webkit-scrollbar-track {
    background-color: var(--color-secondary);
}
.custom-select--black .select-items .select-options::-webkit-scrollbar-track {
    background-color: var(--color-black);
}
.custom-select--accent .select-items .select-options::-webkit-scrollbar-track {
    background-color: var(--color-accent);
}

/* Hundle error states */
.custom-select.error .select-selected {
    border: 1px solid var(--color-warning);
}

.custom-select.error {
    padding-bottom: 0;
}

.custom-select.error .select-selected::before {
    content: attr(data-error-message);
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-warning);
    pointer-events: none;
    white-space: normal;
}

.custom-select.error .select-selected[data-error-message=""]::before,
.custom-select.error .select-selected:not([data-error-message])::before {
    content: '';
    display: none;
}

.custom-select.error.error--with-message {
    padding-bottom: 34px; /* reserve space only when showing age message */
}

.custom-select.error.error--with-message .select-selected::before {
    display: block;
}