/**
 * YM Booking Design v1.0.3 — approved v2 "Prestige Steps" look.
 *
 * Every selector in this file is scoped under body.ymt-book (tour booking
 * pages) or body.ymt-request (Custom Japan Trip request page), so nothing
 * else on the site can be affected. This stylesheet is enqueued with a
 * dependency on the ym-tours plugin's 'ym-tours-css', so it prints after
 * frontend.css and these overrides win on specificity + order.
 *
 * Palette (from the approved samples): white cards on #f6f6f8, black ink
 * text, brand red #C1121F. The old dark-green / gold look of frontend.css
 * is overridden ONLY inside the two scopes above.
 *
 * v1.0.1 — why v1.0.0 still showed green/gold on staging: frontend.css
 * defines its whole palette as CSS variables on :root (lines 1–17) and
 * drives the booking state colours through them — e.g. the progress
 * circles, the selected calendar day and the selected time slot all take
 * var(--ymt-forest), and the step border takes var(--ymt-gold). The fix
 * below therefore FLIPS those variables themselves inside our two scopes
 * (in addition to the direct per-element overrides further down, which
 * cover the values frontend.css hardcodes, like the gold button
 * gradient). Because the variables are set on the body classes AND on
 * .ymt-main, every var() consumer in the booking/request flow recolours
 * at once; nothing outside these two page types can be affected (the
 * theme stylesheet never references the --ymt-* variables).
 */

/* ------------------------------------------------------------------ */
/* Tokens + palette flip                                               */
/* ------------------------------------------------------------------ */
body.ymt-book,
body.ymt-request {
	--ymbd-red: #C1121F;
	--ymbd-red-deep: #9A0E19;
	--ymbd-red-tint: #FDF1F2;
	--ymbd-ink: #101014;
	--ymbd-grey: #5A5A62;
	--ymbd-grey-2: #8B8B93;
	--ymbd-line: #E4E4E9;
	--ymbd-line-soft: #EEEEF1;
	--ymbd-bg: #F6F6F8;
	--ymbd-shadow: 0 1px 2px rgba(16, 16, 20, .05), 0 16px 40px rgba(16, 16, 20, .06);
	/* Palette flip: same values as on .ymt-main below, set here too so
	   elements the plugins park directly under <body> (lightboxes,
	   fixed bars) inherit the flipped palette as well. */
	--ymt-forest: #C1121F;
	--ymt-forest-2: #A50E1A;
	--ymt-forest-3: #C1121F;
	--ymt-gold: #C1121F;
	--ymt-gold-dark: #8F0D17;
}

/* Palette flip on the tours wrapper itself: frontend.css defines the
   variables on :root, so a definition on .ymt-main wins for everything
   inside the booking/request flow by cascade proximity — progress
   circles (var(--ymt-forest) / var(--ymt-gold)), selected day + slot
   (var(--ymt-forest)), step-heading chips, summary values, terms
   checkbox accent, variant labels and every other var() consumer turn
   red in one stroke. The direct overrides further down handle the
   hardcoded values (button gradient, pale-green panel hexes, …) and
   set the design's ink/grey text colours where red would be wrong. */
body.ymt-book .ymt-main,
body.ymt-request .ymt-main {
	--ymt-forest: #C1121F;
	--ymt-forest-2: #A50E1A;
	--ymt-forest-3: #C1121F;
	--ymt-gold: #C1121F;
	--ymt-gold-dark: #8F0D17;
}

/* Focus rings in brand red instead of the plugin's gold (both scopes). */
body.ymt-book .ymt-main :focus-visible,
body.ymt-request .ymt-main :focus-visible {
	outline-color: var(--ymbd-red);
}

/* ================================================================== */
/* BOOKING PAGES — body.ymt-book                                       */
/* ================================================================== */

body.ymt-book .ymt-booking-main {
	background: var(--ymbd-bg);
	color: var(--ymbd-ink);
	padding-bottom: 110px;
}

body.ymt-book .ymt-booking-main h1,
body.ymt-book .ymt-booking-main h2,
body.ymt-book .ymt-booking-main h3 {
	color: var(--ymbd-ink);
	font-family: var(--ymt-font);
	font-weight: 800;
	letter-spacing: -.01em;
}

body.ymt-book .ymt-kicker {
	color: var(--ymbd-red);
}

/* Breadcrumb */
body.ymt-book .ymt-breadcrumb {
	color: var(--ymbd-grey-2);
	font-size: 13px;
	padding-top: 18px;
}
body.ymt-book .ymt-breadcrumb a {
	color: var(--ymbd-grey);
}

