/**
 * Triplyn Destination Tabs — Slider Styles
 *
 * All selectors are scoped under .tdt-slider-wrapper to prevent
 * conflicts with themes and page-builders (Elementor, etc.).
 */

/* ----------------------------------------------------------------
 * Slider wrapper
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* ----------------------------------------------------------------
 * Icons wrapper — scrollable area
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper .header-icons-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 0;
	display: flex;
	flex-direction: row;
	cursor: grab;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.tdt-slider-wrapper .header-icons-wrapper::-webkit-scrollbar {
	display: none;
}

/* ----------------------------------------------------------------
 * Icons strip — flex row with transition
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper .header-icons {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

/* ----------------------------------------------------------------
 * Individual icon
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper .header-icon {
	position: relative;
	flex: 0 0 100px;
	text-align: center;
	padding: 10px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tdt-slider-wrapper .header-icon a {
	text-decoration: none;
	color: inherit;
}

.tdt-slider-wrapper .header-icon img {
	width: 40px;
	height: 40px;
}

/* ----------------------------------------------------------------
 * Tag label (destination name)
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper .tdt-tag-label {
	display: flex;
	align-items: center;
	color: rgb(81, 81, 81);
	text-align: center;
	font-size: 10px;
	font-weight: 500;
	line-height: 18px;
	text-transform: capitalize;
	border-bottom: 1px solid rgb(255, 255, 255);
	transition: color 0.1s ease-in;
	margin-top: 0;
	margin-bottom: 0;
}

/* ----------------------------------------------------------------
 * Icon container
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper .tdt-icon-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ----------------------------------------------------------------
 * Active border bottom
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper .tdt-border-bottom {
	position: absolute;
	height: 1.5px;
	width: 100%;
	background-color: var(--primary-color, #f37002);
	bottom: 0;
	transition: opacity 0.1s ease-in;
	opacity: 0;
}

.tdt-slider-wrapper .header-icon:hover .tdt-border-bottom {
	opacity: 1;
}

/* ----------------------------------------------------------------
 * Trending badge
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper .tdt-trending-badge {
	position: absolute;
	top: 0;
	left: 15%;
	display: flex;
	width: 43px;
	height: 13px;
	flex-shrink: 0;
	border-radius: 2px;
	background: linear-gradient(95deg, #fcaf17 0%, var(--primary-color, #f37002) 100%);
	justify-content: center;
	align-items: center;
}

.tdt-slider-wrapper .tdt-trending-text {
	color: rgb(255, 255, 255);
	font-size: 7px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

/* ----------------------------------------------------------------
 * Arrow buttons — scoped to prevent global conflicts
 * ----------------------------------------------------------------*/
.tdt-slider-wrapper .tdt-prev-arrow,
.tdt-slider-wrapper .tdt-next-arrow {
	position: absolute;
	top: 24%;
	transform: translateY(-20%);
	background-color: #ebb329;
	color: #fff;
	border: none;
	padding: 8px;
	cursor: pointer;
	z-index: 1;
	border-radius: 50px;
	font-size: 14px;
	line-height: 1;
}

.tdt-slider-wrapper .tdt-prev-arrow:hover,
.tdt-slider-wrapper .tdt-next-arrow:hover,
.tdt-slider-wrapper .tdt-prev-arrow:focus,
.tdt-slider-wrapper .tdt-next-arrow:focus {
	background-color: #db6233;
	color: #fff;
	outline: none;
}

.tdt-slider-wrapper .tdt-prev-arrow {
	left: -20px;
}

.tdt-slider-wrapper .tdt-next-arrow {
	right: -20px;
}

/* ----------------------------------------------------------------
 * Mobile — hide arrows, smaller icons
 * ----------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.tdt-slider-wrapper .tdt-prev-arrow,
	.tdt-slider-wrapper .tdt-next-arrow {
		display: none !important;
	}

	.tdt-slider-wrapper .header-icon {
		flex: 0 0 68px;
	}

	.tdt-slider-wrapper .tdt-trending-badge {
		left: auto;
		right: 55%;
	}
}