/* =============================================================================
   OnlyPedia — Header Styles
   ============================================================================= */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES — LIGHT / DARK MODE
   ============================================================================= */

:root {
    --op-accent:          #f857a6;
    --op-accent-2:        #ff5858;
    --op-accent-gradient: linear-gradient(-45deg, #ff5858, #f857a6, #f857a6, #ff5858);

    --op-header-h:        64px;
    --op-tabbar-h:        68px;
    /* Shared max content width — every page's main container uses this so they
       all match the (wider) single-creator page. Change here to change all. */
    --op-content-max:     1640px;
    --op-radius-sm:       8px;
    --op-radius-md:       14px;
    --op-radius-lg:       22px;
    --op-radius-pill:     999px;

    --op-transition:      0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --op-transition-slow: 0.38s cubic-bezier(0.4, 0, 0.2, 1);

    /* Slower transition specifically for the scroll → glass header morph,
       so it doesn't feel like a sudden snap. */
    --op-transition-header: 0.48s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index scale (named tokens replace magic numbers) */
    --op-z-header:        9000;
    --op-z-tabbar:        9000;
    --op-z-mega:          9100;
    --op-z-tooltip:       9200;
    --op-z-cat-sheet:     9400;
    --op-z-mobile-search: 9500;

    /* Shared font stacks. DM Sans is loaded globally via header-setup.php
       (no @import in component CSS files). Special Gothic Expanded One is
       reserved for display headlines (logos, hero titles). */
    --op-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-op-theme="light"],
:root {
    --op-bg:              #f5f5f8;
    --op-bg-secondary:    #ebebeb;
    --op-bg-tertiary:     #dedede;
    --op-text-primary:    #1a1a2e;
    --op-text-secondary:  #6e6e80;
    --op-text-muted:      #aeaeb2;
    --op-border:          rgba(0, 0, 0, 0.08);
    --op-border-strong:   rgba(0, 0, 0, 0.14);
    --op-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.06);
    --op-shadow-md:       0 8px 32px rgba(0, 0, 0, 0.10);
    --op-shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.14);
    --op-glass-bg:        rgba(245, 245, 248, 0.85);
    --op-glass-border:    rgba(0, 0, 0, 0.08);
    --op-glass-blur:      20px;
    --op-search-bg:       rgba(0, 0, 0, 0.05);
    --op-search-bg-focus: rgba(0, 0, 0, 0.08);
    --op-search-border:   rgba(0, 0, 0, 0.10);
    --op-tabbar-bg:       rgba(245, 245, 248, 0.88);
    --op-tabbar-border:   rgba(0, 0, 0, 0.08);
    --op-tab-active:      var(--op-accent);
    --op-tab-inactive:    #aeaeb2;
}

[data-op-theme="dark"] {
    --op-bg:              #0d0d14;
    --op-bg-secondary:    #1a1a2e;
    --op-bg-tertiary:     #252540;
    --op-text-primary:    #f5f5f7;
    --op-text-secondary:  #a0a0b8;
    --op-text-muted:      #6e6e80;
    --op-border:          rgba(255, 255, 255, 0.08);
    --op-border-strong:   rgba(255, 255, 255, 0.14);
    --op-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.30);
    --op-shadow-md:       0 8px 32px rgba(0, 0, 0, 0.40);
    --op-shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.50);
    --op-glass-bg:        rgba(13, 13, 20, 0.85);
    --op-glass-border:    rgba(255, 255, 255, 0.08);
    --op-glass-blur:      20px;
    --op-search-bg:       rgba(255, 255, 255, 0.07);
    --op-search-bg-focus: rgba(255, 255, 255, 0.11);
    --op-search-border:   rgba(255, 255, 255, 0.10);
    --op-tabbar-bg:       rgba(13, 13, 20, 0.92);
    --op-tabbar-border:   rgba(255, 255, 255, 0.08);
    --op-tab-active:      var(--op-accent);
    --op-tab-inactive:    #6e6e80;
}


/* =============================================================================
   2. RESET
   ============================================================================= */

#op-header,
#op-header * {
    box-sizing: border-box;
}

body {
    padding-top: var(--op-header-h) !important;
    background-color: var(--op-bg);
    color: var(--op-text-primary);
    transition: background-color var(--op-transition), color var(--op-transition);
}

/* While the theme toggle swaps light↔dark, JS adds .op-theme-switching to
   <html> for one paint so NOTHING transitions — the page flips instantly
   instead of animating hundreds of colour fades (which felt sluggish). */
html.op-theme-switching,
html.op-theme-switching *,
html.op-theme-switching *::before,
html.op-theme-switching *::after {
    transition: none !important;
}

@media (max-width: 767px) {
    body {
        padding-bottom: var(--op-tabbar-h) !important;
    }
}


