/*
 * 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 .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: .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: #fff;
}

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

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

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

/* ── 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;
	}
}