/*
 * Tooca Loja - correções globais para smartphone
 * Mantém a página em escala 1, evita zoom automático em campos e bloqueia
 * estouro horizontal em telas pequenas.
 */

:root {
    --tooca-safe-top: env(safe-area-inset-top, 0px);
    --tooca-safe-right: env(safe-area-inset-right, 0px);
    --tooca-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tooca-safe-left: env(safe-area-inset-left, 0px);
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

img,
picture,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font-family: inherit;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

h1,
h2,
h3,
h4,
p,
a,
span,
small,
label,
td,
th {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    html,
    body,
    #root {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* iPhone aplica zoom ao focar campos menores que 16px. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    input[type="file"] {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        white-space: normal !important;
    }

    input[type="file"]::file-selector-button {
        max-width: 100%;
        margin-right: 8px;
        padding: 9px 10px;
        border: 0;
        border-radius: 10px;
        white-space: normal;
    }

    /* Estrutura geral do painel administrativo. */
    body > .flex,
    body > .min-h-screen,
    main,
    .flex-1 {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body > .flex > .flex-1,
    body > .min-h-screen > .flex-1,
    .flex-1.overflow-auto {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    #menuNav:not(.hidden) {
        max-height: 65dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Modais ocupam a largura útil sem ampliar a tela. */
    #modal,
    #modalBanner,
    #modalCategoria,
    #modalEmpresa,
    #modalUsuario {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-top: max(8px, var(--tooca-safe-top)) !important;
        padding-right: max(8px, var(--tooca-safe-right)) !important;
        padding-bottom: max(8px, var(--tooca-safe-bottom)) !important;
        padding-left: max(8px, var(--tooca-safe-left)) !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
    }

    #modal > div,
    #modalBanner > div,
    #modalCategoria > div,
    #modalEmpresa > div,
    #modalUsuario > div {
        width: 100% !important;
        max-width: calc(100vw - 16px - var(--tooca-safe-left) - var(--tooca-safe-right)) !important;
        max-height: calc(100dvh - 16px - var(--tooca-safe-top) - var(--tooca-safe-bottom));
        margin: 0 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        border-radius: 20px !important;
    }

    #modal form,
    #modalBanner form,
    #modalCategoria form,
    #modalEmpresa form,
    #modalUsuario form {
        width: 100%;
        min-width: 0;
    }

    /* Loja pública. */
    .container,
    main.container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: max(12px, var(--tooca-safe-left)) !important;
        padding-right: max(12px, var(--tooca-safe-right)) !important;
    }

    .header {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: max(12px, var(--tooca-safe-left)) !important;
        padding-right: max(12px, var(--tooca-safe-right)) !important;
    }

    .header nav.open {
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .grid,
    .cats,
    .quick-vitrines,
    .store-strip,
    .newsletter-box,
    .categories-layout,
    .category-top-banner,
    .sophie-products,
    .sophie-looks,
    .sophie-instagram {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Página de produto sempre em uma coluna no smartphone. */
    .detail {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    .detail > div,
    .detail-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .detail-info {
        padding: 18px !important;
    }

    .detail h1 {
        font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
        word-break: break-word;
    }

    .detail .price.big {
        max-width: 100% !important;
        font-size: clamp(1.9rem, 9vw, 2.35rem) !important;
    }

    .detail img,
    .detail-main-image,
    .detail-main-video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 330px !important;
        object-fit: contain !important;
    }

    .important-warning {
        grid-column: 1 !important;
        width: 100% !important;
        padding: 16px !important;
    }

    .thumbs {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .thumbs::-webkit-scrollbar {
        display: none;
    }

    .thumbs img,
    .thumbs video,
    .thumbs .video-thumb {
        flex: 0 0 76px;
        width: 76px !important;
        height: 76px !important;
    }

    .buy-area,
    button.large {
        width: 100% !important;
        max-width: 100% !important;
    }

    .zoom-content,
    .zoom-modal img,
    .zoom-modal video,
    .zoom-modal iframe {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .cookie-banner {
        left: max(8px, var(--tooca-safe-left)) !important;
        right: max(8px, var(--tooca-safe-right)) !important;
        bottom: max(8px, var(--tooca-safe-bottom)) !important;
        width: auto !important;
        max-width: none !important;
    }

    .whatsapp-float {
        bottom: max(8px, var(--tooca-safe-bottom)) !important;
    }

    /* Evita que URLs, códigos e tabelas alarguem a página. */
    .font-mono,
    [class*="break-all"],
    [class*="truncate"] {
        min-width: 0;
        max-width: 100%;
    }

    pre,
    code {
        white-space: pre-wrap;
        word-break: break-word;
    }
}