:root {
  --primary-color: #4f46e5;
  --secondary-color: #06b6d4;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --dark-color: #1f2937;
  --light-bg: #f8fafc;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.popup-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  display: none;
  max-width: 300px;
  animation: fadeIn 0.5s ease-out;
  width: 90%;
}

.popup-banner.show {
  display: block;
}

.popup-banner .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.popup-banner .close-btn:hover {
  color: #000;
}

.popup-banner h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.popup-banner p {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #666;
}

.popup-banner .banner-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.popup-banner img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 10px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
}

.popup-overlay.show {
  display: block;
}

/* Wide Banner Ad */
.wide-banner-ad {
  width: 100%;
  background: white;
  overflow: hidden;
}

.wide-banner-ad img {
  width: 100%;
  height: auto;
  display: block;
}

/* Sidebar Ads */
.sidebar-ads {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  z-index: 100;
}

.sidebar-ad {
  width: 100%;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.sidebar-ad img {
  width: 100%;
  height: auto;
  display: block;
}

.sidebar-ads.left {
  left: 10px;
}

.sidebar-ads.right {
  right: 10px;
}

/* Hide sidebar ads on smaller screens */
@media (max-width: 1400px) {
  .sidebar-ads {
    display: none;
  }
}

/* Hover effects */
.wide-banner-ad a:hover,
.sidebar-ad a:hover,
.popup-banner a:hover {
  opacity: 0.9;
}