/* =============================================================================
   3. HEADER
   =============================================================================
   LIGHT MODE: starts FULLY TRANSPARENT (no background, no border, no shadow)
   so that hero images / page backgrounds bleed through cleanly. As soon as
   the user scrolls past 10px, .is-scrolled cross-fades the glass background
   in. The transition is intentionally slower than the rest of the UI
   (--op-transition-header ~ 0.48s) so the morph reads as a gentle
   "settling in" rather than an abrupt cut.

   DARK MODE: stays SOLID --disc-page-bg (#0d0d14) both at rest and when
   scrolled. Reason: most pages don't yet have hero sections that bleed
   under the header in dark mode, so a transparent header would render
   white against the bright page content below. Once dark hero sections
   are in place page-by-page, we can revisit this and let dark mode use
   the same transparent → glass dance as light mode.
   ============================================================================= */

.op-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--op-z-header);
    height: var(--op-header-h);
    /* SAME solid colour as the page body (--op-bg) — so there is no visible
       boundary between header and content in either theme (no seam in light, no
       hairline in dark), and, being opaque, content sliding under the fixed
       header on scroll is never seen through it (no overlap). NO border at all;
       depth appears only as a soft shadow once scrolled. */
    background: var(--op-bg);
    border: 0;
    box-shadow: none;
    transition: box-shadow var(--op-transition-header);
}

/* Scrolled: a soft shadow lifts the bar above the content. No border/line. */
.op-header.is-scrolled {
    box-shadow: var(--op-shadow-md);
}

.op-header__container {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    /* Full-width header: spans edge to edge, with responsive side padding so
       the logo/actions sit near the viewport edges on any screen (padding
       grows a little on large monitors, stays tight on small ones). */
    max-width: none;
    margin: 0 auto;
    padding: 0 clamp(16px, 2.6vw, 44px);
}


/* =============================================================================
   4. LOGO
   ============================================================================= */

.op-header__logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: opacity var(--op-transition);
}

.op-header__logo:hover {
    opacity: 0.78;
}

.op-logo-bounce {
    animation: op-logo-click 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes op-logo-click {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.93); }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.op-header__logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.op-header__logo-text {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1;
    /* Visually align the glyph centerline with the logo image. The font
       has more ascender space than the image's bounding box, so without
       this nudge the text reads as "sitting lower" than the icon. */
    margin-top: -1px;
    white-space: nowrap;
    background: linear-gradient(
        90deg,
        #1a1a2e 0%,
        #1a1a2e 30%,
        #3d3d50 48%,
        #1a1a2e 66%,
        #1a1a2e 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: op-logo-shimmer 12s linear infinite;
}

[data-op-theme="dark"] .op-header__logo-text {
    background: linear-gradient(
        90deg,
        #f5f5f7 0%,
        #f5f5f7 28%,
        #f1f7fd 42%,
        #fbf3fa 50%,
        #fff8f2 58%,
        #f5f5f7 72%,
        #f5f5f7 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: op-logo-shimmer 12s linear infinite;
}

@keyframes op-logo-shimmer {
    0%   { background-position: 400% center; }
    100% { background-position: -400% center; }
}


/* =============================================================================
   5. DESKTOP NAVIGATION — Left & right groups
   =============================================================================
   There are TWO nav groups in the header now:
     - .op-header__nav--left  : Categories + Discover (right after the logo)
     - .op-header__nav--right : Best OnlyFans + Free OnlyFans (right side,
                                between search bar and theme toggle)
   The search bar (.op-header__search-wrap) sits between them with
   margin: 0 auto on both sides so it stays visually centered in the
   container's free space.
   ============================================================================= */

.op-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.op-nav__item {
    position: relative;
}

.op-nav__btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: transparent;
    border: none;
    border-radius: var(--op-radius-sm);
    cursor: pointer;
    font-family: var(--op-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--op-text-primary);
    line-height: 1;
    transition: background var(--op-transition), color var(--op-transition);
    white-space: nowrap;
}

.op-nav__btn:hover,
.op-nav__btn[aria-expanded="true"] {
    background: var(--op-search-bg);
}

.op-nav__chevron {
    transition: transform var(--op-transition);
    flex-shrink: 0;
    color: var(--op-text-secondary);
}

.op-nav__btn[aria-expanded="true"] .op-nav__chevron {
    transform: rotate(180deg);
}

.op-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.op-nav__list li {
    margin: 0;
    padding: 0;
}

.op-nav__list li a {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    background: transparent;
    border-radius: var(--op-radius-sm);
    font-family: var(--op-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--op-text-primary) !important;
    text-decoration: none !important;
    transition: background var(--op-transition);
    white-space: nowrap;
}

.op-nav__list li a:hover {
    background: var(--op-search-bg);
}

/* Discover hardcoded link — same visual language as other nav buttons,
   with a small leading sparkle icon. */
.op-nav__link--discover,
.op-nav__link--magazine {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    border-radius: var(--op-radius-sm);
    font-family: var(--op-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--op-text-primary) !important;
    text-decoration: none !important;
    transition: background var(--op-transition);
    white-space: nowrap;
    line-height: 1;
}

.op-nav__link--discover:hover,
.op-nav__link--magazine:hover {
    background: var(--op-search-bg);
}

.op-nav__link--discover svg,
.op-nav__link--magazine svg {
    flex-shrink: 0;
    color: var(--op-accent);
}

/* Best OnlyFans / Free OnlyFans — quick-access shortcut pills on the right.
   Coloured rounded-rectangle pills (soft radius) that stand out from the
   plain nav links while staying tasteful. Best = azure, Free = green. */
.op-nav__pill {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Special Gothic Expanded One', var(--op-font-body), sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid transparent;
    transition: transform var(--op-transition), box-shadow var(--op-transition), filter var(--op-transition);
}

.op-nav__pill:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* Best & Free pills — flat, inverted per theme (no more blue/pink split).
   Light: dark pill / white text. Dark: white pill / dark text. */
.op-nav__pill--best,
.op-nav__pill--free {
    background: #121212;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.op-nav__pill--best:hover,
.op-nav__pill--free:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

[data-op-theme="dark"] .op-nav__pill--best,
[data-op-theme="dark"] .op-nav__pill--free {
    background: #ffffff;
    color: #121212 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Special Gothic Expanded One on the primary nav labels (Categories/Discover/
   Magazine), the "View all" links and the search field (text + placeholder). */
.op-nav__btn,
.op-nav__link,
.op-mega-dropdown__view-all,
.op-search-bar__input {
    font-family: 'Special Gothic Expanded One', var(--op-font-body), sans-serif;
}
.op-search-bar__input::placeholder {
    font-family: 'Special Gothic Expanded One', var(--op-font-body), sans-serif;
    opacity: 1;
}


/* =============================================================================
   6. MEGA DROPDOWN — Full width, fixed below header
   =============================================================================
   New layout: 4 columns on the left zone (Quick/Gender/Skin | Physical |
   Hair/Ethnicity | Niche), 3 columns on the right zone (Nationality split
   alphabetically into thirds). Niche is no longer a horizontal section
   below the columns — it's promoted to its own column.
   ============================================================================= */

.op-mega-dropdown {
    position: fixed;
    top: var(--op-header-h);
    left: 0;
    right: 0;
    background: var(--op-bg);
    border-top: 1px solid var(--op-border);
    border-bottom: 1px solid var(--op-border-strong);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    z-index: var(--op-z-mega);
    max-height: calc(90vh - var(--op-header-h));
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity var(--op-transition),
        transform var(--op-transition),
        visibility var(--op-transition);
    pointer-events: none;
}

.op-mega-dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.op-mega-dropdown__inner {
    max-width: none;
    margin: 0 auto;
    padding: 20px clamp(16px, 2.6vw, 44px);
}

/* Filter — spans full width */
.op-mega-dropdown__filter-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--op-search-bg);
    border: 1px solid var(--op-search-border);
    border-radius: var(--op-radius-sm);
    margin-bottom: 16px;
    color: var(--op-text-secondary);
    max-width: 380px;
}

