/* Discover Page Styles - Extending MUI styles */

/* Swiper customizations */
.featured-swiper {
    overflow: hidden;
    padding: 24px 0;
}

    .featured-swiper .swiper-slide {
        width: 273px !important;
        padding-top: 24px;
        padding-bottom: 24px;
        transition: transform 0.4s ease;
        transform: scale(0.92);
    }

    .featured-swiper .swiper-slide-active {
        transform: scale(1.05);
        z-index: 10;
    }

    /* Slide ativo com a sombra sólida um pouco maior — mesma linguagem do hover dos cards da
       vitrine, onde o elemento em foco "levanta" aumentando o deslocamento da sombra. */
    .featured-swiper .swiper-slide-active img {
        box-shadow: 7px 7px 0 var(--mimuss-preto-warm, #1B1812);
    }

    .featured-swiper .swiper-slide-prev,
    .featured-swiper .swiper-slide-next {
        transform: scale(0.97);
    }

    .featured-swiper .swiper-slide img {
        /* Brand v2: mesma moldura dos cards de criadora — borda preta grossa, raio de card e
           sombra sólida deslocada. Antes era um retângulo sem borda com sombra difusa, que era o
           único elemento da página fora do padrão. */
        border: 3px solid var(--mimuss-preto-warm, #1B1812);
        border-radius: var(--mimuss-card-radius, 1.5rem);
        box-shadow: 4px 4px 0 var(--mimuss-preto-warm, #1B1812);
        width: 100%;
        object-fit: cover;
        transition: box-shadow 0.4s ease;

        /* Card #207 — MOLDURA FIXA.
           Antes a img não tinha altura: a proporção vinha do arquivo. Com arte 16:9 e 9:16 na
           mesma faixa, o slide vertical esticava a linha inteira e sobrava um vazio branco
           enorme embaixo das horizontais. Agora todo destaque ocupa o mesmo retângulo,
           independente do arquivo que a criadora mandar.

           3:4 e não 9:16: em 273px de largura, o 9:16 daria 485px de altura e o carrossel
           sozinho comeria a primeira tela do celular. */
        aspect-ratio: 3 / 4;

        /* Ancorado embaixo: a arte de destaque leva o nome da criadora no rodapé. Centralizado
           (padrão do cover) o corte come justamente o nome. O que se perde no topo é céu. */
        object-position: center bottom;
    }

/* No celular o slide encolhe junto — com 273px a moldura 3:4 sozinha passava de 360px de altura
   e empurrava as criadoras para fora da primeira tela. */
@media (max-width: 640px) {
    .featured-swiper .swiper-slide {
        width: 208px !important;
    }
}

/* Pagination dots - match MUI style */
.swiper-pagination {
    position: relative !important;
    display: flex !important;
    flex-direction: row;
    gap: 4px;
    bottom: auto !important;
    width: auto !important;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.26);
    border-radius: 50%;
    opacity: 1;
    margin: 0 2px !important;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.swiper-pagination-bullet-active {
    background-color: var(--mui-dark);
}

/* Keep existing MUI CSS classes */
.css-1c1s6xw {
    display: flex;
    flex-direction: column;
    background: var(--color-text-white);
    -webkit-box-flex: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    align-items: center;
    overflow: auto;
}

@media (min-width: 0px) {
    .css-1c1s6xw {
        border-radius: 0px;
    }
}

@media (min-width: 1280px) {
    .css-1c1s6xw {
        border-radius: 16px;
    }
}

.css-1gjmwgi {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (min-width: 850px) {
    .css-1gjmwgi {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.css-2nhfie {
    font-size: 20px;
    text-decoration: none;
    font-family: var(--font-inter);
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    line-height: 26px;
    text-transform: none;
    margin: 24px 16px;
}

.css-2x49e6 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 849.95px) {
    .css-2x49e6 {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.css-14efd8i {
    color: rgba(0, 0, 0, 0.87);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--Paper-shadow);
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px;
    background: transparent;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 849.95px) {
    .css-14efd8i {
        display: none;
    }
}

.css-9uxktl {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: 0px;
    margin: 0px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    line-height: 1.75;
    border: 0px;
    color: var(--variant-textColor);
    background-color: var(--variant-textBg);
    --variant-textColor: #151515ff;
    --variant-outlinedColor: #151515ff;
    --variant-outlinedBorder: rgba(21, 21, 21, 0.5);
    --variant-containedColor: #fff;
    --variant-containedBg: #151515ff;
    text-transform: initial;
    letter-spacing: 0.025em;
    font-weight: 600;
    font-family: var(--font-inter);
    box-shadow: none;
    transition: color 0.01s;
    border-radius: 19px;
    font-size: 14px;
    height: 38px;
    padding: 0px;
    min-width: unset;
}

    .css-9uxktl:hover {
        text-decoration: none;
        background: rgba(21, 21, 21, 0.1);
    }

.css-1wxk87r {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
    fill: currentcolor;
    font-size: 2.1875rem;
    color: rgba(21, 21, 21, 0.8);
}

.css-172uatj {
    display: flex;
    flex-direction: row;
}




/* ===== DISCOVER TABS ===== */
.discover-tabs {
    display: flex;
    width: 100%;
    gap: 0;
}

.discover-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 600;
    color: rgba(27, 24, 18, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.discover-tab.active {
    color: var(--mimuss-preto-warm, #1B1812);
    border-bottom-color: var(--mimuss-pink-poppi, #ec008c);
}

.discover-tab:hover:not(.active) {
    color: var(--mimuss-preto-warm, #1B1812);
}

/* ===== DISCOVER SEARCH ===== */
.discover-search-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.discover-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(27, 24, 18, 0.04);
    border-radius: 210px;
    padding: 10px 16px;
    border: 2px solid rgba(27, 24, 18, 0.12);
    transition: border-color 0.2s, background 0.2s;
}

.discover-search-bar:focus-within {
    border-color: var(--mimuss-pink-poppi, #ec008c);
    background: rgba(27, 24, 18, 0.02);
}

.discover-search-bar svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: var(--mimuss-preto-warm, #1B1812);
    opacity: 0.7;
}

.discover-search-bar input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-family: var(--font-inter);
    font-size: 14px;
    color: var(--mimuss-preto-warm, #1B1812);
}

.discover-search-bar input::placeholder {
    color: rgba(27, 24, 18, 0.5);
}

.discover-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.discover-search-clear svg {
    width: 18px;
    height: 18px;
    fill: var(--mimuss-preto-warm, #1B1812);
    opacity: 0.6;
}

.discover-search-empty svg {
    fill: var(--mimuss-preto-warm, #1B1812) !important;
    opacity: 0.4;
}

.discover-search-empty p {
    color: var(--mimuss-preto-warm, #1B1812) !important;
    opacity: 0.7;
}

.discover-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 200px;
    padding: 48px 16px;
}

/* Live search results list */
.discover-search-results {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.discover-search-results li {
    margin: 0;
    padding: 0;
}

.discover-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.discover-search-result:hover {
    background: rgba(241, 68, 146, 0.08);
}

.discover-search-result__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--mimuss-pink-bubblegum, #FBB8D5);
}

.discover-search-result__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mimuss-display, var(--font-display));
    font-style: italic;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--mimuss-preto-warm, #1B1812);
}

.discover-search-result__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.discover-search-result__name {
    font-family: var(--font-inter);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mimuss-preto-warm, #1B1812);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discover-search-result__handle {
    font-family: var(--font-inter);
    font-size: 0.8125rem;
    color: var(--mimuss-preto-warm, #1B1812);
    opacity: 0.6;
}

/* ============================================
   B5 Brand v2 — Mimuss 50 banner no topo da Discover
   ============================================ */

.discover-mimuss50-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: var(--mimuss-pink-poppi, #ec008c);
    color: var(--mimuss-creme, #F7EFE1);
    text-decoration: none;
    border: 3px solid var(--mimuss-preto-warm, #1B1812);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin: 0 1rem 1rem;
    box-shadow: 4px 4px 0 var(--mimuss-preto-warm, #1B1812);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discover-mimuss50-banner:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--mimuss-preto-warm, #1B1812);
}

.discover-mimuss50-banner__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.discover-mimuss50-banner__eyebrow {
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    font-size: 0.75rem;
    opacity: 0.92;
}

.discover-mimuss50-banner__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--mimuss-creme, #F7EFE1);
}

.discover-mimuss50-banner__lede {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.92;
}

.discover-mimuss50-banner__cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.discover-mimuss50-banner__counter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    background: var(--mimuss-cyan, #2DE2FF);
    color: var(--mimuss-preto-warm, #1B1812);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.02em;
    padding: 0.4rem 0.7rem;
    border: 2px solid var(--mimuss-preto-warm, #1B1812);
    border-radius: 6px;
    line-height: 1;
}

.discover-mimuss50-banner__counter-sep,
.discover-mimuss50-banner__counter-total {
    opacity: 0.55;
}

.discover-mimuss50-banner__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--mimuss-creme, #F7EFE1);
    color: var(--mimuss-preto-warm, #1B1812);
    border: 2px solid var(--mimuss-preto-warm, #1B1812);
    border-radius: 999px;
    flex-shrink: 0;
}

@media (max-width: 540px) {
    .discover-mimuss50-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .discover-mimuss50-banner__cta {
        width: 100%;
        justify-content: space-between;
    }
}

/* Estado vazio do "Em destaque". Alinha com o recuo do título (.css-2nhfie usa
   margin 24px 16px) — sem isto o texto encosta na lateral da tela no mobile. */
.discover-empty-note {
    margin: 0 var(--space-4);
    padding-top: var(--space-2);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}