/**
 * VR Shopping - Device-Specific CSS
 * Ajustes precisos baseados nas classes do Device Detector
 * 
 * @version 1.0.0
 * @requires device-detector.js
 */

/* ============================================
   AJUSTES ESPECÍFICOS POR MODELO DE DISPOSITIVO
   ============================================ */

/* --------------------------------------
   IPHONE PRO MAX SERIES
   O botão deve SUBIR levemente
   -------------------------------------- */

/* iPhone 12 Pro Max */
body.model-iphone-12-pro-max #mostrarBtn,
body.model-iphone-12-pro-max .button.prefer-responsive {
    margin-top: -5px !important;
}

/* iPhone 14 Pro Max */
body.model-iphone-14-pro-max #mostrarBtn,
body.model-iphone-14-pro-max .button.prefer-responsive {
    margin-top: -6px !important;
}

/* iPhone Pro Max (14, 15, 16 e futuros) */
body.model-iphone-pro-max #mostrarBtn,
body.model-iphone-pro-max .button.prefer-responsive {
    margin-top: -8px !important;
}

/* iPhone Pro Max Future (17 Pro Max em diante) */
body.model-iphone-pro-max-future #mostrarBtn,
body.model-iphone-pro-max-future .button.prefer-responsive {
    margin-top: -10px !important; /* Sobe mais ainda conforme solicitado */
}

/* Ajuste adicional para dispositivos com Dynamic Island */
body.has-dynamic-island #mostrarBtn,
body.has-dynamic-island .button.prefer-responsive {
    margin-top: calc(var(--btn-top-offset, 0px) - 2px) !important;
}

/* --------------------------------------
   MOTOROLA EDGE 30 PRO
   O botão deve ir mais para a DIREITA
   -------------------------------------- */

body.model-motorola-edge-30-pro .zero002 {
    text-align: right !important;
    padding-right: 20px !important;
}

body.model-motorola-edge-30-pro #mostrarBtn,
body.model-motorola-edge-30-pro .button.prefer-responsive {
    float: right !important;
    margin-right: 15px !important;
    margin-left: auto !important;
}

/* Motorola Edge series em geral */
body.model-motorola-edge .zero002,
body.model-motorola-edge-40 .zero002,
body.model-motorola-edge-50 .zero002 {
    text-align: right !important;
    padding-right: 15px !important;
}

body.model-motorola-edge #mostrarBtn,
body.model-motorola-edge-40 #mostrarBtn,
body.model-motorola-edge-50 #mostrarBtn {
    float: right !important;
    margin-right: 10px !important;
}

/* Motorola genérico */
body.brand-motorola #mostrarBtn,
body.brand-motorola .button.prefer-responsive {
    margin-right: 5px !important;
}

/* ============================================
   AJUSTES POR MARCA
   ============================================ */

/* Apple iPhones */
body.brand-apple.device-mobile header.padrotramanho {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

body.brand-apple.has-notch header.padrotramanho {
    padding-top: calc(15px + env(safe-area-inset-top, 0px)) !important;
}

/* Samsung */
body.brand-samsung #mostrarBtn,
body.brand-samsung .button.prefer-responsive {
    font-size: 13px !important;
}

body.model-samsung-ultra #mostrarBtn {
    font-size: 14px !important;
    padding: 13px 26px !important;
}

/* Samsung Z Fold (aberto) */
body.model-samsung-z-fold.orientation-landscape .zero001,
body.model-samsung-z-fold.orientation-landscape .zero002 {
    width: 50% !important;
    float: left !important;
}

body.model-samsung-z-fold.orientation-landscape .zero002 {
    text-align: right !important;
}

body.model-samsung-z-fold.orientation-landscape #mostrarBtn {
    float: right !important;
    margin: 0 !important;
}

/* Samsung Z Flip (modo cover) */
body.model-samsung-z-flip #mostrarBtn {
    font-size: 10px !important;
    padding: 8px 14px !important;
    min-width: 100px !important;
}

/* Google Pixel */
body.brand-google #mostrarBtn,
body.brand-google .button.prefer-responsive {
    font-size: 13px !important;
}

/* Xiaomi/Redmi */
body.brand-xiaomi #mostrarBtn,
body.brand-xiaomi .button.prefer-responsive {
    font-size: 13px !important;
}

/* OnePlus */
body.brand-oneplus #mostrarBtn,
body.brand-oneplus .button.prefer-responsive {
    font-size: 13px !important;
}

/* ============================================
   AJUSTES POR SISTEMA OPERACIONAL
   ============================================ */

/* iOS */
body.os-ios #mostrarBtn,
body.os-ios .button.prefer-responsive {
    -webkit-appearance: none !important;
    -webkit-transform: translateZ(0) !important;
}

body.os-ios input,
body.os-ios select,
body.os-ios textarea {
    font-size: 16px !important; /* Previne zoom automático */
}

