/*
 * Layout/behaviour rules only — no colors, fonts, or brand values are set
 * here (requirement: preserve the original site's colors). This stylesheet
 * intentionally inherits color/typography from the active theme; only add
 * color rules here if a value truly has no equivalent in the theme's
 * existing stylesheet.
 */

.pigeon-tour__layout { display: flex; gap: 32px; flex-wrap: wrap; }
.pigeon-tour__main { flex: 1 1 65%; min-width: 280px; }
.pigeon-tour__sidebar { flex: 1 1 30%; min-width: 260px; }

.pigeon-package-slider,
.pigeon-detail-slider__track {
	position: relative;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 16px;
	padding: 4px;
}
.pigeon-package-slider__slide,
.pigeon-detail-slider__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: min(90%, 420px);
}
.pigeon-package-slider img,
.pigeon-detail-slider__item img { width: 100%; height: auto; display: block; }
.pigeon-package-slider--single img { width: 100%; height: auto; }

.pigeon-slider-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border: none;
	background: rgba(255,255,255,.85);
	width: 36px; height: 36px;
	border-radius: 50%;
	cursor: pointer;
}
.pigeon-slider-nav--prev { left: 4px; }
.pigeon-slider-nav--next { right: 4px; }

.pigeon-trip-facts ul { list-style: none; margin: 0; padding: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }

.pigeon-dates-table table { width: 100%; border-collapse: collapse; }
.pigeon-dates-table th, .pigeon-dates-table td { padding: 8px; border-bottom: 1px solid rgba(0,0,0,.1); text-align: left; }
.pigeon-availability--closed { opacity: .5; }

.pigeon-faq__item { border-bottom: 1px solid rgba(0,0,0,.1); padding: 10px 0; }
.pigeon-faq__item summary { cursor: pointer; font-weight: 600; }

.pigeon-related-tours__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.pigeon-related-tours__item { display: block; text-decoration: none; }
.pigeon-related-tours__item img { width: 100%; height: auto; }

#pigeon-trip-map-canvas { width: 100%; height: 380px; }

.pigeon-price-box { position: sticky; top: 16px; padding: 16px; border: 1px solid rgba(0,0,0,.1); border-radius: 6px; }
.pigeon-price-box__full { font-size: .9em; opacity: .7; }
.pigeon-price-box__net { font-size: 1.5em; font-weight: 700; margin: 6px 0; }

/*
 * Colors below are lifted directly from pricing.pigeontravels.com's own
 * source (src/app.css's CSS custom properties, src/components/QuickPrice.svelte)
 * rather than approximated from a screenshot — this calculator is meant to
 * look like that app's own quick-price panel, so it uses the same values:
 *   --muted #5c6773   --line #dde3ea   --line2 #c6ced8   --panel2 #eef2f6
 *   --accent #ef7c1f  --sel #fdf1e6    --field #fff      --txt #333333
 */

/*
 * Frame around the whole calculator — bordered card, width matched to the
 * sidebar column it sits in (same column the Print/Trip-Video row below it
 * uses), so nothing looks narrower or wider than its neighbours.
 */
/*
 * The plugin's own view template wraps this in .pigeon-price-box (a clean,
 * dedicated sidebar card); the theme's original single-tour/-trek/-activity
 * templates instead drop it into their own pre-existing .column-2 sidebar
 * column — and that column's own top padding differs between templates
 * (single-trek.php: 20px, single-activity.php: 80px — a pre-existing theme
 * inconsistency, not something this plugin introduced). max-width/margin
 * here make the calculator look the same box regardless of which of those
 * two contexts it lands in, rather than inheriting whatever spacing/width
 * that ancestor happens to carry.
 */
