/* H33 Custom Select — Modern dropdown replacement */

.h33-select {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Trigger button */
.h33-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 16px;
    background: #0a0a0a;
    border: 1px solid #252525;
    border-radius: 8px;
    color: #E8E8E8;
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    text-align: left;
    gap: 8px;
    -webkit-user-select: none;
    user-select: none;
}
.h33-select-trigger:hover {
    border-color: #3d332c;
}
.h33-select-trigger:focus,
.h33-select.open .h33-select-trigger {
    border-color: #C9956C;
    box-shadow: 0 0 0 1px rgba(201, 149, 108, 0.2);
}

.h33-select-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Chevron */
.h33-select-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #555;
    transition: transform 0.2s ease, color 0.2s;
}
.h33-select.open .h33-select-chevron {
    transform: rotate(180deg);
    color: #C9956C;
}

/* Options panel */
.h33-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #111111;
    border: 1px solid #252525;
    border-radius: 10px;
    padding: 4px;
    z-index: 500;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.h33-select.open .h33-select-options {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Scrollbar */
.h33-select-options::-webkit-scrollbar {
    width: 6px;
}
.h33-select-options::-webkit-scrollbar-track {
    background: transparent;
}
.h33-select-options::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}
.h33-select-options::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Individual option */
.h33-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #aaa;
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    -webkit-user-select: none;
    user-select: none;
}
.h33-select-option:hover,
.h33-select-option.focused {
    background: rgba(201, 149, 108, 0.08);
    color: #E8E8E8;
}
.h33-select-option.selected {
    color: #C9956C;
    font-weight: 600;
}

/* Check icon for selected */
.h33-select-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0;
    color: #C9956C;
    transition: opacity 0.12s;
}
.h33-select-option.selected .h33-select-check {
    opacity: 1;
}

.h33-select-option-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drop-up when near bottom of viewport */
.h33-select.dropup .h33-select-options {
    top: auto;
    bottom: calc(100% + 4px);
    transform: translateY(4px);
}
.h33-select.dropup.open .h33-select-options {
    transform: translateY(0);
}

/* Responsive — wider touch targets on mobile */
@media (max-width: 768px) {
    .h33-select-trigger {
        padding: 13px 16px;
        font-size: 0.88rem;
    }
    .h33-select-option {
        padding: 12px 12px;
        font-size: 0.85rem;
    }
    .h33-select-options {
        max-height: 240px;
    }
}