/**
 * 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;
	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: 26px;
	height: 26px;
	margin-right: 12px;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	vertical-align: -8px;
}

.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 / 18px 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;
	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;
		/* Sits just above the cookie banner while it is showing (cookie-consent.js sets --whatsapp-lift to its height). */
		bottom: var(--whatsapp-lift, 0px);
		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;
}

.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],
.tb select#tb-heard { /* "How did you find us?" (inc/scm-attribution.php): same look as the other fields. */
	-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,
.tb select#tb-heard: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);
}

/* =========================================================================
 * Booking page, phones: a short header (title + length + price) so the form starts
 * on the first screen. The big photo header pushed the form below the fold.
 * (page-booking.php: .booking-hero)
 * ========================================================================= */
@media (max-width: 620px) {

	.page-hero--photo.booking-hero {
		min-height: 0;
		padding-block: 14px 14px;
	}

	.page-hero--photo.booking-hero .surfcamp-breadcrumbs,
	.page-hero--photo.booking-hero .eyebrow {
		display: none;
	}

	.page-hero--photo.booking-hero .page-hero__content {
		padding-right: 0;
	}

	.page-hero--photo.booking-hero h1 {
		font-size: 1.4rem;
		line-height: 1.15;
	}

	.page-hero--photo.booking-hero .page-hero__meta-row {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-top: 10px;
		padding: 8px 12px;
	}

	/* Only the length; the place and level are the same for every package. */
	.page-hero--photo.booking-hero .package-meta span:nth-child(n+2) {
		display: none;
	}

	.page-hero--photo.booking-hero .page-hero__price strong {
		font-size: 1.5rem;
	}
}

/* ---- Help line, folded diets, payment methods (8 Oct 2026) ------------------------------------------------- */

.tb__help {
	margin: 0 0 var(--tb-gap, 18px);
	color: var(--color-text-muted);
	font-size: 0.9rem;
	text-align: center;
}

.tb__help a {
	color: var(--color-ink);
	font-weight: var(--font-weight-semibold, 600);
	text-decoration: underline;
	text-decoration-color: #25d366;
	text-underline-offset: 3px;
}

.tb__more {
	margin: 0 0 var(--tb-gap, 18px);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md, 8px);
	background: var(--color-white);
}

.tb__more > summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 12px 48px 12px 16px;
	font-weight: var(--font-weight-semibold, 600);
	list-style: none;
	cursor: pointer;
}

.tb__more > summary::-webkit-details-marker {
	display: none;
}

.tb__more > summary::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 160ms ease;
}

.tb__more[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.tb__more > .tb__group,
.tb__more > .tb__hint {
	margin-right: 16px;
	margin-left: 16px;
}

.tb__more > .tb__hint {
	margin-bottom: 16px;
}

.tb__methods {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-top: 14px;
}

.tb__methods-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-ink);
	font-size: 0.92rem;
	font-weight: var(--font-weight-semibold, 600);
}

.tb__methods-icons {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tb__mark {
	display: block;
	width: 44px;
	height: 28px;
}

.tb__mark--pp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 28px;
	border: 1px solid #d9d6d0;
	border-radius: 4px;
	background: #fff;
}

.tb__mark--pp img {
	display: block;
	width: 52px;
	height: auto;
}

.tb__methods-note {
	margin: 8px 0 0;
}

@media (max-width: 640px) {
	.tb__methods {
		justify-content: center;
		text-align: center;
	}

	.tb__methods-note {
		text-align: center;
	}
}

/* ---- Price bar is tappable: scrolls to the price details (phones) -------------------------------------------- */

.tb__summary-card {
	scroll-margin-top: 92px;
}

.tb__summary-card.is-flash {
	animation: tb-flash 1.5s ease;
}

@keyframes tb-flash {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(156, 45, 45, 0);
	}
	25%, 70% {
		box-shadow: 0 0 0 4px rgba(156, 45, 45, 0.45);
	}
}

@media (max-width: 900px) {
	a.tb__bar {
		cursor: pointer;
	}

	a.tb__bar:focus-visible {
		outline: 3px solid var(--color-accent);
		outline-offset: -3px;
	}

	.tb__bar-total em {
		letter-spacing: 0.02em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tb__summary-card.is-flash {
		animation: none;
	}
}

/* ---- Searchable country / phone-code pickers ------------------------------------------------------------------ */

.tb__combo {
	position: relative;
}

.tb__combo--on select[data-country] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.tb__combo-btn {
	display: block;
	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;
	text-align: left;
	cursor: pointer;
}

.tb__combo-btn.is-placeholder {
	color: var(--color-text-muted);
}

.tb__combo-btn:focus-visible {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 3px var(--color-accent-tint);
}

.tb__phone {
	position: relative;
}

.tb__dial[role="button"] {
	cursor: pointer;
}

.tb__dial[role="button"]:focus-visible {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 3px var(--color-accent-tint);
}

.tb__combo-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 60;
	overflow: hidden;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	box-shadow: 0 12px 32px rgba(17, 17, 17, 0.18);
	scroll-margin-bottom: 200px;
}

