/**
 * ChillOut Surf — booking form (.tb, inc/twist-booking.php) and contact form (.tc, inc/twist-contact.php).
 *
 * Same markup as the Twist Surf theme, restyled with ChillOut's own tokens (assets/css/variables.css):
 * thin 1px lines, near-square corners, black buttons, Fraunces headings, cream (--color-soft) panels,
 * and the red accent kept for small details only (the "no red button fills" rule in components.css).
 *
 * @package SurfCamp_Framework
 */

.tb {
	--tb-gap: 22px;
	--tb-line: 1px solid var(--color-border);
	--tb-radius: var(--radius-lg);
	--tb-selected: var(--color-accent-tint);
}

.twist-booking {
	padding-top: var(--space-sm);
}

.tb__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tb__alert {
	margin-bottom: 20px;
	padding: 14px 18px;
	border: 1px solid var(--color-error);
	border-left-width: 4px;
	border-radius: var(--tb-radius);
	background: #fdf1f1;
	font-weight: var(--font-weight-medium);
}

/* ---- Steps ---------------------------------------------------------------- */

.tb__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.tb__step-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	color: var(--color-text-muted);
	font-size: 0.72rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tb__step-pill em {
	font-style: normal;
}

.tb__step-pill span {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: var(--tb-line);
	border-radius: 50%;
	background: var(--color-white);
	font-size: 0.8rem;
	letter-spacing: 0;
}

.tb__step-pill.is-current {
	border-bottom-color: var(--color-accent);
	color: var(--color-ink);
}

.tb__step-pill.is-current span {
	border-color: var(--color-ink);
}

.tb__step-pill.is-done {
	color: var(--color-ink);
}

.tb__step-pill.is-done span {
	border-color: var(--color-ink);
	background: var(--color-ink);
	color: var(--color-white);
}

/* ---- Layout + panels ------------------------------------------------------- */

.tb__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

.tb__panel {
	min-width: 0;
	margin: 0 0 24px;
	padding: clamp(22px, 3vw, 36px);
	border: var(--tb-line);
	border-radius: var(--tb-radius);
	background: var(--color-white);
}

.tb.is-js .tb__panel[hidden] {
	display: none;
}

.tb__title {
	float: left;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	font-weight: var(--font-weight-display-light, 300);
	letter-spacing: var(--tracking-tight);
	line-height: 1.15;
}

.tb__title + * {
	clear: both;
}

.tb__intro {
	margin: -6px 0 18px;
	color: var(--color-text-muted);
}

/* ---- Fields ---------------------------------------------------------------- */

.tb__field {
	min-width: 0;
	margin-bottom: var(--tb-gap);
}

.tb__field > label,
.tb__label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.88rem;
	font-weight: var(--font-weight-medium);
}

.tb__field em {
	color: var(--color-accent);
	font-style: normal;
}

.tb__optional {
	margin-left: 4px;
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: var(--font-weight-regular);
}

.tb input[type="text"],
.tb input[type="email"],
.tb input[type="tel"],
.tb input[type="date"],
.tb input[type="number"],
.tb textarea,
.tb__from select {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: var(--tb-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-text);
	font: inherit;
	font-size: 0.95rem;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tb input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	line-height: 24px;
	text-align: left;
}

.tb input[type="date"]::-webkit-date-and-time-value {
	margin: 0;
	text-align: left;
}

.tb textarea {
	min-height: 120px;
	resize: vertical;
}

.tb input:focus,
.tb textarea:focus,
.tb__from select:focus {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 3px var(--color-accent-tint);
}

.tb__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

.tb__hint {
	margin: 8px 0 0;
	color: var(--color-text-muted);
	font-size: 0.88rem;
}

.tb__hint--top {
	margin: 0 0 10px;
}

.tb__inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

.tb__inline .tb__hint {
	flex: 1 1 220px;
	margin: 0;
}

/* ---- Counters (travellers, rooms) ------------------------------------------ */

.tb__group {
	display: grid;
	gap: 10px;
	margin-bottom: 22px;
}

.tb__field .tb__group {
	margin-bottom: 8px;
}

.tb__counter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 12px 12px 16px;
	border: var(--tb-line);
	border-radius: var(--tb-radius);
	background: var(--color-white);
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.tb__panel > .tb__counter {
	margin-bottom: 22px;
}

