/* ================================================================
   RECHERCHE DU HEADER MATH-UNIVERSE.
   Declencheur .mu-search-trigger (icone + "Rechercher un cours"),
   panneau .rbt-search-dropdown du theme (recherche live AJAX de
   rainbow-elements), voile #mu-search-backdrop cree par
   js/mu-search.js. Le voile et le panneau demarrent SOUS la barre
   top-header : elle reste visible et cliquable (le declencheur
   devient un X pour fermer).
   Markup du panneau : template-parts/header/elements/
   search-dropdown.php (override child).

   REGLES DU FICHIER :
   - Unites en px UNIQUEMENT (Histudy force html{font-size:10px}).
   - Charge a priorite 1001 : APRES le style.css du theme.
   ================================================================ */

/* ----------------------------------------------------------------
   1. DECLENCHEUR : pilule icone + texte, lisible sur le header
      violet. L'icone loupe devient un X quand le panneau est ouvert
      (\ea02 = glyphe X de la police feather du theme).
   ---------------------------------------------------------------- */
a.mu-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 999px;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
a.mu-search-trigger i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
}
@media (hover: hover) and (pointer: fine) {
    a.mu-search-trigger:hover {
        background: rgba(255, 255, 255, 0.26);
        transform: scale(1.05);
        color: #fff !important;
    }
}
a.mu-search-trigger:active {
    transform: scale(0.95);
}
/* Panneau ouvert : loupe -> X, cercle plus marque. */
a.mu-search-trigger.open {
    background: rgba(255, 255, 255, 0.3);
}
a.mu-search-trigger.open i.feather-search::before {
    content: "\ea02";
}

/* ----------------------------------------------------------------
   2. VOILE : demarre sous la ligne du top-header (top pose en inline
      par le JS). Il recouvre le menu principal (qui devient inerte)
      et se ferme au clic. Le top-header au-dessus reste intact.
   ---------------------------------------------------------------- */
#mu-search-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* top : inline via JS */
    background: rgba(16, 24, 40, 0.55);
    opacity: 0;
    transition: opacity 250ms ease;
    z-index: 99990;
    cursor: pointer;
}
#mu-search-backdrop.is-on {
    opacity: 1;
}
/* Verrou du scroll pendant l'ouverture. */
html.mu-search-open,
html.mu-search-open body {
    overflow: hidden !important;
}

/* ----------------------------------------------------------------
   3. ETATS OUVERT/FERME DU PANNEAU — redeclares ici, en modernisant.
   Le theme anime la revelation avec la propriete DEPRECIEE clip:rect()
   et son etat ouvert depend de classes qu'on n'utilise plus. On
   redeclare les deux etats en clip-path (meme effet "rideau qui
   descend" que le demo) avec !important pour neutraliser le clip
   legacy. top/z-index/max-height sont poses en inline par le JS.
   ---------------------------------------------------------------- */
.rbt-elementor-popups .rbt-search-dropdown {
    opacity: 0;
    visibility: hidden;
    clip: auto !important;
    clip-path: inset(0 0 100% 0);
    transition:
        opacity 200ms linear,
        clip-path 450ms cubic-bezier(0.23, 1, 0.32, 1),
        visibility 0s 200ms;
}
.rbt-elementor-popups .rbt-search-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    clip-path: inset(0 0 0 0);
    transition:
        opacity 200ms linear,
        clip-path 600ms cubic-bezier(0.23, 1, 0.32, 1),
        visibility 0s;
}

/* ----------------------------------------------------------------
   4. FORMULAIRE : champ + bouton degrade "Rechercher" sur UNE ligne
      (comme le demo HiStudy). Le style du champ (grande ligne
      soulignee) et du bouton (.rbt-btn.btn-gradient) viennent du
      theme.
   ---------------------------------------------------------------- */
