/**
 * TurboJet - Estilos para Mockup de Dispositivos
 * v6.1 - Melhorias de responsividade para mockups CSS e comentários adicionais.
 */

.tj-mockup-wrapper {
    position: relative;
    margin-bottom: 20px;
    /* largura_mockup é max-width inline, altura_mockup é height inline */
    /* Se altura_mockup não for 'auto', a classe .tj-mockup-wrapper-defined-height é adicionada pelo PHP */
    /* Para responsividade, defina largura_mockup com unidades relativas (%, vw) */
}

.tj-mockup-align-esquerda { margin-left: 0; margin-right: auto; }
.tj-mockup-align-centro { margin-left: auto; margin-right: auto; }
.tj-mockup-align-direita { margin-left: auto; margin-right: 0; }

.tj-mockup-device {
    position: relative; 
    margin: 0 auto;
    width: 100%; 
}
.tj-mockup-wrapper-defined-height .tj-mockup-device {
    height: 100%;
}
.tj-mockup-wrapper:not(.tj-mockup-wrapper-defined-height) .tj-mockup-device {
    height: auto; 
}


/* --- Laptop com Frame Customizado --- */
/* A responsividade deste modo depende de:
   1. `largura_mockup` (idealmente em %).
   2. A imagem do frame (`laptop_frame_image_url`) ser responsiva (o CSS abaixo cuida disso).
   3. Atributos `laptop_screen_area_*` serem em % para escalar com o frame.
   4. Atributos `mobile_laptop_screen_area_*` para ajustes finos em mobile.
*/
.tj-mockup-laptop.tj-mockup-laptop-custom-frame {
    line-height: 0; 
    width: 100%;
}
.tj-mockup-wrapper-defined-height .tj-mockup-laptop.tj-mockup-laptop-custom-frame {
    height: 100%;
}
.tj-mockup-wrapper:not(.tj-mockup-wrapper-defined-height) .tj-mockup-laptop.tj-mockup-laptop-custom-frame {
    height: auto;
}

/* Imagem do Frame quando altura_mockup é AUTO */
.tj-mockup-wrapper:not(.tj-mockup-wrapper-defined-height) .tj-mockup-laptop-custom-frame .tj-mockup-laptop-frame-img {
    display: block;
    width: 100%;
    height: auto; 
    position: relative; 
    z-index: 3;
    pointer-events: none;
}

/* Imagem do Frame quando altura_mockup é DEFINIDA */
.tj-mockup-wrapper-defined-height .tj-mockup-laptop-custom-frame .tj-mockup-laptop-frame-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    z-index: 3;      
    pointer-events: none; 
}

/* Tela dos Slides (para frame customizado) */
.tj-mockup-laptop-custom-frame .tj-mockup-screen {
    position: absolute; 
    /* top, left, width, height são definidos inline pelo PHP via atributos, relativos ao .tj-mockup-device */
    /* Use % nos atributos para responsividade da área da tela com o frame. */
    background-color: #000; 
    overflow: hidden;
    z-index: 2;      
    border-radius: 4px; /* Ajuste conforme o design do seu frame PNG */
}


/* --- Laptop Desenhado com CSS (Fallback) --- */
/* Este design tenta ser mais responsivo usando unidades relativas. */
.tj-mockup-laptop.tj-mockup-laptop-css-drawn {
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    filter: drop-shadow(0 0.625em 0.9375em rgba(0,0,0,0.15)) drop-shadow(0 0.25em 0.375em rgba(0,0,0,0.1)); /* 10px 15px, 4px 6px @16px base */
    font-size: clamp(8px, 1.5vw, 16px); /* Permite que 'em' unidades escalem com a largura do viewport/container */
}