.op-mega-dropdown__filter {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--op-font-body);
    font-size: 13px;
    color: var(--op-text-primary);
    line-height: 1;
}

.op-mega-dropdown__filter::placeholder {
    color: var(--op-text-muted);
}

/* Dropdown body: two side-by-side zones */
.op-mega-dropdown__body {
    display: flex;
    align-items: flex-start;
}

/* Left zone: 50% — 4 columns */
.op-mega-dropdown__zone--left {
    flex: 0 0 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--op-border);
    padding-right: 16px;
}

/* Right zone: 50% — 3 columns (Nationality) */
.op-mega-dropdown__zone--right {
    flex: 0 0 50%;
    min-width: 0;
    padding-left: 16px;
}

/* Row of columns inside each zone */
.op-mega-dropdown__cols-half {
    display: flex;
    align-items: flex-start;
}

/* Single column */
.op-mega-col {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    border-left: 1px solid var(--op-border);
}

.op-mega-col:first-child {
    border-left: none;
    padding-left: 0;
}

.op-mega-col:last-child {
    padding-right: 0;
}

/* Section inside a column */
.op-mega-col__section {
    margin-bottom: 12px;
}

.op-mega-col__section:last-child {
    margin-bottom: 0;
}

/* Section label */
.op-mega-col__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--op-text-muted);
    padding: 0 4px 6px;
    border-bottom: 1px solid var(--op-border);
    margin-bottom: 4px;
    margin-top: 14px;
}

.op-mega-col__section:first-child .op-mega-col__label {
    margin-top: 0;
}

