/* ============================================================
   Themes Browse — Mobile-first redesign
   Shared by themes_browse.php (logged out) and themes.php (logged in)
   Loaded LAST so it wins the cascade over themes.css / responsive.css.
   ============================================================ */

/* ---------- Section: dynamic viewport + mobile padding ---------- */
.themes-gallery-section {
    min-height: calc(100dvh - 80px);
}

@media (max-width: 767px) {
    .themes-gallery-section {
        padding: 1rem .6rem 2rem;
    }
}

/* ---------- Search bar (the main browsing aid for 100+ themes) ---------- */
.browse-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 1.25rem auto .35rem;
}

.browse-search input {
    flex: 1;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 16px; /* >=16px stops iOS auto-zoom on focus */
    padding: .7rem 2.6rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.browse-search input::placeholder {
    color: var(--text-secondary);
}

.browse-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.browse-search input:focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(179, 0, 255, .18);
}

.browse-search-icon {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    pointer-events: none;
}

.browse-search-clear {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: none; /* shown by JS when there is a query */
    align-items: center;
    justify-content: center;
    padding: 0;
}

.browse-search-clear:active {
    transform: translateY(-50%) scale(.88);
}

/* Sticky on phones so search stays reachable while scrolling the long grid */
@media (max-width: 767px) {
    .browse-search {
        position: sticky;
        top: 54px; /* just below the fixed top nav */
        z-index: 60;
        margin: .25rem auto .6rem;
        padding: .45rem;
        background: rgba(10, 10, 15, .85);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-radius: 16px;
    }
}

/* ---------- Result count ---------- */
.browse-count {
    text-align: center;
    color: var(--text-secondary);
    font-size: .8rem;
    margin: 0 0 1rem;
    min-height: 1em;
}

/* ---------- No-results state ---------- */
.browse-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.browse-no-results .nr-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .5rem;
}

.browse-no-results h3 {
    color: var(--text-primary);
    margin-bottom: .35rem;
}

/* ---------- Category chips: horizontal scroll strip ---------- */
.category-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .5rem;
    max-width: 900px;
    margin: 0 auto 1.5rem;
    padding: .25rem .75rem .6rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-filters::-webkit-scrollbar {
    display: none;
}

.category-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    min-width: 0;
}

.category-btn:active {
    transform: scale(.94);
}

/* ---------- Filter tabs: tap feedback ---------- */
.filter-tab:active {
    transform: scale(.96);
}

/* ---------- CTA banner: compact on mobile ---------- */
@media (max-width: 767px) {
    .cta-banner {
        padding: 1.25rem 1rem;
        margin-bottom: 1.5rem;
        border-radius: 16px;
    }

    .cta-banner-content h3 {
        font-size: 1.15rem;
    }

    .cta-banner-content p {
        font-size: .85rem;
        margin-bottom: 1rem;
    }
}

/* ---------- Mid breakpoint: 3 columns instead of cramped 4 ---------- */
@media (min-width: 481px) and (max-width: 767px) {
    .themes-showcase-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Cards: persistent CTA badge + tap feedback (mobile) ---------- */
@media (max-width: 767px) {
    .ai-theme-card {
        -webkit-tap-highlight-color: transparent;
    }

    .ai-theme-card:active {
        transform: scale(.97);
    }
}

/* ---------- Back-to-top FAB ---------- */
.scroll-top-fab {
    position: fixed;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom)); /* above the bottom nav */
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-red));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(179, 0, 255, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 90;
    cursor: pointer;
}

.scroll-top-fab.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-fab:active {
    transform: scale(.9);
}

@media (min-width: 768px) {
    .scroll-top-fab {
        bottom: 24px;
    }
}