/* =====================================================
   JETSPINO CLEAN FINAL SYSTEM
   SAFE / RESPONSIVE / NEXT.JS FRIENDLY
===================================================== */

:root {
  --jp-bg: #0e0f11;
  --jp-bg2: #0a0a0b;

  --jp-gold: #ffc800;
  --jp-gold-hover: #e0b100;

  --jp-text: #d1d5db;

  --jp-border:
    rgba(255, 200, 0, 0.15);
}


/* =====================================================
   CHAT WINDOW
===================================================== */

.fixed.bottom-0 {
  background:
    radial-gradient(
      circle at top right,
      #1a1a1f 0%,
      var(--jp-bg) 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;
}


/* =====================================================
   CHAT HEADER
   SADECE CHAT İÇİNDE
===================================================== */

.fixed.bottom-0
.bg-gradient-to-r {
  background:
    var(--jp-bg)
    !important;

  border-bottom:
    1px solid
    rgba(255, 200, 0, 0.15)
    !important;
}


.fixed.bottom-0
.bg-gradient-to-r h3 {
  color:
    #ffffff
    !important;
}


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


/* HEADER BUTTON */

.fixed.bottom-0
.bg-gradient-to-r button {
  background:
    rgba(255, 255, 255, 0.05)
    !important;

  color:
    #ffffff
    !important;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease
    !important;
}


.fixed.bottom-0
.bg-gradient-to-r button:hover {
  background:
    rgba(255, 200, 0, 0.15)
    !important;

  color:
    var(--jp-gold)
    !important;
}


/* =====================================================
   CHAT PROMO BANNER
===================================================== */

.fixed.bottom-0
.w-full.bg-gray-50 {
  background:
    var(--jp-bg)
    !important;

  border-bottom:
    1px solid
    rgba(255, 200, 0, 0.08)
    !important;
}


/* =====================================================
   CHAT BODY
===================================================== */

.fixed.bottom-0
.flex-1.p-6.flex {
  background:
    linear-gradient(
      180deg,
      var(--jp-bg) 0%,
      var(--jp-bg2) 100%
    )
    !important;
}


.fixed.bottom-0
.flex-1 h4 {
  color:
    #ffffff
    !important;
}


.fixed.bottom-0
.flex-1 p {
  color:
    var(--jp-text)
    !important;
}


/* =====================================================
   CHAT PRIMARY BUTTON
===================================================== */

.fixed.bottom-0
button.bg-green-600 {
  background:
    var(--jp-gold)
    !important;

  color:
    #000000
    !important;

  font-weight:
    600
    !important;

  border-radius:
    10px
    !important;

  box-shadow:
    0 10px 30px
    rgba(255, 200, 0, 0.15)
    !important;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease
    !important;
}


.fixed.bottom-0
button.bg-green-600:hover {
  background:
    var(--jp-gold-hover)
    !important;

  transform:
    translateY(-1px)
    !important;
}


/* =====================================================
   CHAT INPUT
   ARTIK TÜM SİTENİN INPUTLARINI ETKİLEMİYOR
===================================================== */

.fixed.bottom-0 input {
  background:
    #111214
    !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.08)
    !important;

  color:
    #ffffff
    !important;
}


.fixed.bottom-0 input::placeholder {
  color:
    rgba(255, 255, 255, 0.45)
    !important;
}


.fixed.bottom-0 input:focus {
  border-color:
    var(--jp-gold)
    !important;

  box-shadow:
    0 0 0 3px
    rgba(255, 200, 0, 0.15)
    !important;

  outline:
    none
    !important;
}


/* =====================================================
   CHAT RED ELEMENT FIX
   ARTIK GLOBAL DEĞİL
===================================================== */

.fixed.bottom-0
.bg-red-500,

.fixed.bottom-0
.bg-red-600,

.fixed.bottom-0
.bg-red-400 {
  background:
    rgba(255, 200, 0, 0.08)
    !important;

  border:
    1px solid
    rgba(255, 200, 0, 0.12)
    !important;

  color:
    #ffffff
    !important;
}


/* =====================================================
   FLOATING CHAT BUTTON
===================================================== */