/* Single item */
.op-mega-dropdown__item {
    display: block;
    padding: 5px 4px;
    border-radius: var(--op-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--op-text-primary) !important;
    text-decoration: none !important;
    transition: background var(--op-transition), color var(--op-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.op-mega-dropdown__item:hover {
    background: var(--op-search-bg);
    color: var(--op-accent) !important;
}

.op-mega-dropdown__item[hidden] {
    display: none;
}

/* Footer — pink pill button (full width) */
.op-mega-dropdown__footer {
    margin-top: 20px;
    padding-top: 0;
}

.op-mega-dropdown__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 24px;
    background: linear-gradient(-45deg, #ff5858, #f857a6, #f857a6, #ff5858);
    background-size: 300% 300%;
    animation: op-gradient-shift 4s ease infinite;
    border-radius: var(--op-radius-pill);
    font-family: 'Special Gothic Expanded One', var(--op-font-body), sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity var(--op-transition);
}

.op-mega-dropdown__view-all:hover {
    opacity: 0.88;
}

@keyframes op-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Compact spacing on short viewports (e.g. 1366×768) where the full
   dropdown otherwise overflows the 90vh ceiling. */
@media (max-height: 820px) {
    .op-mega-dropdown__inner { padding: 14px 24px; }
    .op-mega-col__section { margin-bottom: 8px; }
    .op-mega-col__label { margin-top: 10px; padding-bottom: 4px; }
    .op-mega-dropdown__item { padding: 4px 4px; font-size: 12px; }
    .op-mega-dropdown__footer { margin-top: 14px; }
    .op-mega-dropdown__view-all { padding: 10px 20px; }
}


/* =============================================================================
   7. DESKTOP SEARCH BAR — Centered between left and right nav groups
   =============================================================================
   margin: 0 auto on both sides ensures the search bar stays visually
   centered in the container's free space, regardless of how wide the
   left or right nav groups become.
   ============================================================================= */

.op-header__search-wrap {
    flex: 1 1 auto;
    max-width: 480px;
    position: relative;
    margin: 0 auto;
}

.op-search-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    height: 42px;
    background: var(--op-search-bg);
    border: 1px solid var(--op-search-border);
    border-radius: var(--op-radius-pill);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition:
        background var(--op-transition),
        border-color var(--op-transition),
        box-shadow var(--op-transition);
}

.op-search-bar:hover {
    border-color: var(--op-text-muted);
}

.op-search-bar:focus-within {
    background: var(--op-search-bg-focus);
    border-color: var(--op-accent);
    box-shadow: 0 0 0 3px rgba(248, 87, 166, 0.12);
}

.op-search-bar__icon {
    color: var(--op-text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color var(--op-transition);
}

/* Uniform the magnifier with the rest of the header icon set: larger and with
   a stroke weight that reads the same as the sun/moon toggle. */
.op-search-bar__icon svg {
    width: 18px;
    height: 18px;
}

.op-search-bar__icon svg circle,
.op-search-bar__icon svg path {
    stroke-width: 2.4;
}

.op-search-bar:focus-within .op-search-bar__icon {
    color: var(--op-accent);
}

.op-search-bar__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--op-font-body);
    font-size: 14px;
    color: var(--op-text-primary);
    line-height: 1;
    min-width: 0;
}

.op-search-bar__input::placeholder {
    color: var(--op-text-muted);
}

.op-search-bar__input::-webkit-search-cancel-button,
.op-mobile-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.op-search-bar__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--op-text-muted);
    border-radius: 50%;
    transition: color var(--op-transition), background var(--op-transition);
    flex-shrink: 0;
}

.op-search-bar__clear:hover {
    color: var(--op-text-primary);
    background: var(--op-bg-secondary);
}


/* =============================================================================
   8. SEARCH DROPDOWN
   ============================================================================= */

.op-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--op-bg);
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md);
    box-shadow: var(--op-shadow-lg);
    z-index: var(--op-z-mega);
    overflow: hidden;
    animation: op-dropdown-in var(--op-transition) both;
}

@keyframes op-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.op-search-section {
    padding: 12px 0 4px;
}

.op-search-section + .op-search-section {
    border-top: 1px solid var(--op-border);
}

.op-search-section__label {
    padding: 0 14px 6px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--op-text-muted);
}

/* ── Suggest "Most searched this week" — scroller orizzontale + sfumatura destra ── */
.op-search-section--trending { position: relative; }
.op-search-section--trending .op-search-section__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 14px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* touch-action/overscroll: lo scroll orizzontale deve funzionare anche dentro
       il contenitore verticale (iOS/DuckDuckGo non scrollava). NIENTE mask-image sul
       contenitore: su iOS WebKit bloccava lo scroll touch. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
.op-search-section--trending .op-search-section__list::-webkit-scrollbar { display: none; }
/* Sfumatura a destra come overlay pointer-events:none (NON blocca lo scroll come
   faceva mask-image). Solo in caso di overflow → il 3° chip risulta già sfumato. */
