/* ============================================================
   FlyEmirates Theme CSS - v25 (Mobile Optimized)
   ============================================================ */

/* ===== PERFORMANCE: GPU acceleration for mobile ===== */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: contain; }

/* ===== REMOVE LINHA EMBAIXO DA LOGO ===== */
.bwSJI, a.bwSJI, a.router-link-exact-active.bwSJI {
  border: none !important; border-bottom: none !important; text-decoration: none !important;
}

/* ===== SEARCH BAR ===== */
.search-margin { padding: 0 12px !important; box-sizing: border-box !important; }
.margin-search {
  background: rgb(38, 42, 48) !important; border: 2px solid rgb(0, 200, 81) !important;
  border-radius: 10px !important; padding: 4px 8px !important;
  box-sizing: border-box !important; margin-bottom: 8px !important;
}
.margin-search .flex.items-center {
  background: transparent !important; border: none !important;
  border-radius: 0 !important; padding: 0 !important; overflow: visible !important;
}
.search-mobile { background: transparent !important; border-radius: 0 !important; }
.provider-dropdown {
  border-left: 1.5px solid rgba(0, 200, 81, 0.4) !important;
  padding: 6px 10px !important; border-radius: 0 !important;
}
.provider-dropdown > * { white-space: nowrap !important; }

/* ===== BANNER / CAROUSEL ===== */
.carousel-banners {
  height: 175px !important; min-height: 175px !important; overflow: hidden !important;
  will-change: transform; /* GPU hint para scroll suave */
}
.carousel-banners .swiper, .carousel-banners .banner-carousel,
.carousel-banners .swiper-wrapper, .carousel-banners .swiper-slide { height: 175px !important; }
.padding-mobile-banner { padding: 0 !important; }
.padding-mobile-banner img, .carousel-banners img.img {
  height: 175px !important; min-height: 175px !important; max-height: 175px !important;
  width: 100% !important; object-fit: cover !important; border-radius: 10px !important;
}

/* ===== SPACING: banner -> search -> ganhos (8px cada) ===== */
div:has(> [class*="search-marg"]) { padding-top: 8px !important; padding-bottom: 0 !important; }

/* ===== GANHOS DE HOJE ===== */
.wrapper {
  margin: 0 12px !important; border-radius: 12px !important;
  background: rgb(28, 31, 38) !important; overflow: hidden !important;
  padding: 10px 8px !important; flex-direction: column !important;
}
.text-title { font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; }
.text-title .highlight, strong.highlight {
  color: rgb(0, 200, 81) !important; text-shadow: 0 0 8px rgba(0,200,81,0.4) !important;
}
.left-content {
  width: 100% !important; flex-direction: row !important; align-items: center !important;
  height: auto !important; padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important; margin-bottom: 10px !important;
}

