/* =========================================================
   PHOTA — CSS V2.3

   Interface principal
   - Molduras compactas
   - Preview central reduzido visualmente
   - 4 estilos compactos abaixo do preview
   - Controles compactos
   - Layout mobile first
   - Motor JS preservado
   ========================================================= */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

:root {

    --bg: #0d0d0d;

    --card: #171717;
    --card-2: #202020;

    --text: #f4f4f4;
    --muted: #8b8b8b;

    --border: #333333;
    --border-active: #ffffff;

    --white: #ffffff;
    --black: #000000;

    --radius: 14px;

    --font:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}


/* =========================================================
   RESET
   ========================================================= */

* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;
    padding: 0;

}


html {

    background: var(--bg);

}


body {

    min-height: 100vh;

    background: var(--bg);
    color: var(--text);

    font-family: var(--font);

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;

}


button,
input {

    font: inherit;

}


/* =========================================================
   TOPO
   ========================================================= */

.topo {

    width: 100%;

    padding: 26px 18px 14px;

    text-align: center;

}


.topo h1 {

    margin: 0;

    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.06em;

}


.subtitulo {

    margin: 8px 0 0;

    color: var(--muted);

    font-size: 0.88rem;

}


/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */

.container {

    width: 100%;
    max-width: 480px;

    margin: 0 auto;

    padding: 8px 14px 40px;

}


/* =========================================================
   ETAPAS
   ========================================================= */

.etapa {

    width: 100%;

    margin-bottom: 14px;

    padding: 16px;

    background: var(--card);

    border: 1px solid var(--border);
    border-radius: var(--radius);

}


.etapa h2 {

    margin: 0 0 14px;

    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;

}


/* =========================================================
   BOTÕES
   ========================================================= */

.botao {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 50px;

    padding: 13px 16px;

    border: 0;
    border-radius: 999px;

    text-align: center;
    text-decoration: none;

    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 0.08s ease,
        opacity 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;

}


.botao:active {

    transform: scale(0.985);

}


.botao-principal {

    background: var(--white);
    color: var(--black);

}


.botao-secundario {

    background: transparent;

    color: var(--text);

    border: 1px solid var(--border);

}


.botao:disabled {

    opacity: 0.28;

    cursor: not-allowed;

    transform: none;

}


/* =========================================================
   ESCOLHA DA FOTO
   ========================================================= */

.acoes-foto {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.acoes-foto .botao {

    margin: 0;

}


/* =========================================================
   EDITOR
   ========================================================= */

.etapa-editor {

    display: flex;

    flex-direction: column;

    width: 100%;

    overflow: hidden;

}


/* =========================================================
   BLOCO DE MOLDURAS
   ========================================================= */

.bloco-molduras {

    width: 100%;

    margin: 0 0 10px;

}


.bloco-molduras h2 {

    margin: 0 0 8px;

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;

}


/* =========================================================
   GALERIA DE FRAMES
   ========================================================= */

.frames-grid,
.frames-carousel {

    display: flex;

    flex-wrap: nowrap;

    gap: 6px;

    width: 100%;

    margin: 0;

    padding: 0 0 2px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x proximity;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}


.frames-grid::-webkit-scrollbar,
.frames-carousel::-webkit-scrollbar {

    display: none;

}


/* =========================================================
   FRAME INDIVIDUAL
   ========================================================= */

.frame-opcao {

    position: relative;

    display: flex;

    flex: 0 0 48px;

    flex-direction: column;

    gap: 3px;

    min-width: 48px;

    padding: 3px;

    background: #111111;

    border: 1px solid var(--border);
    border-radius: 7px;

    cursor: pointer;

    scroll-snap-align: start;

    -webkit-tap-highlight-color: transparent;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.08s ease;

}


.frame-opcao:active {

    transform: scale(0.98);

}


/* =========================================================
   RADIO DO FRAME
   ========================================================= */

.frame-opcao input {

    position: absolute;

    top: 3px;
    right: 3px;

    z-index: 5;

    width: 11px;
    height: 11px;

    margin: 0;

    accent-color: var(--white);

}


/* =========================================================
   MINIATURA DO FRAME
   ========================================================= */

.frame-preview {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background:
        linear-gradient(
            45deg,
            #202020 25%,
            #292929 25%,
            #292929 50%,
            #202020 50%,
            #202020 75%,
            #292929 75%
        );

    background-size: 8px 8px;

    border-radius: 4px;

}


.frame-preview img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;

    pointer-events: none;

}