.op-search-section--trending::after {
    content: '';
    position: absolute;
    top: 27px; right: 0;
    width: 56px; height: 48px;
    background: linear-gradient(to right, rgba(0,0,0,0), var(--op-bg) 88%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}
.op-search-section--trending.op-has-overflow::after { opacity: 1; }

/* Barra di scorrimento rosa (thumb) — indicatore fisso sotto lo scroller suggest,
   sopra la linea che separa i suggest dagli organici. Gestita via JS. */
.op-trending-scroll {
    display: none;
    position: relative;
    height: 3px;
    margin: 0 14px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.07);
}
.op-trending-scroll__thumb {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 30%;
    border-radius: 999px;
    background: linear-gradient(-45deg, #ff5858, #f857a6, #f857a6, #ff5858);
}
[data-op-theme="dark"] .op-trending-scroll { background: rgba(255,255,255,0.12); }

/* Chip orizzontale (avatar + nome/username affiancati), come i risultati organici
   ma compatto: una sola riga, 4 chip affiancati e scrollabili → non ruba spazio
   verticale ai risultati organici. */
.op-trending-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    max-width: 190px;
    padding: 5px 13px 5px 5px;
    border-radius: 999px;
    background: var(--op-bg-tertiary);
    text-decoration: none;
    transition: filter 0.15s ease;
}
.op-trending-card:hover { filter: brightness(0.96); }
.op-trending-card__avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    background: var(--op-bg-secondary);
}
.op-trending-card__text { display: flex; flex-direction: column; min-width: 0; }
.op-trending-card__name {
    font-size: 12.5px; font-weight: 700; line-height: 1.25;
    color: var(--op-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-trending-card__username {
    font-size: 10.5px; line-height: 1.2;
    color: var(--op-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.op-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background var(--op-transition);
    text-decoration: none !important;
    color: var(--op-text-primary) !important;
}

.op-search-result-item:hover {
    background: var(--op-bg-secondary);
}

.op-search-result-item__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--op-bg-tertiary);
}

.op-search-result-item__info {
    flex: 1;
    min-width: 0;
}

.op-search-result-item__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--op-text-primary);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}

.op-search-result-item__name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.op-search-result-item__username {
    font-size: 12px;
    color: var(--op-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.op-search-result-item__badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: var(--op-radius-pill);
    background: linear-gradient(-45deg, #ff5858, #f857a6);
    color: #ffffff;
    flex-shrink: 0;
    text-transform: uppercase;
}

.op-search-result-item__verified {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    overflow: visible;
}

.op-search-dropdown__footer {
    padding: 12px 14px;
    border-top: 1px solid var(--op-border);
}

.op-search-dropdown__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px 20px;
    background: linear-gradient(-45deg, #ff5858, #f857a6, #f857a6, #ff5858);
    background-size: 300% 300%;
    animation: op-gradient-shift 4s ease infinite;
    border-radius: var(--op-radius-pill);
    font-family: var(--op-font-body);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity var(--op-transition);
    white-space: nowrap;
}

.op-search-dropdown__view-all:hover {
    opacity: 0.88;
}

/* Force the SVG inside this pill button to stay white in both themes
   (overrides the universal icon color rule). */
[data-op-theme="light"] .op-search-dropdown__view-all svg,
[data-op-theme="dark"]  .op-search-dropdown__view-all svg {
    color: #ffffff;
}

.op-search-state {
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--op-text-muted);
}


/* =============================================================================
   9. HEADER ACTIONS
   =============================================================================
   The actions group (theme toggle + login) no longer uses margin-left:auto,
   because the search bar is now centered between the two nav groups via
   margin auto. The right-nav group (.op-header__nav--right) is the natural
   left-neighbor of the actions group.
   ============================================================================= */

.op-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.op-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--op-text-primary);
    transition: opacity var(--op-transition);
    padding: 0;
    flex-shrink: 0;
}

.op-theme-toggle:hover {
    opacity: 0.7;
}

.op-theme-toggle__track {
    display: none;
}

.op-theme-toggle__sun,
.op-theme-toggle__moon {
    display: flex;
    align-items: center;
    color: var(--op-text-primary);
}

.op-theme-toggle__sun svg,
.op-theme-toggle__moon svg {
    width: 30px;
    height: 30px;
}

[data-op-theme="light"] .op-theme-toggle__sun,
:root:not([data-op-theme]) .op-theme-toggle__sun { display: flex; }
[data-op-theme="light"] .op-theme-toggle__moon,
:root:not([data-op-theme]) .op-theme-toggle__moon { display: none; }
[data-op-theme="dark"] .op-theme-toggle__moon { display: flex; }
[data-op-theme="dark"] .op-theme-toggle__sun  { display: none; }

.op-login-wrap {
    position: relative;
}

.op-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--op-text-primary);
    padding: 0;
    flex-shrink: 0;
    transition: opacity var(--op-transition);
}

.op-login-btn:hover {
    opacity: 0.7;
}

.op-login-btn svg {
    width: 30px;
    height: 30px;
}

/* Mobile search button — lives in the header actions (top-right), replacing
   the person/login icon on small screens. Hidden on desktop, where the full
   header search bar is present instead. */
.op-header-searchbtn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--op-text-primary);
    padding: 0;
    flex-shrink: 0;
    transition: opacity var(--op-transition);
}