.rbt-search-dropdown form.mu-search-form {
    display: flex;
    align-items: center;
    gap: 20px;
}
.rbt-search-dropdown form.mu-search-form input {
    flex: 1;
    min-width: 0;
}
.rbt-search-dropdown form.mu-search-form .submit-btn {
    flex: none;
}
.rbt-search-dropdown .mu-search-submit {
    white-space: nowrap;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .rbt-search-dropdown .mu-search-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(80, 26, 162, 0.35);
    }
}
.rbt-search-dropdown .mu-search-submit:active {
    transform: scale(0.97);
}
@media (max-width: 575px) {
    .rbt-search-dropdown form.mu-search-form {
        flex-wrap: wrap;
    }
    .rbt-search-dropdown form.mu-search-form input {
        flex: 1 1 100%;
    }
}

/* ----------------------------------------------------------------
   4bis. TITRE DE SECTION ("Nos meilleurs cours" / "Resultats de
      recherche pour : ..." / "Loading") : taille raisonnable (le
      theme le rendait enorme, il debordait sous les cartes) et
      COLLANT en haut du panneau pendant le defilement des resultats,
      sur fond blanc — il ne se cache plus jamais.
   ---------------------------------------------------------------- */
.rbt-search-dropdown .section-title {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: 12px 0 10px !important;
    margin: 0;
}
.rbt-search-dropdown .section-title .rbt-title-style-2 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* ----------------------------------------------------------------
   4ter. PRIX DANS LES CARTES DU PANNEAU : le theme les ecrase a 14px
      (.rbt-search-dropdown ... .current-price{font-size:14px}) — les
      cartes SANS promo (prix simple ou fourchette "45 DT – 60 DT")
      paraissaient minuscules a cote des cartes promo. On aligne tout.
   ---------------------------------------------------------------- */
.rbt-search-dropdown .rbt-card .rbt-price .current-price .price {
    font-size: 18px; /* tiret des fourchettes de prix */
}
.rbt-search-dropdown .rbt-card .rbt-price .current-price .price ins,
.rbt-search-dropdown .rbt-card .rbt-price .current-price .price > .woocommerce-Price-amount {
    font-size: 24px;
    line-height: 1.2;
}
.rbt-search-dropdown .rbt-card .rbt-price .current-price .price del {
    font-size: 16px;
}

/* ----------------------------------------------------------------
   5. CARTES DE RESULTATS : TOUTES a la meme taille, quel que soit
      la longueur du titre — vue initiale "Nos meilleurs cours" ET
      resultats AJAX (meme wrapper #rbt-course-search-wrapper-layout-1,
      selecteur double au cas ou l'id changerait).
      - colonnes etirees (flex) -> cartes 100% hauteur ;
      - image en ratio fixe 16/10 ;
      - titre borne a 2 lignes (hauteur reservee constante) ;
      - bas de carte (prix) plaque en bas.
   ---------------------------------------------------------------- */
.rbt-search-dropdown #rbt-course-search-wrapper-layout-1 > [class*="col-"],
.rbt-search-dropdown [id^="rbt-course-search-wrapper"] > [class*="col-"],
.rbt-search-dropdown .row.g-4 > [class*="col-"] {
    display: flex;
    align-items: stretch;
}
.rbt-search-dropdown .rbt-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.rbt-search-dropdown .rbt-card .rbt-card-img a {
    display: block;
}
.rbt-search-dropdown .rbt-card .rbt-card-img img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.rbt-search-dropdown .rbt-card .rbt-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.rbt-search-dropdown .rbt-card .rbt-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /* hauteur reservee constante = 2 lignes, titre court ou long */
    min-height: calc(2 * 1.35em);
    line-height: 1.35;
}
.rbt-search-dropdown .rbt-card .rbt-card-bottom {
    margin-top: auto;
}

/* ----------------------------------------------------------------
   6. ACCESSIBILITE — mouvement reduit.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    a.mu-search-trigger,
    .rbt-search-dropdown .mu-search-submit {
        transition-property: background-color, box-shadow;
        transform: none !important;
    }
    #mu-search-backdrop {
        transition: none;
    }
    .rbt-elementor-popups .rbt-search-dropdown,
    .rbt-elementor-popups .rbt-search-dropdown.active {
        transition-property: opacity, visibility;
        clip-path: none;
    }
}