/* ---------------------------------------------------------
 * BookTeeOff Cart Page
 * Booking-request review + participant details + Submit (04 §9).
 * Shares the booking widget's design tokens.
 * --------------------------------------------------------- */

.bto-cart {
	--c-surface: var(--bto-surface, #FFFFFF);
	--c-surface-2: var(--bto-surface-2, #f2f6f4);
	--c-border: var(--bto-border, #e0e8e4);
	--c-border-strong: var(--bto-border-strong, #c6d3cc);
	--c-ink: var(--bto-ink, #1c1d1f);
	--c-ink-2: var(--bto-ink-2, #4c5254);
	--c-muted: var(--bto-muted, #656c70);
	--c-brand: var(--bto-green, #027a4e);
	--c-brand-fg: var(--bto-green-fg, #ffffff);
	--c-brand-soft: var(--bto-green-soft, #e8f9f0);
	--c-chip-on-bg: var(--bto-select-bg, #eeedfe);
	--c-chip-on-fg: var(--bto-select-fg, #3c3489);
	--c-chip-on-border: var(--bto-select-border, #7f77dd);
	--c-err: var(--bto-error-fg, #f12243);
	--c-err-bg: var(--bto-error-bg, #fbebe8);
	/* Cart notices use the red/error palette, not amber (대표 2026-07-21):
	   all cautions (odd-cart, sign-in, email, verification) read as red. */
	--c-warn: var(--c-err);
	--c-warn-bg: var(--c-err-bg);
	--c-ok: var(--bto-success, #027a4e);

	max-width: 1080px;
	margin: 0 auto;
	padding: 8px 0 48px;
	color: var(--c-ink);
	box-sizing: border-box;
}

/* Two-column layout mirroring the detail page (items 2fr : summary 1fr). */
.bto-cart-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	align-items: start;
}

.bto-cart-items { min-width: 0; }

.bto-cart *,
.bto-cart *::before,
.bto-cart *::after { box-sizing: border-box; }

.bto-cart [hidden] { display: none !important; }

.bto-cart-loading,
.bto-cart-empty {
	padding: 40px 0;
	text-align: center;
	color: var(--c-muted);
}

.bto-cart-empty a { color: var(--c-brand); font-weight: 500; }

.bto-cart-notice {
	padding: 10px 14px;
	border-radius: var(--bto-radius-sm, 8px);
	font-size: 14px;
	margin-bottom: 12px;
}

.bto-cart-notice.warn {
	background: var(--c-warn-bg);
	color: var(--c-warn);
}

/* ---- item card ---- */

.bto-cart-item {
	border: 1px solid var(--c-border);
	border-radius: var(--bto-radius, 12px);
	background: var(--c-surface);
	margin-bottom: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .04 );
}

/* No fill — the brand-green course name is the header (the solid green band
   competed with the Submit button). The name links to the course page. */
.bto-cart-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px 0;
}

.bto-cart-item-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: var(--bto-fs-h2, 24px);
	font-weight: var(--bto-fw-h2, 600);
	color: var(--c-brand);
	text-decoration: none;
}

.bto-cart-item-ic {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

a.bto-cart-item-title:hover,
a.bto-cart-item-title:focus {
	color: var(--bto-green-hover, #026845);
	text-decoration: underline;
}

.bto-cart-remove {
	background: transparent;
	border: 1px solid var(--c-border-strong);
	color: var(--c-ink-2);
	font-size: 13.5px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: var(--bto-radius-sm, 8px);
	cursor: pointer;
}

.bto-cart-remove:hover,
.bto-cart-remove:focus {
	background: transparent;
	border-color: var(--c-err);
	color: var(--c-err);
}

.bto-cart-item-meta {
	padding: 6px 18px 12px;
	font-size: 16px;
	color: var(--c-ink);
	border-bottom: 1px solid var(--c-border);
}

/* ---- participant rows ---- */

.bto-cart-people { padding: 6px 18px; }

.bto-cart-p {
	padding: 12px 0;
	border-bottom: 0.5px solid var(--c-border);
}

.bto-cart-p:last-child { border-bottom: 0; }

.bto-cart-p.missing {
	background: var(--c-err-bg);
	border-radius: var(--bto-radius-sm, 8px);
	margin: 0 -10px;
	padding: 12px 10px;
}

.bto-cart-p-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bto-cart-pnum {
	flex: 0 0 auto;
	width: 28px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-muted);
}

.bto-cart-name {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	border: 0.5px solid var(--c-border-strong);
	border-radius: var(--bto-radius-sm, 8px);
	font-size: 15px;
	text-transform: uppercase;
}

.bto-cart-name:focus {
	outline: none;
	border-color: var(--c-brand);
}

.bto-cart-p-price {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 600;
}

.bto-cart-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0 38px;
}

.bto-cart-chip {
	font-size: 13px;
	padding: 4px 10px;
	border: 0.5px solid var(--c-border-strong);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	color: var(--c-ink-2);
}

.bto-cart-chip:hover { border-color: var(--c-chip-on-border); }

.bto-cart-chip.on {
	background: var(--c-chip-on-bg);
	color: var(--c-chip-on-fg);
	border-color: var(--c-chip-on-border);
	font-weight: 500;
}

/* ---- document row ---- */

.bto-cart-doc {
	margin: 10px 0 0 38px;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
}

.bto-cart-doc:empty { margin: 0; }

.bto-cart-upload {
	font-size: 13px;
	padding: 6px 12px;
	border: 0.5px dashed var(--c-warn);
	color: var(--c-warn);
	background: var(--c-warn-bg);
	border-radius: var(--bto-radius-sm, 8px);
	cursor: pointer;
}

.bto-cart-upload:hover { filter: brightness( .98 ); }

.bto-cart-tag {
	font-size: 13px;
	color: var(--c-muted);
}

.bto-cart-tag.ok { color: var(--c-ok); font-weight: 500; }

.bto-cart-doc-status { font-size: 13px; color: var(--c-muted); }

.bto-cart-doc-x {
	background: transparent;
	border: 0;
	color: var(--c-muted);
	cursor: pointer;
	font-size: 12px;
}

/* ---- item footer ---- */

.bto-cart-item-foot {
	padding: 12px 18px;
	border-top: 0.5px solid var(--c-border);
	font-size: 13.5px;
	color: var(--c-ink-2);
}

.bto-cart-odd { color: var(--c-warn); margin-bottom: 4px; }
.bto-cart-odd b { font-weight: 600; }
.bto-cart-incl { color: var(--c-muted); margin-bottom: 8px; }
.bto-cart-incl b { color: var(--c-ink); font-weight: 600; }
.bto-cart-incl-sep { color: var(--c-border-strong); }

.bto-cart-subtotal {
	display: flex;
	justify-content: space-between;
	font-size: 18px;
	font-weight: 600;
	color: var(--c-ink);
}

/* ---- summary / submit ---- */

.bto-cart-summary {
	position: sticky;
	top: 20px;
	border: 1px solid var(--c-border);
	border-radius: var(--bto-radius, 12px);
	background: var(--c-surface);
	padding: 18px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .04 );
}

.bto-cart-signin-note {
	font-size: 13px;
	color: var(--c-warn);
	background: var(--c-warn-bg);
	padding: 10px 12px;
	border-radius: var(--bto-radius-sm, 8px);
	margin-bottom: 12px;
	line-height: 1.5;
}

.bto-cart-footer-notice {
	font-size: 13px;
	color: var(--c-muted);
	margin-bottom: 14px;
	line-height: 1.5;
}

.bto-cart-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 20px;
	font-weight: 700;
	padding-bottom: 14px;
	border-bottom: 0.5px solid var(--c-border);
}

.bto-cart-contact { margin: 14px 0; }

.bto-cart-contact-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}

.bto-cart-contact input {
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 8px;
	border: 0.5px solid var(--c-border-strong);
	border-radius: var(--bto-radius-sm, 8px);
	font-size: 14px;
}

.bto-cart-contact input:focus { outline: none; border-color: var(--c-brand); }

.bto-cart-submit {
	width: 100%;
	padding: 13px;
	background: var(--c-brand);
	color: var(--c-brand-fg);
	border: 0;
	border-radius: var(--bto-radius-sm, 8px);
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
}

.bto-cart-submit:hover { filter: brightness( 1.06 ); }
.bto-cart-submit:disabled { opacity: .6; cursor: default; }

/* Secondary action — keep browsing / add another course to this trip. */
.bto-cart-continue {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 11px;
	text-align: center;
	background: transparent;
	color: var(--c-brand);
	border: 0.5px solid var(--c-border-strong);
	border-radius: var(--bto-radius-sm, 8px);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	box-sizing: border-box;
}

.bto-cart-continue:hover { background: var(--c-brand-soft); }

/* ---- "what happens after you submit" steps ---- */

.bto-cart-how {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 0.5px solid var(--c-border);
}

.bto-cart-how-title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
}

.bto-cart-how-step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}

.bto-cart-how-step:last-child { margin-bottom: 0; }

.bto-cart-how-n {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--c-brand-soft);
	color: var(--c-brand);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.bto-cart-how-body {
	font-size: 13px;
	line-height: 1.55;
	color: var(--c-muted);
}

.bto-cart-how-body b {
	color: var(--c-ink);
	font-weight: 600;
}

.bto-cart-how-email {
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--c-warn-bg);
	color: var(--c-warn);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.55;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/* Line (stroke) envelope — inherits the red text color, no filled emoji. */
.bto-cart-how-email-ic {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

.bto-cart-submit-msg { font-size: 13px; margin-bottom: 10px; min-height: 0; }
.bto-cart-submit-msg.err { color: var(--c-err); }

.bto-cart-success {
	padding: 40px 20px;
	text-align: center;
	font-size: 16px;
	color: var(--c-ink);
	border: 0.5px solid var(--c-border);
	border-radius: var(--bto-radius, 12px);
	background: var(--c-surface);
}

/* ---- additional services (paid on-site, forwarded) ---- */

/* Sits after the subtotal on a soft gray field — optional extras, visually
   separate from the priced part of the card. */
.bto-cart-services {
	padding: 10px 18px;
	border-top: 1px solid var(--c-border);
	background: var(--bto-surface-3, #f6f6f6);
}

/* Collapsible: the title row is a full-width toggle button. */
.bto-cart-services-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--c-ink);
	cursor: pointer;
	text-align: left;
}

.bto-cart-services-toggle:hover,
.bto-cart-services-toggle:focus {
	background: none;
	color: var(--c-brand);
}

.bto-cart-services-chev {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--c-ink);
	transition: transform .15s;
}

.bto-cart-services.open .bto-cart-services-chev { transform: rotate(180deg); }

.bto-cart-services-panel { padding-top: 6px; }

.bto-cart-services-title {
	font-size: 16px;
	font-weight: 600;
}

.bto-cart-services-note {
	font-size: 14px;
	color: var(--c-muted);
	margin-bottom: 10px;
}

.bto-svc-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 14px;
}

.bto-svc-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; }
.bto-svc-ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-brand); }
.bto-svc-label { min-width: 0; }
.bto-svc-price { flex: 0 0 auto; color: var(--c-muted); font-size: 13px; }

.bto-svc-step {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--bto-radius-sm, 8px);
	overflow: hidden;
	background: var(--c-surface);
}

.bto-svc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--c-brand);
	transition: background-color .15s, color .15s;
}

