/* Imports Club — fila de stories dos criadores.
 *
 * O anel é o do Instagram: gradiente cónico laranja→rosa→roxo, e verde sólido
 * para a Catarina (amigos próximos), como o Daniel pediu em 30/08/2026.
 *
 * A loja é mobile-first: a fila rola na horizontal com um só dedo e nunca
 * quebra em duas linhas.
 */

.ic-stories {
    background: #fff;
    padding: 18px 0 6px;
    border-bottom: 1px solid #f0f0f0;
}

.ic-stories__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Justificadas, não encostadas à esquerda.
 *
 * Reportado pelo Daniel com print (30/08/2026): num ecrã largo as quatro
 * bolinhas amontoavam-se à esquerda e sobrava metade da linha vazia. Com
 * space-between ocupam a largura; e quando não cabem (telemóvel estreito, ou
 * mais criadores), o space-between comporta-se como início e a linha volta a
 * rolar — nenhuma fica inalcançável. O max-width evita que quatro bolinhas se
 * percam umas das outras num ecrã de 1440. */
.ic-stories__fila {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
}

@media (min-width: 620px) {
    .ic-stories__fila {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

.ic-stories__fila::-webkit-scrollbar {
    display: none;
}

.ic-stories__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 78px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* O anel. O gradiente vive na borda: um quadrado com o gradiente, e a foto por
 * cima com uma margem branca a fazer de separador — é assim que o Instagram o
 * desenha, e é o que sobrevive a qualquer tamanho. */
.ic-stories__anel {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(
        from 180deg,
        #f09433 0deg,
        #e6683c 72deg,
        #dc2743 144deg,
        #cc2366 216deg,
        #bc1888 288deg,
        #f09433 360deg
    );
    transition: transform .18s ease;
}

.ic-stories__item:active .ic-stories__anel {
    transform: scale(.94);
}

/* Amigos próximos: verde sólido, o mesmo tom que o Instagram usa. */
.ic-stories__item--proximos .ic-stories__anel {
    background: #34c759;
}

.ic-stories__foto {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2.5px;
    background: #fff;
    box-sizing: border-box;
}

.ic-stories__foto img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #f2f2f2;
}

.ic-stories__nome {
    font-size: 11.5px;
    line-height: 1.25;
    color: #141414;
    text-align: center;
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── O visualizador ────────────────────────────────────────────────────── */

.ic-stories-viewer {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ic-stories-viewer.is-aberto {
    display: flex;
}

body.ic-stories-aberto {
    overflow: hidden;
}

/* A bolha do chat (Tidio) fica por cima do story e tapa o botão. Enquanto o
 * visor está aberto, sai da frente. */
body.ic-stories-aberto #tidio-chat,
body.ic-stories-aberto #tidio-chat-iframe,
body.ic-stories-aberto .ic-sticky-atc,
body.ic-stories-aberto .ic-progress-bar {
    display: none !important;
}

/* Palco 9:16, centrado, sem nunca sair do ecrã em nenhum dos eixos. */
.ic-stories-viewer__palco {
    position: relative;
    width: min(100vw, calc((100dvh - 0px) * 9 / 16));
    height: min(100dvh, calc(100vw * 16 / 9));
    max-width: 460px;
    max-height: 100dvh;
    background: #000;
    overflow: hidden;
}

/* O player.
 *
 * MEDIDO em 30/08/2026: o YouTube desenha o título do vídeo por cima do topo do
 * player ("Cat Barbie revela a sua loja favorita IMPORTS CLUB ®"), e batia de
 * frente com o nome e o @ do criador — texto por cima de texto, ilegível.
 * Nem modestbranding nem controls=0 tiram esse título.
 *
 * A saída é ampliar o vídeo dentro de uma caixa que corta: o vídeo é 9:16 e a
 * caixa é 9:16, por isso ampliar corta margem por igual dos quatro lados e leva
 * a moldura do YouTube para fora do que se vê. Fica só a imagem, como num story.
 */
.ic-stories-viewer__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform: scale(1.14);
    transform-origin: center center;
}

/* Véu por trás do cabeçalho, para o nome se ler sempre, seja qual for o
 * primeiro fotograma do vídeo. */
.ic-stories-viewer__palco::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 128px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0) 100%);
}

/* As barrinhas de progresso, uma por criador. */
.ic-stories-viewer__barras {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 5;
}

.ic-stories-viewer__barra {
    flex: 1 1 0;
    height: 2.5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .34);
    overflow: hidden;
}

.ic-stories-viewer__progresso {
    display: block;
    height: 100%;
    width: 0;
    background: #fff;
    border-radius: 2px;
}

.ic-stories-viewer__topo {
    position: absolute;
    top: 22px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    padding-top: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.ic-stories-viewer__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .5);
    flex: 0 0 auto;
}

