/**
 * Packages Elementor Widget
 *
 * Table of Contents
 *
 * 1.0 Scope
 * 2.0 Layout and Masonry
 * 3.0 Elementor Editor
 * 4.0 Layout 2 Variant
 * 5.0 Dialog Visibility
 * 6.0 Typography
 * 7.0 Color Tokens
 * 8.0 Icon Buttons
 * 9.0 Dialog Close Button
 * 10.0 Focus States
 *
 * Compatibility note: the widget markup inherits ND Travel utility classes
 * that use underscores. They are retained to avoid changing the public HTML.
 */


/**
 * 1.0 Scope
 *
 * Defines the Elementor widget boundary and removes the empty-widget icon
 * that Elementor injects before the custom render output is available.
 */
.elementor-widget-packages {
	display: flow-root;
	background: transparent !important;
}

.elementor-widget-packages i.elementor-widget-empty-icon {
	display: none !important;
}


/**
 * 2.0 Layout and Masonry
 *
 * Keeps the float-based card structure contained while still allowing
 * the JavaScript Masonry layer to take over after images have loaded.
 */
.elementor-widget-packages .elementor-widget-container,
.elementor-widget-packages .nd_travel_masonry_content {
	width: 100%;
}

.elementor-widget-packages .elementor-widget-container {
	display: flow-root;
}

.elementor-widget-packages .nd_travel_masonry_content {
	display: flex;
	position: relative;
	float: none;
	align-items: stretch;
	flex-wrap: wrap;
	min-height: 1px;
}

.elementor-widget-packages .nd_travel_masonry_content.nd-travel-packages-masonry-active {
	display: block;
}

.elementor-widget-packages .elementor-widget-container::after,
.elementor-widget-packages .nd_travel_masonry_content::after {
	display: block;
	clear: both;
	content: "";
}

.elementor-widget-packages .nd_travel_masonry_item {
	display: flow-root;
	float: left;
	box-sizing: border-box;
	min-height: 1px;
}

.elementor-widget-packages .nd_travel_masonry_item > .nd_travel_section {
	display: flow-root;
}


/**
 * 2.1 Carousel
 *
 * Uses Elementor's bundled Swiper instance. The existing card templates keep
 * their markup; only the grid width utility is omitted on carousel slides.
 */
.elementor-widget-packages .nd_travel_packages_carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.elementor-widget-packages .nd_travel_packages_carousel_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.elementor-widget-packages .nd_travel_packages_carousel_title {
	margin: 0;
}