.bto-svc-btn:hover { background: var(--c-brand); color: var(--c-brand-fg); }

.bto-svc-qty {
	min-width: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
	border-left: 1px solid var(--c-border);
	border-right: 1px solid var(--c-border);
}

.bto-svc-amt {
	flex: 0 0 auto;
	width: 96px;
	text-align: right;
	font-weight: 600;
}

.bto-svc-gallery-extra { padding: 4px 0 6px; }

.bto-svc-ages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.bto-svc-age {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	color: var(--c-muted);
}

.bto-svc-age-in {
	width: 64px;
	padding: 5px 8px;
	border: 0.5px solid var(--c-border-strong);
	border-radius: var(--bto-radius-sm, 8px);
	font-size: 13px;
}

.bto-svc-age-in:focus { outline: none; border-color: var(--c-brand); }

.bto-svc-age-in.bad {
	border-color: var(--c-err);
	background: var(--c-err-bg);
	color: var(--c-err);
}

.bto-svc-minage {
	font-size: 13px;
	color: var(--c-warn);
	margin-bottom: 6px;
}

.bto-cart-services.missing {
	background: var(--c-err-bg);
	box-shadow: inset 3px 0 0 var(--c-err);
}

.bto-svc-policy {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--c-brand);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.bto-svc-sep { color: var(--c-border-strong); font-size: 13px; }

