@import url('./global.css');
@import url('./components.css');
@import url('./landing.css');
.region-picker {
    position: relative;
    width: 100%;
}

.region-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 10000;
    display: none;
    max-height: 210px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #d9e2ef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 86, 179, 0.12);
}

.region-dropdown.active {
    display: block;
    animation: regionDropdownFade 0.16s ease;
}

.region-option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.region-option:hover,
.region-option:focus {
    background: #eef5ff;
    color: var(--primary-blue);
    outline: none;
}

.region-empty {
    padding: 12px;
    color: #6b7280;
    font-size: 0.82rem;
    text-align: center;
}

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