/**
 * Tourfic Custom Shortcodes - Blocksy Theme Integration
 * CSS overrides to make Tourfic shortcodes match Blocksy theme design
 */

/* ==========================================================================
   Tourfic Custom Shortcodes - Blocksy Integration
   ========================================================================== */

.tf-car-archive-result,
.tf-car-result,
.tf-single-car-view,
.tf-car-details,
.tf-car-content {
	/* Use Blocksy's typography */
	font-family: var(--theme-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
	font-size: var(--theme-font-size-base, 16px) !important;
	line-height: var(--theme-line-height-base, 1.6) !important;
	color: var(--theme-text-color, #495057) !important;
}

/* ==========================================================================
   Car Archive Results Container - FULL WIDTH FIX
   ========================================================================== */

.tf-car-archive-result {
	padding: var(--theme-content-spacing, 1.5rem) 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.tf-car-result {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
	gap: var(--theme-content-spacing, 1.5rem) !important;
	margin-bottom: var(--theme-content-spacing, 1.5rem) !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.tf-car-result.grid-view {
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
	width: 100% !important;
}

/* Override Tourfic's flex layout to use full width grid */
.tf-car-result.tf-flex {
	display: grid !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* ==========================================================================
   Single Car View Card - FULL WIDTH FIX
   ========================================================================== */

.tf-single-car-view {
	border: var(--theme-card-border-width, 1px) solid var(--theme-card-border-color, var(--theme-palette-color-5, #ced4da)) !important;
	/* border-radius: var(--theme-card-border-radius, 8px) !important; */
	border-radius: 0px !important;
	background-color: var(--theme-card-background-color, var(--theme-palette-color-9, #ffffff)) !important;
	box-shadow: var(--theme-card-shadow, 0 2px 4px rgba(0, 0, 0, 0.1)) !important;
	padding: var(--theme-card-padding, 24px) !important;
	transition: all var(--theme-transition-duration, 0.3s) ease !important;
	overflow: hidden !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.tf-single-car-view:hover {
	box-shadow: var(--theme-card-shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.15)) !important;
	transform: translateY(-2px) !important;
}

/* ==========================================================================
   Car Images
   ========================================================================== */

.tf-car-image {
	position: relative !important;
	overflow: hidden !important;
	border-radius: var(--theme-card-border-radius, 4px) !important;
	margin-bottom: var(--theme-content-spacing, 1rem) !important;
	width: 100% !important;
}

.tf-car-image img {
	width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	transition: all var(--theme-transition-duration, 0.3s) ease !important;
}

.tf-car-image:hover img {
	transform: scale(1.05) !important;
}

.tf-car-image a {
	display: block !important;
	text-decoration: none !important;
}

/* ==========================================================================
   Car Details Section
   ========================================================================== */

.tf-car-details {
	display: flex !important;
	flex-direction: column !important;
	/* height: 100% !important; */
	width: 100% !important;
}

/* ==========================================================================
   Car Content (Title and Description)
   ========================================================================== */

.tf-car-content {
	flex: 1 !important;
	margin-bottom: var(--theme-content-spacing, 1rem) !important;
	width: 100% !important;
}

.tf-car-content h3 {
	font-family: var(--theme-headings-font-family, inherit) !important;
	font-weight: var(--theme-headings-font-weight, 600) !important;
	font-size: var(--theme-font-size-xl, 24px) !important;
	line-height: var(--theme-headings-line-height, 1.3) !important;
	color: var(--theme-headings-color, #212529) !important;
	/* margin: 0 0 var(--theme-content-spacing, 1rem) 0 !important; */
}

.tf-car-content h3 a {
	color: inherit !important;
	text-decoration: none !important;
	transition: all var(--theme-transition-duration, 0.3s) ease !important;
}

.tf-car-content h3 a:hover {
	color: var(--theme-link-hover-color, var(--theme-palette-color-2, #005a87)) !important;
}

.tf-car-content p {
	color: var(--theme-text-color, #495057) !important;
	font-size: var(--theme-font-size-base, 16px) !important;
	line-height: var(--theme-line-height-base, 1.6) !important;
	/* margin: 0 0 var(--theme-content-spacing, 1rem) 0 !important; */
}

/* ==========================================================================
   Car Booking/Price Section
   ========================================================================== */

.tf-booking-btn {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	/* margin-top: auto !important; */
	/* padding-top: var(--theme-content-spacing, 1rem) !important; */
	border-top: 1px solid var(--theme-palette-color-7, #e9ecef) !important;
	width: 100% !important;
}

/* ==========================================================================
   Price Information
   ========================================================================== */

.tf-price-info {
	margin-right: var(--theme-content-spacing, 1rem) !important;
}

.tf-price-info h3 {
	font-family: var(--theme-headings-font-family, inherit) !important;
	font-weight: var(--theme-headings-font-weight, 600) !important;
	font-size: var(--theme-font-size-lg, 18px) !important;
	color: var(--theme-palette-color-1, #007cba) !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

.tf-price-info h3 small {
	font-size: var(--theme-font-size-sm, 14px) !important;
	color: var(--theme-palette-color-4, #adb5bd) !important;
	font-weight: normal !important;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.tf-booking-btn a,
.tf-booking-btn .view-more {
	font-family: var(--theme-button-font-family, inherit) !important;
	font-weight: var(--theme-button-font-weight, 500) !important;
	font-size: var(--theme-button-font-size, 14px) !important;
	line-height: var(--theme-button-line-height, 1.2) !important;
	padding: var(--theme-button-padding, 12px 24px) !important;
	border-radius: var(--theme-button-border-radius, 4px) !important;
	border: var(--theme-button-border-width, 1px) solid var(--theme-palette-color-1, #007cba) !important;
	background-color: var(--theme-palette-color-1, #007cba) !important;
	color: var(--theme-palette-color-9, #ffffff) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all var(--theme-transition-duration, 0.3s) ease !important;
	cursor: pointer !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.tf-booking-btn a:hover,
.tf-booking-btn .view-more:hover {
	background-color: var(--theme-palette-color-2, #005a87) !important;
	border-color: var(--theme-palette-color-2, #005a87) !important;
	color: var(--theme-palette-color-9, #ffffff) !important;
	text-decoration: none !important;
	transform: translateY(-1px) !important;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.tf-mb-24 {
	/* margin-bottom: var(--theme-content-spacing, 1.5rem) !important; */
}




.tf-flex {
	display: flex !important;
}

.tf-flex-gap-32 {
	gap: var(--theme-content-spacing, 1.5rem) !important;
}

.tf-flex-space-bttn {
	justify-content: space-between !important;
	align-items: center !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
	.tf-car-result {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
		gap: var(--theme-content-spacing-mobile, 1rem) !important;
		width: 100% !important;
	}

	.tf-single-car-view {
		padding: var(--theme-card-padding-mobile, 16px) !important;
		width: 100% !important;
	}

	.tf-car-content h3 {
		font-size: var(--theme-font-size-large, 20px) !important;
	}

	.tf-booking-btn {
		flex-direction: column !important;
		gap: var(--theme-content-spacing-mobile, 0.75rem) !important;
		width: 100% !important;
	}

	.tf-price-info {
		margin-right: 0 !important;
		text-align: center !important;
		width: 100% !important;
	}

	.tf-booking-btn a,
	.tf-booking-btn .view-more {
		width: 100% !important;
		justify-content: center !important;
	}
}

@media (max-width: 480px) {
	.tf-car-result {
		grid-template-columns: 1fr !important;
		width: 100% !important;
	}

	.tf-single-car-view {
		padding: var(--theme-card-padding-mobile, 12px) !important;
		width: 100% !important;
	}

	.tf-car-image img {
		height: 150px !important;
	}
}

/* ==========================================================================
   Archive Ajax Result Specific Styles
   ========================================================================== */

.archive_ajax_result {
	margin-top: var(--theme-content-spacing, 1.5rem) !important;
	width: 100% !important;
}

/* ==========================================================================
   Link Styling
   ========================================================================== */

.tf-single-car-view a:not(.view-more) {
	color: var(--theme-link-initial-color, var(--theme-palette-color-1, #007cba)) !important;
	text-decoration: none !important;
	transition: all var(--theme-transition-duration, 0.3s) ease !important;
}

.tf-single-car-view a:not(.view-more):hover {
	color: var(--theme-link-hover-color, var(--theme-palette-color-2, #005a87)) !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   Loading States and Animations
   ========================================================================== */

.tf-single-car-view {
	animation: fadeInUp 0.5s ease-out !important;
}

@keyframes fadeInUp {
	from {
		opacity: 0 !important;
		transform: translateY(20px) !important;
	}
	to {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}
}

/* ==========================================================================
   Focus States for Accessibility
   ========================================================================== */

.tf-booking-btn a:focus,
.tf-booking-btn .view-more:focus {
	outline: 2px solid var(--theme-palette-color-1, #007cba) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(0, 124, 186, 0.25) !important;
}

/* ==========================================================================
   CAROUSEL STYLES
   ========================================================================== */

.tf-categories-carousel {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

.tf-carousel-container {
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
	position: relative !important;
}

.tf-carousel-track {
	display: flex !important;
	width: 100% !important;
	transition: transform 0.3s ease !important;
}

.tf-carousel-items {
	display: flex !important;
	width: 100% !important;
	gap: var(--theme-content-spacing, 1.5rem) !important;
}

/* Horizontal Carousel */
.tf-carousel-horizontal .tf-carousel-items {
	flex-direction: row !important;
}

.tf-carousel-horizontal .tf-single-car-view {
	flex: 0 0 auto !important;
	width: calc((100% / var(--items-per-view, 3)) - (var(--theme-content-spacing, 1.5rem) * (var(--items-per-view, 3) - 1) / var(--items-per-view, 3))) !important;
	min-width: 250px !important;
}

/* Vertical Carousel */
.tf-carousel-vertical {
	height: 500px !important; /* Set a fixed height for vertical carousel */
}

.tf-carousel-vertical .tf-carousel-track {
	flex-direction: column !important;
	height: 100% !important;
}

.tf-carousel-vertical .tf-carousel-items {
	flex-direction: column !important;
	height: 100% !important;
	transition: transform 0.3s ease !important;
}

.tf-categories-carousel[data-direction="vertical"][data-items-per-view="1"] .tf-single-car-view {
	height: 100% !important;
}

.tf-categories-carousel[data-direction="vertical"][data-items-per-view="2"] .tf-single-car-view {
	height: 50% !important;
}

.tf-categories-carousel[data-direction="vertical"][data-items-per-view="3"] .tf-single-car-view {
	height: calc(100% / 3) !important;
}

.tf-categories-carousel[data-direction="vertical"][data-items-per-view="4"] .tf-single-car-view {
	height: 25% !important;
}

.tf-categories-carousel[data-direction="vertical"][data-items-per-view="5"] .tf-single-car-view {
	height: 20% !important;
}

.tf-categories-carousel[data-direction="vertical"][data-items-per-view="6"] .tf-single-car-view {
	height: calc(100% / 6) !important;
}

.tf-carousel-vertical .tf-single-car-view {
	width: 100% !important;
	margin-bottom: 0 !important;
	overflow: hidden !important;
}

/* Carousel Navigation Buttons */
.tf-carousel-prev,
.tf-carousel-next {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background-color: var(--theme-palette-color-1, #007cba) !important;
	color: var(--theme-palette-color-9, #ffffff) !important;
	border: none !important;
	border-radius: 50% !important;
	width: 48px !important;
	height: 48px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all var(--theme-transition-duration, 0.3s) ease !important;
	z-index: 10 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.tf-carousel-prev:hover,
.tf-carousel-next:hover {
	background-color: var(--theme-palette-color-2, #005a87) !important;
	transform: translateY(-50%) scale(1.1) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.tf-carousel-prev {
	left: -24px !important;
}

.tf-carousel-next {
	right: -24px !important;
}

/* Vertical Carousel Navigation */
.tf-carousel-vertical .tf-carousel-prev,
.tf-carousel-vertical .tf-carousel-next {
	left: 50% !important;
	transform: translateX(-50%) !important;
}

.tf-carousel-vertical .tf-carousel-prev {
	top: -24px !important;
	transform: translateX(-50%) rotate(90deg) !important;
}

.tf-carousel-vertical .tf-carousel-next {
	bottom: -24px !important;
	transform: translateX(-50%) rotate(90deg) !important;
}

.tf-carousel-vertical .tf-carousel-prev:hover,
.tf-carousel-vertical .tf-carousel-next:hover {
	transform: translateX(-50%) rotate(90deg) scale(1.1) !important;
}

/* Carousel Dots */
.tf-carousel-dots {
	display: flex !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: var(--theme-content-spacing, 1rem) !important;
}

.tf-carousel-dots .tf-carousel-dot {
	width: 12px !important;
	height: 12px !important;
	border-radius: 50% !important;
	background-color: var(--theme-palette-color-5, #ced4da) !important;
	border: none !important;
	cursor: pointer !important;
	transition: all var(--theme-transition-duration, 0.3s) ease !important;
}

.tf-carousel-dots .tf-carousel-dot.active {
	background-color: var(--theme-palette-color-1, #007cba) !important;
	transform: scale(1.2) !important;
}

/* ==========================================================================
   FORCE FULL WIDTH - Additional overrides
   ========================================================================== */

.tf-car-archive-result .tf-car-result,
.tf-car-archive-result .tf-car-result.grid-view,
.tf-car-archive-result .tf-car-result.archive_ajax_result {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: grid !important;
}

/* Ensure no parent containers constrain width */
.tf-car-archive-result * {
	box-sizing: border-box !important;
}

/* ==========================================================================
   CAROUSEL RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
	.tf-carousel-prev,
	.tf-carousel-next {
		width: 40px !important;
		height: 40px !important;
	}

	.tf-carousel-prev {
		left: -20px !important;
	}

	.tf-carousel-next {
		right: -20px !important;
	}

	.tf-carousel-horizontal .tf-single-car-view {
		min-width: 200px !important;
	}

	.tf-carousel-vertical {
		height: 400px !important;
	}
}

@media (max-width: 480px) {
	.tf-carousel-prev,
	.tf-carousel-next {
		width: 36px !important;
		height: 36px !important;
	}

	.tf-carousel-prev {
		left: -18px !important;
	}

	.tf-carousel-next {
		right: -18px !important;
	}

	.tf-carousel-horizontal .tf-single-car-view {
		min-width: 180px !important;
	}

	.tf-carousel-vertical {
		height: 350px !important;
	}

	.tf-carousel-vertical .tf-carousel-prev,
	.tf-carousel-vertical .tf-carousel-next {
		display: none !important; /* Hide vertical nav on very small screens */
	}
}