/**
 * Custom select — نظام القوائم المنسدلة الموحد
 *
 * Styled listbox built on the site's own tokens (main.css), replacing the browser's native menu and
 * the generic Select2 skin on the customer data forms. The native <select> stays in the DOM and keeps
 * owning the value, the name and constraint validation; this is only its appearance.
 *
 * Markup is produced by assets/js/components/custom-select.js.
 */

.c-select {
    position: relative;
    width: 100%;
    font-family: var(--font-primary, 'Cairo', sans-serif);
}

/**
 * Visually hidden but still focusable, so `required` reports against the real control and the
 * browser can scroll to it. Clipped rather than merely transparent: page-level fade-in animations
 * on form fields would otherwise animate the opacity back to 1.
 */
.c-select__native {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
    background: none;
    box-shadow: none;
}

.c-select__control {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 48px;
    padding: .55rem .9rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    background: var(--bg-white, #fff);
    color: var(--text-primary, #333);
    font: inherit;
    font-size: .95rem;
    text-align: start;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}

.c-select__control:hover { border-color: #b9c8c2; }

.c-select__control:focus-visible,
.c-select.is-open .c-select__control {
    outline: none;
    border-color: var(--primary-color, #14664c);
    box-shadow: 0 0 0 3px rgba(20, 102, 76, .12);
}

.c-select.is-disabled .c-select__control {
    background: #f4f6f5;
    color: var(--text-secondary, #666);
    cursor: not-allowed;
}

.c-select.is-invalid .c-select__control {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

.c-select__icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
}

/* A flag is an image from the sprite, not a glyph, so it needs a box of its own. */
.c-select__icon--flag {
    width: 1.35em;
    height: 1em;
    border-radius: 2px;
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(23, 43, 70, .08);
}

/*
 * Inside a Bootstrap input-group the menu sits beside the phone number, so it must not claim the
 * full row: a 100%-wide child wraps the input onto its own line.
 */
.input-group > .c-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 116px;
    max-width: 150px;
}

.input-group > .c-select + .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }

.c-select__label {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.c-select__control.is-placeholder .c-select__label { color: #6b7672; }

.c-select__chevron {
    flex: 0 0 auto;
    color: var(--text-secondary, #666);
    font-size: .8rem;
    transition: transform .18s;
}

.c-select.is-open .c-select__chevron { transform: rotate(180deg); }

/* --- panel --- */
.c-select__panel {
    position: absolute;
    z-index: 1060;
    /*
     * Anchored to the control's start edge and at least as wide as it, but free to grow past it:
     * the dialling-code control is deliberately narrow (it shows "+966"), while its list holds full
     * country names.
     */
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: 100%;
    width: max-content;
    max-width: min(340px, 92vw);
    top: calc(100% + 6px);
    display: none;
    overflow: hidden;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    background: var(--bg-white, #fff);
    box-shadow: var(--shadow-lg, 0 10px 20px rgba(0, 0, 0, .1));
}

.c-select.is-open .c-select__panel { display: block; }
.c-select.is-open.drops-up .c-select__panel { top: auto; bottom: calc(100% + 6px); }

.c-select__search {
    position: relative;
    padding: .6rem;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.c-select__search input {
    width: 100%;
    min-height: 40px;
    padding: .4rem .75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    color: var(--text-primary, #333);
    font: inherit;
    font-size: .9rem;
}

.c-select__search input:focus {
    outline: none;
    border-color: var(--primary-color, #14664c);
    box-shadow: 0 0 0 3px rgba(20, 102, 76, .1);
}

.c-select__list {
    max-height: 264px;
    margin: 0;
    padding: .3rem;
    overflow-y: auto;
    list-style: none;
}

.c-select__option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: 8px;
    color: var(--text-primary, #333);
    font-size: .92rem;
    cursor: pointer;
}

.c-select__option .c-select__icon { font-size: 1.2rem; }

.c-select__option[aria-selected="true"] {
    background: var(--primary-color, #14664c);
    color: #fff;
    font-weight: 650;
}

.c-select__option.is-active:not([aria-selected="true"]) { background: #eef5f2; }

.c-select__option[aria-disabled="true"] {
    color: #9aa5a1;
    cursor: not-allowed;
}

.c-select__empty {
    padding: .9rem .7rem;
    color: var(--text-secondary, #666);
    font-size: .9rem;
    text-align: center;
}

/* The grouped variant keeps optgroup labels readable inside the styled list. */
.c-select__group-label {
    padding: .55rem .7rem .3rem;
    color: var(--text-secondary, #666);
    font-size: .78rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .c-select__control { min-height: 46px; font-size: .92rem; }
    .c-select__list { max-height: 220px; }
}