/* ===== Tour Pricing / Tour Dates / Tour Overview widgets - shared styling.
   Palette: the site's existing accent (#fb2056, used on the CTA button, sale
   badges, focus states elsewhere in this plugin), the deep crimson and warm
   gold pulled directly from the Central Asia Guide logo (#CE0037, #F9B007),
   and the muted grey already used everywhere for secondary text (#7a7a7a) -
   no new colors invented, just the site's own palette put to more use. ===== */

.tour_info_box {
	font-family: "Noto Sans", sans-serif;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 24px;
	margin: 20px 0;
	box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
	box-sizing: border-box;
	color: #262626;
}

.tour_info_box_editor_placeholder {
	font-family: "Noto Sans", sans-serif;
	color: #7a7a7a;
	font-size: 13px;
	font-style: italic;
	padding: 16px;
	border: 1px dashed #ddd;
	border-radius: 8px;
	margin: 12px 0;
}

/* ===== Tour Pricing ===== */

.tour_pricing_section + .tour_pricing_section {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #f0f0f0;
}

.tour_pricing_heading {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #CE0037;
	padding-left: 10px;
	border-left: 3px solid #fb2056;
}

.tour_pricing_amount {
	font-size: 28px;
	font-weight: 700;
	color: #fb2056;
	line-height: 1.2;
}

.tour_pricing_per {
	font-size: 14px;
	font-weight: 500;
	color: #7a7a7a;
	margin-left: 2px;
}

.tour_pricing_original {
	color: #9a9a9a;
	text-decoration: line-through;
	font-weight: 500;
	font-size: 20px;
	margin-right: 8px;
}

.tour_pricing_sale {
	color: #fb2056;
	font-weight: 700;
}

.tour_pricing_note {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: #7a7a7a;
}

.tour_pricing_table_wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 4px;
}

.tour_pricing_table,
.tour_dates_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 320px;
}

/* Fixed column widths, not just .tour_pricing_table's shared auto-sizing -
   the Tour Dates widget renders one separate <table> per year, and without
   this, each year's own table sizes its columns from only ITS OWN content
   (a longer/shorter status label, say), so the vertical lines between
   Start/End/Status columns don't line up between one year's table and the
   next even though they're stacked right on top of each other. Fixed,
   identical percentages guarantee every year's table lines up with every
   other one regardless of what's actually in the cells. */
.tour_dates_table {
	table-layout: fixed;
}

.tour_dates_table th:nth-child(1),
.tour_dates_table td:nth-child(1) {
	width: 36%;
}

.tour_dates_table th:nth-child(2),
.tour_dates_table td:nth-child(2) {
	width: 36%;
}

.tour_dates_table th:nth-child(3),
.tour_dates_table td:nth-child(3) {
	width: 28%;
}

.tour_pricing_table th,
.tour_dates_table th {
	background-color: #fb2056;
	color: #fff;
	font-weight: 600;
	text-align: left;
	padding: 8px 12px;
	white-space: nowrap;
}

.tour_pricing_table th:first-child,
.tour_dates_table th:first-child {
	border-top-left-radius: 6px;
}

.tour_pricing_table th:last-child,
.tour_dates_table th:last-child {
	border-top-right-radius: 6px;
}

.tour_pricing_table td,
.tour_dates_table td {
	padding: 7px 12px;
	border-bottom: 1px solid #f0f0f0;
	white-space: nowrap;
}

.tour_pricing_table tbody tr:nth-child(even),
.tour_dates_table tbody tr:nth-child(even) {
	background-color: #fdf6f8;
}

.tour_pricing_table tbody tr:last-child td,
.tour_dates_table tbody tr:last-child td {
	border-bottom: none;
}

/* ===== Tour Dates ===== */

.tour_dates_section + .tour_dates_section {
	margin-top: 20px;
}

.tour_dates_heading {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #CE0037;
	padding-left: 10px;
	border-left: 3px solid #fb2056;
}

.tour_dates_status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* A real <button> now (opens the Book Tour widget's payment panel with this
   date pre-selected - see book-tour-widget.js), so it needs its default
   button chrome reset back to plain text-on-a-pill, same as the (still a
   plain, non-interactive span) "Not Available" one below. */
.tour_dates_available {
	font-family: inherit;
	border: none;
	background-color: #fb2056;
	color: #fff;
	cursor: pointer;
	transition: background-color 150ms;
}

.tour_dates_available:hover,
.tour_dates_available:focus-visible {
	background-color: #d81a48;
}

.tour_dates_unavailable {
	background-color: #ececec;
	color: #7a7a7a;
}

/* ===== Tour Overview ===== */

.tour_overview_box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px 24px;
}

.tour_overview_item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.tour_overview_icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #F9B007, #fb2056);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.tour_overview_icon svg {
	width: 20px;
	height: 20px;
}

/* The label+value pair as ONE flex item (sized to fill the space next to the
   icon, and free to shrink so .tour_overview_value's ellipsis can work) -
   without this wrapper, label and value would each be direct flex items of
   .tour_overview_item and sit side by side instead of stacked, and every
   row's value would start at a different position depending on how long
   that row's own label happened to be. */
.tour_overview_text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.tour_overview_label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #7a7a7a;
	margin-bottom: 2px;
}

.tour_overview_value {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #262626;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tour_overview_item_price .tour_overview_value {
	color: #fb2056;
}

.tour_overview_flags {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	white-space: normal;
}

/* Scoped under .tour_overview_box, not just ".tour_overview_flag_icon" alone -
   beats Elementor's own ".elementor img" reset (height: auto, border-radius:
   0, ...) on specificity (two classes vs. one class + one element), since
   every widget's markup sits inside an ".elementor" ancestor. */
.tour_overview_box .tour_overview_flag_icon {
	width: 20px;
	height: 15px;
	object-fit: cover;
	border-radius: 2px;
	flex: 0 0 auto;
}

@media only screen and (max-width: 767px) {
	.tour_info_box {
		padding: 18px;
	}
	.tour_pricing_amount {
		font-size: 24px;
	}
	.tour_overview_box {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 16px;
	}
	.tour_overview_icon {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
	}
	.tour_overview_icon svg {
		width: 17px;
		height: 17px;
	}
}