/**
 * RTL dropdown panel for native <select> elements.
 * Paired with assets/js/rtl-select.js — the panel is appended to <body> so no
 * ancestor with overflow:hidden can clip it, and it is sized/positioned in JS
 * to match the field it belongs to.
 */

.afzrs-panel {
    /* Fixed, not absolute. The theme's `body { position: relative }` makes body
       the containing block for absolutely positioned children, so an absolute
       panel is only placed correctly while body's padding box sits at the
       document origin. Fixed takes the field's viewport rect as-is and skips
       that mapping; rtl-select.js re-pins it to the field on scroll. */
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 6px;
    direction: rtl;
    text-align: right;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(23, 32, 44, .14);
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--primary-text, #334155);
}

.afzrs-option {
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
    transition: background-color .12s ease, color .12s ease;
}

.afzrs-option.is-hidden {
    display: none;
}

/* Hover and keyboard highlight are the same state to the eye, so they share
   one look — the blue already used for the option the panel opened on. */
.afzrs-option.is-active,
.afzrs-option:hover {
    background: var(--secondary-blue, #eaf5ff);
    color: var(--primary-blue, #0871c9);
}

.afzrs-option.is-selected {
    font-weight: 600;
}

/* Leading side in RTL, matching where macOS puts it in the native popup. */
.afzrs-option.is-selected::before {
    content: "\2713";
    float: right;
    margin-inline-end: 8px;
    font-weight: 700;
    color: var(--primary-blue, #0871c9);
}

.afzrs-option.is-disabled {
    color: var(--neutral-grey, #6c7888);
    cursor: not-allowed;
    opacity: .6;
}

.afzrs-option.is-disabled.is-active,
.afzrs-option.is-disabled:hover {
    background: transparent;
    color: var(--neutral-grey, #6c7888);
}

.afzrs-group + .afzrs-group {
    margin-top: 4px;
    border-top: 1px solid rgba(8, 113, 201, .1);
    padding-top: 4px;
}

.afzrs-group-label {
    padding: 6px 12px 2px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--neutral-grey, #6c7888);
}

.afzrs-enabled select.afzrs-is-open {
    border-color: var(--primary-blue, #0871c9);
    box-shadow: 0 0 0 3px rgba(8, 113, 201, .12);
    outline: 0;
}

/* The native popup never opens, so the text cursor is misleading. */
.afzrs-enabled select {
    cursor: pointer;
}