.tb__combo-panel[hidden] {
	display: none;
}

.tb__combo-search {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--color-border-subtle);
	border-radius: 0;
	background: var(--color-soft);
	font: inherit;
	font-size: 16px;
}

.tb__combo-search:focus {
	outline: none;
	background: var(--color-white);
}

.tb__combo-list {
	max-height: min(280px, 42vh);
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
}

.tb__combo-list li {
	margin: 0;
	padding: 11px 14px;
	font-size: 0.95rem;
	line-height: 1.3;
	cursor: pointer;
}

.tb__combo-list li[hidden] {
	display: none;
}

.tb__combo-list li.is-active {
	background: var(--color-accent-tint);
}

.tb__combo-list li[aria-selected="true"] {
	font-weight: var(--font-weight-bold);
}

.tb__combo-list li[aria-selected="true"]::after {
	content: '\2713';
	float: right;
	color: var(--color-accent);
}

.tb__combo-empty {
	margin: 0;
	padding: 14px;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* ---- No zoom-in when a field is tapped ---------------------------------------------------------------------------
 * iPhones zoom the whole page when a field's text is smaller than 16px. On phones and tablets every field is 16px.
 */
@media (max-width: 900px) {
	.tb input,
	.tb select,
	.tb textarea,
	.tb .tb__combo-btn,
	.tb .tb__dial,
	.tb .tb__combo-search {
		font-size: 16px !important;
	}
}

/* Booking form on phones: the price bar waits until the cookie choice is made, so the two never stack and cover the
   bottom quarter of the screen (owner, 18 Oct 2026). The banner starts hidden and only shows if no choice was made. */
body:has(.cookie-consent:not([hidden])) .tb__bar {
	display: none;
}

body:has(.cookie-consent:not([hidden])) .whatsapp-widget {
	bottom: calc(16px + var(--whatsapp-lift, 0px));
}

/* ---- Details step: nothing is paid yet + ask first on WhatsApp (26 Oct 2026) -------------------------------- */

.tb__reassure {
	margin: 4px 0 12px;
	color: var(--color-text-muted);
	font-size: 0.9rem;
	text-align: center;
}

.tb__help--ask {
	margin: 14px 0 0;
}

/* Square tags above the buttons: "No payment yet", "Free date changes" (26 Oct 2026). */
.tb__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 4px 0 14px;
	padding: 0;
	list-style: none;
}

.tb__tags li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 7px;
	border: 1px solid var(--color-border-subtle);
	border-radius: 0;
	background: var(--color-accent-tint, #eef3fd);
	color: var(--color-ink);
	font-size: 0.75rem;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.2;
	white-space: nowrap;
}

.tb__tags li::before {
	content: "✓";
	color: var(--color-accent);
	font-weight: 700;
}

/* ---- New booking flow (29 Oct 2026): 3 steps, private-room toggle, pay now / pay later, confirmation ---------- */
.tb--new .tb__room-types {
	margin-top: 10px;
	padding: 12px 16px 4px;
	border: var(--tb-line);
	background: var(--color-soft);
}

.tb--new .tb__room-types[hidden],
.tb--new [data-pay-now][hidden],
.tb--new [data-pay-later][hidden],
.tb--new [data-sent][hidden] {
	display: none;
}

.tb__option--check .tb__option-box::before {
	border-radius: 0;
}

.tb__option--check input:checked + .tb__option-box::before {
	box-shadow: inset 0 0 0 3px var(--color-white);
}

.tb--new .tb__pay-title {
	margin: 22px 0 10px;
	font-weight: 700;
}

.tb--new .tb__pay-choice {
	margin-bottom: 18px;
}

.tb--new .tb__option-price {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

.tb--new .tb__pay-later .tb__later {
	width: 100%;
}

.tb--new .tb__next-note {
	margin: 10px 0 0;
	text-align: center;
}

.tb--new .tb__sent {
	display: grid;
	justify-items: start;
	gap: 12px;
	padding: 28px 0;
}

.tb--new.is-sent .tb__steps,
.tb--new.is-sent .tb__summary,
.tb--new.is-sent .tb__bar,
.tb--new.is-sent .tb__panel {
	display: none;
}