/* POPUP SPONSOR COMPACT — TIDAK MENGUBAH SLIDER */

.sponsor-modal {
  padding: 16px !important;
  background: rgba(0, 5, 16, .82) !important;
  backdrop-filter: blur(7px) !important;
}

.sponsor-modal-card {
  width: min(600px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;

  padding: 22px !important;
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 18px !important;
  align-items: center !important;

  border: 1px solid #35cfff !important;
  border-radius: 22px !important;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(53, 207, 255, .17),
      transparent 34%
    ),
    linear-gradient(145deg, #102746, #07152c) !important;

  box-shadow:
    0 28px 75px rgba(0, 0, 0, .62),
    0 0 26px rgba(53, 207, 255, .14) !important;
}

.sponsor-modal-close {
  top: 12px !important;
  right: 12px !important;
  width: 38px !important;
  height: 38px !important;
  z-index: 4 !important;

  border: 1px solid #35628e !important;
  border-radius: 11px !important;
  background: #102744 !important;
  color: #fff !important;
}

/* Logo di sebelah kiri */
.sponsor-modal-logo {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 110px !important;
  height: 110px !important;
  margin: 0 !important;
  padding: 8px !important;

  border: 1px solid #2fa9de !important;
  border-radius: 17px !important;
  background: #061328 !important;
}

.sponsor-modal-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Nama sponsor di sebelah kanan */
.sponsor-modal h2 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  margin: 0 !important;
  padding-right: 42px !important;

  color: #38ddff !important;
  text-align: left !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
}

.sponsor-modal h2::before {
  content: "OFFICIAL SPONSOR";
  display: block;
  margin-bottom: 7px;

  color: #ffd166;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
}

/* Informasi di bawah logo dan nama */
.sponsor-modal-info {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

  margin-top: 19px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

.sponsor-info-row {
  min-width: 0 !important;
  padding: 13px 14px !important;

  border: 1px solid rgba(57, 220, 255, .20) !important;
  border-radius: 13px !important;
  background: rgba(7, 18, 37, .78) !important;
}

/* Deskripsi dibuat selebar popup */
.sponsor-info-row:nth-child(3) {
  grid-column: 1 / -1 !important;
}

/* Sembunyikan kolom yang benar-benar kosong */
.sponsor-info-row:has(.sponsor-info-value:empty) {
  display: none !important;
}

.sponsor-info-label {
  display: block !important;
  margin-bottom: 6px !important;

  color: #ffd166 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .05em !important;
}

.sponsor-info-value {
  color: #eaf3ff !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere !important;
}

/* Tombol di bawah */
.sponsor-modal-actions {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;

  margin-top: 16px !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 9px !important;
}

.sponsor-action {
  min-height: 42px !important;
  padding: 0 16px !important;

  border-radius: 11px !important;
  background: #45e3a1 !important;
  color: #06101e !important;

  font-size: 11px !important;
  font-weight: 950 !important;
}

.sponsor-action.location {
  background: #39dcff !important;
}

@media (max-width: 560px) {
  .sponsor-modal-card {
    padding: 18px !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 13px !important;
  }

  .sponsor-modal-logo {
    width: 82px !important;
    height: 82px !important;
    padding: 6px !important;
  }

  .sponsor-modal h2 {
    padding-right: 36px !important;
    font-size: 19px !important;
  }

  .sponsor-modal h2::before {
    font-size: 9px !important;
  }

  .sponsor-modal-info {
    grid-template-columns: 1fr !important;
  }

  .sponsor-info-row,
  .sponsor-info-row:nth-child(3) {
    grid-column: 1 !important;
  }

  .sponsor-modal-actions {
    justify-content: center !important;
  }
}