/* Modern Modal Styles - Unified Design */

/* Custom Scrollbar for All Modals and Scrollable Areas */
.modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
[class*="modal"]::-webkit-scrollbar,
[class*="content"]::-webkit-scrollbar,
[class*="panel"]::-webkit-scrollbar,
[class*="results"]::-webkit-scrollbar,
[class*="body"]::-webkit-scrollbar,
[style*="overflow-y: auto"]::-webkit-scrollbar,
[style*="overflow-y: scroll"]::-webkit-scrollbar {
  width: 8px;
}

.modal::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
[class*="modal"]::-webkit-scrollbar-track,
[class*="content"]::-webkit-scrollbar-track,
[class*="panel"]::-webkit-scrollbar-track,
[class*="results"]::-webkit-scrollbar-track,
[class*="body"]::-webkit-scrollbar-track,
[style*="overflow-y: auto"]::-webkit-scrollbar-track,
[style*="overflow-y: scroll"]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.modal::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
[class*="modal"]::-webkit-scrollbar-thumb,
[class*="content"]::-webkit-scrollbar-thumb,
[class*="panel"]::-webkit-scrollbar-thumb,
[class*="results"]::-webkit-scrollbar-thumb,
[class*="body"]::-webkit-scrollbar-thumb,
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb,
[style*="overflow-y: scroll"]::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.5);
  border-radius: 4px;
  transition: background 0.2s;
}

.modal::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
[class*="modal"]::-webkit-scrollbar-thumb:hover,
[class*="content"]::-webkit-scrollbar-thumb:hover,
[class*="panel"]::-webkit-scrollbar-thumb:hover,
[class*="results"]::-webkit-scrollbar-thumb:hover,
[class*="body"]::-webkit-scrollbar-thumb:hover,
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover,
[style*="overflow-y: scroll"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.8);
}

/* Firefox Scrollbar */
.modal,
.modal-content,
.modal-body,
[class*="modal"],
[class*="content"],
[class*="panel"],
[class*="results"],
[class*="body"],
[style*="overflow-y: auto"],
[style*="overflow-y: scroll"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.5) rgba(0, 0, 0, 0.3);
}

/* Specific scroll areas */
.itemShop-content::-webkit-scrollbar,
.inventory-content::-webkit-scrollbar,
.costume-modal-body::-webkit-scrollbar,
.costume-left-panel::-webkit-scrollbar,
.costume-right-panel::-webkit-scrollbar,
.costume-modal-results::-webkit-scrollbar,
.ss-body::-webkit-scrollbar,
.item-shop-content::-webkit-scrollbar,
.mob-database-container::-webkit-scrollbar {
  width: 8px;
}

.itemShop-content::-webkit-scrollbar-track,
.inventory-content::-webkit-scrollbar-track,
.costume-modal-body::-webkit-scrollbar-track,
.costume-left-panel::-webkit-scrollbar-track,
.costume-right-panel::-webkit-scrollbar-track,
.costume-modal-results::-webkit-scrollbar-track,
.ss-body::-webkit-scrollbar-track,
.item-shop-content::-webkit-scrollbar-track,
.mob-database-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.itemShop-content::-webkit-scrollbar-thumb,
.inventory-content::-webkit-scrollbar-thumb,
.costume-modal-body::-webkit-scrollbar-thumb,
.costume-left-panel::-webkit-scrollbar-thumb,
.costume-right-panel::-webkit-scrollbar-thumb,
.costume-modal-results::-webkit-scrollbar-thumb,
.ss-body::-webkit-scrollbar-thumb,
.item-shop-content::-webkit-scrollbar-thumb,
.mob-database-container::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.5);
  border-radius: 4px;
  transition: background 0.2s;
}

.itemShop-content::-webkit-scrollbar-thumb:hover,
.inventory-content::-webkit-scrollbar-thumb:hover,
.costume-modal-body::-webkit-scrollbar-thumb:hover,
.costume-left-panel::-webkit-scrollbar-thumb:hover,
.costume-right-panel::-webkit-scrollbar-thumb:hover,
.costume-modal-results::-webkit-scrollbar-thumb:hover,
.ss-body::-webkit-scrollbar-thumb:hover,
.item-shop-content::-webkit-scrollbar-thumb:hover,
.mob-database-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.8);
}

.itemShop-content,
.inventory-content,
.costume-modal-body,
.costume-left-panel,
.costume-right-panel,
.costume-modal-results,
.ss-body,
.item-shop-content,
.mob-database-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.5) rgba(0, 0, 0, 0.3);
}

