/* =====================================================
   JETSPINO CLEAN FINAL SYSTEM (NO CONFLICT VERSION)
===================================================== */

:root {
  --jp-bg: #0E0F11;
  --jp-bg2: #0A0A0B;
  --jp-gold: #ffc800;
  --jp-gold-hover: #e0b100;
  --jp-text: #D1D5DB;
}

/* =========================
   CHAT CONTAINER
========================= */

.fixed.bottom-0 {
  background: radial-gradient(circle at top right, #1a1a1f 0%, #0E0F11 45%, #070708 100%) !important;
  border: 1px solid rgba(255,200,0,0.15) !important;
  box-shadow: 0 0 70px rgba(255,200,0,0.06) !important;
}

/* =========================
   HEADER RESET
========================= */

.bg-gradient-to-r {
  background: #0E0F11 !important;
  border-bottom: 1px solid rgba(255,200,0,0.15) !important;
}

.bg-gradient-to-r h3 {
  color: #fff !important;
}

.bg-gradient-to-r p {
  color: var(--jp-text) !important;
}

/* HEADER ICON BUTTONS */
.bg-gradient-to-r button {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}

.bg-gradient-to-r button:hover {
  background: rgba(255,200,0,0.15) !important;
  color: var(--jp-gold) !important;
}

/* =========================
   PROMO BANNER SAFE
========================= */

.w-full.bg-gray-50 {
  background: #0E0F11 !important;
  border-bottom: 1px solid rgba(255,200,0,0.08);
}

/* =========================
   BODY ONLY (SAFE TARGET)
========================= */

.flex-1.p-6.flex {
  background: linear-gradient(180deg, #0E0F11 0%, #0A0A0B 100%) !important;
}

/* TITLE */
.flex-1 h4 {
  color: #fff !important;
}

/* TEXT */
.flex-1 p {
  color: var(--jp-text) !important;
}

/* =========================
   PRIMARY CTA BUTTON (FIXED)
========================= */

button.bg-green-600 {
  background: var(--jp-gold) !important;
  color: #000 !important;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(255,200,0,0.15);
}

button.bg-green-600:hover {
  background: var(--jp-gold-hover) !important;
  transform: translateY(-1px);
}

/* =========================
   INPUT SAFE
========================= */

input {
  background: #111214 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

input:focus {
  border-color: var(--jp-gold) !important;
  box-shadow: 0 0 0 3px rgba(255,200,0,0.15) !important;
}

/* =========================
   RED FIX (SAFE VERSION)
========================= */

.bg-red-500,
.bg-red-600,
.bg-red-400 {
  background: rgba(255,200,0,0.08) !important;
  border: 1px solid rgba(255,200,0,0.12) !important;
  color: #fff !important;
}

/* =========================
   FLOATING BUTTON (FIXED SELECTOR)
========================= */

.fixed.bottom-20 button {
  background: radial-gradient(circle at center, #1a1a1f, #0E0F11 60%, #070708) !important;
  border: 1px solid rgba(255,200,0,0.30) !important;
  box-shadow: 0 0 40px rgba(255,200,0,0.20) !important;
  transition: all 0.2s ease !important;
}

.fixed.bottom-20 button svg {
  color: #ffc800 !important;
}

/* HOVER */
.fixed.bottom-20 button:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 0 70px rgba(255,200,0,0.30) !important;
}

/* TOOLTIP */
.fixed.bottom-20 span {
  background: rgba(0,0,0,0.90) !important;
  border: 1px solid rgba(255,200,0,0.25) !important;
  color: #ffc800 !important;
}

/* =========================
   MOBILE FIX
========================= */

@media (max-width: 768px) {
  .fixed.bottom-0 {
    width: 100% !important;
    height: 100dvh !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
  }
}

/* =====================================================
   JETSPINO PROVIDER SECTIONS - FINAL V3 PREMIUM
   Clean / Mobile Wide / No Watermark
===================================================== */

.jp-premium-provider {
  width: calc(100vw - 10px) !important;
  max-width: calc(100vw - 10px) !important;
  margin: 22px 0 38px 50% !important;
  transform: translateX(-50%) !important;
  padding: 0 !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(255,200,0,.18), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(255,200,0,.08), transparent 36%),
    linear-gradient(180deg, rgba(24,21,12,.96), rgba(7,8,10,.98)) !important;
  border: 1px solid rgba(255,200,0,.24) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.jp-premium-provider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 42%, transparent 65%);
  opacity: .28;
  pointer-events: none;
}

.jp-premium-provider::after {
  display: none !important;
}

/* Header */
.jp-premium-provider > div:first-child {
  padding: 16px 16px 13px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  border-bottom: 1px solid rgba(255,200,0,.16) !important;
}

.jp-premium-provider h1,
.jp-premium-provider h2,
.jp-premium-provider h3,
.jp-premium-provider h4 {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: -0.55px !important;
  text-shadow: 0 0 22px rgba(255,200,0,.14) !important;
}

.jp-premium-provider h1::before,
.jp-premium-provider h2::before,
.jp-premium-provider h3::before,
.jp-premium-provider h4::before {
  background: linear-gradient(180deg, #ffc800, #ff9f00) !important;
  box-shadow: 0 0 18px rgba(255,200,0,.55) !important;
}

.jp-premium-provider a,
.jp-premium-provider button {
  color: rgba(255,255,255,.86) !important;
  font-weight: 850 !important;
}

/* Grid */
.jp-premium-provider [class*="grid"] {
  padding: 22px 15px 18px !important;
  gap: 18px 12px !important;
  position: relative !important;
  z-index: 2 !important;
}

.jp-premium-provider [class*="grid"] > * {
  position: relative !important;
  border-radius: 17px !important;
}

/* Game images */
.jp-premium-provider img {
  width: 100% !important;
  border-radius: 17px !important;
  aspect-ratio: 1.58 / 1 !important;
  object-fit: cover !important;
  box-shadow:
    0 13px 27px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 0 2px rgba(255,200,0,.07) !important;
  filter: saturate(1.17) contrast(1.07) brightness(1.03) !important;
  transition: all .24s ease !important;
}

/* Hover */
.jp-premium-provider [class*="grid"] > *:hover img {
  transform: translateY(-4px) scale(1.035) !important;
  box-shadow:
    0 22px 42px rgba(0,0,0,.72),
    0 0 34px rgba(255,200,0,.22) !important;
}

/* Play overlay */
.jp-premium-provider [class*="grid"] > *::after {
  content: "▶";
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%) scale(.88);
  opacity: 0;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffe071, #ffc800);
  color: #080808;
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(255,200,0,.35);
  pointer-events: none;
  transition: all .22s ease;
}

.jp-premium-provider [class*="grid"] > *:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Game title */
.jp-premium-provider [class*="font-bold"],
.jp-premium-provider [class*="font-semibold"] {
  margin-top: 8px !important;
  color: #fff !important;
  font-size: 15.5px !important;
  font-weight: 950 !important;
  letter-spacing: -0.35px !important;
  line-height: 1.08 !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.45) !important;
}

