/* Recherche ville/cinéma de la page film (OZZ-579). */

/* ===== Le champ ===== */

/* Tom Select enveloppe l'input d'un `.ts-wrapper` qui apporte son propre cadre : c'est le conteneur
   Tailwind du composant qui dessine celui de la maquette, ce wrapper doit donc disparaître. */
.movie-search .ts-wrapper {
    width: 100%;
    min-width: 0;
    position: static; /* le menu se positionne sur le cadre entier, pas sur le seul input */
}

.movie-search .ts-wrapper .ts-control,
.movie-search .ts-wrapper.single .ts-control,
.movie-search .ts-wrapper.focus .ts-control,
.movie-search .ts-wrapper.dropdown-active .ts-control {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* le thème par défaut laisse déborder sur une seconde ligne, la maquette fixe 48px */
    overflow: hidden;
    width: 100%;
    min-height: 0;
    /* Le thème par défaut réserve la droite du champ pour la croix et le chevron par un
       `padding-right: max(...) !important` bâti sur ces trois variables : les remettre à zéro est
       plus sûr qu'un `!important` concurrent. */
    --ts-pr-min: 0px;
    --ts-pr-caret: 0px;
    --ts-pr-clear-button: 0px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    /* Le thème par défaut laisse ici un gris sombre, taillé pour un fond blanc : sans cette ligne,
       tout ce que Tom Select ajoutera plus tard dans le champ en hériterait, illisible sur le noir. */
    color: #EEF1F9; /* text-white-50 */
}

/* Saisie et sélection : `m14-extra-bold` de la maquette. Seul l'input grandit — si l'item
   sélectionné grandissait aussi, les deux se partageraient le champ moitié-moitié et le curseur
   apparaîtrait loin après le dernier caractère de la ville. */
.movie-search .ts-control > input {
    flex: 1 1 auto;
}

.movie-search .ts-control .item {
    flex: 0 0 auto;
}

.movie-search .ts-control > input,
.movie-search .ts-control .item {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Anybody', sans-serif;
    font-size: 0.875rem; /* text-sm */
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: #EEF1F9; /* text-white-50 */
    caret-color: #EEF1F9;
}

/* Visée sur tout input du composant et non sur le seul champ de Tom Select : le contrôleur étant
   chargé paresseusement, c'est d'abord le champ d'origine qui montre la consigne. */
.movie-search input::placeholder {
    color: #9195A4; /* text-gray-300 */
    opacity: 1; /* Firefox l'atténue par défaut, la maquette donne déjà la teinte voulue */
}

/* La maquette ne montre ni croix ni chevron. Le chevron du thème par défaut est un triangle
   dessiné en `::after` sous un sélecteur à trois classes : le masquer demande sa propre règle,
   reprenant `.ts-wrapper.single` pour peser autant. */
.movie-search .ts-control .clear-button,
.movie-search .ts-control .ts-dropdown-indicator {
    display: none;
}

.movie-search .ts-wrapper.single .ts-control::after {
    display: none;
}

/* ===== Le menu de suggestions ===== */

/* Absent de la maquette : repris à l'identique du champ — même fond, même filet, mêmes coins — pour
   qu'il se lise comme son prolongement. */
.movie-search .ts-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0;
    border: 1px solid rgba(238, 241, 249, 0.2); /* border-whiteStroke */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: #0B0A0F; /* bg-black */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.movie-search .ts-dropdown .option {
    padding: 0.625rem 1rem;
    font-family: 'Anybody', sans-serif;
    font-size: 0.875rem; /* text-sm */
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: #9195A4; /* text-gray-300 */
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* `active` suit aussi bien la souris que les flèches du clavier : une seule règle couvre les deux
   façons de parcourir la liste. */
.movie-search .ts-dropdown .option:hover,
.movie-search .ts-dropdown .option.active {
    background-color: rgba(238, 241, 249, 0.06); /* bg-whiteAlpha-100 */
    color: #EEF1F9; /* text-white-50 */
}

/* En-têtes « Villes » / « Cinémas » : un intitulé de section doit se distinguer des options qu'il
   coiffe, ici par la taille et l'espacement plutôt que par la graisse — les options sont déjà en
   extra-bold. */
.movie-search .ts-dropdown .optgroup-header {
    padding: 0.75rem 1rem 0.375rem;
    font-family: 'Anybody', sans-serif;
    font-size: 0.75rem; /* text-xs */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #515465; /* text-gray-600 */
    background: transparent;
    cursor: default;
}

/* Le thème par défaut pose déjà son filet ici, en #f0f0f0 taillé pour un fond blanc : reprendre le
   même sélecteur le remplace au lieu d'en superposer un second. */
.movie-search .ts-dropdown .optgroup + .optgroup {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top-color: rgba(238, 241, 249, 0.2); /* border-whiteStroke */
}

.movie-search .ts-dropdown .no-results {
    padding: 0.75rem 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.5;
    color: #9195A4; /* text-gray-300 */
    text-align: center;
}

/* L'anneau d'attente du thème par défaut est gris clair, taillé pour un fond blanc, et collé au
   bord gauche alors qu'il occupe seul le menu le temps de la requête. */
.movie-search .ts-dropdown .spinner {
    display: block;
    margin: 0.25rem auto;
}

.movie-search .ts-dropdown .spinner::after {
    border-color: #EEF1F9 transparent #EEF1F9 transparent; /* text-white-50 */
    border-width: 3px;
}