/* =========================================================
   NOME DO FRAME
   ========================================================= */

.frame-opcao strong {

    display: block;

    width: 100%;

    padding: 1px 0;

    overflow: hidden;

    color: var(--text);

    font-size: 0.48rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0;

    text-align: center;

    text-overflow: ellipsis;
    white-space: nowrap;

}


/* =========================================================
   FRAME SELECIONADO
   ========================================================= */

.frame-opcao:has(input:checked) {

    background: #242424;

    border-color: var(--border-active);

}


/* =========================================================
   PREVIEW PRINCIPAL

   IMPORTANTE:
   Apenas o tamanho VISUAL foi reduzido.
   O canvas interno continua 450 × 800.
   A saída continua 1080 × 1920.
   ========================================================= */

.preview-wrap {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 245px;

    aspect-ratio: 9 / 16;

    margin: 0 auto;

    overflow: hidden;

    background: #101010;

    border: 1px solid var(--border);
    border-radius: 9px;

}


/* =========================================================
   CANVAS DO PREVIEW
   ========================================================= */

#canvas-preview {

    display: block;

    width: 100%;
    height: 100%;

    cursor: grab;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;

    -webkit-touch-callout: none;

}


#canvas-preview:active {

    cursor: grabbing;

}


/* =========================================================
   PREVIEW ANTIGO
   ========================================================= */

#preview-foto {

    display: none;

}


/* =========================================================
   ESTADO SEM FOTO
   ========================================================= */

.dica {

    margin: 0;

    padding: 16px;

    color: var(--muted);

    font-size: 0.78rem;
    line-height: 1.35;

    text-align: center;

}


/* =========================================================
   INSTRUÇÃO DO EDITOR
   ========================================================= */

.instrucao-editor {

    margin: 6px 0 0;

    color: var(--muted);

    font-size: 0.66rem;
    line-height: 1.25;

    text-align: center;

}


/* =========================================================
   BLOCO DE ESTILOS
   ========================================================= */

.bloco-estilos {

    width: 100%;

    margin-top: 10px;

}


.bloco-estilos h2 {

    margin: 0 0 7px;

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;

}


/* =========================================================
   ESTILOS — 4 BOTÕES COMPACTOS
   ========================================================= */

.estilos-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 5px;

}


/* =========================================================
   OPÇÃO DE ESTILO
   ========================================================= */

.estilo-opcao {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 36px;

    padding: 0 4px;

    background: var(--card-2);

    border: 1px solid var(--border);
    border-radius: 7px;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.08s ease;

}


.estilo-opcao:active {

    transform: scale(0.985);

}


/* =========================================================
   RADIO DO ESTILO

   Continua existindo para o JavaScript,
   mas não aparece visualmente.
   ========================================================= */

.estilo-opcao input {

    position: absolute;

    width: 1px;
    height: 1px;

    margin: 0;

    opacity: 0;

    pointer-events: none;

}


/* =========================================================
   CONTEÚDO DO ESTILO
   ========================================================= */

.estilo-conteudo {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 0;

    padding: 0;

}


.estilo-conteudo strong {

    display: block;

    margin: 0;

    overflow: hidden;

    color: var(--text);

    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.02em;

    text-align: center;

    text-overflow: ellipsis;
    white-space: nowrap;

}


/*
   Texto secundário continua no HTML.
   Apenas não aparece na interface compacta.
*/

.estilo-conteudo span {

    display: none;

}


/* =========================================================
   ESTILO SELECIONADO
   ========================================================= */

.estilo-opcao:has(input:checked) {

    background: #282828;

    border-color: var(--border-active);

}


/* =========================================================
   CONTROLES
   ========================================================= */

.controle-editor {

    width: 100%;

    margin-top: 9px;

}


.controle-intensidade,
.controle-luz,
.controle-zoom {

    margin-top: 9px;

}


.controle-cabecalho {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 3px;

    color: var(--text);

    font-size: 0.70rem;
    font-weight: 600;

}


.controle-ajuda {

    color: var(--muted);

    font-size: 0.61rem;
    font-weight: 400;

}


/* =========================================================
   SLIDERS
   ========================================================= */