/* Provider name */
.jp-premium-provider p,
.jp-premium-provider span {
  color: rgba(255,255,255,.54) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .3px !important;
}

/* Footer CTA */
.jp-provider-footer {
  display: block !important;
  margin: 2px 15px 18px !important;
  padding: 15px 14px !important;
  border-radius: 17px !important;
  background:
    linear-gradient(90deg, rgba(255,200,0,.18), rgba(255,200,0,.055)) !important;
  border: 1px solid rgba(255,200,0,.24) !important;
  color: #ffc800 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .25px !important;
  text-align: center !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30) !important;
}

.jp-provider-footer:hover {
  background:
    linear-gradient(90deg, rgba(255,200,0,.28), rgba(255,200,0,.08)) !important;
  transform: translateY(-1px) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .jp-premium-provider {
    width: calc(100vw - 6px) !important;
    max-width: calc(100vw - 6px) !important;
    border-radius: 23px !important;
    margin-top: 20px !important;
    margin-bottom: 36px !important;
  }

  .jp-premium-provider > div:first-child {
    padding: 15px 14px 12px !important;
  }

  .jp-premium-provider h1,
  .jp-premium-provider h2,
  .jp-premium-provider h3,
  .jp-premium-provider h4 {
    font-size: 21px !important;
  }

  .jp-premium-provider [class*="grid"] {
    padding: 21px 13px 17px !important;
    gap: 17px 11px !important;
  }

  .jp-premium-provider [class*="font-bold"],
  .jp-premium-provider [class*="font-semibold"] {
    font-size: 15px !important;
  }

  .jp-provider-footer {
    margin-left: 13px !important;
    margin-right: 13px !important;
    margin-bottom: 17px !important;
  }
}

/* =====================================================
   JETSPINO BAHIS ONER / LAMBA BUTTON FIX
===================================================== */

button[title="Bahis Öner"],
button[aria-label="Bahis Öner"] {
  background: radial-gradient(circle at center, #1a1a1f, #0E0F11 70%, #070708) !important;
  border: 1px solid rgba(255, 200, 0, 0.32) !important;
  color: #ffc800 !important;
  box-shadow:
    0 0 28px rgba(255, 200, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

button[title="Bahis Öner"] svg,
button[aria-label="Bahis Öner"] svg {
  color: #ffc800 !important;
  stroke: #ffc800 !important;
  fill: none !important;
}

button[title="Bahis Öner"] *,
button[aria-label="Bahis Öner"] * {
  color: #ffc800 !important;
  stroke: #ffc800 !important;
}

button[title="Bahis Öner"]:hover,
button[aria-label="Bahis Öner"]:hover {
  transform: scale(1.08) !important;
  box-shadow:
    0 0 45px rgba(255, 200, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* =====================================================
   MOBILE SAFARI SCROLL FIX
===================================================== */

html,
body {
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body {
  padding-bottom: 120px !important;
}

@media (max-width: 768px) {
  .jp-premium-provider {
    width: auto !important;
    max-width: none !important;
    margin-left: 3px !important;
    margin-right: 3px !important;
    transform: none !important;
  }

  main,
  #root,
  .app,
  .page,
  [class*="container"] {
    overflow: visible !important;
  }
}