/*
 * Hotel stay bar — the shared check-in/out + guests component.
 *
 * One segmented bar, OTA-style: the fields SHARE the full width (no dead
 * space), hairline dividers between segments, the night count as a chip on
 * the right end (대표 2026-08-04). Used by the hotel DETAIL page (drives the
 * rate rows) and the hotel LISTING page (drives the card totals and carries
 * the stay into the detail links) — one stylesheet so the two can't drift.
 * Tokens only; every var() carries the token's own fallback value.
 */

/* Bar + DETACHED Search button side by side (대표 2026-08-04 — the button
   separates from the outline, Agoda-style). The button stretches to the
   bar's height, so the two always match. */
.bto-ht-staywrap { display: flex; align-items: stretch; gap: 14px; margin-bottom: 1.2rem; }
.bto-ht-staywrap > .bto-ht-stay { flex: 1; min-width: 0; margin-bottom: 0; }
.bto-ht-staywrap > .bto-btn {
	flex: 0 0 auto;
	border-radius: var(--bto-radius, 12px);
	padding: 0 2.4rem; font-size: 15px;
}

.bto-ht-stay {
	display: flex; align-items: stretch;
	border: 0px solid var(--bto-border-strong, #c6d3cc);
	border-radius: var(--bto-radius, 12px);
	background: var(--bto-surface, #fff);
	box-shadow: var(--bto-shadow-1, 0 1px 3px rgba(0, 0, 0, .04));
	margin-bottom: 1.2rem;
	/* NO overflow:hidden — it clipped the guests popover to nothing
	   (대표 2026-08-04 "인원을 누르면 아무것도 구현되지 않아"). The bar's
	   rounded look comes from the end segments instead. */
}
.bto-ht-stay > :first-child { border-radius: 9px 0 0 9px; }
.bto-ht-stay > :last-child { border-radius: 0 9px 9px 0; }
.bto-ht-stay > label {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; justify-content: center; gap: .35rem;
	/* PC: generous vertical air (대표 2026-08-04 "너무 답답해"). */
	padding: 1.35rem 1.2rem;
	font-size: .8rem; font-weight: 600; letter-spacing: .02em;
	color: var(--bto-muted, #656c70); text-transform: uppercase;
}
.bto-ht-stay > label + label,
.bto-ht-stay > .bto-ht-stay-ages:not(:empty),
.bto-ht-stay > .bto-ht-stay-nights { border-left: 0px solid var(--bto-border, #e0e8e4); }

/* Controls lose their own boxes — the segment IS the field. */
.bto-ht-stay > label input,
.bto-ht-stay > label select {
	border: 0; border-radius: 0; box-shadow: none; outline: 0;
	padding: 0; background: transparent;
	font-size: 18px; font-weight: 600; color: var(--bto-ink, #000000);
	width: 100%;
}
.bto-ht-stay > label input:focus,
.bto-ht-stay > label select:focus { border: 0; box-shadow: none; }
.bto-ht-stay > label:focus-within { background: var(--bto-green-soft, #e8f9f0); }

/* Selects carry the site chevron, tucked toward the divider (the segments
   are borderless). */
.bto-ht-stay > label select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5254' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: right 4px center;
	padding-right: 26px;
}

/* Child ages — its own labeled segment, same anatomy as the others. */
.bto-ht-stay-ages:not(:empty) {
	display: flex; flex-direction: column; justify-content: center; gap: .25rem;
	padding: .85rem 1.1rem;
}
.bto-ht-stay-ages-label {
	font-size: .8rem; font-weight: 600; letter-spacing: .02em;
	color: var(--bto-muted, #656c70); text-transform: uppercase;
}
.bto-ht-stay-ages-row { display: flex; gap: .5rem; }
.bto-ht-stay-ages input { width: 58px; font-size: 14px; padding: 4px 8px; }

.bto-ht-stay-nights {
	flex: 0 0 auto; display: flex; align-items: center;
	padding: 0 1.3rem;
	font-size: .95rem; font-weight: 700; color: var(--bto-green, #027a4e);
	background: var(--bto-green-soft, #e8f9f0);
	white-space: nowrap;
}

/* ------------------------------------------------ dates (range calendar) */

/* Two segments backed by ONE range-calendar popover — the native picker
   can't be themed (대표 2026-08-04). Same segment anatomy as the rest. */
.bto-ht-stay > .bto-cal { flex: 2 1 0; min-width: 0; position: relative; display: flex; }
.bto-ht-stay > label + .bto-cal,
.bto-ht-stay > .bto-cal + label,
.bto-ht-stay > .bto-cal + .bto-gp { border-left: 1px solid var(--bto-border, #e0e8e4); }

.bto-cal-seg {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .35rem;
	padding: 1.35rem 1.2rem;
	border: 0; background: transparent; color: inherit;
	cursor: pointer; text-align: left;
}
.bto-cal-seg + .bto-cal-seg { border-left: 1px solid var(--bto-border, #e0e8e4); }
.bto-cal-seg:hover,
.bto-cal-seg:focus,
.bto-cal-seg:focus-visible { background: var(--bto-green-soft, #e8f9f0); color: inherit; outline: 0; }

/* Icon + date on one row under the small-caps label. */
.bto-cal-vrow { display: flex; align-items: center; gap: .5rem; min-width: 0; }

/* The calendar card itself lives in bto-cal.css (shared with the golf
   booking widget). */

/* --------------------------------------------- guests popover segment */

/* The GUESTS field is a segment like the others: small-caps label over the
   live "2 adults · 1 child" value; clicking opens the popover card. */
.bto-ht-stay > .bto-gp { flex: 1.2 1 0; min-width: 0; position: relative; display: flex; }
.bto-ht-stay > .bto-gp + label,
.bto-ht-stay > label + .bto-gp,
.bto-ht-stay > .bto-gp + .bto-btn { border-left: 1px solid var(--bto-border, #e0e8e4); }

/* Explicit rest/hover/focus so the parent theme's default dark button
   styling can never bleed through (it painted the segment near-black). */
.bto-gp-toggle {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .35rem;
	padding: 1.35rem 1.2rem;
	border: 0; background: transparent; color: inherit;
	cursor: pointer; text-align: left; border-radius: inherit;
}
.bto-gp-toggle:hover,
.bto-gp-toggle:focus,
.bto-gp-toggle:focus-visible { background: var(--bto-green-soft, #e8f9f0); color: inherit; outline: 0; }
.bto-gp-l {
	font-size: .8rem; font-weight: 600; letter-spacing: .02em;
	color: var(--bto-muted, #656c70); text-transform: uppercase;
}
.bto-gp-v {
	font-size: 18px; font-weight: 600; color: var(--bto-ink, #000000);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* The card — generous air, soft shadow, quiet dividers. */
.bto-gp-pop {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 96;
	width: 320px; max-width: 92vw;
	background: var(--bto-surface, #fff);
	border: 1px solid var(--bto-border, #e0e8e4);
	border-radius: var(--bto-radius-lg, 20px);
	box-shadow: var(--bto-shadow-3, 0 16px 44px rgba(28, 29, 31, .18));
	padding: 1.3rem 1.4rem;
	text-transform: none;
}

.bto-gp-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .65rem 0;
}
.bto-gp-name {
	display: flex; flex-direction: column; gap: .15rem;
	font-size: 1rem; font-weight: 600; color: var(--bto-ink, #000000);
}
.bto-gp-name small { font-size: .8rem; font-weight: 500; color: var(--bto-muted, #656c70); letter-spacing: 0; }

/* Circular steppers — the Agoda gesture. */
.bto-gp-step { display: flex; align-items: center; gap: .9rem; }
.bto-gp-step button {
	/* Perfect circle: fixed box, zero padding — the parent theme's default
	   button padding stretched these into ovals (대표 2026-08-04). */
	box-sizing: border-box;
	width: 34px; height: 34px; min-width: 34px; min-height: 34px;
	padding: 0; flex: 0 0 auto;
	border-radius: 999px;
	border: 1px solid var(--bto-border-strong, #c6d3cc);
	background: var(--bto-surface, #fff); color: var(--bto-green, #027a4e);
	font-size: 18px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: border-color .15s, background-color .15s;
}
.bto-gp-step button:hover { border-color: var(--bto-green, #027a4e); background: var(--bto-green-soft, #e8f9f0); }
.bto-gp-step [data-gp-n] { min-width: 1.4rem; text-align: center; font-size: 1.05rem; font-weight: 700; }

.bto-gp-ages { border-top: 1px solid var(--bto-border, #e0e8e4); margin-top: .6rem; padding-top: .9rem; }
.bto-gp-note { margin: 0 0 .8rem; font-size: .84rem; color: var(--bto-ink-2, #4c5254); line-height: 1.5; }
.bto-gp-ages-list { display: flex; flex-direction: column; gap: .55rem; }
/* Full field styling here — the popover can sit OUTSIDE .site-main (header
   panel), where the theme's base form layer doesn't reach. Chevron inset
   12px from the border, like every select on the site. */
.bto-gp-ages-list select {
	width: 100%;
	border: 1px solid var(--bto-border-strong, #c6d3cc);
	border-radius: var(--bto-radius-sm, 8px);
	padding: 9px 36px 9px 12px;
	font-size: 14px; color: var(--bto-ink, #000000);
	background-color: var(--bto-surface, #fff);
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5254' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
}

/* Steppers: explicit focus/active too — the parent theme's dark button
   state painted the "+" near-black (대표 2026-08-04). */
.bto-gp-step button:focus,
.bto-gp-step button:active,
.bto-gp-step button:focus-visible {
	border-color: var(--bto-green, #027a4e);
	background: var(--bto-green-soft, #e8f9f0);
	color: var(--bto-green, #027a4e);
	outline: 0;
}

/* ------------------------------------------------------------- mobile */

/* Structure-independent stacking (대표 2026-08-04 — the old nth-child
   rules broke whenever a segment was added): search/name row, the two
   dates side by side, guests row, then the full-width Search cap. */
@media (max-width: 860px) {
	.bto-ht-stay { flex-wrap: wrap; }

	.bto-ht-stay > label,
	.bto-ht-stay > .bto-cal,
	.bto-ht-stay > .bto-gp {
		flex: 1 1 100%;
		border-top: 1px solid var(--bto-border, #e0e8e4);
	}
	.bto-ht-stay > :first-child { border-top: 0; }

	/* Kill the desktop between-segment dividers — stacked rows would show
	   them as a stray line against the bar's left outline (대표 2026-08-04).
	   Same compound selectors as the desktop rules so they actually win.
	   (The divider BETWEEN the two date segs inside .bto-cal stays.) */
	.bto-ht-stay > label + label,
	.bto-ht-stay > label + .bto-cal,
	.bto-ht-stay > .bto-cal + label,
	.bto-ht-stay > .bto-cal + .bto-gp,
	.bto-ht-stay > label + .bto-gp,
	.bto-ht-stay > .bto-gp + label,
	.bto-ht-stay > .bto-gp + .bto-ht-stay-nights,
	.bto-ht-stay > .bto-ht-stay-ages:not(:empty),
	.bto-ht-stay > .bto-ht-stay-nights { border-left: 0; }

	/* The two date segments already split their row inside .bto-cal. */
	.bto-cal-seg,
	.bto-gp-toggle { padding: .85rem 1rem; }
	.bto-cal-pop { left: 0; right: auto; width: min(340px, 94vw); }

	.bto-ht-stay > label,
	.bto-gp-toggle { padding: .85rem 1rem; }
	.bto-ht-stay > label input,
	.bto-ht-stay > label select { font-size: 16px; }
	.bto-gp-v { font-size: 16px; }
	.bto-gp-pop { left: 0; right: auto; width: min(320px, 92vw); }

	.bto-ht-stay-nights {
		flex: 1 1 100%; justify-content: center; padding: .6rem 0;
		border-left: 0; border-top: 1px solid var(--bto-border, #e0e8e4);
	}

	/* Corner radii follow the stacked layout. */
	.bto-ht-stay > :first-child { border-radius: 9px 9px 0 0; }
	.bto-ht-stay > :last-child { border-radius: 0 0 9px 9px; }

	/* Detached Search drops below the bar, full width. */
	.bto-ht-staywrap { flex-wrap: wrap; gap: 10px; }
	.bto-ht-staywrap > .bto-btn { flex: 1 1 100%; padding: .9rem 0; }
}

/* ------------------------------------------------- brand (green) variant */

/* Solid brand-green bar — the detail page and the header hotel panel
   (대표 2026-08-05 mock): white values, light labels, translucent-white
   dividers, sage nights chip. The popover cards stay white. Alpha values
   ride on tokens via color-mix (registered alpha-overlay exception). */

.bto-ht-stay--brand {
	background: var(--bto-green, #027a4e);
	border-color: var(--bto-green, #027a4e);
}

/* Labels: small-caps line goes soft white-green. */
.bto-ht-stay--brand > label,
.bto-ht-stay--brand .bto-gp-l,
.bto-ht-stay--brand .bto-ht-stay-ages-label { color: var(--bto-green-fg-muted, #d4f3e5); }

/* Values: white. */
.bto-ht-stay--brand > label input,
.bto-ht-stay--brand > label select,
.bto-ht-stay--brand .bto-gp-v,
.bto-ht-stay--brand .bto-cal-seg,
.bto-ht-stay--brand .bto-gp-toggle,
.bto-ht-stay--brand .bto-cal-ico { color: var(--bto-green-fg, #ffffff); }

.bto-ht-stay--brand > label input::placeholder {
	color: color-mix( in srgb, var(--bto-green-fg, #ffffff) 65%, transparent );
	font-weight: 500;
}
.bto-ht-stay--brand > label input { caret-color: var(--bto-green-fg, #ffffff); }

/* Clicking/typing must NOT lighten the field (대표 2026-08-05): the segment
   stays green, typed text white. Chrome's autofill preview paints its own
   pale background — the inset-shadow hack is the only override it honors. */
.bto-ht-stay--brand > label input:focus,
.bto-ht-stay--brand > label input:focus-visible {
	background: transparent;
	color: var(--bto-green-fg, #ffffff);
}
.bto-ht-stay--brand > label input:-webkit-autofill,
.bto-ht-stay--brand > label input:-webkit-autofill:hover,
.bto-ht-stay--brand > label input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--bto-green-fg, #ffffff);
	-webkit-box-shadow: 0 0 0 1000px var(--bto-green, #027a4e) inset;
	caret-color: var(--bto-green-fg, #ffffff);
}

/* Dividers: translucent white on green (same compound shapes as the base
   rules, later in the file so they win). */
.bto-ht-stay--brand > label + label,
.bto-ht-stay--brand > .bto-ht-stay-ages:not(:empty),
.bto-ht-stay--brand > .bto-ht-stay-nights,
.bto-ht-stay--brand > label + .bto-cal,
.bto-ht-stay--brand > .bto-cal + label,
.bto-ht-stay--brand > .bto-cal + .bto-gp,
.bto-ht-stay--brand > .bto-gp + label,
.bto-ht-stay--brand > label + .bto-gp,
.bto-ht-stay--brand > .bto-gp + .bto-ht-stay-nights,
.bto-ht-stay--brand > .bto-gp + .bto-btn,
.bto-ht-stay--brand .bto-cal-seg + .bto-cal-seg {
	border-left-color: color-mix( in srgb, var(--bto-green-fg, #ffffff) 28%, transparent );
}

/* Hover / focus: darken instead of the light-green wash. */
.bto-ht-stay--brand > label:focus-within,
.bto-ht-stay--brand .bto-cal-seg:hover,
.bto-ht-stay--brand .bto-cal-seg:focus,
.bto-ht-stay--brand .bto-cal-seg:focus-visible,
.bto-ht-stay--brand .bto-gp-toggle:hover,
.bto-ht-stay--brand .bto-gp-toggle:focus,
.bto-ht-stay--brand .bto-gp-toggle:focus-visible {
	background: var(--bto-green-hover, #026845);
	color: var(--bto-green-fg, #ffffff);
}

/* Nights chip: sage block, white bold (mock). */
.bto-ht-stay--brand .bto-ht-stay-nights {
	background: color-mix( in srgb, var(--bto-green-fg, #ffffff) 35%, var(--bto-green, #027a4e) );
	color: var(--bto-green-fg, #ffffff);
}

@media (max-width: 860px) {
	/* Stacked-row top dividers pick up the translucent white too. */
	.bto-ht-stay--brand > label,
	.bto-ht-stay--brand > .bto-cal,
	.bto-ht-stay--brand > .bto-gp,
	.bto-ht-stay--brand .bto-ht-stay-nights {
		border-top-color: color-mix( in srgb, var(--bto-green-fg, #ffffff) 28%, transparent );
	}
	.bto-ht-stay--brand > :first-child { border-top: 0; }
}