/* ==========================================================================
   BANNER AD — component styles
   Used on index.html and calendar-only.html only. Uses the site's
   existing CSS variables, so it matches whichever theme (light/dark) is
   active automatically.
   ========================================================================== */

.banner-ad {
  position: fixed; left: 50%; bottom: 16px; z-index: 900;
  max-width: calc(100% - 24px);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.banner-ad.open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

.banner-ad-inner {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0,0,0,.3);
}

.banner-ad-label {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; font-size: .58rem; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; letter-spacing: .03em;
}

.banner-ad-link { display: block; border-radius: 16px; overflow: hidden; line-height: 0; }
.banner-ad-img { display: block; width: 100%; height: auto; max-height: 140px; object-fit: cover; }

.banner-ad-close {
  position: absolute; top: -10px; right: -10px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.7); color: #fff; font-size: .72rem;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  transition: background .2s, transform .15s;
}
.banner-ad-close:hover { background: rgba(0,0,0,.88); transform: scale(1.08); }

@media (max-width: 480px) {
  .banner-ad { bottom: 12px; }
  .banner-ad-img { max-height: 100px; }
}