.slider-linha {

    display: grid;

    grid-template-columns:
        15px 1fr 15px;

    align-items: center;

    gap: 7px;

}


.slider-simbolo {

    color: var(--muted);

    font-size: 0.88rem;
    font-weight: 500;

    text-align: center;

}


.slider {

    width: 100%;
    height: 22px;

    margin: 0;

    background: transparent;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

}


/* =========================================================
   SLIDER — CHROME / SAFARI
   ========================================================= */

.slider::-webkit-slider-runnable-track {

    width: 100%;
    height: 3px;

    background: #4a4a4a;

    border-radius: 99px;

}


.slider::-webkit-slider-thumb {

    width: 16px;
    height: 16px;

    margin-top: -6.5px;

    background: var(--white);

    border: 0;
    border-radius: 50%;

    appearance: none;
    -webkit-appearance: none;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.08);

}


/* =========================================================
   SLIDER — FIREFOX
   ========================================================= */

.slider::-moz-range-track {

    width: 100%;
    height: 3px;

    background: #4a4a4a;

    border: 0;
    border-radius: 99px;

}


.slider::-moz-range-thumb {

    width: 16px;
    height: 16px;

    background: var(--white);

    border: 0;
    border-radius: 50%;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.08);

}


/* =========================================================
   AÇÕES FINAIS
   ========================================================= */

.acoes-resultado {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.acoes-resultado .botao {

    margin: 0;

}


/* =========================================================
   CANVAS DO RESULTADO
   ========================================================= */

#canvas-resultado {

    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    aspect-ratio: 9 / 16;

}


/* =========================================================
   RODAPÉ
   ========================================================= */

.rodape {

    width: 100%;

    padding:
        4px
        16px
        30px;

    color: #777777;

    font-size: 0.72rem;
    line-height: 1.7;

    letter-spacing: 0.05em;

    text-align: center;

}


.rodape b {

    color: var(--white);

    font-weight: 800;

}


/* =========================================================
   LINK PHOTA.COM.BR
   ========================================================= */

.rodape a {

    color: var(--white);

    font-size: 0.72rem;
    font-weight: 600;

    text-decoration: none;

    letter-spacing: 0.04em;

}


.rodape a:visited {

    color: var(--white);

}


.rodape a:active {

    opacity: 0.7;

}


/* =========================================================
   ELEMENTOS OCULTOS
   ========================================================= */

[hidden] {

    display: none !important;

}


/* =========================================================
   TELAS MAIORES
   ========================================================= */

@media (min-width: 600px) {

    .container {

        padding-top: 14px;

    }


    .acoes-foto {

        flex-direction: row;

    }


    .acoes-foto .botao {

        flex: 1;

    }


    .acoes-resultado {

        flex-direction: row;

    }


    .acoes-resultado .botao {

        flex: 1;

    }


    .preview-wrap {

        max-width: 270px;

    }


    .frame-opcao {

        flex-basis: 52px;
        min-width: 52px;

    }

}


/* =========================================================
   TELAS PEQUENAS
   ========================================================= */

@media (max-width: 360px) {

    .container {

        padding-left: 9px;
        padding-right: 9px;

    }


    .etapa {

        padding: 13px;

    }


    .topo {

        padding-top: 22px;

    }


    .topo h1 {

        font-size: 1.55rem;

    }


    .frames-grid,
    .frames-carousel {

        gap: 5px;

    }


    .frame-opcao {

        flex-basis: 44px;
        min-width: 44px;

        padding: 3px;

    }


    .frame-opcao strong {

        font-size: 0.44rem;

    }


    .preview-wrap {

        max-width: 230px;

    }


    .estilos-grid {

        gap: 4px;

    }


    .estilo-opcao {

        min-height: 34px;

        padding: 0 3px;

    }


    .estilo-conteudo strong {

        font-size: 0.61rem;

    }


    .rodape {

        padding-bottom: 24px;

    }

}


/* =========================================================
   TELAS BAIXAS

   Reduz apenas a apresentação visual do preview.
   Não altera resolução ou processamento.
   ========================================================= */

@media (max-width: 599px) and (max-height: 760px) {

    .preview-wrap {

        max-width: 220px;

    }


    .frame-opcao {

        flex-basis: 43px;
        min-width: 43px;

    }


    .controle-editor,
    .controle-intensidade,
    .controle-luz,
    .controle-zoom {

        margin-top: 7px;

    }

}