/* ==========================================================================
   The Capital — Rooms & Apartments Slider
   PHP renders the Swiper-ready HTML via [tc_rooms_slider] shortcode.
   No Elementor widget classes needed — all selectors are on our own HTML.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Outer Elementor section
   ------------------------------------------------------------------ */
.tc-rooms-section {
	background: #000;
	overflow: hidden;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	position: relative;
}

.tc-rooms-wrapper > .elementor-element-populated {
	padding: 0 !important;
}

/* Strip shortcode widget margin; allow overflow so absolute-positioned
   inner controls (arrows, pagination) are not clipped */
.tc-rooms-section .elementor-widget-shortcode .elementor-widget-container {
	margin-bottom: 0 !important;
	overflow: visible !important;
}

/* ------------------------------------------------------------------
   2. Header row  (title left, tab buttons right)
   ------------------------------------------------------------------ */

.tc-rooms-header {
	padding-bottom: 100px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

/* Remove Elementor's default 120px side padding from the header section
   and replace it with a centred 1200px container approach, matching footer */
.tc-rooms-header > .elementor-container,
.tc-rooms-header > .elementor-row {
	max-width: 1400px !important;
	margin-left: auto  !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* Fallback for Elementor 3.x flex containers */
.tc-rooms-header .elementor-container {
	max-width: 1400px !important;
	width: 100% !important;
	margin-left: auto  !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

.tc-rooms-header .elementor-container,
.tc-rooms-header .elementor-row {
	align-items: center;
}

.tc-rooms-title-col .elementor-heading-title {
	font-family: 'Gilda Display', serif !important;
	font-size: 55px !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: #fff !important;
	margin: 0 !important;
}

/* ------------------------------------------------------------------
   3. Tab buttons  (HTML widget in header right col)
   ------------------------------------------------------------------ */
.tc-rooms-tabs {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.tc-tab-divider {
	color: rgba(255, 255, 255, 0.2);
	margin: 0 18px;
	font-size: 16px;
	user-select: none;
}

.tc-tab-btn {
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	padding: 4px 0 0px;
	font-family: 'DM Sans', sans-serif;
	font-size: 21px;
	font-weight: 600;
	border-radius: 0;
	color: rgba(255, 255, 255, 1);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.tc-tab-btn:hover {
	background-color: transparent !important;
	border-bottom-color: var(--tc-gold, #EBA318);
}

.tc-tab-btn.tc-tab-active {
	color: #fff;
	border-bottom-color: var(--tc-gold, #EBA318);
}

/* ------------------------------------------------------------------
   4. Stage  — positioning context for arrows + pagination
   ------------------------------------------------------------------ */
.tc-rooms-stage {
	position: relative;
	width: 100%;
}

.tc-rooms-sliders {
	padding-bottom: 110px !important;
}

/* ------------------------------------------------------------------
   5. Outer Swipers
   ------------------------------------------------------------------ */
.tc-rooms-swiper {
	overflow: visible !important;
	width: 100%;

	@media (max-width: 1440px) {
		padding: 0 20px !important;
	}
}

.tc-rooms-swiper > .swiper-wrapper > .swiper-slide:not(.swiper-slide-active) {
	pointer-events: none;
}

.tc-rooms-swiper .swiper-slide-active .tc-room-content {
	padding-left: calc((100vw - 1400px) / 2);
}


.tc-rooms-swiper .swiper-wrapper {
	align-items: flex-start;
}

/* ------------------------------------------------------------------
   6. Slide inner layout  — content (38%) + images (62%)
   ------------------------------------------------------------------ */
.tc-room-slide-inner {
	display: flex;
	width: 100%;
	/* min-height: 580px; */
}

/* ------------------------------------------------------------------
   7. Left — content panel
      Left padding uses clamp() so it aligns with the 1200px grid at
      large viewports and collapses gracefully on smaller screens.
      Formula: (viewport - 1200px) / 2 + inner-gutter
   ------------------------------------------------------------------ */
.tc-room-content {
	width: 38%;
	flex-shrink: 0;
	/* align left edge with 1200px container; extra bottom space for pagination */
	padding-right: 60px;
	padding-bottom: 90px;
	/* padding-left: calc((100vw - 1440px) / 2); */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
}

/* Counter + category */
.tc-room-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

/* Pill badge — matches tc-reason-counter */
.tc-room-counter {
	display: inline-flex;
	align-items: center;
	background: rgba(0, 0, 0, 1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 20px;
	padding: 5px 14px;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0;
	border: 1px solid #454545;
}

.tc-room-counter .tc-count-current {
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	line-height: 1;
}

.tc-room-counter .tc-count-sep {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 3px;
}

.tc-room-counter .tc-count-total {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

/* Room type label */
.tc-room-category {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 23px;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.5);
}

/* Room title */
.tc-room-title {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 30px !important;
	letter-spacing: normal !important;
	color: #fff;
	margin: 0 0 10px;
}

/* Detail row — bullet-separated, no icons */
.tc-room-details {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;
	padding-bottom: 15px;
    margin-bottom: 15px;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	line-height: 29px;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.tc-detail-sep {
	color: rgba(255, 255, 255, 1);
	margin: 0 10px;
}

/* Description */
.tc-room-desc p {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 27px;
	color: #fff;
	margin: 0 0 28px;
}

/* CHECK AVAILABILITY button */
.tc-room-cta {
	display: inline-block;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	background: var(--tc-gold, #EBA318);
	color: #000;
	padding: 13px 25px;
	text-decoration: none;
	transition: background 0.2s ease;
	align-self: flex-start;
	text-align: center;
	min-width: 180px;
}

.tc-room-cta:hover {
	background: #d4921a;
	color: #000;
}

/* View 360 Tour / View Floor Plan buttons */
.elementor-slideshow__header {
	width: 97vw !important;
	padding-top: 50px !important;
	padding-left: 0 !important;
    padding-right: 0 !important;
}

.tc-room-extra-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.tc-room-link-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: 0;
	padding: 12px 20px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	/* Matches .button-gold--reverse */
	background-color: var(--tc-black) !important;
	color: var(--tc-white) !important;
	border: 1px solid var(--tc-gold) !important;
	min-width: 180px;
}

.tc-room-link-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.tc-room-link-btn:hover {
	background-color: var(--tc-gold) !important;
	color: var(--tc-black) !important;
	border-color: var(--tc-gold) !important;
}

/* ------------------------------------------------------------------
   8. Outer pagination  — absolute, anchored to content-column left
      Same clamp() as .tc-room-content padding-left so they align
   ------------------------------------------------------------------ */
.tc-rooms-pagination {
	position: absolute;
	bottom: 40px;
	padding-left: calc((100vw - 1400px) / 2);
	z-index: 10;
	display: flex;
	gap: 8px;
	align-items: center;
}

.tc-rooms-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	opacity: 1;
	cursor: pointer;
	transition: background 0.25s, width 0.25s, border-radius 0.25s;
	margin: 0 !important;
}

.tc-rooms-pagination .swiper-pagination-bullet-active {
	width: 28px;
	border-radius: 4px;
	background: var(--tc-gold, #EBA318);
}

/* ------------------------------------------------------------------
   9. Outer nav arrows  (absolute left / right of stage)
   ------------------------------------------------------------------ */

.tc-rooms-prev,
.tc-rooms-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff !important;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #000;
	transition: background 0.2s ease;
	padding: 0;
}

.tc-rooms-prev { left: 32px; }
.tc-rooms-next { right: 32px; }

.tc-rooms-prev svg,
.tc-rooms-next svg {
	width: 20px;
	height: 20px;
}

.tc-rooms-prev:hover,
.tc-rooms-next:hover {
	background: rgba(255, 255, 255, 0.75) !important;
}

.tc-rooms-prev.swiper-button-disabled,
.tc-rooms-next.swiper-button-disabled {
	opacity: 0.2;
	cursor: default;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   10. Right — image panel
   ------------------------------------------------------------------ */
.tc-room-images {
	flex: 1;
	position: relative;  /* positioning context for inner controls */
	overflow: hidden;    /* clips inner swiper peek at column edge */
}

/* ------------------------------------------------------------------
   11. Inner image Swiper  (centeredSlides peek effect)
   ------------------------------------------------------------------ */
.tc-inner-swiper {
	/* overflow: visible !important; */
	height: 100%;
}

.tc-inner-swiper .swiper-wrapper {
	height: 100%;
	align-items: stretch;
}

.tc-inner-swiper .swiper-wrapper:before {
    content: '';
    background: linear-gradient(to top, rgba(0, 0, 0, 0.87) 0%, transparent 20%);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.tc-inner-swiper .swiper-slide {
	width: 84%;
	overflow: hidden;
	opacity: 0.5;
	transition: opacity 0.4s ease;
	aspect-ratio: 7 / 4;
}

.tc-inner-swiper .swiper-slide-active {
	opacity: 1;
}

.tc-inner-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder when no images added yet */
.tc-room-img-placeholder {
	background: #1a1a1a;
	width: 100%;
	height: 100%;
	min-height: 400px;
}

/* ------------------------------------------------------------------
   12. Inner carousel controls  — pill bar: [←]  • • •  [→]
       Sits centred at the bottom of .tc-room-images (position: relative)
   ------------------------------------------------------------------ */
.tc-inner-controls {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	padding: 6px 12px;
	white-space: nowrap;
}

.tc-inner-prev,
.tc-inner-next {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tc-white, #fff);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--tc-black, #000);
	transition: background 0.2s ease;
	padding: 0;
}

.tc-inner-prev svg,
.tc-inner-next svg {
	width: 14px;
	height: 14px;
}

.tc-inner-prev:hover,
.tc-inner-next:hover {
	background: rgba(255, 255, 255, 0.75);
}

.tc-inner-prev.swiper-button-disabled,
.tc-inner-next.swiper-button-disabled {
	opacity: 0.25;
	cursor: default;
	pointer-events: none;
}

/* Pagination sits between the two buttons — no absolute positioning needed */
.tc-inner-pagination {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Swiper sets position:absolute by default — override */
	position: static !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	width: auto !important;
}

.tc-inner-pagination .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	opacity: 1;
	cursor: pointer;
	margin: 0 !important;
	transition: background 0.2s, width 0.2s, border-radius 0.2s;
	display: none;
}

.tc-inner-pagination .swiper-pagination-bullet-active {
	width: 16px;
	border-radius: 3px;
	background: var(--tc-gold);
}

/* ------------------------------------------------------------------
   13. Semi-circle overlay buttons — injected into each slide's
       .tc-room-images so top: 50% centres within the image height.
       Prev: left edge of image column  |  Next: right edge.
   ------------------------------------------------------------------ */
button.tc-slide-img-prev,
button.tc-slide-img-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 12;
	width: 38px;
	height: 76px;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease;
	padding: 0;

	width: 52px;
	height: 52px;
	border-radius: 50%;
}

/* Prev: flat on left edge, curved side into image */
button.tc-slide-img-prev {
	left: 15px;
	/* border-radius: 0 76px 76px 0;
	border-left: none;
	padding-right: 10px; */
}

/* Next: curved side into image, flat on right edge */
button.tc-slide-img-next {
	right: 15px;
	/* border-radius: 76px 0 0 76px;
	border-right: none;
	padding-left: 10px; */
}

button.tc-slide-img-prev svg,
button.tc-slide-img-next svg {
	width: 25px;
	height: auto;
	flex-shrink: 0;
	color: #000;
}

button.tc-slide-img-prev:hover,
button.tc-slide-img-next:hover {
	background: rgba(255, 255, 255, 0.75);
}

/* Fade out at the first / last room */
button.tc-slide-img-prev.is-disabled,
button.tc-slide-img-next.is-disabled {
	opacity: 0.25;
	pointer-events: none;
}

/* Desktop only — hidden, mobile shows them */
button.tc-slide-img-prev,
button.tc-slide-img-next {
	display: none;
}

/* Only show on the active slide */
.swiper-slide:not(.swiper-slide-active) button.tc-slide-img-prev,
.swiper-slide:not(.swiper-slide-active) button.tc-slide-img-next {
	display: none;
}

/* ------------------------------------------------------------------
   14. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1440px) {
	.tc-rooms-prev, .tc-rooms-next, .tc-rooms-prev, .tc-rooms-next {
		position: relative;
		left: 0px;
		display: inline-flex;
		margin-bottom: 20px;
		top: auto;
		transform: none;
	}

	.tc-rooms-prev,
	.tc-rooms-prev {
		margin-left: calc((100vw - 1400px) / 2);
		margin-right: 15px;
		margin-left: 20px;
	}

	.tc-room-slide-inner {
		min-height: 1px;
	}

	.tc-rooms-header .elementor-container {
		padding-left: 20px  !important;
		padding-right: 20px !important;
	}

	.tc-rooms-pagination,
	.tc-rooms-pagination {
		padding-left: 20px;
		bottom: 0 !important;
	}
}
@media (max-width: 1240px) {
	.tc-rooms-prev,
	.tc-rooms-prev {
		margin-left: 15px;
	}
	.tc-room-content {
		padding-right: 36px;
		padding-bottom: 80px;
		padding-left: 20px;
		/* clamp handles left automatically */
	}

	.tc-rooms-pagination,
	.tc-rooms-pagination {
		padding-left: 20px;
	}
}

@media (max-width: 1024px) {
	.tc-room-content {
		width: 45%;
		padding-right: 28px;
		padding-bottom: 80px;
		padding-left: 20px;
	}

	.tc-rooms-header {
		padding-bottom: 60px !important;
	}

	.tc-room-title {
		font-size: 32px;
	}

	.tc-rooms-prev, .tc-rooms-prev { left: 12px; }
	.tc-rooms-next, .tc-rooms-next { right: 12px; }

	.tc-rooms-prev, .tc-rooms-prev,
	.tc-rooms-next, .tc-rooms-next {display: none}

	.tc-rooms-prev,
	.tc-rooms-prev {
		margin-left: 0px;
	}

	.tc-rooms-pagination,
	.tc-rooms-pagination {
		bottom: 32px;
	}

	.tc-rooms-sliders { 
		padding-bottom: 40px !important;
	}
}

@media (max-width: 1024px) {
	/* Show image-overlay semi-circles on mobile only (hidden on desktop) */
	.swiper-slide-active button.tc-slide-img-prev,
	.swiper-slide-active button.tc-slide-img-next {
		display: flex;
	}

	.tc-inner-controls {
		position: relative;
		margin-top: 20px;
		margin-bottom: 40px;
		bottom: 0;
	}

	.tc-rooms-tabs {
		justify-content: center;
	}

	.tc-rooms-title-col .elementor-heading-title {
		font-size: 40px !important;
		line-height: 1 !important;
	}

	.tc-rooms-title-col {
		margin-bottom: 20px;
	}

	.tc-rooms-section {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Stack: images on top, content below */
	.tc-room-slide-inner {
		flex-direction: column;
	}

	button.tc-slide-img-prev {
		left: 0px;
	}

	button.tc-slide-img-next {
		right: 0px;
	}

	.tc-room-content {
		width: 100%;
		padding: 32px 55px 0px !important;
		margin-bottom: 40px !important;
		padding-top: 0 !important;
		/* padding-left: 0 !important; */
		order: 1;
		position: relative;
	}

	.tc-room-images {
		order: 1;
		min-height: 280px;
	}

	.tc-room-title {
		font-size: 28px;
	}

	/* Hide outer arrows on mobile — swipe instead */
	/* .tc-rooms-prev, .tc-rooms-next,
	.tc-rooms-prev,  .tc-rooms-next {
		display: none !important;
	} */

	.tc-rooms-pagination,
	.tc-rooms-pagination {
		bottom: 28px;
	}

	.tc-inner-swiper .swiper-slide {
		width: 92%;
	}

	.tc-rooms-header .elementor-container {
		padding-left: 20px  !important;
		padding-right: 20px !important;
	}

	button.tc-slide-img-prev,
	button.tc-slide-img-next {
		width: 40px;
		height: 40px;
	}

	button.tc-slide-img-prev svg,
	button.tc-slide-img-next svg {
		width: 20px;
	}
}

@media (max-width: 767px) {

		.tc-rooms-pagination {
		display: none;
	}
}