.tb__counter.is-on {
	border-color: var(--color-ink);
	background: var(--color-soft);
}

.tb__counter--info {
	background: var(--color-soft);
}

.tb__counter-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.tb__counter-label {
	font-weight: var(--font-weight-bold);
}

.tb__counter-text small {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

.tb__counter .tb__stepper {
	flex: 0 0 auto;
}

.tb__shared {
	flex: 0 0 auto;
	max-width: 50%;
	font-size: 0.85rem;
	font-weight: var(--font-weight-bold);
	text-align: right;
}

.tb__stepper {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: var(--tb-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
}

.tb__stepper button {
	width: 46px;
	border: 0;
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 1.25rem;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.tb__stepper button:hover {
	background: var(--color-soft);
}

.tb__stepper button:disabled {
	opacity: 0.25;
	background: transparent;
	cursor: not-allowed;
}

.tb .tb__stepper input[type="number"] {
	width: 54px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-inline: var(--tb-line);
	border-radius: 0;
	font-weight: var(--font-weight-bold);
	text-align: center;
	-moz-appearance: textfield;
}

.tb__stepper input::-webkit-outer-spin-button,
.tb__stepper input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* ---- Choices, chips, options ---------------------------------------------- */

.tb__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tb__choices--cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.tb__choice,
.tb__chip,
.tb__option {
	position: relative;
	cursor: pointer;
}

.tb__option {
	display: block;
}

.tb__choice input,
.tb__chip input,
.tb__check input,
.tb__option input {
	position: absolute;
	opacity: 0;
}

.tb__choice-box {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 2px 12px;
	align-items: center;
	height: 100%;
	padding: 14px 16px;
	border: var(--tb-line);
	border-radius: var(--tb-radius);
	background: var(--color-white);
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.tb__choice-box .tb-icon,
.tb__choice-box .twist-ico {
	grid-row: span 2;
	width: 30px;
	height: 30px;
	color: var(--color-accent);
}

.tb__choice-box strong {
	font-size: 0.98rem;
}

.tb__choice-box small {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

.tb__choice input:checked + .tb__choice-box {
	border-color: var(--color-ink);
	background: var(--color-soft);
	box-shadow: inset 0 0 0 1px var(--color-ink);
}

.tb__chip span {
	display: inline-block;
	padding: 9px 16px;
	border: var(--tb-line);
	border-radius: 999px;
	background: var(--color-white);
	font-size: 0.9rem;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tb__chip input:checked + span {
	border-color: var(--color-ink);
	background: var(--color-ink);
	color: var(--color-white);
}

.tb__options {
	display: grid;
	gap: 10px;
}

.tb__option-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px 14px 48px;
	border: var(--tb-line);
	border-radius: var(--tb-radius);
	background: var(--color-white);
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.tb__option-box::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 16px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border: 1px solid var(--color-text-muted);
	border-radius: 50%;
	background: var(--color-white);
}

.tb__option input:checked + .tb__option-box {
	border-color: var(--color-ink);
	background: var(--color-soft);
}

.tb__option input:checked + .tb__option-box::before {
	border-color: var(--color-ink);
	background: var(--color-ink);
	box-shadow: inset 0 0 0 4px var(--color-white);
}

.tb__option-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.tb__option-text strong {
	font-size: 0.98rem;
	line-height: 1.3;
}

.tb__option-text small {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

.tb__option-price {
	flex-shrink: 0;
	margin-left: auto;
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
}

.tb__choice input:focus-visible + .tb__choice-box,
.tb__chip input:focus-visible + span,
.tb__check input:focus-visible + span,
.tb__option input:focus-visible + .tb__option-box {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

.tb__from {
	display: grid;
	gap: 6px;
	margin-top: 14px;
}

.tb__from[hidden] {
	display: none;
}

.tb__from label {
	font-size: 0.88rem;
	font-weight: var(--font-weight-medium);
}

.tb__info {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 var(--tb-gap);
	padding: 16px 18px;
	border-left: 3px solid var(--color-accent);
	background: var(--color-soft);
}

.tb__info svg,
.tb__info .twist-ico {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	color: var(--color-accent);
}

.tb__info p {
	margin: 0;
	line-height: 1.55;
}

.tb__info strong {
	display: block;
	margin-bottom: 2px;
}

[data-hardboard] .tb__info {
	margin-bottom: 12px;
}

.tb__included {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 7px 14px;
	border: 1px solid var(--color-ink);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: var(--font-weight-bold);
}

.tb__included::before {
	content: '✓';
	color: var(--color-accent);
}

/* ---- Checkbox (terms) ------------------------------------------------------ */

.tb__check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 6px 0 var(--tb-gap);
	cursor: pointer;
}

.tb__check span::before {
	content: '';
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	vertical-align: -4px;
}

.tb__check input:checked + span::before {
	background: var(--color-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.tb__check a,
.tb__terms-link {
	color: var(--color-ink);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-underline-offset: 3px;
}

.tb__terms-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

/* ---- Review (last step) ---------------------------------------------------- */

.tb__review {
	display: grid;
	gap: 0;
	margin: 0 0 var(--tb-gap);
	overflow: hidden;
	border: var(--tb-line);
	border-radius: var(--tb-radius);
	background: var(--color-white);
}

.tb__review > div {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) 36px;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-bottom: var(--tb-line);
}

.tb__review > div:last-child {
	border-bottom: 0;
}

.tb__review dt {
	color: var(--color-text-muted);
	font-size: 0.86rem;
}

.tb__review dd {
	margin: 0;
	font-weight: var(--font-weight-medium);
	overflow-wrap: anywhere;
}

.tb__edit {
	width: 32px;
	height: 32px;
	border: var(--tb-line);
	border-radius: 50%;
	background: var(--color-white);
	cursor: pointer;
}

.tb__edit:hover {
	border-color: var(--color-ink);
}

/* ---- Errors ---------------------------------------------------------------- */

.tb__error {
	margin: 6px 0 0;
	color: var(--color-error);
	font-size: 0.86rem;
	font-weight: var(--font-weight-medium);
}

.tb .has-error input,
.tb .has-error textarea,
.tb .has-error.tb__check span::before {
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

/* ---- Navigation + pay ------------------------------------------------------ */

.tb__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 8px;
}

.tb__nav .button--outline {
	margin-right: auto;
}

.tb.is-sending .tb__submit {
	opacity: 0.6;
	pointer-events: none;
}

.tb__pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 4px;
}

.tb__pay .tb__submit {
	flex: 1 1 240px;
	min-height: 54px;
}

.tb__paypal {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-text-muted);
}

.tb__paypal small {
	font-size: 0.78rem;
}

.tb__paypal img {
	display: block;
	width: 84px;
	height: auto;
}

.tb__secure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--color-text-muted);
	font-size: 0.86rem;
}

.tb__secure svg,
.tb__secure .twist-ico {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* ---- Summary card ---------------------------------------------------------- */

.tb__summary {
	position: sticky;
	top: calc(var(--header-height, 80px) + 20px);
}

.tb__summary-card {
	overflow: hidden;
	border: var(--tb-line);
	border-radius: var(--tb-radius);
	background: var(--color-white);
}

.tb__summary-img img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.tb__summary-body {
	padding: 20px 22px 22px;
}

.tb__summary-name {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: var(--font-weight-display-light, 300);
	line-height: 1.2;
}

.tb__summary-dates {
	margin: 0 0 14px;
	color: var(--color-text-muted);
	font-size: 0.88rem;
}

.tb__lines {
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: var(--tb-line);
	list-style: none;
}

.tb__lines li,
.tb__total,
.tb__deposit p,
.tb__arrival,
.tb__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 6px;
	font-size: 0.9rem;
}

.tb__lines li {
	color: var(--color-text-muted);
}

.tb__lines li span:last-child {
	flex: 0 0 auto;
	color: var(--color-ink);
	font-weight: var(--font-weight-medium);
}

.tb__total {
	font-size: 0.95rem;
	font-weight: var(--font-weight-medium);
}

.tb__total [data-sum-total] {
	font-weight: var(--font-weight-bold);
}

.tb__row small {
	color: var(--color-text-muted);
	font-size: 0.78rem;
}

.tb__row--grand {
	margin-top: 8px;
	padding-top: 8px;
	border-top: var(--tb-line);
	font-weight: var(--font-weight-bold);
}

.tb__deposit {
	margin: 12px 0 10px;
	padding: 16px 18px;
	border-radius: var(--tb-radius);
	background: var(--color-ink);
	color: var(--color-white);
}

.tb__deposit .tb__deposit-title {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.7rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.tb__deposit p {
	margin: 0 0 2px;
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
}

.tb__deposit-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 6px;
	font-size: 0.88rem;
}

.tb__deposit-line small,
.tb__arrival small {
	display: block;
	opacity: 0.75;
	font-size: 0.78rem;
	font-weight: var(--font-weight-regular);
}

.tb__deposit-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
}

.tb__deposit strong,
.tb__deposit-total strong {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: var(--font-weight-display-light, 300);
	line-height: 1;
}

.tb__deposit small {
	display: block;
	font-size: 0.78rem;
	line-height: 1.4;
}

.tb__arrival {
	align-items: baseline;
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.tb__arrival strong {
	color: var(--color-ink);
	font-size: 1rem;
}

.tb__summary-action,
.tb__bar {
	display: none;
}

/* ---- Terms dialog ---------------------------------------------------------- */

.tb__terms {
	width: min(760px, calc(100vw - 24px));
	max-height: min(86vh, 900px);
	padding: 0;
	border: 0;
	border-radius: var(--tb-radius);
	background: var(--color-white);
	color: var(--color-ink);
	box-shadow: var(--shadow-lg);
}

.tb__terms[open] {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	height: fit-content;
	margin: auto;
}

.tb__terms::backdrop {
	background: rgba(17, 17, 17, 0.6);
}

.tb__terms-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: var(--tb-line);
}

.tb__terms-head h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: var(--font-weight-display-light, 300);
}

.tb__terms-close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: var(--tb-line);
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.tb__terms-body {
	flex: 1 1 auto;
	overflow: auto;
	padding: 6px 22px 18px;
	font-size: 0.95rem;
}

.tb__terms-body h2 {
	font-size: 1.15rem;
}

.tb__terms-foot {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 14px 22px;
	border-top: var(--tb-line);
}

/* ---- Compact page head (booking page when the form is on) ----------------- */

.tb-head {
	padding: clamp(18px, 3vw, 32px) 0 6px;
}

.tb-head__inner {
	display: grid;
	justify-items: center;
	gap: 6px;
	text-align: center;
}

.tb-head__back {
	justify-self: start;
	margin-bottom: 6px;
	color: var(--color-ink);
	font-size: 0.78rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	text-transform: uppercase;
}

.tb-head h1 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	font-weight: var(--font-weight-display-light, 300);
	line-height: 1.1;
}