/* --- Cover hero (figure injected by booking-design.js) ---
   The overlay (shade + figcaption) is a CHILD of the figure and is
   positioned over the image here; booking-design.js also sets the
   critical positioning inline on the elements it creates, so the
   overlay sits on the image by construction (v1.0.0 rendered it as a
   strip below the image on staging). */
body.ymt-book .ymbd-hero {
	background: #0C0C10;
	border-radius: 22px;
	box-shadow: var(--ymbd-shadow);
	margin: 22px auto 0;
	overflow: hidden;
	position: relative;
	width: min(1180px, calc(100% - 40px));
}
body.ymt-book .ymbd-hero img {
	display: block;
	height: 360px;
	object-fit: cover;
	width: 100%;
}
body.ymt-book .ymbd-hero-shade {
	background: linear-gradient(180deg, rgba(10, 10, 14, .18) 0%, rgba(10, 10, 14, 0) 34%, rgba(10, 10, 14, .55) 68%, rgba(10, 10, 14, .86) 100%);
	inset: 0;
	position: absolute;
}
body.ymt-book .ymbd-hero-content {
	bottom: 0;
	color: #fff;
	left: 0;
	padding: 28px 30px 26px;
	position: absolute;
	right: 0;
}
body.ymt-book .ymbd-hero-kicker {
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	gap: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
}
body.ymt-book .ymbd-hero-kicker::before {
	background: var(--ymbd-red);
	border-radius: 2px;
	content: "";
	height: 3px;
	width: 26px;
}
body.ymt-book .ymbd-hero-title {
	color: #fff;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.22;
	margin-top: 12px;
	max-width: 640px;
}
body.ymt-book .ymbd-hero-facts {
	color: rgba(255, 255, 255, .88);
	font-size: 15px;
	font-weight: 600;
	margin-top: 10px;
}

/* --- Booking head: duplicate title hidden (v1.0.1, FLAGGED) ---
   The cover hero's overlay now carries the tour title + facts, so the
   tours plugin's own title block inside .ymt-booking-head (kicker, H1,
   intro line) is visually hidden to avoid showing the title twice.
   The H1 stays in the DOM source. NOTE: the progress steps
   (ol.ymt-progress) are rendered INSIDE .ymt-booking-head by the
   plugin, so the head container itself is NOT display:none'd — only
   its title elements are — and the container is stripped of its
   background/border so no empty strip remains above the steps.
   Flagged in IMPLEMENTATION-NOTES.md for the owner's staging review. */
body.ymt-book .ymt-booking-head {
	background: transparent;
	border-bottom: 0;
	padding: 2px 0 0;
}
body.ymt-book .ymt-booking-head .ymt-kicker,
body.ymt-book .ymt-booking-head h1,
body.ymt-book .ymt-booking-head > .ymt-shell > p {
	display: none;
}

