/**
 * Mobil akıllı menü — masaüstü header.css smart panel stilleri (body.mobile-site)
 * header.js initSmartPanel + footer.js sp-button köprüsü ile birlikte kullanılır.
 */

body.mobile-site .hdr-smart-panel-holder-arrow-bc {
  display: none !important;
}

/*
 * Smart toggle butonu: bc-mobile-index.css `.count-odd-animation{position:absolute}`
 * butonu akıştan çıkarıp .smartPanel-bc'yi çökertiyor ve butonu tıklanamaz/yanlış
 * konumda bırakıyor. Masaüstü header.css bunu düzeltiyor ama mobilde yüklenmiyor.
 * Sarmalayıcıyı relative yap, butonu akışa geri al (badge ::after buton üstünde kalsın).
 */
/*
 * Akıllı menü ikonu sağ kenarda sabit: flex overflow + body overflow-x:hidden
 * yüzünden ekran dışına kaçıp yarım görünmesin. Konum mobile-bc-header.css'te.
 */
body.mobile-site .hdr-main-content-bc .smartPanel-bc .hdr-toggle-button-bc.count-odd-animation,
body.mobile-site .hdr-main-content-bc .smartPanel-bc .hdr-toggle-button-bc.bc-i-vertical-toggle {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

/*
 * KRİTİK: Panel açıkken bile görünmüyordu. `:not(.is-open){opacity:0!important;
 * visibility:hidden!important}` + `transition: ... visibility 0.16s` kombinasyonu,
 * .is-open eklenince transition'ı düzgün tetiklemeyip paneli opacity:0 / hidden'da
 * bırakıyordu. Transition'ı kaldır ve açık durumu !important ile zorla.
 */
body.mobile-site .hdr-smart-panel-fixed {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mobile-site .hdr-smart-panel-fixed.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Üç nokta ikonu (BetConstruct) */
body.mobile-site .hdr-toggle-button-bc.bc-i-vertical-toggle::before {
  content: "\ea1d" !important;
  font-family: BetConstruct-Icons !important;
  font-size: 18px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body.mobile-site .hdr-toggle-button-bc.bc-i-vertical-toggle.is-open::before {
  transform: rotate(90deg) !important;
}

body.mobile-site .hdr-smart-panel-fixed::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #850f83;
}

body.mobile-site .hdr-smart-panel-fixed {
  width: 50px !important;
  z-index: 10060 !important;
  height: auto !important;
  max-height: 360px !important;
  overflow: hidden !important;
  transform: none !important;
}

body.mobile-site .hdr-smart-panel-fixed .hdr-smart-panel-holder-bc {
  position: relative;
  width: 50px !important;
  min-height: 0 !important;
  max-height: 320px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 !important;
  background: linear-gradient(316deg, #818181 0%, rgb(36, 0, 121) 50%, #850f83 100%) !important;
  border-radius: 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), 0 0 7px 2px #850f83 !important;
}

@keyframes sp-btn-in-mobile {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

body.mobile-site .hdr-smart-panel-fixed.is-open .hdr-smart-panel-holder-bc .sp-button-bc {
  animation: sp-btn-in-mobile 0.2s ease forwards;
}

body.mobile-site .hdr-smart-panel-fixed .hdr-smart-panel-holder-bc .sp-button-bc {
  position: relative;
  border: none;
  width: 50px !important;
  height: 44px !important;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

body.mobile-site .hdr-smart-panel-fixed .hdr-smart-panel-holder-bc .sp-button-bc + .sp-button-bc {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.mobile-site .hdr-smart-panel-fixed .hdr-smart-panel-holder-bc .sp-button-bc:hover,
body.mobile-site .hdr-smart-panel-fixed .hdr-smart-panel-holder-bc .sp-button-bc.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  text-decoration: none;
}

body.mobile-site .hdr-smart-panel-fixed .hdr-smart-panel-holder-bc .sp-button-bc:active {
  opacity: 0.8;
}

body.mobile-site .sp-tooltip {
  display: none;
}

body.mobile-site .hdr-smart-panel-fixed .hdr-smart-panel-holder-bc .sp-button-icon-bc {
  font-size: 15px !important;
  line-height: 1;
}

body.mobile-site .sp-button-icon-bc.bc-i-betslip {
  color: #850f83 !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

body.mobile-site .sp-badge {
  position: absolute;
  top: 5px;
  right: 7px;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e8a020;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 3px;
  border: 1px solid rgba(60, 20, 100, 0.85);
}

body.mobile-site .sp-badge[data-badge=""] {
  display: none;
}

body.mobile-site .sp-badge::before {
  content: attr(data-badge);
}