/* ==========================================================================
   ESTILOS GLOBAIS (Compartilhados)
   ========================================================================== */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}

.success-msg {
    padding: 15px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    text-align: center;
}

.error-msg {
    padding: 15px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    text-align: center;
}

/* ==========================================================================
   TEMA PÚBLICO "NETFLIX" (Aplicado com a classe .public-page)
   ========================================================================== */
body.public-page {
    background-color: #141414; /* Preto Netflix */
    color: #FFFFFF;
}

/* --- Estilos da Galeria de Eventos (index.php) --- */
.public-page .gallery-header { text-align: center; margin-bottom: 40px; }
.public-page .gallery-header h1 { font-size: 2.8em; font-weight: 700; margin-bottom: 5px; color: #E50914; }
.public-page .gallery-header p { font-size: 1.2em; color: #a0a0a0; }
.public-page .event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
.public-page .event-card-link { text-decoration: none; color: #FFFFFF; background-color: #222; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.public-page .event-card-link:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); }
/* Estilo para o card "Em Breve" (não clicável) */
.public-page .event-card-link.em-breve {
  opacity: 0.6;
  cursor: default;
}
/* Opcional: Remove o efeito de zoom do card "Em Breve" ao passar o mouse */
.public-page .event-card-link.em-breve:hover {
  transform: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* Volta para a sombra original */
}
.public-page .event-card-image-wrapper { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.public-page .event-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.public-page .event-card-info { padding: 20px; }
.public-page .event-card-info h3 { margin: 0 0 10px 0; font-size: 1.2em; font-weight: 600; color: #FFFFFF; }
.public-page .event-card-details { display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; color: #a0a0a0; }
.public-page .event-card-details .price { font-weight: 600; color: #4CAF50; }
.public-page .no-events-available { text-align: center; padding: 50px; }

/* --- Estilos da Página de Compra (Tema Escuro) --- */
.public-page .purchase-page-layout { max-width: 700px; margin: 0 auto; }
.public-page .purchase-page-layout h1 { text-align: center; margin-bottom: 30px; }
.public-page .back-to-gallery-btn { display: inline-block; margin-bottom: 30px; color: #a0a0a0; text-decoration: none; transition: color 0.2s ease; }
.public-page .back-to-gallery-btn:hover { color: #FFFFFF; }
.public-page .event-image-purchase { width: 100%; max-height: 350px; object-fit: cover; border-radius: 12px; margin-bottom: 20px; }
.public-page .purchase-form-card { background-color: #222; border: 1px solid #333; border-radius: 12px; padding: 30px; margin-top: 30px; }
.public-page h3 { color: #FFFFFF; }
.public-page .form-group label { color: #a0a0a0; }
.public-page .form-group input { background-color: #333; color: #FFFFFF; border: 1px solid #333; width:100%;padding:12px 15px;border-radius:8px;box-sizing:border-box;font-family:'Poppins',sans-serif;font-size:1em; }
.public-page .form-group input:focus { outline: none; border-color: #E50914; box-shadow: 0 0 0 4px rgba(229, 9, 20, .3); }
.public-page .btn { background: #E50914; display:block;width:100%;padding:15px;border:none;color:#fff;font-size:1.1em;font-weight:600;cursor:pointer;border-radius:8px;text-align:center;text-decoration:none; }
.public-page .btn:hover:not(:disabled) { background: #B20710; }
.public-page .btn:disabled { background-color: #555; cursor: not-allowed; }
.public-page .total-section { background-color: #111; border: 1px solid #333; border-radius:8px;padding:15px;margin:25px 0;text-align:right;}
.public-page .total-section #subtotal { color: #a0a0a0; margin:0 0 5px 0;font-size:.9em; }
.public-page .total-section #total { color: #FFFFFF; margin:0;font-size:1.8em;font-weight:700; }
.public-page .event-not-found { text-align: center; padding: 50px; }

/* --- ESTILOS DA PÁGINA VER_PIX.PHP (Tema Escuro Bonito) --- */
.public-page .pix-container { text-align: center; max-width: 450px; }
.public-page .qr-code-image { max-width: 250px; height: auto; border: 6px solid #222; border-radius: 12px; background:white; padding:10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.public-page .pix-key-box { position: relative; background-color: #222; border: 1px solid #333; padding: 20px; border-radius: 8px; margin-top: 20px; font-family: 'Courier New', Courier, monospace; text-align: left; word-break: break-all; color: #FFFFFF; }
.public-page .copy-button { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; padding: 8px 12px; font-size: 0.9em; background-color: #E50914; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; }
.public-page .copy-button:hover { background-color: #B20710; }

/* ==========================================================================
   TEMA DO PAINEL ADMINISTRATIVO (Aplicado com a classe .admin-page)
   ========================================================================== */
body.admin-page { background-color: #f5f5f5; color: #37474f; }
.admin-page .container { max-width: 900px; background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.07); border-radius: 12px; padding: 30px 40px; }
.admin-page h1, .admin-page h2, .admin-page h3 { color: #6d4c41; text-align: center; font-weight: 600; }
.admin-page .form-group { margin-bottom: 20px; }
.admin-page .form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .9em; }
.admin-page .form-group input, .admin-page .form-group select, .admin-page .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #e0e0e0; border-radius: 8px; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-size: 1em; }
.admin-page .form-group input:focus, .admin-page .form-group select:focus, .admin-page .form-group textarea:focus { outline: none; border-color: #6d4c41; box-shadow: 0 0 0 4px rgba(109, 76, 65, .1); }
.admin-page .btn { display: block; width: 100%; padding: 15px; border: none; background: #6d4c41; color: #fff; font-size: 1.1em; font-weight: 600; cursor: pointer; border-radius: 8px; text-decoration: none; text-align: center; }
.admin-page .btn:hover { background: #4e342e; }
.admin-page .admin-nav { border-radius: 12px 12px 0 0; padding: 15px 25px; background: #6d4c41; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.admin-page .admin-nav span a { color: #f5f5f5; text-decoration: none; }
.admin-page .admin-section { background: #fafafa; border-radius: 8px; border: 1px solid #eee; margin-top: 20px; padding: 20px; }
.admin-page .admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.admin-page .admin-table th, .admin-page .admin-table td { border-bottom: 1px solid #e0e0e0; padding: 15px; text-align: left; }
.admin-page .admin-table th { background-color: #f5f5f5; font-weight: 600; font-size: .9em; }
.admin-page .admin-table tbody tr:hover { background-color: #fcfcfc; }
.admin-page .status-pago, .admin-page .status-ativo, .admin-page .status-esgotado { color: #388e3c; font-weight: 600; }
.admin-page .status-pendente, .admin-page .status-inativo { color: #f57c00; font-weight: 600; }
.admin-page .status-encerrado { color: #757575; font-weight: 600; }
.admin-page .actions a { text-decoration: none; margin: 0 8px; }
.admin-page .actions .fa-whatsapp { color: #25d366; }
.admin-page .actions .fa-qrcode { color: #1e88e5; }
.admin-page .actions .fa-trash-alt { color: #d32f2f; }
.admin-page .actions i { font-size: 1.5em; }
.admin-page .totals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; margin-top: 10px; }
.admin-page .total-card { background-color: #fff; padding: 20px; border-radius: 12px; border: 1px solid #e0e0e0; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center; }
.admin-page .total-card .label { font-size: 0.85em; font-weight: 600; color: #a1887f; text-transform: uppercase; margin-bottom: 8px; }
.admin-page .total-card .value { font-size: 1.8em; font-weight: 700; color: #37474f; }
.admin-page .total-card .value.pending { color: #f57c00; }
.admin-page .total-card .value.paid { color: #388e3c; }
.admin-page .total-card.grand-total { background-color: #6d4c41; }
.admin-page .total-card.grand-total .label, .admin-page .total-card.grand-total .value { color: #fff; }
.admin-page .current-image { max-width: 200px; height: auto; border-radius: 8px; border: 2px solid #e0e0e0; display: block; margin-top: 10px; }
.admin-page .desktop-only { display: table; }
.admin-page .mobile-only { display: none; }
.admin-page .participant-card { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,.05); }
.admin-page .participant-card div { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dotted #eee; padding-bottom: 10px; }
.admin-page .participant-card div:last-child{border:none;padding:0;}
.admin-page .participant-card .actions{justify-content:flex-end;}

/* --- RESPONSIVIDADE (Regras para ambos os temas) --- */
@media screen and (max-width: 900px) {
    .admin-page .desktop-only { display: none; }
    .admin-page .mobile-only { display: block; }
    .admin-page .totals-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 768px) {
    .public-page .gallery-header h1 { font-size: 2.2em; }
    .container { padding: 15px; margin-top: 15px; }
}
@media screen and (max-width: 480px) {
    .public-page .copy-button { position: static; display: block; width: 100%; margin-top: 15px; }
    .public-page .pix-key-box { text-align: center; }
}
/* --- Ações com ícones (desktop e mobile) — VERSÃO FINAL --- */
.admin-page .actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}

/* neutraliza regras antigas de margin e tamanho de ícone que entram em conflito */
.admin-page .actions a{ margin:0 !important; }
.admin-page .actions i{ font-size:16px !important; }

/* botões em caixinha */
.admin-page .btn-icon{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease;
}
.admin-page .btn-edit{ background:#E3F2FD; border-color:#BBDEFB; color:#1e88e5; }
.admin-page .btn-list{ background:#E8F5E9; border-color:#C8E6C9; color:#388e3c; }
.admin-page .btn-del { background:#FFEBEE; border-color:#FFCDD2; color:#d32f2f; }

.admin-page .btn-icon:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* coluna Ações da tabela (desktop) */
.admin-page .admin-table th.actions,
.admin-page .admin-table td.actions{
  width:120px; text-align:right;
}

/* mobile cards */
.admin-page .participant-card .actions{ display:flex; gap:10px; justify-content:flex-end; }

/* acessibilidade */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================= */
/* ===== AJUSTES FINAIS DE LAYOUT (v5) ===== */
/* ============================================= */

.gallery-header {
    text-align: center;
    padding-top: 15px; /* **AJUSTADO: Espaço superior menor no celular** */
    padding-bottom: 20px; 
    margin: 0;
}

.gallery-header .site-logo {
    max-width: 180px; 
    height: auto;
    margin: 0 auto;
    padding: 0;
    display: block;
}

.gallery-header .site-description {
    font-size: 1.0em;
    color: #cccccc;
    line-height: 1.5;
    max-width: 90%;
    margin: 15px auto 0 auto;
    padding: 0 10px;
}

/* --- Media Queries para Telas Maiores --- */

@media (min-width: 768px) {
    .gallery-header {
        padding-top: 20px; /* **AJUSTADO: Espaço superior menor no tablet** */
        padding-bottom: 30px;
    }
    .gallery-header .site-logo {
        max-width: 240px;
    }
    .gallery-header .site-description {
        font-size: 1.1em;
        max-width: 600px;
        margin-top: 20px;
    }
}

@media (min-width: 1024px) {
    .gallery-header {
        padding-top: 20px; /* **AJUSTADO: Espaço superior menor no desktop** */
        padding-bottom: 40px;
    }
    .gallery-header .site-logo {
        max-width: 320px;
    }
    .gallery-header .site-description {
        font-size: 1.2em;
        max-width: 700px;
        margin-top: 25px;
    }
}

/* ============================================= */
/* ===== ESTILOS DO FOOTER ===== */
/* ============================================= */
footer {
    border-top: 1px solid #444; /* Linha sutil para separar o conteúdo */
    padding: 20px 0;
    margin-top: 60px; /* Espaço entre os eventos e o footer */
}

.footer-content {
    /* Limita a largura e centraliza, igual ao container principal */
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px; /* Espaçamento nas laterais para não colar no canto da tela */
    
    /* A mágica para alinhar os itens: */
    display: flex;
    justify-content: space-between; /* Joga um item para cada ponta */
    align-items: center; /* Alinha os itens verticalmente */
}

.address-text {
    font-size: 0.9em;
    color: #888888; /* Um cinza mais escuro para o texto */
}

.whatsapp-icon i {
    font-size: 2.2em; /* Tamanho do ícone */
    color: #888888;
    transition: color 0.3s ease, transform 0.3s ease; /* Efeito suave na transição */
}

.whatsapp-icon:hover i {
    color: #25D366; /* Cor verde do WhatsApp ao passar o mouse */
    transform: scale(1.1); /* Aumenta um pouco o ícone ao passar o mouse */
}

/* ============================================= */
/* ===== BOTÃO DE CONTROLE DE MÚSICA ===== */
/* ============================================= */
.music-toggle-btn {
    position: fixed; /* Fica fixo na tela mesmo com a rolagem */
    top: 20px;
    right: 20px;
    z-index: 999; /* Garante que ele fique acima de outros elementos */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.music-toggle-btn i {
    font-size: 1.5em; /* Tamanho do ícone */
    color: #888888;
    transition: color 0.3s ease, transform 0.3s ease;
}

.music-toggle-btn:hover i {
    color: #ffffff; /* O ícone fica branco ao passar o mouse */
    
    .btn-checkin { color:#388e3c; }
.btn-checkin:hover { color:#2e7d32; }

.btn-revert { color:#f57c00; }
.btn-revert:hover { color:#e65100; }

.btn-cancel { color:#d32f2f; }
.btn-cancel:hover { color:#b71c1c; }

    transform: scale(1.1);
}

/* Classe auxiliar para esconder um dos ícones */
.music-toggle-btn .hidden {
    display: none !important;
}

/* ====== CUPOM: input + botão (tema público) ====== */
.public-page .coupon-section{
  margin-top: 20px;      /* + espaço acima */
  margin-bottom: 20px;   /* + espaço abaixo */
}

.public-page .form-group-inline{
  display: flex;
  align-items: center;
  gap: 10px;             /* separação entre input e botão */
}

.public-page #coupon_code{
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid #333;
  padding: 12px 15px;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-size: 1em;
}

.public-page #coupon_code::placeholder{
  color: #aaa;
  letter-spacing: .5px;
}

.public-page #coupon_code{
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid #333;
  padding: 12px 15px;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-size: 1em;
  text-transform: uppercase;   /* <-- NOVO */
}


.public-page .btn-apply{
  background: #E50914;      /* mesma paleta do tema */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.public-page .btn-apply:hover{ background:#B20710; }

/* Mobile: empilha e mantém respiro */
@media (max-width: 480px){
  .public-page .form-group-inline{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .public-page .btn-apply{
    width: 100%;
  }
}