/* --- Progress: 52px circles on a track --- */
body.ymt-book .ymt-progress {
	margin: 34px 0 2px;
	position: relative;
}
body.ymt-book .ymt-progress::before {
	background: var(--ymbd-line);
	border-radius: 2px;
	content: "";
	height: 3px;
	left: 16.6667%;
	position: absolute;
	right: 16.6667%;
	top: 26px;
}
body.ymt-book .ymt-progress li {
	align-items: center;
	border-bottom: 0;
	color: var(--ymbd-grey-2);
	flex-direction: column;
	gap: 10px;
	justify-content: flex-start;
	padding: 0 6px;
	position: relative;
	text-align: center;
}
/* Red fill segment from a completed step's circle to the next circle. */
body.ymt-book .ymt-progress li::after {
	background: transparent;
	content: "";
	height: 3px;
	left: 50%;
	position: absolute;
	top: 26px;
	width: 100%;
}
body.ymt-book .ymt-progress li.is-done::after {
	background: var(--ymbd-red);
}
body.ymt-book .ymt-progress li:last-child::after {
	display: none;
}
body.ymt-book .ymt-progress li b {
	background: #fff;
	border: 2px solid var(--ymbd-line);
	color: var(--ymbd-grey-2);
	font-size: 17px;
	height: 52px;
	position: relative;
	width: 52px;
	z-index: 1;
}
body.ymt-book .ymt-progress li span {
	color: var(--ymbd-grey-2);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
body.ymt-book .ymt-progress li.is-done {
	border-color: transparent;
	color: var(--ymbd-ink);
}
body.ymt-book .ymt-progress li.is-done b {
	background: var(--ymbd-ink);
	border-color: var(--ymbd-ink);
	color: #fff;
}
body.ymt-book .ymt-progress li.is-done span {
	color: var(--ymbd-ink);
}
body.ymt-book .ymt-progress li.is-active {
	border-color: transparent;
	color: var(--ymbd-ink);
}
body.ymt-book .ymt-progress li.is-active b {
	background: var(--ymbd-red);
	border-color: var(--ymbd-red);
	box-shadow: 0 0 0 6px var(--ymbd-red-tint), 0 8px 18px rgba(193, 18, 31, .28);
	color: #fff;
}
body.ymt-book .ymt-progress li.is-active span {
	color: var(--ymbd-ink);
	font-weight: 800;
}

/* --- Layout + step cards --- */
body.ymt-book .ymt-booking-layout {
	gap: 28px;
	padding-top: 30px;
}
body.ymt-book .ymt-book-step {
	background: #fff;
	border: 1px solid var(--ymbd-line);
	border-radius: 20px;
	box-shadow: var(--ymbd-shadow);
	padding: clamp(22px, 4vw, 34px);
}
body.ymt-book .ymt-step-heading {
	gap: 13px;
}
body.ymt-book .ymt-step-heading > span {
	background: var(--ymbd-red-tint);
	color: var(--ymbd-red);
	font-size: 14px;
	height: 40px;
	margin-top: 0;
	width: 40px;
}
body.ymt-book .ymt-step-heading h2 {
	font-size: 23px;
	line-height: 1.25;
}
body.ymt-book .ymt-step-heading p {
	color: var(--ymbd-grey);
	font-size: 14px;
}
body.ymt-book .ymt-step-subheading {
	margin-top: 30px;
}
body.ymt-book .ymt-step-subheading h3 {
	color: var(--ymbd-grey);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
}
body.ymt-book .ymt-step-subheading p {
	color: var(--ymbd-grey);
	font-size: 14px;
	margin-top: 6px;
}

/* --- Alerts --- */
body.ymt-book .ymt-form-alert {
	background: var(--ymbd-red-tint);
	border: 1px solid #F2C4C9;
	border-radius: 14px;
	color: #7A0D16;
	font-size: 14px;
	font-weight: 600;
	padding: 15px 18px;
}

/* --- Calendar --- */
body.ymt-book .ymt-calendar {
	border: 1.5px solid var(--ymbd-line);
	border-radius: 16px;
	margin-top: 20px;
}
body.ymt-book .ymt-calendar-head {
	background: #fff;
	border-bottom: 1px solid var(--ymbd-line-soft);
	padding: 14px 16px;
}
body.ymt-book .ymt-calendar-head h3 {
	font-size: 17px;
}
body.ymt-book .ymt-calendar-head button {
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 50%;
	color: var(--ymbd-ink);
	display: flex;
	font-size: 20px;
	height: 44px;
	justify-content: center;
	width: 44px;
}
body.ymt-book .ymt-calendar-head button:not(:disabled):hover {
	border-color: var(--ymbd-red);
	color: var(--ymbd-red);
}
body.ymt-book .ymt-calendar-head button:disabled {
	cursor: not-allowed;
	opacity: .4;
}
body.ymt-book .ymt-weekdays {
	border-bottom: 1px solid var(--ymbd-line-soft);
	padding: 10px 12px 6px;
}
body.ymt-book .ymt-weekdays span {
	color: var(--ymbd-grey-2);
	font-size: 11px;
	letter-spacing: .1em;
}
body.ymt-book .ymt-days {
	gap: 5px;
	min-height: 0;
	padding: 12px 12px 16px;
}
body.ymt-book .ymt-day {
	background: #FAFAFB;
	border: 1.5px solid transparent;
	border-radius: 14px;
	color: var(--ymbd-ink);
	font-size: 15px;
	font-weight: 600;
	min-height: 50px;
}
/* The approved design has no availability dot under the day number, so
   the plugin's ::after dot is suppressed. (Its colours — green by
   default, gold when selected — also flip to red via the variable
   flip above, so nothing green/gold can reappear if a future plugin
   update restyles the dot.) */
body.ymt-book .ymt-day::after {
	content: none;
	display: none;
}
body.ymt-book .ymt-day:not(:disabled):hover {
	background: #fff;
	border-color: var(--ymbd-red);
}
body.ymt-book .ymt-day.is-selected {
	background: var(--ymbd-red);
	border-color: var(--ymbd-red);
	box-shadow: 0 8px 18px rgba(193, 18, 31, .3);
	color: #fff;
	font-weight: 800;
}
body.ymt-book .ymt-day:disabled {
	background: transparent;
	color: #C6C6CC;
	text-decoration: line-through;
}
body.ymt-book .ymt-day.is-empty {
	visibility: hidden;
}

/* --- Selection panel, departure-time chips, travellers --- */
body.ymt-book .ymt-selection-panel {
	background: #FAFAFB;
	border: 1px solid var(--ymbd-line-soft);
	border-radius: 16px;
	margin-top: 22px;
	padding: 22px;
}
body.ymt-book .ymt-selection-panel h3 {
	color: var(--ymbd-grey);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
}
body.ymt-book .ymt-slot-buttons {
	gap: 10px;
	margin-top: 14px;
}
body.ymt-book .ymt-slot {
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 999px;
	color: var(--ymbd-ink);
	min-width: 0;
	padding: 12px 24px;
}
body.ymt-book .ymt-slot strong {
	font-size: 16px;
	font-weight: 700;
}
body.ymt-book .ymt-slot small {
	color: var(--ymbd-grey);
	font-size: 11px;
	margin-top: 2px;
}
body.ymt-book .ymt-slot:not(:disabled):hover {
	border-color: var(--ymbd-ink);
}
body.ymt-book .ymt-slot.is-selected {
	background: var(--ymbd-ink);
	border-color: var(--ymbd-ink);
	box-shadow: 0 8px 18px rgba(16, 16, 20, .22);
	color: #fff;
}
body.ymt-book .ymt-slot.is-selected small {
	color: rgba(255, 255, 255, .75);
}
body.ymt-book .ymt-slot:disabled {
	opacity: .45;
}
body.ymt-book .ymt-traveller-picker {
	border-top: 1px solid var(--ymbd-line-soft);
	gap: 14px;
	margin-top: 20px;
	padding-top: 20px;
}
body.ymt-book .ymt-traveller-picker > div strong {
	color: var(--ymbd-ink);
	font-size: 15px;
}
body.ymt-book .ymt-traveller-picker > div span {
	color: var(--ymbd-grey);
	font-size: 12px;
	margin-top: 2px;
}
body.ymt-book .ymt-traveller-picker label {
	color: var(--ymbd-ink);
	font-size: 13px;
	font-weight: 700;
}
body.ymt-book .ymt-traveller-picker label small {
	color: var(--ymbd-grey-2);
	font-size: 11px;
	font-weight: 600;
}
body.ymt-book .ymt-traveller-picker select {
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 12px;
	color: var(--ymbd-ink);
	font-size: 16px;
	margin-top: 6px;
	min-height: 52px;
	padding: 10px 12px;
}
body.ymt-book .ymt-traveller-picker select:focus {
	border-color: var(--ymbd-red);
	box-shadow: 0 0 0 4px var(--ymbd-red-tint);
	outline: none;
}

/* --- Variant (experience) options, step 1 --- */
body.ymt-book .ymt-variant-option > span {
	border-color: var(--ymbd-line);
	border-radius: 16px;
}
body.ymt-book .ymt-variant-option:hover > span {
	border-color: var(--ymbd-red);
}
body.ymt-book .ymt-variant-option.is-selected > span {
	/* frontend.css uses a pale-green wash (#f2f8f5) + a green shadow
	   here; the border itself is var(--ymt-forest-3), already flipped. */
	background: var(--ymbd-red-tint);
	border-color: var(--ymbd-red);
	box-shadow: 0 8px 22px rgba(193, 18, 31, .14);
}
body.ymt-book .ymt-variant-option small {
	color: var(--ymbd-red);
}
body.ymt-book .ymt-variant-option strong,
body.ymt-book .ymt-variant-option em {
	color: var(--ymbd-ink);
}
body.ymt-book .ymt-variant-option p {
	color: var(--ymbd-grey);
}

/* --- Guest rows (step 2 child-seat / guest selects) --- */
body.ymt-book .ymt-guest-row {
	border-top-color: var(--ymbd-line-soft);
}
body.ymt-book .ymt-guest-row label {
	color: var(--ymbd-ink);
}
body.ymt-book .ymt-guest-row span {
	color: var(--ymbd-grey);
}
body.ymt-book .ymt-guest-row select {
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 12px;
	color: var(--ymbd-ink);
	font-size: 16px;
	min-height: 52px;
	padding: 10px 12px;
}
body.ymt-book .ymt-guest-row select:focus {
	border-color: var(--ymbd-red);
	box-shadow: 0 0 0 4px var(--ymbd-red-tint);
	outline: none;
}

/* Availability help strip (colours only — layout stays the plugin's). */
body.ymt-book .ymt-availability-help {
	background: var(--ymbd-red-tint);
	border-color: #F2C4C9;
}
body.ymt-book .ymt-availability-help strong {
	color: var(--ymbd-ink);
}
body.ymt-book .ymt-availability-help span {
	color: var(--ymbd-grey);
}
body.ymt-book .ymt-availability-help a {
	color: var(--ymbd-red);
}

/* --- Fields (step 2) --- */
body.ymt-book .ymt-field-grid {
	gap: 18px;
	margin-top: 26px;
}
body.ymt-book .ymt-field-grid label > span {
	color: var(--ymbd-ink);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px;
}
body.ymt-book .ymt-field-grid input,
body.ymt-book .ymt-field-grid select,
body.ymt-book .ymt-field-grid textarea {
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 13px;
	color: var(--ymbd-ink);
	font-size: 16px;
	min-height: 54px;
	padding: 13px 16px;
}
body.ymt-book .ymt-field-grid textarea {
	line-height: 1.55;
	min-height: 110px;
}
body.ymt-book .ymt-field-grid input:focus,
body.ymt-book .ymt-field-grid select:focus,
body.ymt-book .ymt-field-grid textarea:focus {
	border-color: var(--ymbd-red);
	box-shadow: 0 0 0 4px var(--ymbd-red-tint);
	outline: none;
}
body.ymt-book .ymt-field-grid input::placeholder,
body.ymt-book .ymt-field-grid textarea::placeholder {
	color: #A9A9B0;
}

/* --- Terms checkbox --- */
body.ymt-book .ymt-terms {
	align-items: flex-start;
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 13px;
	color: var(--ymbd-grey);
	font-size: 13px;
	gap: 12px;
	margin-top: 22px;
	padding: 15px 18px;
}
body.ymt-book .ymt-terms input {
	accent-color: var(--ymbd-red);
	flex: none;
	height: 20px;
	margin-top: 1px;
	width: 20px;
}
body.ymt-book .ymt-terms a {
	color: var(--ymbd-red);
}

/* --- Buttons + step actions --- */
body.ymt-book .ymt-btn {
	border-radius: 15px;
	font-size: 16px;
	min-height: 56px;
	padding: 14px 28px;
}
body.ymt-book .ymt-btn-gold {
	/* frontend.css hardcodes the gold gradient (no variable), so it is
	   overridden directly here; its `color` is !important there, so the
	   !important here is required — it is scoped to booking pages only. */
	background: var(--ymbd-red);
	box-shadow: 0 10px 22px rgba(193, 18, 31, .25);
	color: #fff !important;
}
body.ymt-book .ymt-btn-gold:hover {
	background: var(--ymbd-red-deep);
	box-shadow: 0 12px 26px rgba(193, 18, 31, .3);
}
body.ymt-book .ymt-btn-ghost {
	background: #fff;
	border: 1.5px solid var(--ymbd-ink);
	box-shadow: none;
	color: var(--ymbd-ink) !important;
}
body.ymt-book .ymt-step-actions {
	border-top: 1px solid var(--ymbd-line-soft);
	margin-top: 26px;
	padding-top: 22px;
}
body.ymt-book .ymt-step-actions button:disabled {
	box-shadow: none;
	opacity: .45;
}

/* --- Step 3: review + payment panel --- */
body.ymt-book .ymt-review {
	border: 1.5px solid var(--ymbd-line);
	border-radius: 16px;
	margin-top: 24px;
}
body.ymt-book .ymt-review-row {
	font-size: 15px;
	grid-template-columns: 160px 1fr;
	padding: 13px 18px;
}
body.ymt-book .ymt-review-row:nth-child(odd) {
	background: #FAFAFB;
}
body.ymt-book .ymt-review-row span {
	color: var(--ymbd-grey);
	font-weight: 600;
}
body.ymt-book .ymt-review-row strong {
	color: var(--ymbd-ink);
	font-weight: 700;
	text-align: right;
}
body.ymt-book .ymt-review-row:last-child {
	background: #fff;
	border-top: 1.5px solid var(--ymbd-ink);
}
body.ymt-book .ymt-review-row:last-child span {
	color: var(--ymbd-ink);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body.ymt-book .ymt-review-row:last-child strong {
	font-size: 20px;
	font-weight: 800;
}
/* Hosted Stripe Checkout panel — styling only, the payment itself
   happens on Stripe's hosted page exactly as before. */
body.ymt-book .ymt-payment-trust {
	background: #fff;
	border: 1px solid var(--ymbd-line);
	border-radius: 16px;
	box-shadow: var(--ymbd-shadow);
	gap: 9px;
	margin-top: 22px;
	padding: 20px 22px;
}
body.ymt-book .ymt-payment-trust span {
	color: var(--ymbd-grey);
	font-size: 13.5px;
	font-weight: 600;
}
body.ymt-book .ymt-payment-trust span:first-child {
	color: var(--ymbd-ink);
	font-size: 16px;
	font-weight: 800;
}

/* --- Order summary card --- */
body.ymt-book .ymt-order-summary {
	border: 1px solid var(--ymbd-line);
	border-radius: 20px;
	box-shadow: var(--ymbd-shadow);
	top: 100px;
}
body.ymt-book .ymt-order-summary > img {
	aspect-ratio: 16 / 10;
}
body.ymt-book .ymt-order-summary > div {
	padding: 24px;
}
body.ymt-book .ymt-order-summary h2 {
	font-size: 21px;
	line-height: 1.3;
	margin-top: 7px;
}
body.ymt-book .ymt-order-summary dl {
	border-block: 1px solid var(--ymbd-line-soft);
	margin: 18px 0;
}
body.ymt-book .ymt-order-summary dl > div {
	font-size: 13px;
	padding: 6px 0;
}
body.ymt-book .ymt-order-summary dt {
	color: var(--ymbd-grey);
	font-weight: 600;
}
body.ymt-book .ymt-order-summary dd {
	color: var(--ymbd-ink);
}
body.ymt-book .ymt-summary-price > span {
	color: var(--ymbd-grey);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
body.ymt-book .ymt-summary-price del {
	color: var(--ymbd-grey-2);
	font-size: 13px;
}
body.ymt-book .ymt-summary-price strong {
	color: var(--ymbd-ink);
	font-family: var(--ymt-font);
	font-size: 30px;
	font-weight: 800;
}
body.ymt-book .ymt-order-summary ul {
	margin: 16px 0;
}
body.ymt-book .ymt-order-summary li {
	color: var(--ymbd-grey);
	font-size: 12.5px;
	padding: 4px 0;
}
body.ymt-book .ymt-order-summary a {
	color: var(--ymbd-red) !important;
	font-size: 13px;
}

/* --- Mobile sticky bar (element injected by booking-design.js) ---
   Shown only below 1024px and only while body carries .ymbd-on
   (the JS adds it once a live step button exists to proxy). It never
   submits anything itself — it clicks the step's real primary button. */
body.ymt-book .ymbd-bar {
	background: rgba(255, 255, 255, .97);
	border-top: 1px solid var(--ymbd-line);
	bottom: 0;
	box-shadow: 0 -8px 30px rgba(16, 16, 20, .1);
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	z-index: 9990;
}
body.ymt-book .ymbd-bar-in {
	align-items: center;
	display: flex;
	gap: 16px;
	margin: 0 auto;
	max-width: 920px;
	padding: 12px 16px;
}
body.ymt-book .ymbd-bar-total {
	flex: 0 1 auto;
	min-width: 0;
}
body.ymt-book .ymbd-bar-total small {
	color: var(--ymbd-grey);
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
body.ymt-book .ymbd-bar-total b {
	color: var(--ymbd-ink);
	font-size: 21px;
	font-weight: 800;
	white-space: nowrap;
}
body.ymt-book .ymbd-bar-btn {
	background: var(--ymbd-red);
	border: 0;
	border-radius: 15px;
	box-shadow: 0 10px 22px rgba(193, 18, 31, .25);
	color: #fff;
	cursor: pointer;
	flex: 1;
	font-size: 16px;
	font-weight: 800;
	min-height: 56px;
	padding: 12px 16px;
}
body.ymt-book .ymbd-bar-btn:not(:disabled):hover {
	background: var(--ymbd-red-deep);
}
body.ymt-book .ymbd-bar-btn:disabled {
	box-shadow: none;
	cursor: not-allowed;
	opacity: .45;
}

@media (max-width: 1023.98px) {
	body.ymt-book.ymbd-on .ymbd-bar {
		display: block;
	}
	/* Keep the page end clear of the bar (and of the theme's own
	   56px mobile bar below 860px). */
	body.ymt-book.ymbd-on .ymt-booking-main {
		padding-bottom: 260px;
	}
}

/* The theme's .ymcs-mobile-bar (56px + safe area) sits at the very
   bottom up to 860px — stack the booking bar directly above it. */
@media (max-width: 860px) {
	body.ymt-book .ymbd-bar {
		bottom: calc(56px + env(safe-area-inset-bottom));
	}
}

@media (max-width: 820px) {
	body.ymt-book .ymbd-hero {
		width: calc(100% - 28px);
	}
	body.ymt-book .ymbd-hero img {
		height: 270px;
	}
	body.ymt-book .ymbd-hero-content {
		padding: 20px 20px 18px;
	}
	body.ymt-book .ymbd-hero-title {
		font-size: 24px;
	}
	body.ymt-book .ymt-book-step {
		padding: 22px 16px 26px;
	}
	body.ymt-book .ymt-selection-panel {
		padding: 18px 14px;
	}
	body.ymt-book .ymt-review-row {
		grid-template-columns: 108px 1fr;
		padding: 12px 14px;
	}
}

@media (max-width: 640px) {
	body.ymt-book .ymt-progress li span {
		font-size: 12px;
	}
	body.ymt-book .ymt-step-actions {
		gap: 12px;
	}
	body.ymt-book .ymt-step-actions > span {
		display: none;
	}
	body.ymt-book .ymt-step-actions .ymt-btn {
		flex: 1;
		padding-inline: 14px;
	}
	body.ymt-book .ymt-field-grid {
		grid-template-columns: 1fr;
	}
}

/* ================================================================== */
/* CUSTOM TRIP REQUEST PAGE — body.ymt-request                         */
/* ================================================================== */

body.ymt-request .ymt-request-main {
	background: var(--ymbd-bg);
	color: var(--ymbd-ink);
}

body.ymt-request .ymt-request-main h1,
body.ymt-request .ymt-request-main h2,
body.ymt-request .ymt-request-main h3 {
	color: var(--ymbd-ink);
	font-family: var(--ymt-font);
	font-weight: 800;
	letter-spacing: -.01em;
}

body.ymt-request .ymt-kicker {
	color: var(--ymbd-red);
}

/* --- Hero with the generated cover (img injected by the JS) --- */
body.ymt-request .ymt-request-hero {
	background-color: #0C0C10;
	overflow: hidden;
	position: relative;
}
body.ymt-request .ymbd-hero-img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
	z-index: 0;
}
body.ymt-request .ymbd-hero-shade {
	background: linear-gradient(90deg, rgba(10, 10, 14, .88) 0%, rgba(10, 10, 14, .62) 55%, rgba(10, 10, 14, .28) 100%);
	inset: 0;
	position: absolute;
	z-index: 1;
}
body.ymt-request .ymt-request-hero > .ymt-shell {
	position: relative;
	z-index: 2;
}
body.ymt-request .ymt-request-hero h1 {
	color: #fff;
}
body.ymt-request .ymt-request-hero h1 span {
	color: #F3B7BC;
}
body.ymt-request .ymt-request-hero .ymt-eyebrow {
	color: #F3B7BC;
}
body.ymt-request .ymt-request-hero > .ymt-shell > p:not(.ymt-eyebrow) {
	color: rgba(255, 255, 255, .85);
}
body.ymt-request .ymt-request-hero .ymt-trust-row {
	border-top-color: rgba(255, 255, 255, .25);
}
body.ymt-request .ymt-request-hero .ymt-trust-row span {
	color: rgba(255, 255, 255, .92);
}
/* Hero call-to-action buttons (rendered by the Custom Japan Boost block). */
body.ymt-request .ym-cjb-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}
body.ymt-request .ym-cjb-cta a {
	align-items: center;
	border-radius: 15px;
	display: inline-flex;
	font-size: 15px;
	font-weight: 800;
	justify-content: center;
	min-height: 54px;
	padding: 13px 26px;
	text-decoration: none;
}
body.ymt-request .ym-cjb-cta a.go {
	background: var(--ymbd-red);
	box-shadow: 0 10px 22px rgba(193, 18, 31, .3);
	color: #fff;
}
body.ymt-request .ym-cjb-cta a.ghost {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .85);
	color: #fff;
}

/* --- Intro column --- */
body.ymt-request .ymt-request-section {
	background: var(--ymbd-bg);
}
body.ymt-request .ymt-request-intro > p:not(.ymt-kicker) {
	color: var(--ymbd-grey);
}
body.ymt-request .ymt-request-points article {
	border-top: 1px solid var(--ymbd-line);
}
body.ymt-request .ymt-request-points article > b {
	color: var(--ymbd-red);
}
body.ymt-request .ymt-request-points p {
	color: var(--ymbd-grey);
}
body.ymt-request .ymt-whatsapp-card {
	background: var(--ymbd-ink);
	border-radius: 16px;
}
body.ymt-request .ymt-whatsapp-card span {
	color: rgba(255, 255, 255, .75);
}

/* --- Request card --- */
body.ymt-request .ymt-request-card {
	border: 1px solid var(--ymbd-line);
	border-radius: 20px;
	box-shadow: var(--ymbd-shadow);
}
body.ymt-request .ymt-request-card fieldset {
	border-bottom: 1px solid var(--ymbd-line-soft);
}
body.ymt-request .ymt-request-card legend {
	color: var(--ymbd-ink);
	font-family: var(--ymt-font);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
}

/* --- Zone guide strip (inserted by the JS, display-only) --- */
body.ymt-request .ymbd-zones {
	background: #FAFAFB;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 16px;
	margin-bottom: 30px;
	padding: 20px;
}
body.ymt-request .ymbd-zones-title {
	color: var(--ymbd-grey);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	margin-bottom: 14px;
	text-transform: uppercase;
}
body.ymt-request .ymbd-zones-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}
body.ymt-request .ymbd-zone {
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 14px;
	padding: 14px 16px;
}
body.ymt-request .ymbd-zone-name {
	color: var(--ymbd-red);
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}
body.ymt-request .ymbd-zone-dist {
	color: var(--ymbd-ink);
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-top: 5px;
}
body.ymt-request .ymbd-zone-price {
	color: var(--ymbd-ink);
	display: block;
	font-size: 17px;
	font-weight: 800;
	margin-top: 2px;
}
body.ymt-request .ymbd-zones-note {
	color: var(--ymbd-grey);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.6;
	margin-top: 14px;
}