.fixed.bottom-20 button {
  background:
    radial-gradient(
      circle at center,
      #1a1a1f,
      var(--jp-bg) 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:
    transform 0.2s ease,
    box-shadow 0.2s ease
    !important;
}


.fixed.bottom-20
button svg {
  color:
    var(--jp-gold)
    !important;

  stroke:
    var(--jp-gold)
    !important;
}


.fixed.bottom-20
button:hover {
  transform:
    scale(1.08)
    !important;

  box-shadow:
    0 0 55px
    rgba(255, 200, 0, 0.28)
    !important;
}


.fixed.bottom-20
span {
  background:
    rgba(0, 0, 0, 0.90)
    !important;

  border:
    1px solid
    rgba(255, 200, 0, 0.25)
    !important;

  color:
    var(--jp-gold)
    !important;
}


/* =====================================================
   BAHİS ÖNER BUTTON
===================================================== */

button[title="Bahis Öner"],
button[aria-label="Bahis Öner"] {
  background:
    radial-gradient(
      circle at center,
      #1a1a1f,
      var(--jp-bg) 70%,
      #070708
    )
    !important;

  border:
    1px solid
    rgba(255, 200, 0, 0.32)
    !important;

  color:
    var(--jp-gold)
    !important;

  box-shadow:
    0 0 28px
    rgba(255, 200, 0, 0.18),
    inset 0 1px 0
    rgba(255, 255, 255, 0.06)
    !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease
    !important;
}


button[title="Bahis Öner"] svg,
button[aria-label="Bahis Öner"] svg {
  color:
    var(--jp-gold)
    !important;

  stroke:
    var(--jp-gold)
    !important;

  fill:
    none
    !important;
}


button[title="Bahis Öner"] *,
button[aria-label="Bahis Öner"] * {
  color:
    var(--jp-gold)
    !important;

  stroke:
    var(--jp-gold)
    !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, 0.08)
    !important;
}


/* =====================================================
   PREMIUM PROVIDER SECTION
===================================================== */

.jp-premium-provider {
  box-sizing:
    border-box
    !important;

  width:
    calc(100% - 12px)
    !important;

  max-width:
    1600px
    !important;

  margin:
    22px auto 38px
    !important;

  padding:
    0
    !important;

  position:
    relative
    !important;

  overflow:
    hidden
    !important;

  border-radius:
    24px
    !important;

  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(255, 200, 0, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(255, 200, 0, 0.08),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(24, 21, 12, 0.96),
      rgba(7, 8, 10, 0.98)
    )
    !important;

  border:
    1px solid
    rgba(255, 200, 0, 0.24)
    !important;

  box-shadow:
    0 22px 58px
    rgba(0, 0, 0, 0.62),
    inset 0 1px 0
    rgba(255, 255, 255, 0.08)
    !important;
}


/* PROVIDER LIGHT EFFECT */

.jp-premium-provider::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 42%,
      transparent 65%
    );

  opacity:
    0.28;

  pointer-events:
    none;

  z-index:
    1;
}


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


/* =====================================================
   PROVIDER 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, 0.16)
    !important;
}


.jp-premium-provider h1,
.jp-premium-provider h2,
.jp-premium-provider h3,
.jp-premium-provider h4 {
  color:
    #ffffff
    !important;

  font-size:
    22px
    !important;

  font-weight:
    900
    !important;

  letter-spacing:
    -0.55px
    !important;

  text-shadow:
    0 0 22px
    rgba(255, 200, 0, 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, 0.55)
    !important;
}


/* =====================================================
   PROVIDER LINKS / BUTTONS
===================================================== */

.jp-premium-provider a,
.jp-premium-provider button {
  font-weight:
    800
    !important;
}


/* =====================================================
   PROVIDER GRID
===================================================== */

.jp-premium-provider
[class~="grid"] {
  padding:
    22px 15px 18px
    !important;

  gap:
    18px 12px
    !important;

  position:
    relative
    !important;

  z-index:
    2
    !important;
}


/*
 * Tailwind grid-cols-* kullanılan
 * yapılar için alternatif.
 */

.jp-premium-provider
[class*="grid-cols-"] {
  padding:
    22px 15px 18px
    !important;

  gap:
    18px 12px
    !important;

  position:
    relative
    !important;

  z-index:
    2
    !important;
}


.jp-premium-provider
[class~="grid"]
> *,

.jp-premium-provider
[class*="grid-cols-"]
> * {
  position:
    relative
    !important;

  border-radius:
    17px
    !important;
}


/* =====================================================
   GAME IMAGES
===================================================== */