/* ===== WINNER CARDS - portrait style ===== */
.winner-card {
  position: relative !important; min-width: 76px !important; width: 76px !important;
  height: 118px !important; padding: 0 !important; border-radius: 10px !important;
  overflow: hidden !important; background: rgb(20, 24, 36) !important;
  border: 1px solid rgba(0, 200, 81, .2) !important; flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.winner-card .game-img {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  border-radius: 0 !important; display: block !important;
}
.winner-card::after {
  content: "" !important; position: absolute !important; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 55%, transparent 78%) !important;
  z-index: 1 !important; pointer-events: none !important;
}
.winner-card .game-type { display: none !important; }
.winner-card .name {
  position: absolute !important; bottom: 20px !important; left: 5px !important; right: 5px !important;
  margin: 0 !important; font-size: 8.5px !important; color: rgba(255,255,255,.88) !important;
  font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; z-index: 2 !important; display: block !important;
}
.winner-card .prize-text, .winner-card .amount {
  position: absolute !important; bottom: 5px !important; left: 5px !important; right: 5px !important;
  margin: 0 !important; font-size: 10px !important; color: rgb(0,200,81) !important;
  font-weight: 800 !important; z-index: 2 !important; display: block !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* ===== SLIDER - manual scroll, sem auto-animation ===== */
.slider {
  animation: none !important; -webkit-animation: none !important;
  transform: translateX(0) !important; -webkit-transform: translateX(0) !important;
}
.slider-container {
  height: 120px !important; overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
  min-width: 0 !important; max-width: 100% !important; overflow-y: visible !important;
}
.slider-container::-webkit-scrollbar { display: none !important; }
.slider-container .fade-left { background: linear-gradient(to right, rgb(28,31,38), transparent) !important; }
.slider-container .fade-right { background: linear-gradient(to left, rgb(28,31,38), transparent) !important; }

/* ===== SETAS GANHOS DE HOJE ===== */
.winner-slider-wrapper { position: relative !important; }
.winner-arrow {
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
  z-index: 20 !important; background: rgba(0,200,81,.85) !important; border: none !important;
  color: #fff !important; width: 24px !important; height: 60px !important;
  font-size: 20px !important; cursor: pointer !important; display: flex !important;
  align-items: center !important; justify-content: center !important; padding: 0 !important;
  line-height: 1 !important; transition: background .2s !important; flex-shrink: 0 !important;
}
.winner-arrow:hover { background: rgb(0,200,81) !important; }
.winner-arrow-left  { left: 0 !important; border-radius: 0 6px 6px 0 !important; }
.winner-arrow-right { right: 0 !important; border-radius: 6px 0 0 6px !important; }

/* ===== BOTÃO DEPOSITAR - VERDE ===== */
.F2Y1D .opacidade-hover button {
  background: linear-gradient(135deg, rgb(0, 200, 81) 0%, rgb(0, 145, 58) 100%) !important;
  color: #fff !important; border-radius: 8px !important; font-weight: 700 !important;
  border: none !important; box-shadow: 0 2px 12px rgba(0,200,81,0.4) !important;
  letter-spacing: 0.3px !important;
}

/* ===== TÍTULOS DE SEÇÃO ===== */
h2.providersNames, h2.text-lg.providersNames {
  border: none !important; border-left: 3px solid rgb(0, 200, 81) !important;
  padding: 0 0 0 10px !important; background: transparent !important;
  display: block !important; text-align: left !important; font-size: 14px !important;
  font-weight: 800 !important; color: #fff !important; letter-spacing: .3px !important;
  border-radius: 0 !important; margin-bottom: 8px !important; line-height: 1.4 !important;
}
h2.text-white.text-lg.font-bold {
  font-size: 14px !important; font-weight: 800 !important; color: #fff !important;
  letter-spacing: 0.3px !important; padding-left: 10px !important;
  border-left: 3px solid rgb(0, 200, 81) !important; margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
.w-full.flex.justify-between:has(h2.providersNames) > .flex.items-center:first-child {
  flex: unset !important; justify-content: flex-start !important;
}
.w-full.flex.justify-between:has(h2.providersNames) a {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 0 !important; color: rgb(0,200,81) !important; font-size: 12px !important;
  font-weight: 600 !important;
}
.w-full.flex.justify-between:has(h2.providersNames) { padding-right: 12px !important; align-items: center !important; }

/* ===== GAME CARDS ===== */
h3.text-sm.font-bold.mb-2.truncate { color: #fff !important; font-weight: 700 !important; }
div:has(> h2.providersNames) {
  background: rgb(22, 25, 33) !important; border-radius: 12px !important;
  padding: 12px 12px 10px !important; margin: 0 8px 12px !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}
.item-game {
  background: linear-gradient(145deg, rgb(30, 34, 46), rgb(22, 26, 38)) !important;
  border-radius: 14px !important; border: 1px solid rgba(0, 200, 81, 0.1) !important;
  transition: border-color 0.2s !important; /* removido transform para menos repaints */
}
.item-game:hover { border-color: rgba(0, 200, 81, 0.3) !important; }
.game-list.flex.flex-col.relative { margin-top: 20px !important; }

/* ===== RESULTADOS AO VIVO ===== */
.live-resultados-wrapper {
  background: rgb(20, 22, 30) !important; border: 1px solid rgba(0, 200, 81, 0.25) !important;
  border-radius: 12px !important; overflow: hidden !important; margin: 8px !important;
}
.live-resultados-wrapper .header {
  background: linear-gradient(135deg, rgba(0,200,81,0.18), rgba(0,200,81,0.06)) !important;
  padding: 10px 14px !important; font-weight: 800 !important; font-size: 13px !important;
  color: #fff !important; border-bottom: 1px solid rgba(0,200,81,0.2) !important;
  letter-spacing: 0.5px !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.resultados-list { gap: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; }
.resultados-list > div {
  padding: 10px 14px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin: 0 !important; display: flex !important; align-items: center !important;
  gap: 10px !important; min-height: 44px !important;
}
.resultados-list > div:last-child { border-bottom: none !important; }

/* ===== FEEDBACK ===== */
.feedback-section {
  background: linear-gradient(135deg, rgb(17,21,30), rgb(20,24,36)) !important;
  border-radius: 14px !important; border: 1px solid rgba(0,200,81,.18) !important;
  padding: 16px 10px !important; margin: 12px 8px !important;
}
.feedback-title {
  font-size: 15px !important; font-weight: 800 !important; color: #fff !important;
  padding-left: 10px !important; border-left: 3px solid rgb(0,200,81) !important;
  margin-bottom: 14px !important; display: block !important;
}
.feedback-card {
  background: rgb(24,28,42) !important; border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.07) !important; padding: 14px 12px !important;
}
.feedback-card .stars i { color: rgb(250,204,21) !important; }

/* ===== FOOTER ===== */
.footer-developed { display: none !important; }
.footer-hero .py-6.border-t { display: none !important; }
.footer-hero { padding-bottom: 20px !important; }
.footer-hero::after {
  content: '© flyemirates.bet — Todos os direitos reservados' !important;
  display: block !important; text-align: center !important;
  color: rgba(255,255,255,0.3) !important; font-size: 11px !important;
  padding: 12px 0 8px !important; letter-spacing: 0.8px !important;
}

/* ===== HEADER BUTTONS ===== */
._6DBJa {
  height: 36px !important; padding: 8px 14px !important; font-size: 12px !important;
  font-weight: 600 !important; display: flex !important; align-items: center !important;
  justify-content: center !important;
}
.y3T4E.K-mZC {
  padding: 5px 0 !important; align-items: center !important;
  display: flex !important; gap: 4px !important;
}
.mt-3 .carousel { margin-top: 10px !important; }

/* ===== SECTION ARROW BUTTONS ===== */
.flex.items-center.gap-2:has(h2.text-white.text-lg.font-bold) button {
  background: rgba(0,200,81,.12) !important; border: 1px solid rgba(0,200,81,.3) !important;
  border-radius: 50% !important; width: 26px !important; height: 26px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: rgb(0,200,81) !important; font-size: 10px !important; padding: 0 !important;
  flex-shrink: 0 !important; transition: background .2s !important;
}
.flex.items-center.gap-2:has(h2.text-white.text-lg.font-bold) button:hover { background: rgba(0,200,81,.28) !important; }
.flex.justify-between.items-center.mb-1:has(h2.text-white.text-lg.font-bold) { margin-bottom: 10px !important; }

/* ===== SPACING BEFORE "OS MAIS ACESSADOS" ===== */
.mt-2:has(.carousel) { margin-top: 20px !important; padding-top: 8px !important; }
section.carousel.item-sombra2 { margin-top: 20px !important; }

/* ===== MOBILE: Login / Register visual fixes ===== */
@media (max-width: 768px) {
  /* Consistência no modal de login/registro */
  .modal-content, [class*="modal"] > div {
    border-radius: 12px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  /* Fix inputs que saem da tela */
  input, select, textarea {
    font-size: 16px !important; /* Previne zoom no iOS */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Banner não pode ultrapassar a tela */
  .carousel-banners, .padding-mobile-banner {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  /* Imagens responsivas */
  img { max-width: 100% !important; height: auto; }
  /* Fix para elementos que saem da viewport */
  .container, .main-content, [id="viperpro"] > div {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* Suavizar scroll em todo lugar */
  * { scroll-behavior: smooth; }
}

/* ===== MOBILE: Evitar overflow horizontal (bug visual comum) ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}