/* ══════════════════════════════════════════════════════════════
   TravelDiv Ads — Shared Styles v1.0
   ══════════════════════════════════════════════════════════════ */

/* ── Base Ad Block ── */
.ad-block{
  margin:32px 0;
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  position:relative;
}
.ad-block::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, #f59e0b, #f97316, #ef4444, #ec4899, #8b5cf6, #3b82f6, #06b6d4, #10b981);
  background-size: 200% 100%;
  animation: rainbowSlide 4s linear infinite;
}
@keyframes rainbowSlide{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

/* ── Header Strip ── */
.ad-header-strip{
  padding: 20px 24px 14px;
  text-align:center;
}
.ad-title-main{
  font-size: 18px;
  font-weight: 800;
  margin: 8px 0 4px;
  color: #f0f4ff;
}
.gold-glow{
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fcd34d);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 8px rgba(251,191,36,.3));
}
.ad-subtitle{
  font-size:12px;
  color: rgba(234,240,255,.5);
  margin:0;
}

/* ── Badges ── */
.ad-badge-hot, .ad-badge-guide, .ad-badge-explore{
  display:inline-block;
  padding: 4px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
}
.ad-badge-hot{
  background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(249,115,22,.2));
  border:1px solid rgba(239,68,68,.35);
  color:#fca5a5;
}
.ad-badge-guide{
  background: linear-gradient(135deg, rgba(59,130,246,.2), rgba(99,102,241,.2));
  border:1px solid rgba(59,130,246,.35);
  color:#93c5fd;
}
.ad-badge-explore{
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(6,182,212,.2));
  border:1px solid rgba(16,185,129,.35);
  color:#6ee7b7;
}

/* ══════════════════════════════════════
   🏨 Ad 1: Booking City Cards
   ══════════════════════════════════════ */
.ad-cities-scroll{
  display:flex;
  gap:14px;
  padding: 6px 24px 24px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
  justify-content:center;
}
.ad-cities-scroll::-webkit-scrollbar{height:6px}
.ad-cities-scroll::-webkit-scrollbar-track{background:transparent}
.ad-cities-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:99px}
.ad-city-card{
  flex: 0 0 155px;
  scroll-snap-align:start;
  text-decoration:none;
  color:var(--text, #eaf0ff);
  transition:.3s;
}
.ad-city-card:hover{transform:translateY(-5px)}
.ad-city-img-wrap{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio: 4/3;
  background:#111;
}
.ad-city-img-wrap img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .4s;
}
.ad-city-card:hover img{transform:scale(1.08)}
.ad-city-rating{
  position:absolute; top:8px; right:8px;
  padding:3px 8px;
  background: rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  border:1px solid rgba(251,191,36,.4);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:#fcd34d;
}
.ad-city-overlay{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:16px 10px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 50%, transparent 100%);
  text-align:center;
}
.ad-city-overlay .city-label{
  display:block;
  font-size:16px;
  font-weight:800;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  letter-spacing:.3px;
}
.ad-city-overlay .cta{
  display:block;
  font-size:11px;
  font-weight:600;
  color:#fbbf24;
  margin-top:4px;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.ad-city-name{
  display:block;
  text-align:center;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
}

/* ══════════════════════════════════════
   🏆 Ad 2: Guides Grid
   ══════════════════════════════════════ */
.ad-guides-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  padding: 6px 24px 24px;
}
.ad-guide-card{
  text-decoration:none;
  color:var(--text, #eaf0ff);
  transition:.3s;
  display:block;
}
.ad-guide-card:hover{transform:translateY(-4px)}
.ad-guide-img-wrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:16/10;
  background:#111;
}
.ad-guide-img-wrap img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .4s, filter .4s;
  filter: brightness(.85);
}
.ad-guide-card:hover img{transform:scale(1.08); filter:brightness(1)}
.ad-guide-badge-pos{
  position:absolute; top:6px; left:6px;
  width:28px; height:28px;
  background: rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  border-radius:8px;
  display:grid; place-items:center;
  font-size:14px;
}
.ad-guide-label{
  display:block;
  text-align:center;
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  color:rgba(234,240,255,.8);
  transition:.2s;
}
.ad-guide-card:hover .ad-guide-label{color:#fbbf24}

/* ══════════════════════════════════════
   ✨ Ad 3: Tag Buttons
   ══════════════════════════════════════ */
.ad-tags-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding: 6px 24px 24px;
  justify-content:center;
}
.ad-tag{
  padding:9px 16px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  color:var(--text, #eaf0ff);
}
.ad-tag::before{
  content:'';
  position:absolute; inset:0;
  border-radius:999px;
  opacity:0;
  transition:.3s;
  background: radial-gradient(circle at center, rgba(255,255,255,.12), transparent 70%);
}
.ad-tag:hover::before{opacity:1}
.ad-tag:hover{transform:translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3)}
.ad-tag.at{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); color:#fca5a5}
.ad-tag.at:hover{background:rgba(239,68,68,.22); border-color:rgba(239,68,68,.5)}
.ad-tag.ch{background:rgba(239,68,68,.08); border-color:rgba(251,191,36,.3); color:#fcd34d}
.ad-tag.ch:hover{background:rgba(251,191,36,.18); border-color:rgba(251,191,36,.5)}
.ad-tag.de{background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.25); color:#fde68a}
.ad-tag.de:hover{background:rgba(251,191,36,.2); border-color:rgba(251,191,36,.45)}
.ad-tag.fr{background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.3); color:#93c5fd}
.ad-tag.fr:hover{background:rgba(59,130,246,.22); border-color:rgba(59,130,246,.5)}
.ad-tag.nl{background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.3); color:#fdba74}
.ad-tag.nl:hover{background:rgba(249,115,22,.22); border-color:rgba(249,115,22,.5)}
.ad-tag.gb{background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.3); color:#a5b4fc}
.ad-tag.gb:hover{background:rgba(99,102,241,.22); border-color:rgba(99,102,241,.5)}
.ad-tag.all{
  background: linear-gradient(135deg, rgba(242,177,75,.15), rgba(125,211,252,.15));
  border-color: rgba(242,177,75,.35);
  color:#fbbf24;
  font-weight:800;
}
.ad-tag.all:hover{
  background: linear-gradient(135deg, rgba(242,177,75,.25), rgba(125,211,252,.25));
  border-color: rgba(242,177,75,.55);
}

/* ── Responsive ── */
@media(max-width:600px){
  .ad-header-strip{padding:16px 16px 10px}
  .ad-title-main{font-size:16px}
  .ad-cities-scroll{padding:6px 16px 20px; gap:10px}
  .ad-city-card{flex:0 0 130px}
  .ad-guides-grid{grid-template-columns: repeat(3, 1fr); gap:8px; padding:6px 16px 20px}
  .ad-tags-cloud{padding:6px 16px 20px; gap:6px}
  .ad-tag{font-size:11px; padding:7px 12px}
}
@media(max-width:400px){
  .ad-guides-grid{grid-template-columns: repeat(2, 1fr)}
}