/*
 * R33 Discovery — header search styles.
 *
 * All classes scoped under .r33-dux-* (Discovery UX). No global selectors,
 * no leaks into theme/Elementor styles.
 *
 * Migrated from /wp-content/mu-plugins/r33-header-search.php inline <style>
 * with classes renamed:  .r33-hs        → .r33-dux-search
 *                        .r33-hs__input → .r33-dux-search__input
 *                        .r33-hs__btn   → .r33-dux-search__btn
 *
 * Palette: dark to sit on the dark BB header. The white card from the
 * mu-plugin clashed with the header background and is replaced here.
 */

.r33-dux-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 416px;
    max-width: 416px;
    height: 53px;
    margin-top: 15px;
    /* Subtler version of the hero's red gradient
       (linear-gradient(135deg,#3a1418 0%,#7a2832 20%,#d55661 50%,#7a2832 80%,#3a1418 100%))
       — keeps the search reading as part of the same visual family without
       competing with the hero's brightness. */
    background: linear-gradient(135deg, #1a0a0d 0%, #2a0e12 35%, #3a1418 65%, #1a0a0d 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 0 10px 0 22px;
    transition: box-shadow 160ms ease, border-color 160ms ease;
    /* No layout/paint containment: it clips the dropdown which is
       position:absolute below the form. Was added during the BB-menu
       containment chase; now obsolete since we render in Elementor. */
}

.r33-dux-search:hover,
.r33-dux-search:focus-within {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    border-color: rgba(212, 175, 55, 0.4);
}

/* Specificity bump + !important on color/bg/border ONLY (not layout) so BB's
   :focus styles can't paint a white background under our white text. */
.r33-dux-search input.r33-dux-search__input,
.r33-dux-search input.r33-dux-search__input:focus,
.r33-dux-search input.r33-dux-search__input:active,
.r33-dux-search input.r33-dux-search__input:hover {
    flex: 1;
    height: 100%;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0;
    margin: 0;
    color: #ffffff !important;
    font-size: 17px;
    font-weight: 500;
    font-family: inherit;
    box-shadow: none !important;
    line-height: 1;
    -webkit-text-fill-color: #ffffff !important;
}

.r33-dux-search input.r33-dux-search__input::placeholder {
    color: rgba(255, 255, 255, 0.22) !important;
    font-weight: 500;
    opacity: 1;
    transition: color 200ms ease;
}

.r33-dux-search__input::-webkit-search-decoration,
.r33-dux-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.r33-dux-search__btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    margin-right: 2px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #d4af37;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 17px;
    line-height: 1;
    transition: background 160ms ease, color 160ms ease;
}

.r33-dux-search__btn:hover {
    background: #d4af37;
    color: #1a1a1a;
}

/*
 * Phase 2 dropdown container. Hidden by default, JS will toggle visibility
 * on input. Sits absolute under the search bar.
 */
.r33-dux-search__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    z-index: 1000;
}

.r33-dux-search__dropdown[hidden] {
    display: none;
}

/*
 * Dropdown content — Phase 2 minimal. Functional, not polished. The visual
 * design lands in Phase 3 alongside cities + grouping.
 */
.r33-dux-search__group {
    padding: 8px 0;
}

.r33-dux-search__group-label {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.r33-dux-search__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    text-decoration: none;
    color: #ffffff;
    transition: background 120ms ease;
}

.r33-dux-search__item:hover,
.r33-dux-search__item:focus {
    background: rgba(212, 175, 55, 0.12);
    color: #ffffff;
    text-decoration: none;
}

.r33-dux-search__thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #2a2a2a;
}

.r33-dux-search__thumb--empty {
    display: inline-block;
}

