/* NEX-20845 — Header search widget (jeuxcom).
   Loaded by views/jeux/partials/_search_widget.blade.php. */

.jc-search { position: relative; min-width: 250px; }
.jc-search *, .jc-search *::before, .jc-search *::after { box-sizing: border-box; }

/* Widget-scoped anchor reset. Site-global a:hover applies text-decoration
   which was leaking into brand cards / result rows. Kill it everywhere
   inside the widget across all states. */
.jc-search a,
.jc-search a:hover,
.jc-search a:focus,
.jc-search a:active,
.jc-search a:visited,
.jc-search__overlay a,
.jc-search__overlay a:hover,
.jc-search__overlay a:focus,
.jc-search__overlay a:active,
.jc-search__overlay a:visited { text-decoration: none; }

.jc-search__form { position: relative; margin: 0; }
.jc-search__field {
    display: flex; align-items: center; gap: 5px;
    background: #fff;
    border: 1px solid transparent;
    /* Fully rounded by default. The bottom divider + squared bottom
       corners are only applied while the dropdown panel is visible
       (see the :has() rule below). No transition — the switch must be
       instantaneous so the field never appears "detached" from the panel. */
    border-radius: 8px;
    padding: 5px 7px; cursor: text;
}
/* Panel open (desktop only) → seal the field to the panel: add divider
   + squared bottom. Mobile/tablet uses .jc-search__form--mobile which
   has its own field chrome and must NOT get this styling. */
.jc-search__desktop .jc-search__form:has(.jc-search__panel:not([hidden])) .jc-search__field {
    border-bottom-color: #777575;
    border-radius: 8px 8px 0 0;
}

