/*
 * 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; }
}

/* Room pickers (SGL / DBL / TRPL). Styled to sit alongside the +/- steppers
   above them rather than reading as raw browser dropdowns. The native arrow
   is dropped for an inline chevron so the three look identical on every OS,
   and each room type keeps its own colour so the row is scannable at a
   glance. */
.pigeon-calc-rooms label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #333333;
}
.pigeon-calc-rooms select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 28px;
	width: 28px;
	min-width: 28px;
	padding: 0 9px 0 3px;
	border: 0;
	border-radius: 6px;
	background-color: #e5766b;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 7px 5px;
	color: #ffffff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 28px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.pigeon-calc-rooms select:focus {
	outline: 2px solid rgba(0, 0, 0, 0.25);
	outline-offset: 1px;
}
.pigeon-calc-rooms select option {
	background: #ffffff;
	color: #333333;
}
/* Single rooms sit in light gold. Its text and chevron go dark brown --
   white would be unreadable against a background this pale. */
#pigeon-calc-singlerooms {
	background-color: #f0c75e;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a3708' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	color: #4a3708;
}
#pigeon-calc-singlerooms:hover { background-color: #e8b840; }
/* DBL and TRPL take the colour of the stepper button directly above
   them, so the row reads as one grid rather than three loose controls. */
#pigeon-calc-doubles { background-color: #e5766b; }
#pigeon-calc-doubles:hover { background-color: #d9634c; }
#pigeon-calc-triples { background-color: #6ebd7a; }
#pigeon-calc-triples:hover { background-color: #4cae4c; }

/* Reverted (2026-09-06) -- this pinned width was a workaround for the
   theme's .main-grid > .column-2 computing to (effectively) zero/runaway
   width, which left this box with nothing real to right-align against or
   size itself against. That root cause is now fixed directly in custom.css
   (min-width:0 on .column-2, the actual CSS Grid bug), so this box gets a
   real column width again and line 90's own `max-width: 380px` is enough on
   its own -- pinning a second, fixed width here on top of that is what was
   making this box a different width than its neighbours (the Trip Map,
   etc.), which now correctly size off the same real column. Kept as a
   comment, not deleted, in case a future theme change reintroduces the
   zero-width column and this needs restoring. */
.pigeon-calc-field--rooms {
	flex-wrap: wrap !important;
	gap: 8px 12px !important;
}
.pigeon-calc-field--rooms > span:first-child {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
}
.pigeon-calc-field--rooms .pigeon-calc-rooms {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	flex: 0 0 auto !important;
	margin-left: auto !important;
	white-space: nowrap !important;
}
/* The mismatch warning is this row's third child -- drop it onto a line of
   its own so it stops taking a slot from the space-between above it. */
#pigeon-calc-rooms-note {
	flex: 1 0 100% !important;
	order: 9 !important;
	text-align: right !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: normal !important;
}

/* Each picker gets the stepper's own 68px pitch (28px button + 40px gap), so
   DBL lands under the minus, TPL under the plus, and the spacing between the
   three reads identically to the +/- row above. The caption sits in the gap
   ahead of its own box. */
.pigeon-calc-rooms label {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 4px !important;
	width: 68px !important;
}

/* The Adults line now names each room type, so it is far longer than the
   single figure it replaced. These value cells are set never to wrap, and one
   long line was dragging the whole table wider than the box, where the box's
   own overflow:hidden quietly cut the amounts off. Only this line needs to
   wrap; the rest stay on one line as before. */
#pigeon-calc-line-adults {
	white-space: normal !important;
}