.op-header-searchbtn:hover {
    opacity: 0.7;
}

/* Match the sun/moon toggle and login icon (30px, stroke 2 on a 24 viewBox). */
.op-header-searchbtn svg {
    width: 30px;
    height: 30px;
}

.op-soon-tooltip {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--op-text-primary);
    color: var(--op-bg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    border-radius: var(--op-radius-pill);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--op-transition), transform var(--op-transition);
    z-index: var(--op-z-tooltip);
}

.op-soon-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--op-text-primary);
}

.op-soon-tooltip.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* =============================================================================
   10. BOTTOM TAB BAR
   ============================================================================= */

.op-tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--op-z-tabbar);
    height: var(--op-tabbar-h);
    background: var(--op-glass-bg);
    backdrop-filter: blur(var(--op-glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--op-glass-blur)) saturate(180%);
    border-top: 1px solid var(--op-glass-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    grid-template-columns: repeat(6, 1fr);
    align-items: stretch;
}

/* Opaque background fallback when backdrop-filter is unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .op-tabbar {
        background: var(--op-bg);
    }
}

.op-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    color: var(--op-text-primary);
    transition: color var(--op-transition);
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
}

.op-tabbar__item:hover,
.op-tabbar__item.is-active {
    color: var(--op-tab-active);
}

.op-tabbar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.op-tabbar__icon svg {
    width: 22px;
    height: 22px;
}

.op-tabbar__label {
    font-family: var(--op-font-body);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1px;
    line-height: 1;
    color: var(--op-text-primary);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 6 tabs get a hair tighter on very small screens */
@media (max-width: 360px) {
    .op-tabbar__label { font-size: 8.8px; }
}


/* =============================================================================
   11. MOBILE SEARCH OVERLAY
   =============================================================================
   The footer ("View all results") MUST stay above the on-screen keyboard at
   all times. Layout strategy:

   - The overlay uses 100dvh (dynamic viewport height) so it shrinks correctly
     when iOS shows its address bar.
   - The footer is absolutely positioned at the bottom of the overlay, so we
     can offset it via CSS variable --op-kb-offset (set by JS from
     window.visualViewport.resize when the keyboard opens/closes).
   - The results region has bottom padding equal to the footer's height so
     content doesn't slip under the footer when scrolling.
   ============================================================================= */

.op-mobile-search {
    display: none;
    position: fixed;
    inset: 0;
    height: 100dvh;
    z-index: var(--op-z-mobile-search);
    background: var(--op-bg);
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--op-transition);
}

.op-mobile-search.is-open {
    opacity: 1;
    pointer-events: auto;
}

.op-mobile-search__topbar {
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
}

.op-mobile-search__island {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 46px;
    background: var(--op-search-bg);
    border: 1px solid var(--op-search-border);
    border-radius: var(--op-radius-pill);
    transition:
        background var(--op-transition),
        border-color var(--op-transition),
        box-shadow var(--op-transition);
}

.op-mobile-search__island:focus-within {
    border-color: var(--op-accent);
    box-shadow: 0 0 0 3px rgba(248, 87, 166, 0.12);
}

.op-mobile-search__back {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--op-text-secondary);
    padding: 2px;
    flex-shrink: 0;
    transition: color var(--op-transition);
    -webkit-tap-highlight-color: transparent;
}

.op-mobile-search__back:hover {
    color: var(--op-text-primary);
}

.op-mobile-search__icon {
    color: var(--op-text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.op-mobile-search__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--op-font-body);
    font-size: 16px;
    color: var(--op-text-primary);
    line-height: 1;
    min-width: 0;
}

.op-mobile-search__input::placeholder {
    color: var(--op-text-muted);
}

.op-mobile-search__clear {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--op-text-muted);
    padding: 2px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Results region: takes remaining space, scrolls internally. Bottom padding
   keeps the last item visible above the fixed footer (which is at body level
   but visually overlaps this area). */
.op-mobile-search__results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 84px;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent 100%);
}

/* Footer: NOT a child of .op-mobile-search visually — it's position:fixed at
   body level (z-index above overlay). We lift it via translateY when the soft
   keyboard appears.

   Why this approach: on iOS, an absolutely-positioned element inside a
   100dvh container is hidden behind the keyboard regardless of bottom value.
   A fixed element at body level lives in the LAYOUT viewport, but using
   transform:translateY anchors it to the VISUAL viewport.

   Visibility is fully JS-controlled (display:none/block) — base state hidden
   via the inline style attribute set in the PHP template.
*/
.op-mobile-search__footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--op-z-mobile-search) + 1);
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--op-border);
    background: var(--op-bg);
    /* JS sets --op-kb-h to the visual-viewport bottom offset (keyboard top). Il
       tracking è aggiornato via rAF su scroll+resize: NESSUNA transition sul
       transform, altrimenti ogni micro-aggiornamento verrebbe animato e il footer
       tremerebbe/scivolerebbe. Transition solo su opacity per l'apri/chiudi. */
    transform: translateY(calc(-1 * var(--op-kb-h, 0px)));
    transition: opacity 0.15s ease;
    will-change: transform;
}