.tj-mockup-laptop-css-drawn .tj-mockup-screen-lid {
    width: 90%; 
    /* padding: 15px 15px 25px 15px; */
    padding: 0.9375em 0.9375em 1.5625em 0.9375em; /* Convertido para em */
    border-radius: 1.125em; /* 18px */
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3); 
    position: relative; 
    z-index: 1;
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.tj-mockup-laptop-css-drawn.tj-mockup-laptop-prata .tj-mockup-screen-lid { background-color: #e3e3e3; }
.tj-mockup-laptop-css-drawn.tj-mockup-laptop-cinza_espacial .tj-mockup-screen-lid { background-color: #7d7d7f; }

.tj-mockup-laptop-css-drawn .tj-mockup-screen { /* Tela preta interna do laptop CSS */
    width: 100%; 
    aspect-ratio: 16 / 10; 
    background-color: #000; 
    border-radius: 0.5em; /* 8px */
    position: relative; 
    overflow: hidden; 
    box-shadow: inset 0 0 0.5em rgba(0,0,0,0.5); /* 8px */
}

.tj-mockup-laptop-css-drawn .tj-mockup-laptop-notch {
    /* width: 160px; height: 20px; */
    width: 10em; /* 160px @16px */
    height: 1.25em; /* 20px @16px */
    max-width: 30%; /* Limita a largura do notch em telas muito pequenas/grandes */
    background-color: #000; 
    border-radius: 0 0 0.625em 0.625em; /* 10px */
    position: absolute; 
    top: 0.9375em; /* 15px (padding da tampa) */
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 10; 
}

.tj-mockup-laptop-css-drawn .tj-mockup-laptop-base {
    width: 100%; 
    /* height: 18px; */
    height: 1.125em; /* 18px @16px */
    border-radius: 0 0 0.75em 0.75em; /* 12px */
    position: relative;
    margin-top: -0.5em; /* -8px @16px, para sobrepor levemente */
    box-shadow: 0 0.1875em 0.3125em rgba(0,0,0,0.2); /* 3px 5px */
    z-index: 0;
}
.tj-mockup-laptop-css-drawn.tj-mockup-laptop-prata .tj-mockup-laptop-base { background-image: linear-gradient(to bottom, #d0d0d0, #b0b0b0); }
.tj-mockup-laptop-css-drawn.tj-mockup-laptop-cinza_espacial .tj-mockup-laptop-base { background-image: linear-gradient(to bottom, #636363, #434343); }

.tj-mockup-laptop-css-drawn .tj-mockup-laptop-base::after { /* Recorte da base */
    content: ''; 
    position: absolute; 
    top: 0.1875em; /* 3px */
    left: 50%; 
    transform: translateX(-50%);
    /* width: 100px; height: 6px; */
    width: 6.25em; /* 100px @16px */
    max-width: 20%;
    height: 0.375em; /* 6px @16px */
    background-color: rgba(0,0,0,0.1);
    border-radius: 0 0 0.375em 0.375em; /* 6px */
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.05);
}

/* --- Celular (iPhone Style) --- */
/* Também usando 'em' para melhor escalabilidade com font-size base */
.tj-mockup-celular {
    width: 100%; 
    aspect-ratio: 9 / 19.5; /* Mantém a proporção do celular */
    /* padding: 3%; */ /* Convertido para em relativo ao font-size do próprio elemento */
    font-size: clamp(10px, 2.5vw, 16px); /* Base para 'em' units do celular */
    padding: 0.45em; /* Aproximadamente 3% de uma largura de ~15em */
    border-radius: 2.5em; /* 40px @16px */
    box-shadow: 0 0.625em 1.875em rgba(0,0,0,0.2), inset 0 0 0 0.125em rgba(0,0,0,0.3); /* 10px 30px, 2px */
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.tj-mockup-celular-preto { background-color: #1c1c1e; border: 0.125em solid #3a3a3c;} /* 2px */
.tj-mockup-celular-branco { background-color: #f5f5f7; border: 0.125em solid #dcdce0; }
.tj-mockup-celular-azul { background-color: #aec7e8; border: 0.125em solid #8ca7c8; }
.tj-mockup-celular-vermelho { background-color: #ba0c2f; border: 0.125em solid #9a0c2f; }
.tj-mockup-celular-dourado { background-color: #f5d495; border: 0.125em solid #e5c485; }

.tj-mockup-celular .tj-mockup-screen { 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    border-radius: 1.875em; /* 30px @16px */
    position: relative; 
    overflow: hidden; 
    box-shadow: inset 0 0 0.3125em rgba(0,0,0,0.3); /* 5px */
}
.tj-mockup-celular .tj-mockup-screen::before { /* Notch do celular */
    content: ''; 
    position: absolute; 
    top: 0.625em; /* 10px @16px */
    left: 50%; 
    transform: translateX(-50%);
    width: 35%; 
    height: 1.25em; /* 20px @16px */
    background-color: #000; 
    border-radius: 0.625em; /* 10px */
    z-index: 10; 
}

/* --- Conteúdo do Slideshow (Comum a todos) --- */
.tj-mockup-slides-container { width: 100%; height: 100%; position: relative; }
.tj-mockup-slide {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    opacity: 0; visibility: hidden; transition-property: opacity, transform, visibility;
    overflow: hidden;
}
.tj-mockup-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tj-mockup-slide-active { opacity: 1; visibility: visible; z-index: 1; }

/* Transições (fade, slide_esquerda, etc.) */
.tj-mockup-slide.tj-trans-fade-out { opacity: 0; visibility: hidden; }
.tj-mockup-slide.tj-trans-fade-in { opacity: 1; visibility: visible; }
.tj-mockup-slide.tj-trans-slide-saindo-esquerda { transform: translateX(-100%); opacity: 0; }
.tj-mockup-slide.tj-trans-slide-entrando-esquerda { transform: translateX(100%); }
.tj-mockup-slide.tj-trans-slide-saindo-direita { transform: translateX(100%); opacity: 0; }
.tj-mockup-slide.tj-trans-slide-entrando-direita { transform: translateX(-100%); }
.tj-mockup-slide.tj-trans-slide-saindo-cima { transform: translateY(-100%); opacity: 0; }
.tj-mockup-slide.tj-trans-slide-entrando-cima { transform: translateY(100%); }
.tj-mockup-slide.tj-trans-slide-saindo-baixo { transform: translateY(100%); opacity: 0; }
.tj-mockup-slide.tj-trans-slide-entrando-baixo { transform: translateY(-100%); }
.tj-mockup-slide.tj-mockup-slide-active.tj-trans-slide-entrando-esquerda,
.tj-mockup-slide.tj-mockup-slide-active.tj-trans-slide-entrando-direita,
.tj-mockup-slide.tj-mockup-slide-active.tj-trans-slide-entrando-cima,
.tj-mockup-slide.tj-mockup-slide-active.tj-trans-slide-entrando-baixo {
    transform: translateX(0) translateY(0); opacity: 1;
}

/* Navegação por Pontos */
.tj-mockup-nav-dots {
    position: absolute; 
    bottom: 1em; /* Ajustado para em */
    left: 50%; 
    transform: translateX(-50%);
    display: flex; 
    gap: 0.5em; /* 8px @16px */
    z-index: 4; 
}
.tj-mockup-nav-dot {
    width: 0.625em; /* 10px @16px */
    height: 0.625em; 
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%; 
    cursor: pointer; 
    transition: background-color 0.3s ease;
}
.tj-mockup-nav-dot:hover,
.tj-mockup-nav-dot.tj-mockup-dot-active { background-color: rgba(255, 255, 255, 0.9); }

/* Responsividade */
/* Media queries podem ser ajustadas ou removidas se o font-size clamp e 'em' units forem suficientes.
   Os estilos mobile injetados pelo PHP para `mobile_laptop_screen_area_*` ainda são importantes para o frame customizado. */
@media (max-width: 768px) {
    /* Exemplo: Ajustar font-size base para laptop CSS-drawn se necessário, embora clamp() já ajude */
    /* .tj-mockup-laptop.tj-mockup-laptop-css-drawn { font-size: clamp(6px, 1.2vw, 12px); } */
    
    /* Ajustes específicos para o celular se o clamp + em não for suficiente */
    /* .tj-mockup-celular { font-size: clamp(8px, 2vw, 14px); } */
    
    .tj-mockup-nav-dots { bottom: 0.625em; gap: 0.375em; } /* 10px, 6px */
    .tj-mockup-nav-dot { width: 0.5em; height: 0.5em; } /* 8px */
}

/* @media (max-width: 480px) { ... } */ 
/* Podem ser necessários mais ajustes finos para telas muito pequenas */