/* 📱 ESTILOS MOBILE-FRIENDLY - Adicione isso no final do style.css */

/* ✅ Remove dependência de hover - elementos sempre visíveis */
.menu-item,
.card-item,
.category-card,
.accent-btn,
button {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ✅ Touch feedback visual instantâneo */
.menu-item:active,
.card-item:active,
.category-card:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.accent-btn:active,
button:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* ✅ Aumenta área de toque em dispositivos mobile */
@media (max-width: 768px) {
  .menu-item {
    min-height: 44px;
    min-width: 88px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .card-item,
  .category-card {
    min-height: 140px;
    touch-action: manipulation;
  }
  
  button,
  .accent-btn {
    min-height: 44px;
    padding: 12px 20px;
    touch-action: manipulation;
  }
}

/* ✅ Remove hover, usa sempre o estado "ativo" em mobile */
@media (hover: none) and (pointer: coarse) {
  .menu-item {
    background: rgba(255,255,255,0.06);
  }
  
  .menu-item.active {
    background: linear-gradient(90deg, rgba(14,165,233,0.2), rgba(233,9,20,0.12));
  }
  
  .card-item {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  
  .category-card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
}

/* ✅ Força renderização de elementos */
* {
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
  -webkit-touch-callout: none;
}

/* ✅ Garante que inputs e textareas sejam visíveis */
input,
textarea,
select {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-appearance: none;
  appearance: none;
}

/* ✅ Melhora contraste em telas mobile */
.card-title,
.cat-name,
.menu-item,
button {
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ✅ Previne zoom indesejado em inputs */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* ✅ Feedback visual para loading */
.loading-screen {
  touch-action: none;
  user-select: none;
}

/* ✅ Melhora visibilidade do player */
#modalVideo {
  background: #000;
  min-height: 200px;
}

/* ✅ Botões sempre visíveis */
.btn,
.btn-outline-light,
.btn-outline-info,
.btn-warning,
.btn-danger,
.btn-secondary {
  opacity: 1 !important;
  visibility: visible !important;
  border-width: 2px !important;
}

/* ✅ Força contraste nos botões outline */
.btn-outline-light {
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.05) !important;
}

.btn-outline-info {
  border-color: rgba(14,165,233,0.6) !important;
  color: #0ea5e9 !important;
  background: rgba(14,165,233,0.1) !important;
}

/* ✅ Textarea e input sempre visíveis com bom contraste */
#m3uInput,
#searchBox {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  opacity: 1 !important;
}

#m3uInput::placeholder,
#searchBox::placeholder {
  color: rgba(255,255,255,0.5) !important;
  opacity: 1 !important;
}

/* ✅ Card input sempre visível */
.card-input {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  opacity: 1 !important;
}

/* ✅ Grid sempre renderizado corretamente */
.grid,
.categories-grid,
.recent-row {
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

.recent-row {
  display: flex !important;
}

/* ✅ Melhora scroll horizontal em mobile */
@media (max-width: 768px) {
  .recent-row {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* ✅ Logo sempre visível */
.logo,
img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ✅ Melhora contraste do texto */
h3, h4, p, small, strong {
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}