/* --- CHOICE FILTER STYLES (GRAVITY FORMS EQUIVALENT) --- */

.tv-choice-wrap {
    position: relative;
    display: inline-block;
    width: 250px;
    margin-right: 10px;
    vertical-align: top;
    box-sizing: border-box;
    font-family: var(--ze-font-body-md-family);
}

.tv-choice-wrap * {
    box-sizing: border-box;
}

/* --- LABEL --- */
.tv-choice-label {
    display: block;
    font-family: var(--ze-font-body-md-family) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ze-color-on-surface) !important;
    margin: 0 0 var(--ze-space-xs) 0 !important;
}

/* --- TRIGGER BUTTON --- */
.tv-choice-wrap .tv-dropdown-trigger {
    background-color: var(--ze-color-surface-container-lowest) !important;
    border: 1px solid var(--ze-color-outline-variant) !important;
    border-radius: var(--ze-radius-md) !important;
    padding: 0 12px !important;
    min-height: 48px !important;
    height: 48px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px !important;
    color: var(--ze-color-on-surface) !important;
}

.tv-choice-wrap .tv-dropdown-trigger:hover {
    border-color: var(--ze-color-outline) !important;
}

.tv-choice-wrap .tv-selected-text {
    line-height: 46px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ze-color-on-surface-variant);
}

.tv-choice-wrap .tv-select-arrow {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345464d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tv-choice-wrap .tv-select-arrow i {
    display: none !important;
}

/* STATE: Active / Has Value */
.tv-choice-wrap.has-filter .tv-selected-text {
    color: var(--ze-color-on-surface) !important;
    font-weight: 600;
}

/* STATE: Dropdown Open */
.tv-custom-dropdown.is-open .tv-dropdown-trigger {
    border-color: var(--ze-color-secondary) !important;
    box-shadow: 0 0 0 4px var(--ze-color-surface-container) !important;
}

.tv-custom-dropdown.is-open .tv-select-arrow {
    transform: rotate(180deg);
}

/* --- DROPDOWN CONTAINER --- */
.tv-choice-wrap .tv-dropdown-options {
    position: absolute;
    top: calc(100% + 4px) !important; /* Override inline style */
    left: 0;
    width: 100%;
    background-color: var(--ze-color-surface-container-lowest) !important;
    border: 1px solid var(--ze-color-outline-variant) !important;
    border-radius: var(--ze-radius-md) !important;
    z-index: 1000;

    /* Hidden by default */
    display: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease;

    box-shadow: var(--ze-shadow-level-3) !important;
}

.tv-custom-dropdown.is-open .tv-dropdown-options {
    display: block;
    animation: dropdownFadeIn 0.2s ease forwards;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- OPTIONS LIST --- */
.tv-choice-wrap .tv-options-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 4px 0;
}

.tv-choice-wrap .tv-option-item {
    padding: 10px 16px !important;
    cursor: pointer;
    font-size: 15px !important;
    color: var(--ze-color-on-surface) !important;
    transition: all 0.1s ease;
}

.tv-choice-wrap .tv-option-item:hover {
    background-color: var(--ze-color-surface-container) !important;
    color: var(--ze-color-primary) !important;
}

.tv-choice-wrap .tv-option-item.is-selected {
    background-color: var(--ze-color-surface-container) !important;
    color: var(--ze-color-primary) !important;
    font-weight: 600 !important;
}

/* Custom scrollbar for options list */
.tv-choice-wrap .tv-options-list::-webkit-scrollbar {
    width: 6px;
}
.tv-choice-wrap .tv-options-list::-webkit-scrollbar-track {
    background: transparent;
}
.tv-choice-wrap .tv-options-list::-webkit-scrollbar-thumb {
    background-color: var(--ze-color-outline-variant);
    border-radius: 10px;
}

/* --- RESPONSIVE: TABLET & MOBILE --- */
@media screen and (max-width: 1024px) {
    .tv-choice-wrap {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}