.tb-head__meta {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* ---- Contact form (.tc) ---------------------------------------------------- */

.tc .tb__field {
	margin-bottom: 18px;
}

.tc__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 6px;
}

.tc__foot .tb__hint {
	margin: 0;
}

.tc--sent {
	padding: 26px 24px;
	border-left: 3px solid var(--color-accent);
	background: var(--color-soft);
	color: var(--color-text);
}

.tc--sent p {
	margin: 0;
}

.tc__sent-title {
	margin-bottom: 8px !important;
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: var(--font-weight-display-light, 300);
}

/* ---- Tablet / phone -------------------------------------------------------- */

@media (max-width: 900px) {
	.tb__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.tb__panel {
		padding: 20px 16px;
	}

	.tb__title {
		margin-bottom: 14px;
		font-size: 1.5rem;
	}

	.tb__steps {
		position: sticky;
		top: var(--header-height, 68px);
		z-index: 20;
		margin: 0 calc(50% - 50vw) 16px;
		padding: 10px 16px;
		border-bottom: var(--tb-line);
		background: var(--color-white);
	}

	.tb__summary {
		position: static;
		display: block;
	}

	.tb__summary .tb__lines,
	.tb__summary .tb__arrival,
	.tb__summary .tb__deposit small {
		display: block;
	}

	.tb__summary .tb__lines li,
	.tb__summary .tb__arrival {
		display: flex;
	}

	.tb__summary-img {
		display: none;
	}

	.tb__summary-body {
		padding: 16px;
	}

	.tb__summary-action {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 14px;
	}

	.tb__bar {
		position: sticky;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 16px calc(50% - 50vw) 0;
		padding: 10px 16px;
		border-top: 1px solid var(--color-ink);
		background: var(--color-ink);
		color: var(--color-white);
		text-decoration: none;
		box-shadow: 0 -8px 24px rgba(17, 17, 17, 0.12);
	}

	.tb__bar strong {
		font-family: var(--font-display);
		font-weight: var(--font-weight-display-light, 300);
	}

	.tb__bar-pay {
		display: grid;
		line-height: 1.1;
	}

	.tb__bar-pay strong {
		font-size: 1.45rem;
	}

	.tb__bar-pay em {
		opacity: 0.8;
		font-size: 0.72rem;
		font-style: normal;
	}

	.tb__bar-total {
		display: grid;
		margin-left: auto;
		line-height: 1.15;
		text-align: right;
	}

	.tb__bar-total small {
		font-size: 0.7rem;
		font-weight: var(--font-weight-bold);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.tb__bar-total em {
		font-size: 0.72rem;
		font-style: normal;
		text-decoration: underline;
	}

	.tb__bar-total [data-sum-total] {
		font-size: 0.95rem;
		font-weight: var(--font-weight-bold);
	}

	.tb__bar-deposit {
		display: none;
	}

	.tb-head__back {
		justify-self: center;
	}

	body:has(.tb__bar) .whatsapp-widget {
		bottom: calc(84px + var(--whatsapp-lift, 0px));
	}
}

@media (max-width: 620px) {
	.tb__steps {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 6px;
	}

	.tb__step-pill {
		flex: 1 1 0;
		justify-content: center;
		font-size: 0.66rem;
	}

	.tb__step-pill span {
		width: 24px;
		height: 24px;
	}

	.tb__step-pill em {
		display: none;
	}

	.tb__step-pill.is-current em {
		display: inline;
	}

	.tb__grid,
	.tb__choices--cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.tb__counter {
		padding: 10px 10px 10px 14px;
	}

	.tb__stepper button {
		width: 40px;
	}

	.tb .tb__stepper input[type="number"] {
		width: 44px;
	}

	.tb__nav .button {
		flex: 1 1 auto;
	}

	.tb__pay .tb__submit {
		flex-basis: 100%;
	}

	.tb__paypal {
		margin: 0 auto;
	}

	.tb__review > div {
		grid-template-columns: minmax(0, 1fr) 36px;
	}

	.tb__review dt {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
 * "Build Your Own Package" (inc/chillout-custom-package.php)
 * ----------------------------------------------------------------------- */

/* "How many days?" options under a chosen surf/yoga line, indented. */
.tb__sub {
	display: grid;
	gap: 10px;
	margin-left: 18px;
	padding-left: 14px;
	border-left: 2px solid var(--color-border);
}

.tb__sub[hidden] {
	display: none;
}

.tb__check--inline {
	margin: 2px 0 4px;
	font-size: 0.92rem;
}

@media (max-width: 620px) {
	.tb__sub {
		margin-left: 6px;
		padding-left: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Country dropdown + phone code selector (inc/twist-form-fields.php):
 * same look as the other fields.
 * ----------------------------------------------------------------------- */
.tb select[data-country] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 48px;
	padding: 12px 40px 12px 14px;
	border: var(--tb-line);
	border-radius: var(--radius-sm);
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
	color: var(--color-text);
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tb select[data-country]:focus {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 3px var(--color-accent-tint);
}

.tb__phone {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.tb__phone input[type="tel"] {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.tb__dial {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	padding: 0 12px 0 14px;
	border: var(--tb-line);
	border-right: 0;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	background: var(--color-soft);
	color: var(--color-text);
	font-size: 0.95rem;
	font-weight: var(--font-weight-bold);
}

.tb__dial::after {
	content: '';
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The real (native) list sits invisibly on top: tapping the "+47" opens it. */
.tb__dial select {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	cursor: pointer;
}

.tb__dial:focus-within {
	border-color: var(--color-ink);
	box-shadow: 0 0 0 3px var(--color-accent-tint);
}