.elementor-widget-packages .nd_travel_packages_carousel_navigation {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.elementor-widget-packages .nd_travel_packages_carousel .nd_travel_masonry_content {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.elementor-widget-packages .nd_travel_packages_carousel .nd_travel_masonry_content::after {
	display: none;
}

.elementor-widget-packages .nd_travel_packages_carousel .swiper-slide {
	float: none;
	height: auto;
}

.elementor-widget-packages .nd_travel_packages_carousel .swiper-slide > .nd_travel_section {
	height: 100%;
}

.elementor-widget-packages .nd_travel_packages_carousel_button {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	transform: translateY(-50%);
	background: #434a54;
	color: #fff;
	cursor: pointer;
	transition: opacity .2s ease, background-color .2s ease;
}

.elementor-widget-packages .nd_travel_packages_carousel_button:hover,
.elementor-widget-packages .nd_travel_packages_carousel_button:focus {
	background: #2f3540;
	color: #fff;
}

.elementor-widget-packages .nd_travel_packages_carousel_button.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}

.elementor-widget-packages .nd_travel_packages_carousel_button_prev {
	left: 8px;
}

.elementor-widget-packages .nd_travel_packages_carousel_button_next {
	right: 8px;
}

.elementor-widget-packages .nd_travel_packages_carousel_header .nd_travel_packages_carousel_button {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	flex: 0 0 42px;
	transform: none;
}

.elementor-widget-packages .nd_travel_packages_carousel .swiper-pagination {
	position: relative;
	bottom: auto;
	margin-top: 15px;
	line-height: 1;
}

.elementor-widget-packages .nd_travel_packages_carousel .swiper-pagination-bullet-active {
	background: #434a54;
}


/**
 * 3.0 Elementor Editor
 *
 * Elementor's iframe can fall under the plugin-wide responsive breakpoint.
 * These rules preserve the widget control width in desktop edit mode and then
 * restore the mobile breakpoint inside Elementor's responsive preview.
 */
.elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item.nd_travel_width_100_percentage {
	width: 100%;
}

.elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item.nd_travel_width_50_percentage {
	width: 50%;
}

.elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item.nd_travel_width_33_percentage {
	width: 33.33%;
}

.elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item.nd_travel_width_25_percentage {
	width: 25%;
}

body.elementor-device-mobile .elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item,
.elementor-device-mobile .elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item {
	width: 100%;
}

@media only screen and (max-width: 767px) {
	.elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item.nd_travel_width_100_percentage,
	.elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item.nd_travel_width_50_percentage,
	.elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item.nd_travel_width_33_percentage,
	.elementor-widget-packages.elementor-element-edit-mode .nd_travel_masonry_item.nd_travel_width_25_percentage {
		width: 100%;
	}
}


/**
 * 4.0 Layout 2 Variant
 *
 * Layout 2 removes the preview info bar, so the inherited negative margin must
 * be neutralized to keep the card body below the image.
 */
.elementor-widget-packages .nd_travel_elementor_packages_widget_l2 .nd_travel_margin_top_50_negative {
	margin-top: 0;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l2 .nd_travel_search_page_l3_price_content h5 {
	font-size: .85em;
	font-weight: bold;
	letter-spacing: .05em;
	line-height: 100%;
}

/**
 * 4.1 Layout 3 Variant
 *
 * Layout 3 uses image badges for promotion and duration, then places price
 * and the details link at opposite sides of the card footer. It intentionally
 * has no info bar or dialog controls.
 */
.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_margin_top_50_negative {
	margin-top: 0;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_footer {
	display: flex;
	float: none;
	/* Matches Loop Item 5234, whose footer columns are vertically centered. */
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_price_content,
.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_button_content {
	float: none;
	width: auto;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_price_content {
	flex: 1 1 auto;
	text-align: left;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_button_content {
	flex: 0 0 auto;
	padding-top: 0;
	text-align: right;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_search_page_l3_price_content h5 {
	font-size: .85em;
	font-weight: bold;
	letter-spacing: .05em;
	line-height: 100%;
}

/* Matches the duration pill configured in Elementor Loop Item 5234. */
.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_duration_badge {
	display: block;
	box-sizing: border-box;
	max-width: none;
	margin: 0 0 calc(var(--kit-widget-spacing, 0px) + 0px) 0;
	padding: 3px 15px 3px 16px;
	border-radius: 30px;
	/* Keep the duration pill independent of the package colour. */
	background-color: #434a54 !important;
	color: #FFFFFF !important;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_duration_badge_item {
	display: flex;
	align-items: center;
	font-size: inherit;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_duration_badge_icon {
	display: flex;
	position: relative;
	text-align: center;
	color: #FFFFFF !important;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_duration_badge_icon svg {
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 1.75px;
	fill: #FFFFFF !important;
	transition: fill .3s;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_duration_badge_icon + .nd_travel_packages_layout_3_duration_badge_text {
	align-self: center;
	padding-inline-start: 5px;
	font-size: 14px;
	color: inherit;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_duration_badge_text {
	color: #FFFFFF !important;
	transition: color .3s;
}

@media only screen and (max-width: 480px) {
	.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 .nd_travel_packages_layout_3_button_content {
		text-align: left;
	}
}

/**
 * 5.0 Dialog Visibility
 *
 * Dialog content is hidden until jQuery UI initializes and opens it.
 */
.elementor-widget-packages .nd_travel_packages_dialog {
	display: none;
}


/**
 * 6.0 Typography
 *
 * Restores the original heading appearance after moving the link inside the
 * heading element for valid HTML5 markup.
 */
.elementor-widget-packages .nd_travel_elementor_packages_widget_l1 h4 a,
.elementor-widget-packages .nd_travel_elementor_packages_widget_l1 h4 a:hover,
.elementor-widget-packages .nd_travel_elementor_packages_widget_l1 h4 a:focus,
.elementor-widget-packages .nd_travel_elementor_packages_widget_l2 h4 a,
.elementor-widget-packages .nd_travel_elementor_packages_widget_l2 h4 a:hover,
.elementor-widget-packages .nd_travel_elementor_packages_widget_l2 h4 a:focus {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-decoration: none;
}

.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 h4 a,
.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 h4 a:hover,
.elementor-widget-packages .nd_travel_elementor_packages_widget_l3 h4 a:focus {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-decoration: none;
}


/**
 * 7.0 Color Tokens
 *
 * Uses the per-card custom property emitted by the PHP template.
 */
.elementor-widget-packages .nd_travel_packages_color,
.nd_travel_packages_dialog .nd_travel_packages_color {
	color: var(--nd-travel-package-color, #1bbc9b);
}

.elementor-widget-packages .nd_travel_packages_color_bg,
.nd_travel_packages_dialog .nd_travel_packages_color_bg {
	background-color: var(--nd-travel-package-color, #1bbc9b);
}


/**
 * 8.0 Icon Buttons
 *
 * Normalizes map/contact trigger buttons so they retain the original icon-only
 * card appearance after changing the triggers from icons to buttons.
 */
.elementor-widget-packages .nd_travel_packages_icon_button {
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--nd-travel-package-color, #1bbc9b);
	font-family: inherit;
	line-height: 1;
}

.elementor-widget-packages .nd_travel_packages_icon_button:hover,
.elementor-widget-packages .nd_travel_packages_icon_button:focus {
	background: transparent;
	color: var(--nd-travel-package-color, #1bbc9b);
}

.elementor-widget-packages .nd_travel_packages_icon_button i {
	display: block;
}


/**
 * 9.0 Dialog Close Button
 *
 * The button wrapper is reset while the icon keeps the visual corner that
 * matches the rounded jQuery UI dialog.
 */
.nd_travel_packages_dialog .nd_travel_packages_dialog_close,
.nd_travel_packages_dialog .nd_travel_packages_dialog_close:hover,
.nd_travel_packages_dialog .nd_travel_packages_dialog_close:focus,
.nd_travel_packages_dialog .nd_travel_packages_dialog_close:active {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	overflow: visible;
	box-sizing: content-box;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 15px 0 0;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	line-height: 0;
	text-align: center;
}

.nd_travel_packages_dialog .nd_travel_packages_dialog_close i {
	display: block;
	box-sizing: content-box;
	padding: 8px 10px;
	border: 0;
	border-radius: 0 15px 0 0;
	background-color: var(--nd-travel-package-color, #1bbc9b);
	color: #fff;
	font-size: 13px;
	line-height: 1em;
}

.nd_travel_packages_dialog .nd_travel_packages_dialog_close:focus-visible {
	outline: 0;
}

.nd_travel_packages_dialog .nd_travel_packages_dialog_close:focus-visible i {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}


/**
 * 10.0 Focus States
 *
 * Provides visible keyboard focus for interactive elements inside the widget
 * and its detached jQuery UI dialog content.
 */
.elementor-widget-packages a:focus-visible,
.elementor-widget-packages .nd_travel_packages_icon_button:focus-visible,
.nd_travel_packages_dialog .nd_travel_dialog_contact_content input:focus-visible,
.nd_travel_packages_dialog .nd_travel_dialog_contact_content textarea:focus-visible {
	outline: 2px solid var(--nd-travel-package-color, #1bbc9b);
	outline-offset: 3px;
}