.op-mobile-search__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(-45deg, #ff5858, #f857a6, #f857a6, #ff5858);
    background-size: 300% 300%;
    animation: op-gradient-shift 4s ease infinite;
    border-radius: var(--op-radius-pill);
    font-family: var(--op-font-body);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity var(--op-transition);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Make sure nothing in the surrounding container blocks the tap. */
    position: relative;
    z-index: 1;
}

.op-mobile-search__view-all:active,
.op-mobile-search__view-all.is-loading {
    opacity: 0.65;
    transform: scale(0.98);
}

/* Loading state: append a small spinner. Triggered by JS on tap. */
.op-mobile-search__view-all.is-loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: op-spin 0.7s linear infinite;
    margin-left: 6px;
    flex-shrink: 0;
}

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


/* =============================================================================
   12. MOBILE CATEGORIES — Bottom Sheet, 2 columns with sections
   ============================================================================= */

.op-cat-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--op-z-cat-sheet);
}

.op-cat-sheet.is-open {
    display: block;
}

.op-cat-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    animation: op-backdrop-in var(--op-transition) both;
}

@keyframes op-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.op-cat-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 78vh;
    background: var(--op-bg);
    border-radius: var(--op-radius-lg) var(--op-radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: op-sheet-in var(--op-transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes op-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.op-cat-sheet__handle {
    width: 36px;
    height: 4px;
    background: var(--op-bg-tertiary);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.op-cat-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 8px;
    flex-shrink: 0;
}

.op-cat-sheet__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--op-text-primary);
    margin: 0;
}

.op-cat-sheet__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--op-text-primary);
    padding: 0;
    margin-right: -8px; /* visually align flush with the panel edge */
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--op-transition);
}

.op-cat-sheet__close:hover,
.op-cat-sheet__close:active {
    opacity: 0.7;
}

.op-cat-sheet__close svg {
    width: 28px;
    height: 28px;
}

.op-cat-sheet__filter-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 12px;
    padding: 9px 12px;
    background: var(--op-search-bg);
    border: 1px solid var(--op-search-border);
    border-radius: var(--op-radius-sm);
    flex-shrink: 0;
    color: var(--op-text-secondary);
}

.op-cat-sheet__filter {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--op-font-body);
    font-size: 16px;
    color: var(--op-text-primary);
    line-height: 1;
}

.op-cat-sheet__filter::placeholder {
    color: var(--op-text-muted);
}

/* List: explicit 2 columns via flex */
.op-cat-sheet__list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: flex-start;
    overscroll-behavior: contain;
    padding-bottom: 8px;
}

/* Column */
.op-cat-sheet__col {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
    border-left: 1px solid var(--op-border);
}

.op-cat-sheet__col:first-child {
    border-left: none;
    padding-left: 8px;
}

.op-cat-sheet__col:last-child {
    padding-right: 8px;
}

/* Section inside the column */
.op-cat-sheet__section {
    margin-bottom: 10px;
}

.op-cat-sheet__section:last-child {
    margin-bottom: 0;
}

/* Section label */
.op-cat-sheet__section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--op-text-muted);
    padding: 10px 12px 5px;
    border-bottom: 1px solid var(--op-border);
    margin-bottom: 2px;
}

.op-cat-sheet__col:first-child .op-cat-sheet__section:first-child .op-cat-sheet__section-label,
.op-cat-sheet__col:last-child  .op-cat-sheet__section:first-child .op-cat-sheet__section-label {
    padding-top: 4px;
}

/* Item */
.op-cat-sheet__item {
    display: block;
    padding: 7px 12px;
    border-radius: var(--op-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--op-text-primary) !important;
    text-decoration: none !important;
    transition: background var(--op-transition), color var(--op-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.op-cat-sheet__item:hover,
.op-cat-sheet__item:active {
    background: var(--op-search-bg);
    color: var(--op-accent) !important;
}

.op-cat-sheet__item[hidden] {
    display: none;
}

/* Footer */
.op-cat-sheet__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--op-border);
    flex-shrink: 0;
}