.pigeon-price-calculator { max-width: 380px; margin: 0 auto; border: 1px solid #dde3ea; border-radius: 6px; padding: 0 0 16px; overflow: hidden; }

.pigeon-price-calculator__perperson {
	background: #eef2f6;
	border-bottom: 1px solid #dde3ea;
	padding: 14px 16px;
	font-size: 22px;
	font-weight: 700;
	color: #ef7c1f;
}
.pigeon-price-calculator__perperson small { font-size: 12px; font-weight: 400; color: #5c6773; margin-left: 6px; text-transform: none; }

.pigeon-price-calculator__controls,
.pigeon-price-calculator__pax { padding: 0 16px; }
.pigeon-price-calculator__controls { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 10px; }
.pigeon-calc-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 11px;
	color: #5c6773;
	text-transform: uppercase;
	letter-spacing: .4px;
}
/*
 * Date/Market/Package — label pinned left, control right-aligned to the
 * row's far edge, same pattern as the pax steppers below (label, then the
 * control flush right) rather than label-above-control.
 */
.pigeon-price-calculator__controls .pigeon-calc-field {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.pigeon-calc-field small { display: block; font-weight: 400; color: #5c6773; font-size: 11px; text-transform: none; letter-spacing: 0; white-space: normal; margin-top: 3px; }

/*
 * Adults/Child/Infant/Single-room — label pinned left, stepper right-aligned
 * to the row's far edge (space-between) — the explicit required layout:
 * "Child ... − value + to right alignment".
 */
.pigeon-price-calculator__pax { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.pigeon-price-calculator__pax .pigeon-calc-field {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	white-space: nowrap;
}
.pigeon-price-calculator__controls select,
.pigeon-price-calculator__controls input[type="date"] {
	font: inherit;
	background: #fff;
	color: #333333;
	border: 1px solid #c6ced8;
	border-radius: 5px;
	padding: 4px 5px;
	flex: 0 1 160px;
	width: auto;
	min-width: 0;
	box-sizing: border-box;
}
.pigeon-price-calculator__controls select:focus,
.pigeon-price-calculator__controls input[type="date"]:focus { outline: none; border-color: #ef7c1f; }

/* `small` hint text ("season is read from the date...") dropped — no room
   for it once the control sits inline next to the label. */
.pigeon-price-calculator__controls .pigeon-calc-field small { display: none; }

.pigeon-price-calculator__actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px; margin-top: 12px; }

/*
 * Pax +/- stepper — same sizing/colors as QuickPrice.svelte's own .stepper
 * button rule: 28px square, 6px radius, no border, #e5766b / #6ebd7a.
 */
.pigeon-calc-stepper { display: flex; align-items: center; gap: 10px; }
.pigeon-calc-stepper__value {
	width: 2ch;
	border: 0;
	background: transparent;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	padding: 0;
	color: #333333;
}
.pigeon-calc-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 6px;
	color: #fff;
	text-align: center;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.pigeon-calc-stepper__btn--minus { background: #e5766b; }
.pigeon-calc-stepper__btn--minus:hover { background: #d9634c; }
.pigeon-calc-stepper__btn--plus { background: #6ebd7a; }
.pigeon-calc-stepper__btn--plus:hover { background: #4cae4c; }

.pigeon-btn {
	display: inline-block;
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
	border: 0;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}
.pigeon-btn--download { background: #dadada; color: #222; }
.pigeon-btn--disabled { opacity: .4; pointer-events: none; cursor: not-allowed; }

/*
 * Book Now / Enquire Now — [pigeon_book_now_button]/[pigeon_enquire_now_button],
 * on every tour/trek/activity page (theme templates + the plugin's own
 * view template both render these, so this styling reaches all of them).
 * Rounded pill shape with an icon, per the agreed reference: solid black
 * Enquire Now, and Book Now either live (same black, checkmark icon) or
 * a distinct muted grey when the tour isn't bookable yet — not just a
 * dimmed copy of the enabled color, a genuinely different, unmistakably
 * "off" look.
 */
.pigeon-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #000;
	color: #fff;
	padding: 5px 16px;
	border-radius: 14px;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
}
.pigeon-action-btn:hover { color: #fff; background: #f68003; }
.pigeon-action-btn--disabled {
	background: #b5b5b5;
	color: #fff;
	opacity: 1;
	pointer-events: none;
	cursor: not-allowed;
}

.pigeon-trip-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 30px auto 0; max-width: 380px; }
.pigeon-trip-actions-grid > * { text-align: center; }

/*
 * [pigeon_checkout_form] — guest details + payment method, revealed by
 * Book Now. A plain <a href="#pigeon-checkout-form"> triggers this via
 * :target (see class-pigeon-tours-shortcodes.php) — no JavaScript, so it
 * can't be broken by the legacy Group Discount plugins' own scripts. No
 * price table here: the total is priced once, server-side, off the price
 * matrix, and shown as a single line.
 */
.pigeon-legacy-booking--hidden { display: none; }
#pigeon-checkout-form:target.pigeon-legacy-booking--hidden { display: block; }
#pigeon-checkout-form { max-width: 380px; margin: 16px auto 0; border: 1px solid #dde3ea; border-radius: 6px; padding: 16px; }
#pigeon-checkout-form form { display: flex; flex-direction: column; gap: 10px; }
#pigeon-checkout-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5c6773; text-transform: uppercase; letter-spacing: .4px; }
#pigeon-checkout-form input[type="text"],
#pigeon-checkout-form input[type="email"],
#pigeon-checkout-form input[type="tel"],
#pigeon-checkout-form input[type="number"],
#pigeon-checkout-form textarea,
#pigeon-checkout-form select { font: inherit; background: #fff; color: #333; border: 1px solid #c6ced8; border-radius: 5px; padding: 6px 8px; }
#pigeon-checkout-form .pigeon-checkout__total { font-size: 20px; font-weight: 700; color: #ef7c1f; margin: 0; }
#pigeon-checkout-form .pigeon-checkout__total small { display: block; font-size: 11px; font-weight: 400; color: #5c6773; text-transform: none; letter-spacing: 0; }
#pigeon-checkout-form fieldset.pigeon-checkout__deposit { border: 1px solid #dde3ea; border-radius: 5px; padding: 8px 10px; }
#pigeon-checkout-form fieldset.pigeon-checkout__deposit legend { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #5c6773; padding: 0 4px; }
#pigeon-checkout-form label.pigeon-checkout__radio { flex-direction: row; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; color: #333; }
#pigeon-checkout-form label.pigeon-checkout__radio input { width: auto; }
#pigeon-checkout-form button[type="submit"] { margin-top: 4px; }

/*
 * The theme's own .trip-video (Print this Trip / Trip Video) gets the same
 * 2-column grid so its pair sits directly under Book Now / Enquire Now
 * above, column for column — layout only, its own colors/hover states
 * (css/custom.css) are untouched.
 */
.trip-video { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-left: auto; margin-right: auto; max-width: 380px; }
.trip-video a { text-align: center; }

.pigeon-price-calculator__table { width: 100%; text-align: left; border-collapse: collapse; margin: 10px 0 0; font-size: 13px; }
.pigeon-price-calculator__table td { padding: 5px 10px 5px 16px; border-bottom: 1px solid #dadada; }
/* Keeps the "2 × 1,283.00 USD = 2,566.00 USD" line on one row instead of
   wrapping onto two — narrower right-side padding (above) and a slightly
   smaller table font-size free just enough width for it at 380px. */
.pigeon-price-calculator__table td.text-right { text-align: right; white-space: nowrap; }
.pigeon-price-calculator__row--total td { font-weight: 700; font-size: 1.15em; color: #ef7c1f; border-bottom: none; background: #fdf1e6; padding-top: 10px; padding-bottom: 10px; }

.pigeon-tour-search { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 782px) {
	.pigeon-tour__layout { flex-direction: column; }
	.pigeon-price-box { position: static; }
}