/* --- Fields --- */
body.ymt-request .ymt-field-grid {
	gap: 18px;
}
body.ymt-request .ymt-field-grid label > span {
	color: var(--ymbd-ink);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px;
}
body.ymt-request .ymt-field-grid input,
body.ymt-request .ymt-field-grid select,
body.ymt-request .ymt-field-grid textarea {
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 13px;
	color: var(--ymbd-ink);
	font-size: 16px;
	min-height: 54px;
	padding: 13px 16px;
}
body.ymt-request .ymt-field-grid textarea {
	line-height: 1.55;
	min-height: 110px;
}
body.ymt-request .ymt-field-grid input:focus,
body.ymt-request .ymt-field-grid select:focus,
body.ymt-request .ymt-field-grid textarea:focus {
	border-color: var(--ymbd-red);
	box-shadow: 0 0 0 4px var(--ymbd-red-tint);
	outline: none;
}
body.ymt-request .ymt-field-grid input::placeholder,
body.ymt-request .ymt-field-grid textarea::placeholder {
	color: #A9A9B0;
}
body.ymt-request .ymt-checkline {
	color: var(--ymbd-grey);
	font-size: 13px;
	gap: 10px;
}
body.ymt-request .ymt-checkline input {
	accent-color: var(--ymbd-red);
	height: 18px;
	width: 18px;
}

