/* ==========================================================================
   The Capital — Other Hotels Slider
   Each hotel is an Elementor inner section (.tc-oh-slide).
   JS wraps them in a card, injects counter + dots into the content column,
   and handles prev/next/dot navigation.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Section
   ------------------------------------------------------------------ */
.tc-other-hotels {
	background: #000;
	overflow: visible; /* allows outer arrows to peek out */
}

.tc-other-hotels > .elementor-container {
	/* max-width: 100% !important; */
	padding: 0 !important;
}

.tc-other-hotels > .elementor-container > .elementor-row,
.tc-other-hotels > .elementor-container > .elementor-column-wrap {
	width: 100%;
}

/* Strip the outer column's padding */
.tc-other-hotels > .elementor-container > .elementor-column > .elementor-element-populated,
.tc-other-hotels > .elementor-container > .elementor-col-100 > .elementor-element-populated {
	padding: 0 !important;
}

/* ------------------------------------------------------------------
   2. Injected wrapper (contains prev arrow, track/card, next arrow)
   ------------------------------------------------------------------ */
.tc-oh-wrap {
	position: relative;
	margin: 0px 88px;
	margin: 0;
	/* side margin leaves room for the outer arrows */
}

/* ------------------------------------------------------------------
   3. Track — the visible card
   ------------------------------------------------------------------ */
.tc-oh-track {
	border-radius: 8px;
	border: 1px solid rgba(216, 218, 215, 0.33);
	overflow: hidden;
	min-height: 580px;
	position: relative;
	padding: 18px;
}

/* ------------------------------------------------------------------
   4. Each slide — Elementor inner section
   ------------------------------------------------------------------ */
/* Hide slides only on the frontend — not inside the Elementor editor */
body:not(.elementor-editor-active) .tc-oh-slide.elementor-section {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body:not(.elementor-editor-active) .tc-oh-slide.elementor-section.is-active {
	display: flex !important;
	animation: tc-oh-fade-in 0.4s ease forwards;
}

@keyframes tc-oh-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Elementor wraps inner section content in .elementor-container */
.tc-oh-slide > .elementor-container {
	max-width: 100% !important;
	padding: 0 !important;
	width: 100%;
	min-height: 580px;
}

.tc-oh-slide > .elementor-container > .elementor-row {
	min-height: 580px;
}

/* ------------------------------------------------------------------
   5. Image column
   ------------------------------------------------------------------ */
.tc-oh-img-col.elementor-column {
	flex: 0 0 57% !important;
	max-width: 57% !important;
	width: 57% !important;
	border-radius: 4px;
	overflow: hidden;
}

.tc-oh-img-col > .elementor-element-populated {
	padding: 0 !important;
	height: 100%;
	display: flex;
	min-height: 580px;
}

.tc-oh-img-col .elementor-widget-image,
.tc-oh-img-col .elementor-widget-image .elementor-widget-container,
.tc-oh-img-col .elementor-widget-image figure,
.tc-oh-img-col .elementor-widget-image figure a {
	display: block;
	width: 100%;
	height: 100%;
	flex: 1;
}

.tc-oh-img-col .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ------------------------------------------------------------------
   6. Content column
   ------------------------------------------------------------------ */
.tc-oh-content-col.elementor-column {
	flex: 0 0 43% !important;
	max-width: 43% !important;
	width: 43% !important;
	background: #000 !important;
}

.tc-oh-content-col > .elementor-element-populated {
	padding: 18px 56px 22px !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
   7. Injected topbar (counter left, dots right)
   ------------------------------------------------------------------ */
.tc-oh-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 48px;
	flex-shrink: 0;
}

.tc-oh-counter {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--tc-white);
	letter-spacing: 0.04em;
	border: 1px solid rgba(216, 218, 215, 0.33);
	border-radius: 20px;
	padding: 6px 14px;
	line-height: 1;
}

.tc-oh-dots {
	display: none;
	gap: 8px;
	align-items: center;
}

.tc-oh-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.50);
	cursor: pointer;
	border: none;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

