/* Estilos para complementar o TailwindCSS e customizar o Payment Brick do Mercado Pago.
*/
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* AJUSTE PROFISSIONAL */
    font-size: 14px;
    line-height: 1.45;
    color: #111827;
}

/* ===============================
   Botão principal do Mercado Pago
   (menos grande, mais elegante)
================================ */
.mercadopago-button {
    background-color: var(--accent-color, #00A3FF) !important;
    transition: filter 0.2s ease !important;

    /* AJUSTES */
    font-size: 0.95rem !important;   /* antes: 1.125rem */
    font-weight: 600 !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

.mercadopago-button:hover {
    filter: brightness(1.1);
}

/* ===============================
   Resumo final do checkout
================================ */
.checkout-summary-box {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;

    /* AJUSTES */
    font-size: 13px;
    line-height: 1.45;
}

/* Linha tracejada */
.checkout-summary-box hr {
    border-top-style: dashed;
}

/* ===============================
   Labels e inputs (mais clean)
================================ */
label {
    font-size: 12.5px;
    font-weight: 500;
    color: #374151;
}

input,
select,
textarea {
    font-size: 14px;
}

/* ===============================
   Sidebar / Admin (sem mudar layout)
================================ */

/* Sidebar oculta por padrão em telas pequenas */
#sidebar, #admin-sidebar {
    position: fixed;
    top: 80px;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: 100%;
    max-width: 280px;
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
                0 4px 6px -2px rgba(0,0,0,0.05);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    /* AJUSTE */
    font-size: 13px;
}

/* Sidebar visível */
#sidebar.open, #admin-sidebar.open {
    transform: translateX(0);
}

/* Overlay mobile */
#sidebar-overlay, #admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 30;
    display: none;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

#sidebar-overlay.open, #admin-sidebar-overlay.open {
    display: block;
    opacity: 1;
}

/* Botão toggle */
#sidebar-toggle, #admin-sidebar-toggle {
    display: flex;
}

/* Desktop */
@media (min-width: 768px) {
    #sidebar, #admin-sidebar {
        transform: translateX(0);
        width: 256px;
        box-shadow: none;
    }

    #sidebar-toggle, #admin-sidebar-toggle {
        display: none;
    }

    #sidebar-overlay, #admin-sidebar-overlay {
        display: none !important;
        opacity: 0 !important;
    }
}
/* =========================================
   AJUSTE FINO MOBILE – ÁREA DE PAGAMENTO
========================================= */
@media (max-width: 768px) {

  /* Abas Cartão / Pix */
  button,
  .payment-tab,
  .tab {
    font-size: 13px !important;
    padding: 10px 12px !important;
    min-height: 40px !important;
  }

  /* Texto explicativo do Pix */
  .payment-description,
  .pix-description,
  .text-sm {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  /* Caixa branca do Pix */
  .pix-box,
  .payment-box,
  .rounded-lg.border {
    padding: 12px !important;
  }

  /* BOTÃO GERAR PIX (principal ajuste) */
  .mercadopago-button,
  button.bg-green-600,
  button.bg-green-500,
  #generatePix,
  .gerar-pix {
    font-size: 14px !important;
    padding: 11px 14px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  /* Ícone do Pix dentro do botão */
  .mercadopago-button svg,
  .mercadopago-button img {
    width: 16px !important;
    height: 16px !important;
  }
}
/* =========================================
   MOBILE – TÍTULO E PREÇO DO PRODUTO
========================================= */
@media (max-width: 768px) {

  /* TÍTULO DO PRODUTO */
  h1,
  h2,
  .product-title,
  .checkout-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* PREÇO */
  .price,
  .product-price,
  .checkout-price,
  .text-blue-600,
  .text-green-600 {
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* Ajuste do espaçamento */
  .product-header,
  .product-info {
    gap: 8px !important;
  }
}
/* =========================================
   REMOVER BORDA / SOMBRA DA IMAGEM DO PRODUTO
========================================= */

/* imagem do produto (geral) */
.product-image img,
.product-thumb img,
.checkout-product img,
img.product-image,
img.rounded,
img.shadow {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* MOBILE – garante sem borda */
@media (max-width: 768px) {
  .product-image img,
  .product-thumb img,
  .checkout-product img {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
.product-image,
.product-thumb,
.checkout-product {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* ===============================
   ESPAÇO NO TOPO DO BANNER
   (desktop + mobile)
================================ */
[data-id="banner"] {
  margin-top: 24px;
}