/* Android */
body.os-android #mostrarBtn,
body.os-android .button.prefer-responsive {
    -webkit-tap-highlight-color: transparent !important;
}

/* ============================================
   AJUSTES POR NAVEGADOR
   ============================================ */

/* Safari */
body.browser-safari #mostrarBtn,
body.browser-safari .button.prefer-responsive {
    -webkit-transform: translate3d(0, 0, 0) !important;
}

/* Samsung Internet */
body.browser-samsung #mostrarBtn,
body.browser-samsung .button.prefer-responsive {
    font-weight: 600 !important;
}

/* UC Browser */
body.browser-uc #mostrarBtn,
body.browser-uc .button.prefer-responsive {
    box-shadow: none !important;
}

/* ============================================
   AJUSTES POR VIEWPORT SIZE
   ============================================ */

/* Extra Small (< 360px) */
body.viewport-xs #mostrarBtn,
body.viewport-xs .button.prefer-responsive {
    font-size: 11px !important;
    padding: 10px 16px !important;
    min-width: 120px !important;
}

body.viewport-xs .zero001 img {
    max-width: 85px !important;
}

/* Small (360px - 399px) */
body.viewport-sm #mostrarBtn,
body.viewport-sm .button.prefer-responsive {
    font-size: 12px !important;
    padding: 11px 18px !important;
}

body.viewport-sm .zero001 img {
    max-width: 100px !important;
}

/* Medium (400px - 479px) */
body.viewport-md #mostrarBtn,
body.viewport-md .button.prefer-responsive {
    font-size: 12px !important;
    padding: 11px 20px !important;
}

body.viewport-md .zero001 img {
    max-width: 110px !important;
}

/* Large (480px - 767px) */
body.viewport-lg #mostrarBtn,
body.viewport-lg .button.prefer-responsive {
    font-size: 13px !important;
    padding: 12px 22px !important;
}

/* ============================================
   AJUSTES POR ORIENTAÇÃO
   ============================================ */

/* Landscape em mobile */
body.device-mobile.orientation-landscape header.padrotramanho .container {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

body.device-mobile.orientation-landscape .zero001 {
    width: auto !important;
    margin-bottom: 0 !important;
}

body.device-mobile.orientation-landscape .zero002 {
    width: auto !important;
    text-align: right !important;
}

body.device-mobile.orientation-landscape #mostrarBtn,
body.device-mobile.orientation-landscape .button.prefer-responsive {
    float: right !important;
    margin: 0 !important;
}

/* ============================================
   AJUSTES POR PIXEL RATIO
   ============================================ */

/* Retina 3x (iPhone Pro, Samsung Ultra, etc) */
body.retina-3x #mostrarBtn,
body.retina-3x .button.prefer-responsive {
    /* Texto mais nítido em telas de alta resolução */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================
   AJUSTES PARA DISPOSITIVOS COM NOTCH
   ============================================ */

body.has-notch header.padrotramanho {
    padding-left: calc(15px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(15px + env(safe-area-inset-right, 0px)) !important;
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

/* Movimento reduzido */
body.prefers-reduced-motion #mostrarBtn,
body.prefers-reduced-motion .button.prefer-responsive {
    transition: none !important;
    animation: none !important;
}

body.prefers-reduced-motion #mostrarBtn:active,
body.prefers-reduced-motion .button.prefer-responsive:active {
    transform: none !important;
}

/* Alto contraste */
body.prefers-high-contrast #mostrarBtn,
body.prefers-high-contrast .button.prefer-responsive {
    border: 2px solid #ffffff !important;
    font-weight: 900 !important;
}

/* ============================================
   DARK MODE
   ============================================ */

body.prefers-dark-mode #mostrarBtn,
body.prefers-dark-mode .button.prefer-responsive {
    box-shadow: 0 3px 15px rgba(0, 140, 21, 0.6) !important;
}

/* ============================================
   TOUCH DEVICES
   ============================================ */

body.is-touch #mostrarBtn,
body.is-touch .button.prefer-responsive {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
}

body.is-touch #mostrarBtn:active,
body.is-touch .button.prefer-responsive:active {
    transform: scale(0.97) !important;
    background: #007a12 !important;
}

/* ============================================
   DISPOSITIVOS DOBRÁVEIS
   ============================================ */

body.is-foldable #mostrarBtn,
body.is-foldable .button.prefer-responsive {
    /* Garante que o botão não fique cortado na dobra */
    transform: translateZ(0) !important;
}

/* ============================================
   TABLETS
   ============================================ */

body.device-tablet .zero001,
body.device-tablet .zero002 {
    width: 50% !important;
    float: left !important;
}

body.device-tablet .zero002 {
    text-align: right !important;
}

body.device-tablet #mostrarBtn {
    float: right !important;
    margin: 0 !important;
}

/* iPad */
body.model-ipad #mostrarBtn,
body.model-ipad-air #mostrarBtn,
body.model-ipad-pro #mostrarBtn {
    font-size: 14px !important;
    padding: 12px 26px !important;
}