/* shell (TRANSPARENT when closed) */
.otslr-form-field-wrapper--select {
    margin-bottom: 14px
}

.otslr-form-field-wrapper--select .otslr-input-field {
    background: transparent;
    /* not using --otslr-input-bg */
    border: 1px solid var(--brand-grey);
    border-radius: 7px;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 90px;
    position: relative
}

.otslr-form-field-wrapper--select .otslr-input-field--full-width {
    width: 100%
}

/* label: small, always above */
.otslr-form-field-wrapper--select label {
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 12px;
    line-height: 14px;
    color: rgba(255, 255, 255, .77);
    font-family: var(--header_font, "Verdana", Helvetica, Arial, sans-serif);
    pointer-events: none
}

/* visible value line */
.otslr-select-display {
    position: absolute;
    top: 26px;
    left: 10px;
    right: 90px;
    height: 28px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    font-family: var(--header_font, "Verdana", Helvetica, Arial, sans-serif);
    color: var(--otslr-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* hide the native select (never opens) */
.otslr-change-select__input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    left: -9999px !important;
    top: auto !important
}

/* "change" button */
.otslr-change-badge {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    padding: 10px 16px;
    border-radius: 250px;
    background: var(--otslr-dark-grey);
    color: var(--otslr-white);
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border: none
}

.otslr-change-badge:focus {
    outline: 2px solid var(--brand-grey);
    outline-offset: 2px
}

/* OPEN PANEL — OPAQUE dark */
.otslr-select-panel[hidden] {
    display: none !important
}

.otslr-select-panel {
    position: absolute;
    left: -1px;
    right: -1px;
    top: 63px;
    background: var(--otslr-deep) !important;
    /* opaque when open */
    border: 1px solid var(--brand-grey) !important;
    border-top: 0;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .5);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 9999;
    padding: 6px 0;
    margin: 0;
    list-style: none
}

.otslr-select-option[role="option"] {
    background: var(--otslr-deep) !important;
    /* opaque rows */
    color: var(--otslr-white) !important;
    padding: 10px 12px;
    cursor: pointer;
    outline: 0
}

.otslr-select-option[role="option"]:hover,
.otslr-select-option[role="option"].is-active {
    background: var(--otslr-dark-grey) !important;
}

/* neutral focus ring (no green) */
.otslr-form-field-wrapper--select .otslr-input-field.open::after {
    content: "";
    position: absolute;
    inset: -3.5px;
    border-radius: 9px;
    border: 3.5px solid var(--border-grey-light);
    pointer-events: none
}

/* ensure stacking */
.otslr-form-field-wrapper--select .otslr-input-field.open {
    z-index: 10000
}

/* =========================
   OTSLR CHANGE SELECT – PATCH
   ========================= */

/* local token so you can tweak one value if you want a different grey */
.otslr-form-field-wrapper--select {
    --otslr-vdark: #1a1a1a;
    /* very dark grey (opaque) */
}

/* keep the shell transparent while closed (unchanged) */
.otslr-form-field-wrapper--select .otslr-input-field {
    background: transparent;
    /* no deep, no input-bg */
}

/* OPEN PANEL: opaque very dark grey, no bullets */
.otslr-select-panel[hidden] {
    display: none !important;
}

.otslr-select-panel {
    background: var(--otslr-vdark) !important;
    /* ⬅️ very dark grey, opaque */
    border: 1px solid var(--brand-grey) !important;
    border-top: 0;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .5);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 99999;

    /* make absolutely sure there are no bullets */
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;

    padding: 6px 0;
    margin: 0;
}

/* Option rows: also very dark grey (no transparency) */
.otslr-select-option[role="option"] {
    background: var(--otslr-vdark) !important;
    /* ⬅️ matches panel */
    color: var(--otslr-white) !important;
    padding: 10px 12px;
    cursor: pointer;
    outline: 0;
}

/* Hover/active: slightly lighter dark grey from your palette */
.otslr-select-option[role="option"]:hover,
.otslr-select-option[role="option"].is-active {
    background: var(--otslr-dark-grey) !important;
    /* #414444 */
}

/* keep the neutral focus ring (no green) when open */
.otslr-form-field-wrapper--select .otslr-input-field.open::after {
    content: "";
    position: absolute;
    inset: -3.5px;
    border-radius: 9px;
    border: 3.5px solid var(--border-grey-light);
    pointer-events: none;
}

/* ensure stacking above nearby UI */
.otslr-form-field-wrapper--select .otslr-input-field.open {
    z-index: 100000;
}

/* label always small + above (unchanged, included for completeness) */
.otslr-form-field-wrapper--select label {
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 12px;
    line-height: 14px;
    color: rgba(255, 255, 255, .77);
    font-family: var(--header_font, "Verdana", Helvetica, Arial, sans-serif);
    pointer-events: none;
}

/* visible value line (unchanged) */
.otslr-select-display {
    position: absolute;
    top: 26px;
    left: 10px;
    right: 90px;
    height: 28px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    font-family: var(--header_font, "Verdana", Helvetica, Arial, sans-serif);
    color: var(--otslr-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* More padding + dotted border for password wrapper inner div */
.otslr-password-wrapper>div {
    padding: 20px !important;
    /* more padding */
    border: 2px dotted var(--otslr-primary);
    /* dotted border */
    border-radius: 8px;
}

/* Bold rules text above the fields */
.otslr-password-rules {
    margin: 0 0 12px 0;
    line-height: 1.4;
    color: var(--white);
}

.otslr-password-rules strong {
    font-weight: 700;
}