.jp-premium-provider img {
  display:
    block
    !important;

  width:
    100%
    !important;

  max-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, 0.58),
    0 0 0 1px
    rgba(255, 255, 255, 0.12),
    0 0 0 2px
    rgba(255, 200, 0, 0.07)
    !important;

  filter:
    saturate(1.17)
    contrast(1.07)
    brightness(1.03)
    !important;

  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease
    !important;
}


/* =====================================================
   GAME HOVER
===================================================== */

@media (hover: hover) {

  .jp-premium-provider
  [class~="grid"]
  > *:hover img,

  .jp-premium-provider
  [class*="grid-cols-"]
  > *:hover img {

    transform:
      translateY(-4px)
      scale(1.035)
      !important;

    box-shadow:
      0 22px 42px
      rgba(0, 0, 0, 0.72),
      0 0 34px
      rgba(255, 200, 0, 0.22)
      !important;
  }
}


/* =====================================================
   PLAY OVERLAY
===================================================== */

@media (hover: hover) {

  .jp-premium-provider
  [class~="grid"]
  > *::after,

  .jp-premium-provider
  [class*="grid-cols-"]
  > *::after {

    content:
      "▶";

    position:
      absolute;

    left:
      50%;

    top:
      35%;

    transform:
      translate(-50%, -50%)
      scale(0.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:
      900;

    box-shadow:
      0 14px 30px
      rgba(255, 200, 0, 0.35);

    pointer-events:
      none;

    transition:
      opacity 0.22s ease,
      transform 0.22s ease;
  }


  .jp-premium-provider
  [class~="grid"]
  > *:hover::after,

  .jp-premium-provider
  [class*="grid-cols-"]
  > *: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:
    #ffffff
    !important;

  font-size:
    15.5px
    !important;

  font-weight:
    900
    !important;

  letter-spacing:
    -0.35px
    !important;

  line-height:
    1.15
    !important;

  text-shadow:
    0 3px 12px
    rgba(0, 0, 0, 0.45)
    !important;
}


/* =====================================================
   PROVIDER SECONDARY TEXT
===================================================== */

.jp-premium-provider p {
  color:
    rgba(255, 255, 255, 0.58)
    !important;

  font-size:
    12px
    !important;

  font-weight:
    700
    !important;

  letter-spacing:
    0.3px
    !important;
}


/* =====================================================
   PROVIDER 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, 0.18),
      rgba(255, 200, 0, 0.055)
    )
    !important;

  border:
    1px solid
    rgba(255, 200, 0, 0.24)
    !important;

  color:
    var(--jp-gold)
    !important;

  font-size:
    14px
    !important;

  font-weight:
    900
    !important;

  letter-spacing:
    0.25px
    !important;

  text-align:
    center
    !important;

  text-decoration:
    none
    !important;

  position:
    relative
    !important;

  z-index:
    3
    !important;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, 0.30)
    !important;

  transition:
    background 0.2s ease,
    transform 0.2s ease
    !important;
}


.jp-provider-footer:hover {
  background:
    linear-gradient(
      90deg,
      rgba(255, 200, 0, 0.28),
      rgba(255, 200, 0, 0.08)
    )
    !important;

  transform:
    translateY(-1px)
    !important;
}


/* =====================================================
   MOBILE CHAT
===================================================== */

@media (max-width: 768px) {

  .fixed.bottom-0 {
    width:
      100%
      !important;

    max-width:
      100%
      !important;

    height:
      100dvh
      !important;

    right:
      0
      !important;

    left:
      0
      !important;

    bottom:
      0
      !important;

    border-radius:
      0
      !important;
  }
}


/* =====================================================
   MOBILE PROVIDER
===================================================== */

@media (max-width: 768px) {

  .jp-premium-provider {
    width:
      calc(100% - 8px)
      !important;

    max-width:
      calc(100% - 8px)
      !important;

    margin:
      20px auto 36px
      !important;

    transform:
      none
      !important;

    border-radius:
      22px
      !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"],

  .jp-premium-provider
  [class*="grid-cols-"] {
    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:
      2px 13px 17px
      !important;
  }
}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 390px) {

  .jp-premium-provider {
    width:
      calc(100% - 6px)
      !important;

    border-radius:
      20px
      !important;
  }


  .jp-premium-provider
  [class~="grid"],

  .jp-premium-provider
  [class*="grid-cols-"] {
    padding-left:
      10px
      !important;

    padding-right:
      10px
      !important;

    gap:
      14px 9px
      !important;
  }


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