.ic-stories-viewer__quem {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.ic-stories-viewer__nome {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ic-stories-viewer__utilizador {
    color: rgba(255, 255, 255, .72);
    font-size: 11.5px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ic-stories-viewer__fechar {
    margin-left: auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
}

/* Zonas de toque: metade esquerda volta, metade direita avança. Ficam por baixo
 * do cabeçalho para não roubarem o clique do fechar nem do @utilizador. */
.ic-stories-viewer__zona {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32%;
    z-index: 3;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ic-stories-viewer__zona--tras {
    left: 0;
}

.ic-stories-viewer__zona--frente {
    right: 0;
    width: 40%;
}

/* O botão de ir à loja do criador, quando existe. */
.ic-stories-viewer__cta {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 5;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #141414;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .32);
}

/* ── O convite que fecha a fila ────────────────────────────────────────
 *
 * Pedido do Daniel (30/08/2026): a seguir ao último criador, em vez de fechar,
 * um cartão que leva à loja. "Bem bonito e elegante", e é o mesmo vocabulário
 * da marca: preto, o logótipo a branco, uma frase e um botão. Nada de imagem
 * pesada — carrega instantâneo e nunca aparece meio construído.
 */
.ic-stories-viewer__convite {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 34px;
    background:
        radial-gradient(120% 80% at 50% 12%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 62%),
        #0a0a0a;
}

.ic-stories-viewer.is-convite .ic-stories-viewer__convite {
    display: flex;
}

/* No convite não há criador: o cabeçalho de perfil sai, fica só o fechar. */
.ic-stories-viewer.is-convite .ic-stories-viewer__avatar,
.ic-stories-viewer.is-convite .ic-stories-viewer__quem,
.ic-stories-viewer.is-convite .ic-stories-viewer__cta,
.ic-stories-viewer.is-convite .ic-stories-viewer__som {
    display: none;
}

.ic-stories-viewer.is-convite .ic-stories-viewer__palco::before {
    display: none;
}

.ic-stories-viewer__convite-logo {
    width: 132px;
    height: auto;
    margin-bottom: 30px;
    opacity: .96;
}

.ic-stories-viewer__convite-eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}

.ic-stories-viewer__convite-titulo {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.16;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}

.ic-stories-viewer__convite-sub {
    margin: 0 0 34px;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    max-width: 22em;
}

.ic-stories-viewer__convite-botao {
    display: inline-block;
    padding: 15px 38px;
    border-radius: 999px;
    background: #fff;
    color: #0a0a0a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.ic-stories-viewer__convite-botao:active {
    transform: scale(.97);
}

@media (max-width: 380px) {
    .ic-stories-viewer__convite-titulo {
        font-size: 26px;
    }

    .ic-stories-viewer__convite-logo {
        width: 112px;
        margin-bottom: 24px;
    }
}

/* "Toque para ouvir": aparece só quando o browser recusou o som. */
.ic-stories-viewer__som {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    z-index: 6;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-tap-highlight-color: transparent;
}

.ic-stories-viewer__som.is-visivel {
    display: inline-flex;
}

.ic-stories-viewer__cta.is-visivel {
    display: inline-flex;
}

/* Setas só no rato — no telemóvel as zonas de toque bastam. */
.ic-stories-viewer__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
}

.ic-stories-viewer__seta--tras {
    left: max(12px, calc(50% - 300px));
}

.ic-stories-viewer__seta--frente {
    right: max(12px, calc(50% - 300px));
}

@media (hover: hover) and (min-width: 861px) {
    .ic-stories-viewer__seta {
        display: inline-flex;
    }

    .ic-stories__item {
        width: 92px;
    }

    .ic-stories__anel {
        width: 86px;
        height: 86px;
    }

    .ic-stories__nome {
        font-size: 12.5px;
        max-width: 92px;
    }

    .ic-stories__fila {
        gap: 24px;
    }

    .ic-stories {
        padding: 26px 0 12px;
    }
}

/* Telemóvel: a fila sangra até à borda, como no Instagram. */
@media (max-width: 860px) {
    .ic-stories__inner {
        padding: 0;
    }

    .ic-stories__fila {
        padding-left: 14px;
        padding-right: 14px;
        gap: 15px;
    }

    /* O visor ocupa o ECRÃ TODO.
     *
     * MEDIDO em 30/08/2026: com o palco fixo em 9:16 sobrava uma faixa preta em
     * cima e em baixo (o ecrã do telemóvel é mais alto que 9:16 — 390x844 dá
     * 0,46 contra 0,5625 do vídeo). Ficava com ar de coisa partida. Aqui o palco
     * passa a ser o ecrã, e o player é dimensionado em 9:16 POR CIMA dele, maior
     * do que o ecrã no eixo que sobra, e centrado: o vídeo preenche tudo e o que
     * excede é cortado — que é como um story se comporta. */
    .ic-stories-viewer__palco {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
    }

    .ic-stories-viewer__frame {
        inset: auto;
        top: 50%;
        left: 50%;
        width: max(100vw, calc(100dvh * 9 / 16));
        height: max(100dvh, calc(100vw * 16 / 9));
        transform: translate(-50%, -50%) scale(1.14);
        transform-origin: center center;
    }

    /* Com o palco a ocupar tudo, o cabeçalho tem de respeitar o entalhe. */
    .ic-stories-viewer__barras {
        top: calc(10px + env(safe-area-inset-top, 0px));
    }

    .ic-stories-viewer__topo {
        top: calc(22px + env(safe-area-inset-top, 0px));
    }

    .ic-stories-viewer__cta {
        bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    }
}