/* --- Terms, alerts, buttons --- */
body.ymt-request .ymt-terms {
	align-items: flex-start;
	background: #fff;
	border: 1.5px solid var(--ymbd-line);
	border-radius: 13px;
	color: var(--ymbd-grey);
	font-size: 13px;
	gap: 12px;
	margin-top: 22px;
	padding: 15px 18px;
}
body.ymt-request .ymt-terms input {
	accent-color: var(--ymbd-red);
	flex: none;
	height: 20px;
	margin-top: 1px;
	width: 20px;
}
body.ymt-request .ymt-terms a {
	color: var(--ymbd-red);
}
body.ymt-request .ymt-form-alert {
	background: var(--ymbd-red-tint);
	border: 1px solid #F2C4C9;
	border-radius: 14px;
	color: #7A0D16;
	font-size: 14px;
	font-weight: 600;
	padding: 15px 18px;
}
body.ymt-request .ymt-btn {
	border-radius: 15px;
	font-size: 16px;
	min-height: 56px;
	padding: 14px 28px;
}
body.ymt-request .ymt-btn-gold {
	/* Same hardcoded gold gradient as on booking pages — overridden
	   directly; frontend.css sets its colour with !important, so this
	   scoped !important is required to beat it. */
	background: var(--ymbd-red);
	box-shadow: 0 10px 22px rgba(193, 18, 31, .25);
	color: #fff !important;
}
body.ymt-request .ymt-btn-gold:hover {
	background: var(--ymbd-red-deep);
	box-shadow: 0 12px 26px rgba(193, 18, 31, .3);
}
body.ymt-request .ymt-btn-ghost {
	background: #fff;
	border: 1.5px solid var(--ymbd-ink);
	box-shadow: none;
	color: var(--ymbd-ink) !important;
}
body.ymt-request .ymt-form-note {
	color: var(--ymbd-grey-2);
	font-size: 12px;
}
body.ymt-request .ymt-inquiry-success > div {
	background: var(--ymbd-red-tint);
	color: var(--ymbd-red);
}

@media (max-width: 640px) {
	body.ymt-request .ymbd-hero-shade {
		background: linear-gradient(180deg, rgba(10, 10, 14, .55) 0%, rgba(10, 10, 14, .9) 72%);
	}
	body.ymt-request .ymbd-zones-grid {
		grid-template-columns: 1fr;
	}
	body.ymt-request .ymbd-zones {
		padding: 16px;
	}
}