.jc-search__icon { width: 13px; height: 13px; flex: 0 0 auto; margin: 6px; }
.jc-search__input {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-weight: 500; font-size: 14px; line-height: 1.4;
    color: #0f172a;
}
.jc-search__input::placeholder { color: #94a3b8; }
.jc-search__clear, .jc-search__close {
    border: 0; background: transparent; padding: 4px; cursor: pointer;
    color: #64748b; display: flex; align-items: center;
}
/* Reserve the slot so the input width doesn't jump when the X toggles.
   `hidden` normally maps to display:none; we swap to visibility:hidden
   so the button still occupies its flex space. */
.jc-search__clear[hidden], .jc-search__close[hidden] {
    display: flex; visibility: hidden; pointer-events: none;
}
.jc-search__clear svg, .jc-search__close svg { width: 16px; height: 16px; }
/* Hover effects intentionally disabled for now — only focus/active states apply. */

.jc-search__panel {
    /* Match the input width exactly (positioned relative to the form). */
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: 574px; overflow-y: auto;
    background: #fff; border-radius: 0 0 12px 12px;
    box-shadow: 0px 2px 6px 0px #615B8229;
    padding: 12px 8px; z-index: 100;
    scrollbar-width: none;
}

.jc-search__panel.empty {
    padding-inline: 20px;
}

.jc-search__panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
.jc-search__panel[hidden] { display: none; }

.jcs-section { padding-block: 8px 16px; padding-inline: 0; }
.jcs-section:first-child { padding-top: 8px; }
.jcs-section__title {
    display: inline-block;
    font-size: 16px; line-height: 24px; font-weight: 600;
    font-family: inherit; color: #0f172a;
    margin: 0 0 12px 0;
    padding-inline: 15px;
    padding-bottom: 0;
}
/* Fixed 24×2px red underline sitting 14px below the title text. */
.jcs-section__title::after {
    content: '';
    display: block;
    width: 24px; height: 2px;
    background: #D31A1A;
    margin-top: 14px;
}

.jcs-brands {
    display: flex; gap: 16px; overflow-x: auto; margin-inline: 15px;
    /* Extra trailing space so the last brand card can scroll fully into view. */
    padding: 0 24px 0 0;
    scrollbar-width: none; scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.jcs-brands::-webkit-scrollbar { width: 0; height: 0; display: none; }
.jcs-brand {
    flex: 0 0 auto; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 12px 10px 8px;
    width: 104px; min-height: 94px;
    border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
    text-decoration: none; color: #0f172a;
    transition: border-color .15s, transform .15s;
}

.jcs-brand:hover {
    border: 1px solid #9D98B8;
}

.jcs-brand:focus,
.jcs-brand:focus-visible {
    border: 1px solid #4A4462;
}

.jcs-brand:focus .jcs-brand__name,
.jcs-brand:focus-visible .jcs-brand__name {
    color: #342E47;
    text-decoration: underline;
}

/* .jcs-brand hover effect disabled per current UX request. */
.jcs-brand__img {
    display: block;
    width: 100%; max-width: 80px; height: auto; min-height: 46px;
    object-fit: contain;
    padding-block: 3.5px;
}
.jcs-brand__name {
    font-size: 12px; line-height: 18px; font-weight: 600;
    color: #615B82; text-align: center;
}

.jcs-links { display: flex; flex-direction: column; gap: 2px; }
.jcs-link {
    display: flex; align-items: center; gap: 10px; padding: 8px 15px;
    border-radius: 6px; text-decoration: none; color: #615B82;
    font-weight: 500; font-size: 14px; line-height: 1.3;
    transition: background .12s;
}
.jcs-link__tablet-icon { display: none; width: 14px; height: 14px; color: #615B82; flex: 0 0 auto; }
@media (min-width: 768px) and (max-width: 1023px) {
    .jcs-link__tablet-icon { display: block; margin-right: 12px; }
    .jcs-link { gap: 0; }
}
/* Hover — subtle grey tint + muted body-text color. */
.jcs-link:hover { background: #3438400D; color: #615B82; }
/* Focus (keyboard-selected / .is-active) — same tint, darker body color. */
.jcs-link:focus,
.jcs-link:focus-visible,
.jcs-link.is-active { background: #3438400D; color: #342E47; outline: none; }
.jcs-link__label { flex: 1; }
.jcs-link__arrow {
    width: 14px; height: 14px; color: #b0b6c1; flex: 0 0 auto;
    transform: rotate(-45deg);
}

.jcs-see-more {
    display: block; margin-top: 6px; padding: 6px;
    font-weight: 600; font-size: 12px; line-height: 1.2;
    color: #ff5b31; text-decoration: none;
}
/* .jcs-see-more hover underline disabled per current UX request. */

.jcs-results { display: flex; flex-direction: column; }
.jcs-result {
    display: flex; align-items: center; gap: 10px; padding: 10px 8px;
    border-radius: 6px; text-decoration: none; color: #615B82 !important;
    font-weight: 500; font-size: 14px; line-height: 1.3; cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid #3438400D;
}

.jcs-result:hover {
    background: #F5F4F8;
}

.jcs-result:focus,
.jcs-result:focus-visible {
    background: #3438400D;
}

.jcs-result.is-active { background: #f5f6f8; color: #ff5b31; }
.jcs-result__icon { width: 16px; height: 16px; color: #94a3b8; flex: 0 0 auto; }
.jcs-result__label { flex: 1; }
.jcs-result__arrow { width: 14px; height: 14px; color: #b0b6c1; transform: rotate(-45deg); }
.jcs-result__label { font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; }

.search-page-result p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
}

@media (min-width: 768px) {
    .search-page-result p {
        -webkit-line-clamp: 3;
    }
}

.jcs-loading { display: flex; justify-content: center; padding: 32px 12px; }
.jcs-loading__img {
    width: 52px; height: 56px; display: block;
    animation: jcsSpin 900ms linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
    background-color: #7D789F;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.jcs-loading--overlay .jcs-loading__img {
    background-color: #fff;
}
@keyframes jcsSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.jcs-loading--overlay {
    margin-top: 88px;
    align-self: center;
    padding: 0 12px;
    z-index: 10;
}
.jcs-empty {
    padding: 8px 15px 14px; text-align: center; color: #64748b;
    font-weight: 600; font-size: 14px; line-height: 1.4;
    /* Keep the empty-state within the panel; wrap long copy. */
    word-break: normal; overflow-wrap: anywhere;
}

.jc-search__mobile-trigger {
    display: none;
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: 0; cursor: pointer;
    color: inherit;
}
.jc-search__mobile-trigger svg { width: 22px; height: 22px; }

/* NEX-20845 — while the overlay is open (body.jc-search-open) on mobile
   and tablet, swap the site header controls to match Figma:
   burger + Actu + search icon hide, the existing close (X) becomes the
   only affordance in the header. Desktop breakpoints already never
   open the overlay so no media guard is needed. */
body.jc-search-open .burger_menu__nav,
body.jc-search-open .mobile__search_btn,
body.jc-search-open .nav__link_btn {
    display: none !important;
}
body.jc-search-open .nav__menu_close_btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Its parent (.nav_logo__block) only spans the logo area, so
       margin-left:auto isn't enough. Pin the close X to the header's
       right edge with fixed positioning. */
    position: fixed;
    top: 0;
    right: 12px;
    height: 68px;
    z-index: 2147483001;   /* above the overlay */
    margin: 0;
    padding: 0 8px;
    background: transparent;
    border: 0;
}

/* Mobile / tablet overlay. On mobile the overlay covers the full viewport
   (Figma). On tablet the site header stays visible above it and the
   backdrop uses the branded purple tint `#4A4462E5`. */
.jc-search__overlay {
    position: fixed; inset: 0; z-index: 2147483000;
    background: rgba(20, 22, 34, .55);
    display: flex; flex-direction: column; align-items: stretch;
    padding: 8px;
}
@media (max-width: 1200px) {
    .jc-search__overlay {
        top: 68px;                     /* leave the site header visible */
        background: #4A4462E5;         /* ~90% opaque brand purple */
        padding: 36px 40px 50px 42px;  /* 36 top / 40 right / 50 bottom (keep suggestions 50px off the viewport bottom) / 42 left */
    }
    /* Site header (visible above the overlay): close X sits 40px from
       the viewport right. Logo position stays as the site defines it. */
    body.jc-search-open .nav__menu_close_btn { right: 40px; }
}

@media (max-width: 767px) {
    .jc-search__overlay {
        padding: 20px 20px 50px;   /* 50px bottom keeps suggestions off the viewport bottom */
    }
    body.jc-search-open .header__logo_band {
        padding-inline: 20px;
    }
    body.jc-search-open .nav__menu_close_btn {
        right: 20px;
    }
}
.jc-search__overlay[hidden] { display: none; }
.jc-search__panel--mobile[hidden] { display: none; }
.jc-search__form--mobile {
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    display: flex; flex-direction: column; gap: 0;
    max-height: calc(100dvh - 16px); overflow: hidden;
}
.jc-search__form--mobile.is-loading {
    border-radius: 12px;
}
.jc-search__form--mobile.is-loading .jc-search__panel--mobile {
    display: none;
}
.jc-search__field--mobile {
    border: 0;
    border-bottom: 1px solid #777575;
    border-radius: 0;
    padding: 12px 16px 12px 10px;
    background: #fff;
}
.jc-search__form--mobile.is-loading .jc-search__field--mobile {
    border-bottom: 0;
    border-radius: 12px;
}
.jc-search__field--mobile:focus-within {
    box-shadow: none;
}
/* Hide the desktop clear button styling on mobile — Figma uses the
   header close-X as the sole way out. */
.jc-search__field--mobile .jc-search__clear { display: none; }
.jc-search__close {
    margin-left: auto;
}
.jc-search__close svg { width: 13px; height: 13px; color: #0f172a; }
.jc-search__panel--mobile {
    background: #fff;
    position: static; box-shadow: none; padding: 12px;
    max-height: none; overflow-y: auto; flex: 1 1 auto; min-height: 0;
    scrollbar-width: none;
}
.jc-search__panel--mobile::-webkit-scrollbar { width: 0; height: 0; display: none; }

@media (max-width: 1200px) {
    .jc-search__desktop,
    .mobile__search_wrapper { display: none; }
    .jc-search__mobile-trigger { display: inline-flex; align-items: center; justify-content: center; }
}

body.jc-search-open { overflow: hidden; }