/* ============================================
   TÜM CLOSE BUTONLARI - BASİT VE TUTARLI
   ============================================ */

/* Tüm close butonları için temel stil */
button.btn-close,
button[class*="close"],
button[aria-label*="Close"],
button[aria-label*="Kapat"],
button.close,
.modal-close-btn,
.rent-ad-modal-close,
.item-shop-close,
.chest-modal-close,
.mob-drop-close,
.itemShop-btn-close,
.inventory-btn-close,
.costume-modal-close,
.ss-close,
.mf-close,
.popup-close-btn,
.inventory-details-close,
#itemModalClose,
#chestModalClose,
#mobDropModalClose,
#mobDatabaseModalClose,
[class*="close-btn"],
[class*="btn-close"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  opacity: 0.8 !important;
  position: relative !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  color: transparent !important;
}

/* Hover state */
button.btn-close:hover,
button[class*="close"]:hover,
.modal-close-btn:hover,
.rent-ad-modal-close:hover,
.item-shop-close:hover,
.chest-modal-close:hover,
.mob-drop-close:hover,
.itemShop-btn-close:hover,
.costume-modal-close:hover,
.ss-close:hover,
.mf-close:hover,
.popup-close-btn:hover,
.inventory-details-close:hover,
#itemModalClose:hover,
#chestModalClose:hover,
#mobDropModalClose:hover,
#mobDatabaseModalClose:hover {
  opacity: 1 !important;
}

/* Tüm içeriği gizle (text, icons, spans, svg) */
button.btn-close > *,
button[class*="close"] > *,
.modal-close-btn > *,
.rent-ad-modal-close > *,
.item-shop-close > *,
.chest-modal-close > *,
.mob-drop-close > *,
.itemShop-btn-close > *,
.costume-modal-close > *,
.ss-close > *,
.mf-close > *,
.popup-close-btn > *,
.inventory-details-close > *,
#itemModalClose > *,
#chestModalClose > *,
#mobDropModalClose > *,
#mobDatabaseModalClose > * {
  display: none !important;
}

/* ::before gizle */
button.btn-close::before,
button[class*="close"]::before,
.modal-close-btn::before,
.rent-ad-modal-close::before,
.item-shop-close::before,
.chest-modal-close::before,
.mob-drop-close::before,
.itemShop-btn-close::before,
.costume-modal-close::before,
.ss-close::before,
.mf-close::before,
.popup-close-btn::before,
.inventory-details-close::before,
#itemModalClose::before,
#chestModalClose::before,
#mobDropModalClose::before,
#mobDatabaseModalClose::before {
  display: none !important;
  content: none !important;
}

/* ::after ile X göster - TÜM BUTONLAR İÇİN AYNI */
button.btn-close::after,
button[class*="close"]::after,
.modal-close-btn::after,
.rent-ad-modal-close::after,
.item-shop-close::after,
.chest-modal-close::after,
.mob-drop-close::after,
.itemShop-btn-close::after,
.costume-modal-close::after,
.ss-close::after,
.mf-close::after,
.popup-close-btn::after,
.inventory-details-close::after,
#itemModalClose::after,
#chestModalClose::after,
#mobDropModalClose::after,
#mobDatabaseModalClose::after,
[class*="close-btn"]::after {
  content: '×' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  font-family: Arial, sans-serif !important;
  pointer-events: none !important;
  color: #ffd700 !important;
  text-indent: 0 !important;
  z-index: 1 !important;
}

/* Özel renkler (sadece ::after için) */
.costume-modal-close::after {
  color: #ef4444 !important;
}

.inventory-btn-close::after {
  color: #4caf50 !important;
}

.popup-close-btn::after,
.inventory-details-close::after {
  color: #fff !important;
}

/* Item Shop Modal Close Button */
#itemModalClose {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

/* Chest Modal Close Button */
#chestModalClose {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

/* Mob Drop Modal Close Button */
#mobDropModalClose {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

/* Rent Ad Modal Close Button */
.rent-ad-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

/* Auth Modal Close Button */
#authModalClose {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

/* General Modal Styling */
.modal,
[class*="modal"],
[id*="Modal"] {
  backdrop-filter: blur(5px);
}

.modal-content {
  border: 1px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-header {
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-footer {
  border-top: 1px solid rgba(255, 215, 0, 0.2);
}