/*
 * City Swiper Widget — Stylesheet
 * File: city-swiper-widget/style.css
 * ════════════════════════════════════
 * Customize the tag colors here.
 * Card width/height are also controlled
 * by Elementor panel sliders (they output
 * inline styles that override these defaults).
 */

/* ── Section wrapper ── */
.csw-section {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* ── Swiper override: allow overflow for the track ── */
.csw-section .swiper {
  overflow: visible;
  width: 100%;
}

/* ── Each slide ── */
.csw-section .swiper-slide {
  width: 300px !important;   /* default — overridden by Elementor slider */
  height: auto;
  flex-shrink: 0;
}

/* ── Card ── */
.csw-card {
  position: relative;
  width: 300px;
  height: 480px;             /* default — overridden by Elementor slider */
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.csw-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.csw-card:hover img {
  transform: scale(1.04);
}

/* ── City tag ── */
.csw-tag {
  position: absolute;
  left: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  white-space: nowrap;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* ── Position variants ── */
.csw-tag--top    { top: 16px; }
.csw-tag--bottom { bottom: 16px; }

/* ══════════════════════════════
   TAG COLOR VARIANTS
   Edit these to match your brand
   ══════════════════════════════ */

/* Pink (default brand color — e.g. #c8566a or hot pink) */
.csw-tag--pink {
  background-color: #c8566a;
  color: #ffffff;
}

/* Green */
.csw-tag--green {
  background-color: #4caf84;
  color: #ffffff;
}

/* Light / Beige */
.csw-tag--light {
  background-color: #f5ede4;
  color: #5a3e30;
}

/* Dark */
.csw-tag--dark {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* ── Disable default Swiper click transitions when autoplay ── */
.csw-section .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .csw-card {
    width: 220px !important;
    height: 340px !important;
  }
  .csw-section .swiper-slide {
    width: 220px !important;
  }
}

@media (max-width: 480px) {
  .csw-card {
    width: 180px !important;
    height: 280px !important;
  }
  .csw-section .swiper-slide {
    width: 180px !important;
  }
}