.r33-dux-search__name {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r33-dux-search__empty,
.r33-dux-search__loading {
    padding: 18px 14px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.r33-dux-search__loading::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #d4af37;
    border-radius: 50%;
    vertical-align: middle;
    animation: r33-dux-spin 0.7s linear infinite;
}

@keyframes r33-dux-spin {
    to { transform: rotate(360deg); }
}

/* City row variant: pin icon + name/country + count + arrow.
   Visually distinct from escort rows so user understands it's a different
   destination (city archive vs. profile page). */
.r33-dux-search__item--city {
    padding: 10px 14px;
}

.r33-dux-search__pin {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: 16px;
    background: rgba(212, 175, 55, 0.12);
    border-radius: 50%;
}

.r33-dux-search__count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.r33-dux-search__arrow {
    flex: 0 0 auto;
    color: #d4af37;
    font-size: 14px;
}

.r33-dux-search__view-all {
    display: block;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
    color: #d4af37;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 120ms ease;
}

.r33-dux-search__view-all:hover,
.r33-dux-search__view-all:focus {
    background: rgba(212, 175, 55, 0.08);
    color: #d4af37;
    text-decoration: none;
}

@media (max-width: 767px) {
    .r33-dux-search {
        width: 100%;
        max-width: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────
 * Breadcrumbs
 *
 * Sits below the profile-nav + header-search row (Layout B). Designed to
 * inherit container colour scheme but uses the same gold accent / muted
 * white palette as the rest of .r33-dux-* so it visually binds.
 * ────────────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────────────
 * Breadcrumbs use `color: inherit` so they automatically match whatever
 * Elementor container they're placed in — no theme-variant juggling, no
 * "is the bg light or dark" guessing. Non-current crumbs are dimmed via
 * opacity (works on light AND dark backgrounds). Hover stays gold across
 * both palettes for brand consistency.
 * ────────────────────────────────────────────────────────────────────── */

.r33-dux-breadcrumbs {
    width: 100%;
    padding: 4px 0 6px;
    font-size: 13px;
    color: #d4af37;
    line-height: 1.4;
}

.r33-dux-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.r33-dux-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

/* Separator via pseudo-element on adjacent items — keeps DOM clean
   (no separator <span>) and removes the need for skip-last logic in PHP.
   Uses opacity so it works on light AND dark backgrounds. */
.r33-dux-breadcrumbs__item + .r33-dux-breadcrumbs__item::before {
    content: "›";
    opacity: 0.4;
    font-size: 14px;
    margin: 0 6px;
    user-select: none;
}

.r33-dux-breadcrumbs__link {
    color: #d4af37;
    opacity: 0.72;
    text-decoration: none;
    transition: opacity 120ms ease;
}

.r33-dux-breadcrumbs__link:hover,
.r33-dux-breadcrumbs__link:focus {
    color: #d4af37;
    opacity: 1;
    text-decoration: none;
}

.r33-dux-breadcrumbs__current {
    color: #d4af37;
    opacity: 1;
    font-weight: 600;
}


/* ───────────────────────────────────────────────────────────────────────
 * Top Strip — composite component containing pager + search + breadcrumbs.
 *
 * Self-contained: owns its background, padding, layout, and theme. Drop
 * [r33_top_strip] anywhere; the strip handles everything internally.
 * No parent container styling needed.
 *
 * Layout:
 *   ┌──────────────────────────────────────────────────────────────┐
 *   │ [Home][‹ Prev][Next ›]            [search input ──────  🔍] │
 *   │ ──────────────────────────────────────────────────────────── │
 *   │ All Escorts › São Paulo › Jasmine                            │
 *   └──────────────────────────────────────────────────────────────┘
 * ────────────────────────────────────────────────────────────────────── */

.r33-dux-strip {
    /* Background inherits from Elementor parent. Strip itself spans full
       viewport — the rows below constrain to the same max-width as the
       hero so the nav buttons left-align with the hero's left edge and
       the search field right-aligns with its right edge. */
    background: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

.r33-dux-strip__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* Match the hero's content width. */
    max-width: 1398px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Breadcrumbs sit ABOVE the action row (pager + search). */
.r33-dux-strip__row--breadcrumbs {
    /* nothing — sits at top, no extra spacing */
}

.r33-dux-strip__row--actions {
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: -14px;
}

.r33-dux-strip__nav {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    /* Nudge 2px left so the first pager pill (Home) aligns flush with the
       hero's left edge — the pager's border-radius creates a tiny optical
       indent, this corrects it. */
    margin-left: -2px;
}

.r33-dux-strip__search {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Pager pills (Home / Prev / Next).
   Inverted from the search field: LIGHT pill, DARK text. Same height
   (53px) and radius (15px) as the search so the row reads as one set.
   The search stays dark — visual hierarchy: search is the focal element,
   pager is supportive context. */
.r33-dux-pager__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 53px;
    padding: 0 18px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 15px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
}

.r33-dux-pager__btn:hover,
.r33-dux-pager__btn:focus {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    border-color: rgba(212, 175, 55, 0.5);
    color: #d4af37;
    text-decoration: none;
}

.r33-dux-pager__icon {
    flex: 0 0 auto;
}

.r33-dux-pager__name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inside the strip: kill the search bar's legacy top margin and the
   breadcrumb's outer padding so vertical spacing comes solely from the
   strip's own padding + row gap. Keeps everything tight. */
.r33-dux-strip .r33-dux-search {
    margin-top: 0;
}

.r33-dux-strip .r33-dux-breadcrumbs {
    padding: 0;
}

/* Mobile: stack the actions row, full-width search */
@media (max-width: 767px) {
    .r33-dux-strip {
        padding: 12px 16px;
    }
    .r33-dux-strip__row--actions {
        flex-direction: column;
        align-items: stretch;
    }
    .r33-dux-strip__nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
    }
    .r33-dux-pager__btn {
        height: 40px;
        padding: 0 10px;
        font-size: 12px;
        gap: 5px;
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
    .r33-dux-pager__name {
        max-width: 70px;
    }
    .r33-dux-strip__search {
        margin-left: 0;
        width: 100%;
    }
    .r33-dux-strip .r33-dux-search {
        width: 100%;
        max-width: none;
    }
}

/*
 * Help Centre relocation styles.
 *
 * The JS in r33-search.js moves Help Centre out of #primary-menu and into
 * #header-aside .bb-header-buttons (as the first item, left of Sign in).
 *
 * (1) FLICKER FIX: while the <li> is still in #primary-menu (initial paint
 *     before JS runs), keep it visibility: hidden. The selector stops
 *     matching once JS moves the node into header-aside, so it becomes
 *     visible there automatically.
 * (2) FADE FIX: explicit color (not inherit) so it can't pick up any
 *     transparency/transition from the BB header-aside cascade.
 */
#primary-menu li.r33-mega-trigger,
#primary-menu li.trp-language-switcher-container.trp-menu-ls-desktop {
    visibility: hidden !important;
}

.r33-dux-menu-relocated {
    visibility: visible !important;
    list-style: none;
    display: inline-flex;
    align-items: center;
    margin: 0 12px 0 0;
    padding: 0;
    opacity: 1 !important;
}

.r33-dux-menu-relocated > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    padding: 6px 0;
    opacity: 1 !important;
    transition: color 160ms ease;
}

.r33-dux-menu-relocated > a:hover,
.r33-dux-menu-relocated > a:focus {
    color: #d4af37 !important;
    text-decoration: none;
}

.r33-dux-menu-relocated > a > i {
    color: inherit;
    font-size: 14px;
}

/*
 * BB header logged-in widgets — username text was rendering dark on the
 * dark header. Force light colour for any link/label inside #header-aside
 * that ISN'T already a styled button (Sign in / Sign up keep their own
 * styling) and isn't part of our search bar.
 */
#header-aside .header-aside-inner a:not(.button):not(.header-search-link):not(.r33-dux-search__btn),
#header-aside .header-aside-inner .user-name,
#header-aside .header-aside-inner .bb-username,
#header-aside .header-aside-inner .user-link,
#header-aside .header-aside-inner .bb-myprofile {
    color: #ffffff !important;
}

#header-aside .header-aside-inner a:not(.button):not(.header-search-link):not(.r33-dux-search__btn):hover {
    color: #d4af37 !important;
}

/*
 * Hide BuddyBoss's legacy icon-popup search trigger. Was previously handled
 * by the deleted mu-plugin; now lives here so the new plugin is the single
 * source of truth for "search UI on the site". Only takes effect when the
 * feature flag is on (CSS only enqueues then).
 */
.header-search-link,
a.header-search-link,
#header-aside .header-search-link {
    display: none !important;
}