.tc-oh-dot.is-active {
	width: 28px;
	border-radius: 4px;
	background: var(--tc-gold, #EBA318);
}

/* ------------------------------------------------------------------
   8. Widget spacing within content column
   ------------------------------------------------------------------ */
.tc-oh-content-col .tc-oh-name.elementor-widget {
	margin-bottom: 12px !important;
}

.tc-oh-content-col .tc-oh-tagline.elementor-widget {
	margin-bottom: 28px !important;
}

.tc-oh-content-col .tc-oh-desc.elementor-widget {
	margin-bottom: 36px !important;
}

.tc-oh-content-col .tc-oh-buttons.elementor-section {
	margin: 0 !important;
	padding: 0 !important;
}

.tc-oh-content-col .elementor-widget-text-editor {
	margin-top: auto;
}

.tc-oh-buttons .elementor-element-populated {
	flex-wrap: nowrap;
	padding: 0 !important;
}

.tc-oh-buttons .elementor-element-populated .button-gold:first-child {
	width: auto;
	margin-right: 15px;
}

.tc-oh-content-col .tc-oh-content-header-1 {
	margin-bottom: 5px !important;
}

.tc-oh-content-col .tc-oh-content-header-1 .elementor-heading-title {
	line-height: 1 !important;
}

/* Strip inner padding from heading/text widget containers */
.tc-oh-content-col .tc-oh-name .elementor-widget-container,
.tc-oh-content-col .tc-oh-tagline .elementor-widget-container,
.tc-oh-content-col .tc-oh-desc .elementor-widget-container {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
   9. Outer nav arrows (positioned outside the card)
   ------------------------------------------------------------------ */
.tc-oh-prev,
.tc-oh-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	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;
	z-index: 10;
}

.tc-oh-prev {
	left: -68px;
}

.tc-oh-next {
	right: -68px;
}

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

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

/* ------------------------------------------------------------------
   10. Tablet
   ------------------------------------------------------------------ */
@media (max-width: 1500px) {
	.tc-oh-wrap {
		margin: 0 68px;
	}
}

@media (max-width: 1024px) {
	.tc-oh-buttons .elementor-element-populated {
		flex-wrap: wrap;
	}
	.tc-oh-wrap {
		margin: 48px 64px;
	}

	/* .tc-oh-prev { left: -52px; }
	.tc-oh-next { right: -52px; } */

	.tc-oh-img-col.elementor-column {
		flex: 0 0 52% !important;
		max-width: 52% !important;
		width: 52% !important;
	}

	.tc-oh-content-col.elementor-column {
		flex: 0 0 48% !important;
		max-width: 48% !important;
		width: 48% !important;
	}

	.tc-oh-content-col > .elementor-element-populated {
		padding: 40px 36px 44px !important;
	}

	.tc-oh-content-col .tc-oh-name h2 {
		font-size: 36px !important;
	}
}

/* ------------------------------------------------------------------
   11. Mobile — stacks vertically
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.tc-oh-wrap {
		margin: 15px 20px;
	}

	.tc-oh-content-col .tc-oh-content-header-1 {
		margin-bottom: 15px !important;
	}

	.tc-oh-prev,
	.tc-oh-next {
		/* top: auto;
		bottom: -64px;
		transform: none; */
		width: 40px;
		height: 40px;
		top: 200px;
	}

	.tc-oh-prev { left: 35px; }
	.tc-oh-next { right: 35px; }

	.tc-oh-track {
		border-radius: 12px;
		min-height: auto;
	}

	.tc-oh-slide > .elementor-container,
	.tc-oh-slide > .elementor-container > .elementor-row {
		min-height: auto;
		flex-direction: column !important;
	}

	.tc-oh-img-col.elementor-column,
	.tc-oh-content-col.elementor-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;

		flex: none !important;
		max-width: none !important;
		width: auto !important;
	}

	.tc-oh-img-col.elementor-column {
		height: 360px;
	}

	.tc-oh-img-col > .elementor-element-populated {
		min-height: 260px;
	}

	.tc-oh-content-col > .elementor-element-populated {
		padding: 32px 5px 12px !important;
		display: block !important;
	}

	.tc-oh-topbar {
		margin-bottom: 28px;
	}

	/* Extra bottom margin on wrap to clear the mobile arrows */
	.tc-oh-wrap {
		margin-bottom: 96px;
	}
}

@media (max-width: 480px) {
	.tc-oh-prev,
	.tc-oh-next {
		top: 150px;
	}

	.tc-oh-img-col.elementor-column {
		height: 260px;
	}
}