.bto-svc-onsite {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 0.5px dashed var(--c-border);
	font-size: 13px;
	color: var(--c-ink-2);
}

/* ---- modal (gallery policy) — same card language as the booking widget's
   promotions popup: white card, title row + line-icon X, ink scrim. The
   title speaks brand green (policy voice), not the promo lavender. ---- */

.bto-cart-modal-ov {
	position: fixed;
	inset: 0;
	background: rgba( 28, 29, 31, .45 ); /* ink-900 scrim (alpha overlay idiom) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 9999;
}

.bto-cart-modal {
	background: var(--c-surface);
	border-radius: var(--bto-radius, 12px);
	box-shadow: var(--bto-shadow-3, 0 16px 44px rgba(28, 29, 31, .18));
	max-width: 480px;
	width: 100%;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 18px 22px 20px;
}

.bto-cart-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.bto-cart-modal-title {
	font-size: var(--bto-fs-h2, 24px);
	font-weight: var(--bto-fw-h2, 600);
	color: var(--c-brand);
}

.bto-cart-modal-x {
	border: 0;
	background: none;
	padding: 6px;
	margin: -6px -8px 0 0;
	cursor: pointer;
	color: var(--c-muted);
	display: inline-flex;
}
.bto-cart-modal-x:hover,
.bto-cart-modal-x:focus {
	background: none;
	color: var(--c-ink);
}

.bto-cart-modal-body {
	padding: 8px 0 0;
	overflow-y: auto;
	font-size: 15px;
	line-height: 1.65;
	white-space: pre-wrap;
	color: var(--c-ink-2);
}

@media ( max-width: 860px ) {
	.bto-cart-grid { grid-template-columns: 1fr; }
	.bto-cart-summary { position: static; }
}

@media ( max-width: 600px ) {
	.bto-cart-chips,
	.bto-cart-doc { margin-left: 0; }

	/* Service rows would crush the label into one character per line — give the
	   name its own full-width line, with price / stepper / amount below it. */
	.bto-svc-row { flex-wrap: wrap; row-gap: 8px; }
	.bto-svc-name { flex: 1 1 100%; }
	.bto-svc-step { margin-left: auto; }
	.bto-svc-amt { width: auto; min-width: 60px; }
}