.op-cat-sheet__view-all {
    display: block;
    text-align: center;
    padding: 12px;
    background: var(--op-accent-gradient);
    background-size: 200% 200%;
    border-radius: var(--op-radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity var(--op-transition);
}

.op-cat-sheet__view-all:hover {
    opacity: 0.88;
}


/* =============================================================================
   13. RESPONSIVE — Tablet / narrow desktop
   =============================================================================
   On narrower viewports the right-side "Best/Free" links eat too much
   horizontal space. We hide them below 1280px so the search bar keeps
   breathing room. The mobile breakpoint (767px) hides the whole desktop
   nav anyway.
   ============================================================================= */

@media (max-width: 1279px) {
    .op-header__nav--right {
        display: none;
    }
}

@media (max-width: 1023px) {
    .op-header__container {
        padding: 0 16px;
        gap: 12px;
    }
    .op-header__search-wrap {
        max-width: 320px;
    }
}


/* =============================================================================
   14. RESPONSIVE — Mobile
   ============================================================================= */

@media (max-width: 767px) {
    :root {
        --op-header-h: 56px;
    }

    .op-header__nav,
    .op-header__search-wrap {
        display: none;
    }

    /* On mobile the search magnifier moves to the top-right, replacing the
       login/person icon (which is hidden until accounts ship). */
    .op-header-searchbtn {
        display: flex;
    }

    .op-login-wrap {
        display: none;
    }

    .op-header__container {
        padding: 0 16px;
        justify-content: space-between;
    }

    .op-tabbar {
        display: grid;
    }

    .op-mobile-search {
        display: flex;
    }

    /* Mega dropdown is desktop-only */
    .op-mega-dropdown {
        display: none !important;
    }
}


/* =============================================================================
   15. UTILITY
   ============================================================================= */

.op-header *:focus-visible {
    outline: 2px solid var(--op-accent);
    outline-offset: 2px;
    border-radius: var(--op-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .op-mega-dropdown,
    .op-search-dropdown,
    .op-cat-sheet__panel,
    .op-mobile-search,
    .op-header__logo-text {
        transition: none;
        animation: none;
    }
}


/* =============================================================================
   17. ICON COLOR — Universal rule
   =============================================================================
   All header icons follow a single rule:
     - Light mode → dark icon (#1a1a2e)
     - Dark mode  → white icon (#ffffff)

   The only exception is the bottom tab bar on mobile, where the *active* tab
   (Discover, Top, Free, when on the matching page) is colored pink.
   Categories and Search tabs never turn pink — they trigger overlays, not
   navigation, so they don't represent a "current page" state.
   ============================================================================= */

[data-op-theme="light"] .op-header svg,
[data-op-theme="light"] .op-tabbar svg,
[data-op-theme="light"] .op-cat-sheet svg,
[data-op-theme="light"] .op-mobile-search svg {
    color: #1a1a2e;
}

[data-op-theme="dark"] .op-header svg,
[data-op-theme="dark"] .op-tabbar svg,
[data-op-theme="dark"] .op-cat-sheet svg,
[data-op-theme="dark"] .op-mobile-search svg {
    color: #ffffff;
}

/* Discover sparkle inside the desktop nav link keeps the pink accent. */
[data-op-theme="light"] .op-nav__link--discover svg,
[data-op-theme="dark"]  .op-nav__link--discover svg {
    color: var(--op-accent);
}

/* Active tab (Discover, Top, Free): icon AND label go pink. */
.op-tabbar__item.is-active .op-tabbar__label {
    color: var(--op-accent);
}
[data-op-theme="light"] .op-tabbar__item.is-active svg,
[data-op-theme="dark"]  .op-tabbar__item.is-active svg {
    color: var(--op-accent);
}

/* =============================================================================
   18. TAP FEEDBACK — Visual confirmation on press
   =============================================================================
   All clickable header icons get a clear pressed state: scale-down + dim.
   Triggered by :active (which fires on touchstart on mobile, mousedown on
   desktop), so feedback is instantaneous regardless of device.
   ============================================================================= */

.op-theme-toggle:active,
.op-login-btn:active,
.op-cat-sheet__close:active,
.op-mobile-search__back:active,
.op-mobile-search__clear:active,
.op-search-bar__clear:active,
.op-tabbar__item:active,
.op-nav__btn:active,
.op-nav__link--discover:active,
.op-nav__link--magazine:active,
.op-header-searchbtn:active,
.op-nav__pill:active {
    transform: scale(0.88);
    opacity: 0.6;
    transition: transform 0.05s ease, opacity 0.05s ease;
}

/* =============================================================================
   16. OVERRIDE — Neutralize Wikilogy parent theme styles
   ============================================================================= */

.gt-search-box, .gt-search-btn,
header .search-form, header .search-field,
#searchform, .site-header .search-wrap, .header-search {
    display: none !important;
}

/* Inputs are visually shaped by their parent .op-*-island wrapper (which has
   the pill border-radius). The inputs themselves intentionally have
   border-radius: 0 — this prevents the parent theme from re-applying any
   conflicting border styling. */
#op-search-input,
#op-mobile-search-input,
#op-cat-filter-desktop,
#op-cat-filter-mobile {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: unset !important;
    height: auto !important;
    width: 100% !important;
    background: transparent !important;
    outline: none !important;
    color: var(--op-text-primary) !important;
}

#op-search-input::placeholder,
#op-mobile-search-input::placeholder,
#op-cat-filter-desktop::placeholder,
#op-cat-filter-mobile::placeholder {
    color: var(--op-text-muted) !important;
    opacity: 1;
}

@media (min-width: 768px) {
    #op-search-input,
    #op-cat-filter-desktop {
        font-size: 14px !important;
    }
}