@font-face {
	font-family: "Quarto";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url(../../../../uploads/2026/02/quarto-black-webfont-1.woff2) format("woff2"),
	     url(../../../../uploads/2026/02/quarto-black-webfont-1.woff) format("woff");
}

@font-face {
	font-family: "Quarto";
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url(../../../../uploads/2026/02/quarto-black-webfont-1.woff2) format("woff2"),
	     url(../../../../uploads/2026/02/quarto-black-webfont-1.woff) format("woff");
}

:root {
	/* Abacus brand */
	--abacus-yellow: #FABB00;
	--abacus-black: #010101;
	--abacus-gray: #EEEDED;
	/* Aliases */
	--gold-light: rgba(250, 187, 0, 0.35);
	--gold-dark: #c99800;
	--paper: #FABB00;
	--muted: rgba(1, 1, 1, 0.55);
	--border: rgba(1, 1, 1, 0.18);
	--full: rgba(1, 1, 1, 0.07);
	--white: #FFFFFF;
	--danger: #CC2200;
	--success: #1A7A45;
	/* Font sizes */
	--fs-xxs: 10px;
	--fs-xs: 12px;
	--fs-sm: 14px;
	--fs-md: 16px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Jost', sans-serif;
	background: var(--paper);
	color: var(--abacus-black);
	min-height: 100vh;
	font-size: var(--fs-md);
	line-height: 1.25;
}

.form-container {
	padding-top: 115px;
}
  @media (max-width: 991px) {
    .form-container {
      padding-top: 95px;
    }
  }
  @media (max-width: 478px) {
    .form-container {
      padding-top: 80px;
    }
  }

/* ── PANELS ── */

/* ── BREADCRUMB ── */
.breadcrumb {
	background: #f2ece3;
	border-bottom: 1px solid var(--border);
	padding: 0 var(--32px);
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	height: 56px;
	gap: 0;
	position: sticky;
	top: var(--scroll-margin-top);
	z-index: 100;
}

.breadcrumb::-webkit-scrollbar {
	display: none;
}

.bc-step {
	display: flex;
	align-items: center;
	gap: var(--8px);
	padding: 0;
	cursor: pointer;
	white-space: nowrap;
	opacity: 0.35;
	transition: opacity 0.2s;
	flex-shrink: 0;
}

.bc-step.done {
	opacity: 0.6;
	cursor: pointer;
}

.bc-step.active {
	opacity: 1;
	cursor: default;
}

.bc-step.done:hover {
	opacity: 0.9;
}

.bc-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--border);
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-xxs);
  line-height: 1;
	font-weight: 700;
	flex-shrink: 0;
	transition: all 0.2s;
}

.bc-step.active .bc-num {
	background: var(--abacus-black);
	color: var(--abacus-yellow);
}

.bc-step.done .bc-num {
	background: var(--abacus-black);
	color: var(--abacus-yellow);
}

.bc-label {
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--abacus-black);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bc-arrow {
	color: var(--border);
	font-size: var(--fs-sm);
	margin: 0 var(--16px);
	flex-shrink: 0;
}
  @media(max-width: 478px) {
    .bc-arrow {
      margin: 0 var(--12px);
    }
  }

/* ── MAIN CONTENT ── */
.flow-content {
	max-width: 860px;
	margin: 0 auto;
	padding: var(--36px) var(--16px) var(--96px);
}

/* ── STEP SCREENS ── */
.step-screen {
	display: none;
	animation: fadeUp 0.3s ease;
}

.step-screen.active {
	display: block;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.step-title {
	font-family: 'Quarto', serif;
	font-size: 36px;
	font-weight: 900;
	margin-bottom: var(--8px);
	line-height: 1.15;
	letter-spacing: -0.005em;
}
  @media (max-width: 478px) {
    .step-title {
      font-size: 32px;
    }
  }

.step-title em {
	font-style: normal;
}

.step-subtitle {
	font-family: 'Quarto', serif;
	font-size: 26px;
	font-weight: 900;
	margin-bottom: var(--4px);
	line-height: 1.15;
	letter-spacing: -0.005em;
}

.step-subtitle em {
	font-style: normal;
}

.step-desc {
	font-size: var(--fs-md);
	color: var(--abacus-black);
	margin-bottom: var(--28px);
	line-height: 1.3;
	opacity: 0.75;
}

/* ── PRICE TICKER ── */
.price-ticker {
	background: var(--abacus-black);
	color: white;
	border-radius: var(--12px);
	padding: var(--16px) var(--20px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--24px);
	gap: var(--16px);
}

.price-ticker .pt-label {
	font-size: var(--fs-xs);
	color: rgba(1, 1, 1, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
  font-weight: 500;
}

.price-ticker .pt-amount {
	font-family: 'Jost', sans-serif;
	font-size: 28px;
	color: var(--abacus-black);
	font-weight: 700;
}

.price-ticker .pt-detail {
	font-size: var(--fs-xs);
	color: rgba(1, 1, 1, 0.55);
	margin-top: var(--2px);
  font-weight: 500;
}

.price-ticker .pt-breakdown {
	font-size: var(--fs-xs);
	color: rgba(1, 1, 1, 0.55);
	text-align: right;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.price-ticker .pt-breakdown-item {
  display: block;
}

.price-ticker .pt-breakdown-sub {
  font-size: 11px;
  opacity: 0.7;
}

/* ── FIELD ERRORS ── */
.field-error {
  font-size: 12px;
  color: #c0392b;
  margin-top: 4px;
  display: none;
  font-weight: 500;
}
.field-error.visible {
  display: block;
}
.field.has-error > input,
.field.has-error > textarea {
  border-color: #c0392b !important;
  outline-color: #c0392b;
}

/* ── SPACES GRID ── */
.spaces-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--8px);
	margin-bottom: var(--24px);
}
  @media (max-width: 478px) {
    .spaces-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
  }


.space-card {
	border: 2px solid white;
	border-radius: var(--12px);
	padding: var(--14px) var(--14px) var(--12px);
	cursor: pointer;
	transition: all 0.15s;
	background: white;
	position: relative;
}

.space-card:hover {
	border-color: var(--abacus-black);
	box-shadow: 0 4px 16px rgba(1, 1, 1, 0.12);
}

.space-card.selected {
	border-color: var(--abacus-black);
	background: var(--abacus-yellow);
}

.sc-check {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e7d4b2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-xxs);
	transition: all 0.15s;
	opacity: 0;
}

.space-card.selected .sc-check {
	opacity: 1;
	background: var(--abacus-black);
	color: var(--abacus-yellow);
}

.sc-name {
	font-size: var(--fs-md);
	font-weight: 600;
	margin-bottom: var(--8px);
	padding-right: 24px;
}

@media (min-width: 1024px) {
	.sc-name {
		font-size: 18px;
	}
}

.sc-sub {
	font-size: var(--fs-xs);
	color: var(--muted);
}

.sc-avail {
	display: inline-block;
	margin-top: var(--8px);
	font-size: var(--fs-xxs);
	color: #4A9B6F;
	background: #E6F5ED;
	padding: var(--2px) var(--8px);
	border-radius: var(--20px);
	font-weight: 500;
}

.sc-avail--full {
	color: rgba(1, 1, 1, 0.45);
	background: #F5F5F5;
}

/* ── WEEK CHIPS ── */
.space-section {
	margin-bottom: var(--28px);
}

.ss-header {
	display: flex;
	align-items: center;
	gap: var(--12px);
	margin-bottom: var(--12px);
}

.ss-tag {
	background: var(--abacus-black);
	color: var(--abacus-yellow);
	padding: var(--4px) var(--14px);
	border-radius: var(--96px);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.weeks-chips {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--8px);
}

  @media(max-width: 767px) {
    .weeks-chips {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media(max-width: 478px) {
    .weeks-chips {
      grid-template-columns: repeat(2, 1fr);
    }
  }

.weeks-chips--groups {
	grid-template-columns: repeat(3, 1fr);
}
@media(max-width: 767px) {
	.weeks-chips--groups {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media(max-width: 478px) {
	.weeks-chips--groups {
		grid-template-columns: repeat(1, 1fr);
	}
}

.week-chip {
	border: 2px solid white;
	border-radius: var(--8px);
	padding: var(--12px);
	cursor: pointer;
	transition: all 0.15s;
	background: white;
	display: flex;
	flex-direction: column;
	gap: var(--4px);
	position: relative;
}

.week-chip:hover {
	border-color: var(--abacus-black);
}

.week-chip.full {
	border-color: rgba(255, 255, 255, 0.5);
	opacity: 0.4;
	cursor: default;
}

.week-chip.selected {
	border-color: var(--abacus-black);
	background: var(--abacus-yellow);
}

.wc-num {
	font-size: var(--fs-xs);
	color: var(--abacus-black);
	font-weight: 700;
	letter-spacing: 0em;
	text-transform: uppercase;
}

.wc-dates {
	font-size: var(--fs-xs);
	font-weight: 600;
}

.wc-theme {
	font-size: var(--fs-xs);
	color: var(--muted);
}

.wc-price {
	font-size: var(--fs-xs);
	color: var(--abacus-black);
	font-weight: 700;
}

.wc-challenge {
	font-size: var(--fs-xxs);
	color: var(--muted);
	font-weight: 500;
	margin-top: var(--4px);
}

.wc-label {
	font-size: var(--fs-xxs);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: 0;
	background: #E6F5ED;
	padding: var(--4px) var(--8px);
	border-radius: var(--12px);
	margin-top: var(--2px);
	display: inline-block;
	color: #4A9B6F;
	width: fit-content;
}

.wc-label--last {
	background: #FFF3CD;
	color: #856404;
}

.wc-label--full {
	background: #F5F5F5;
	color: rgba(1, 1, 1, 0.45);
}

.acc-actions {
	display: flex;
	gap: var(--8px);
	margin-top: var(--12px);
	padding-top: var(--12px);
	border-top: 1px solid var(--border);
	flex-wrap: wrap;
}

.acc-act-btn {
	background: none;
	border: 1.5px solid var(--border);
	border-radius: var(--8px);
	padding: var(--4px) var(--12px);
	font-family: 'DM Sans', sans-serif;
	font-size: var(--fs-xs);
	color: var(--muted);
	cursor: pointer;
	transition: all 0.15s;
	font-weight: 500;
}

.acc-act-btn:hover {
	border-color: var(--abacus-yellow);
	color: var(--gold-dark);
}

/* ── FORMS ── */
.form-section {
	margin-bottom: var(--36px);
}

.form-section-title {
	font-family: 'Fraunces', serif;
	font-size: 20px;
	font-weight: 600;
	padding-bottom: var(--12px);
	border-bottom: 2px solid var(--abacus-black);
	margin-bottom: var(--20px);
	letter-spacing: -0.01em;
}

.form-subsection-title {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--abacus-black);
	margin-bottom: var(--14px);
	margin-top: var(--20px);
	font-family: 'Jost', sans-serif;
}

.form-row {
	display: grid;
	gap: var(--12px);
	margin-bottom: var(--12px);
}

.form-row.cols-1 {
	grid-template-columns: 1fr;
}

.form-row.cols-2 {
	grid-template-columns: 1fr 1fr;
}

.form-row.cols-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.form-row.cols-2-1 {
	grid-template-columns: 2fr 1fr;
}

.form-row.cols-1-1-1 {
	grid-template-columns: 1fr 1fr 1fr;
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--4px);
}

.field label {
	font-size: var(--fs-xxs);
	font-weight: 500;
	color: var(--abacus-black);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: 'Jost', sans-serif;
}

.field label .req {
	color: var(--danger);
	margin-left: var(--2px);
}

.auth-autoritzo-label {
	color: var(--ink);
}
@media (max-width: 767px) {
	.auth-autoritzo-label {
		color: var(--danger);
	}
}

.field input,
.field textarea,
.field select {
	border: 1.5px solid var(--border);
	border-radius: var(--8px);
	padding: var(--12px) var(--12px);
	font-family: 'Jost', sans-serif;
	font-size: var(--fs-sm);
	line-height: 1;
	font-weight: 500;
	color: var(--abacus-black);
	background: white;
	transition: border-color 0.15s;
	outline: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
	border-color: var(--abacus-black);
	outline: none;
}

.field textarea {
	resize: vertical;
	min-height: 100px;
}

.field-note {
	font-size: var(--fs-xs);
	color: var(--muted);
	margin-top: var(--4px);
	font-style: italic;
}

/* ── RADIO / CHECKBOX ── */
.radio-group,
.check-group {
	display: flex;
	gap: var(--20px);
	align-items: center;
	margin-bottom: var(--8px);
}

.radio-opt,
.check-opt {
	display: flex;
	align-items: center;
	gap: var(--8px);
	cursor: pointer;
	font-size: var(--fs-sm);
}

.radio-opt input,
.check-opt input {
	accent-color: var(--abacus-black);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.allergy-block {
	border: none;
	border-radius: var(--12px);
	padding: var(--16px);
	margin-top: var(--12px);
	background: rgba(1, 1, 1, 0.08);
}

.allergy-warning {
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--muted);
	margin-top: var(--12px);
	text-transform: none;
	letter-spacing: 0;
}

/* ── AUTORITZACIONS ── */
.auth-block {
	border: none;
	border-radius: var(--12px);
	padding: var(--18px);
	margin-bottom: var(--16px);
	background: rgba(1, 1, 1, 0.08);
}

.auth-block p {
	font-size: var(--fs-sm);
	color: var(--abacus-black);
	opacity: 0.75;
	line-height: 1.4;
	margin-bottom: var(--14px);
}

.auth-block-title {
	font-size: var(--fs-md);
	font-weight: 600;
	margin-bottom: var(--8px);
	letter-spacing: 0;
	font-family: 'Jost', sans-serif;
}

.auth-legal-text {
	font-size: var(--fs-xs);
	color: var(--muted);
	background: var(--paper);
	border-radius: var(--8px);
	padding: var(--12px);
	margin: var(--12px) 0;
	line-height: 1.6;
	font-family: monospace;
	letter-spacing: 0.02em;
}

.tutor-sortida-block {
	margin-top: var(--12px);
	padding: var(--14px);
	background: #F8F5EF;
	border-radius: var(--8px);
	border: 1px solid var(--border);
}

.autoritzat-card {
	border: 1.5px solid var(--border);
	border-radius: var(--8px);
	padding: var(--14px);
	margin-top: var(--12px);
	background: white;
	position: relative;
}

.autoritzat-card-title {
	font-size: var(--fs-xs);
	font-weight: 700;
	margin-bottom: var(--12px);
	color: var(--abacus-black);
}

.btn-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--8px);
	padding: var(--4px) var(--8px);
	font-size: var(--fs-xxs);
	color: var(--muted);
	cursor: pointer;
	transition: all 0.15s;
}

.btn-remove:hover {
	border-color: var(--danger);
	color: var(--danger);
}

/* ── LEGAL CHECKBOXES ── */
.legal-checks {
	margin-top: var(--24px);
	display: flex;
	flex-direction: column;
	gap: var(--12px);
}

.legal-check-item {
	display: flex;
	align-items: flex-start;
	gap: var(--12px);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.legal-check-item input {
	margin-top: var(--2px);
	accent-color: var(--abacus-black);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
}

.legal-check-item a {
	color: var(--abacus-black);
	text-decoration: underline;
	font-weight: 600;
}

/* ── PAYMENT SUMMARY ── */
.payment-summary {
	background: white;
	border: 1px solid var(--border);
	border-radius: var(--12px);
	overflow: hidden;
	margin-bottom: var(--24px);
}

.ps-header {
	background: var(--abacus-black);
	color: white;
	padding: var(--16px) var(--20px);
	font-family: 'Fraunces', serif;
	font-size: 18px;
	font-weight: 300;
}

.ps-header em {
	font-style: italic;
	color: var(--abacus-yellow);
}

.ps-rows {
	padding: 0;
}

.ps-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--12px) var(--20px);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
}

.ps-row:last-child {
	border-bottom: none;
}

.ps-row .ps-key {
	color: var(--muted);
	font-size: var(--fs-xs);
}

.ps-row .ps-val {
	font-weight: 600;
}

.ps-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--16px) var(--20px);
	background: var(--paper);
	border-top: 2px solid var(--abacus-black);
}

.ps-total .ps-total-label {
	font-weight: 700;
	font-size: var(--fs-md);
}

.ps-total .ps-total-amount {
	font-family: 'Fraunces', serif;
	font-size: 32px;
	color: var(--gold-dark);
}

.ps-note {
	padding: var(--12px) var(--20px);
	font-size: var(--fs-xs);
	color: var(--muted);
	font-style: italic;
	border-top: 1px solid var(--border);
}

/* ── RESUMEN D'INSCRIPCIÓ ── */
.inscription-summary {
	background: white;
	border: 1px solid var(--border);
	border-radius: var(--12px);
	padding: var(--18px);
	margin-bottom: var(--20px);
}

.is-title {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--12px);
}

.is-row {
	display: flex;
	align-items: flex-start;
	gap: var(--8px);
	margin-bottom: var(--8px);
	font-size: var(--fs-xs);
}

.is-label {
	color: var(--muted);
	min-width: 80px;
}

.is-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--4px);
}

.is-pill {
	background: var(--gold-light);
	color: var(--abacus-black);
	font-size: var(--fs-xxs);
	padding: var(--2px) var(--8px);
	border-radius: var(--20px);
	font-weight: 600;
}

/* ── BUTTONS ── */
.btn-primary {
	background: var(--abacus-black);
	color: var(--abacus-yellow);
	border: 2px solid var(--abacus-black);
	padding: var(--14px) var(--36px);
	border-radius: var(--96px);
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size: var(--fs-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.18s;
	display: inline-flex;
	align-items: center;
	gap: var(--8px);
}

.btn-primary:hover {
	background: #2a2a2a;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(1, 1, 1, 0.2);
}

.btn-primary:disabled {
	background: #e7d4b2;
	color: rgba(1, 1, 1, 0.5);
	transform: none;
	cursor: default;
	box-shadow: none;
}

.btn-inactive {
	background: #e7d4b2 !important;
	color: rgba(1, 1, 1, 0.5) !important;
	transform: none !important;
	cursor: default !important;
	box-shadow: none !important;
	pointer-events: none;
	border: 2px solid #e7d4b2 !important;
}

.btn-secondary {
	background: transparent;
	border: 2px solid var(--abacus-black);
	color: var(--abacus-black);
	padding: var(--8px) var(--24px);
	border-radius: var(--96px);
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: var(--fs-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.18s;
	display: inline-flex;
	align-items: center;
	gap: var(--8px);
}

.btn-secondary:hover {
	background: var(--abacus-black);
	color: var(--abacus-yellow) !important;
}

.btn-back {
	background: transparent;
	border: 2px solid var(--abacus-black);
	color: var(--abacus-black);
	padding: var(--14px) var(--36px);
	border-radius: var(--96px);
	font-family: 'Jost', sans-serif;
	font-size: var(--fs-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.18s;
	display: inline-flex;
	align-items: center;
	gap: var(--8px);
}

.btn-back:hover {
	background: var(--abacus-black);
	color: var(--abacus-yellow);
	transform: translateY(-1px);
}

.btn-row {
	display: flex;
	gap: var(--12px);
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--28px);
	justify-content: space-between;
}

/* ── STICKY PRICE BAR ── */
.sticky-price {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--abacus-black);
	padding: var(--14px) var(--32px);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--16px);
	z-index: 150;
	transform: translateY(100%);
	transition: transform 0.3s;
	box-shadow: 0 -4px 24px rgba(1, 1, 1, 0.25);
}

.sticky-price.visible {
	transform: translateY(0);
}

/* ── SECTION SEPARATOR ── */
.section-sep {
	height: 1px;
	background: rgba(1, 1, 1, 0.2);
	margin: var(--28px) 0;
}

/* ── HIDDEN ── */
.hidden {
	display: none !important;
}

/* ── CONFIRMATION ── */
.confirmation-box {
	text-align: center;
	padding: var(--48px) var(--24px);
	background: white;
	border-radius: var(--16px);
	border: 1px solid var(--border);
}

.conf-icon {
	font-size: 56px;
	margin-bottom: var(--16px);
}

.conf-title {
	font-family: 'Fraunces', serif;
	font-size: 30px;
	font-weight: 300;
	margin-bottom: var(--12px);
}

.conf-title em {
	font-style: italic;
	color: var(--gold-dark);
}

.conf-desc {
	font-size: var(--fs-sm);
	color: var(--muted);
	line-height: 1.7;
	max-width: 420px;
	margin: 0 auto;
}

/* ── RESUM SELECCIÓ ── */
.resum-sel-block {
	background: white;
	border-radius: var(--12px);
	overflow: hidden;
	margin-bottom: var(--14px);
}

.resum-sel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--14px) var(--18px);
	border-bottom: 1px solid var(--abacus-gray);
	font-size: var(--fs-xxs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.resum-sel-row {
	display: flex;
	align-items: center;
	gap: var(--8px);
	padding: var(--12px) var(--18px);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
	flex-wrap: wrap;
}

  @media(max-width:478px) {
    .resum-sel-row {
      flex-direction: column;
      align-items: flex-start;
    }
    .resum-sel-sep {
      display: none;
    }
  }

.resum-sel-espai {
	background: var(--abacus-black);
	color: var(--abacus-yellow);
	font-size: var(--fs-xxs);
	font-weight: 700;
	padding: var(--2px) var(--12px);
	border-radius: var(--96px);
	white-space: nowrap;
	text-transform: uppercase;
}

.resum-sel-sep {
	color: var(--border);
}

.resum-sel-info {
	font-weight: 500;
	flex: 1;
	min-width: 120px;
}

.resum-sel-taller {
	color: var(--muted);
	font-size: var(--fs-xs);
}

.resum-sel-price {
	font-weight: 700;
	font-size: var(--fs-sm);
	margin-left: auto;
}

.resum-sel-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--14px) var(--18px);
	background: var(--abacus-gray);
	font-weight: 600;
	font-size: var(--fs-sm);
}

.resum-sel-total-amount {
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size: 22px;
}

/* ── RESUM SEL — group variant (extraescolars) ── */
.resum-sel-row--group {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.resum-sel-row-info {
	display: flex;
	align-items: center;
	gap: var(--8px);
	flex-wrap: wrap;
	padding: 5px 10px;
}

.resum-sel-row-info .resum-sel-price {
	margin-left: auto;
}

.resum-sel-mandatory-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding-left: 2px;
}

.resum-sel-mandatory-item {
	font-size: var(--fs-xs);
	color: var(--muted);
	background: var(--abacus-gray);
	padding: 2px 8px;
	border-radius: var(--96px);
}

/* ── RESUM SECTIONS (payment + confirmation) ── */
.rs-section {
	background: white;
	border: 1px solid var(--border);
	border-radius: var(--12px);
	padding: var(--20px);
	margin-bottom: var(--14px);
	overflow: hidden;
}

.rs-section--payment {
	background: var(--paper);
}

.rs-section-title {
	font-size: var(--fs-xxs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--14px);
	padding-bottom: var(--12px);
	border-bottom: 1px solid var(--border);
}

.rs-block {
	margin-bottom: var(--14px);
}

.rs-block:last-of-type {
	margin-bottom: 0;
}

.rs-block-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--8px);
}

.rs-block-tag {
	background: var(--abacus-black);
	color: var(--abacus-yellow);
	font-size: var(--fs-xs);
	font-weight: 700;
	padding: var(--4px) var(--12px);
	border-radius: var(--96px);
}

.rs-block-price {
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--abacus-black);
}

.rs-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--8px);
}

.rs-pill {
	background: #FFF7E0;
	border: 1px solid var(--gold-light);
	color: var(--abacus-black);
	font-size: var(--fs-xs);
	padding: var(--4px) var(--12px);
	border-radius: var(--8px);
}

.rs-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--12px);
	margin-top: var(--12px);
	border-top: 2px solid var(--border);
	font-weight: 600;
	font-size: var(--fs-sm);
}

.rs-total-amount {
	font-family: 'Jost', sans-serif;
	font-size: 22px;
	color: var(--abacus-black);
	font-weight: 700;
}

.rs-total-row--big {
	border-top: 2px solid var(--abacus-black);
	padding-top: var(--14px);
}

.rs-total-amount--big {
	font-size: 30px;
}

.rs-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--12px);
}

.rs-person-card {
	background: var(--paper);
	border-radius: var(--8px);
	padding: var(--12px) var(--14px);
}

.rs-person-card--infant {
	background: var(--paper);
}

.rs-person-role {
	font-size: var(--fs-xxs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--4px);
}

.rs-person-name {
	font-weight: 700;
	font-size: var(--fs-sm);
	margin-bottom: var(--8px);
}

.rs-person-data {
	font-size: var(--fs-xs);
	color: var(--muted);
	margin-bottom: var(--4px);
}

.rs-person-data span {
	font-weight: 600;
	color: var(--abacus-black);
	margin-right: var(--4px);
}

.rs-person-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--8px);
	margin: var(--8px) 0;
}

.rs-allergy {
	color: var(--danger) !important;
	font-weight: 500;
	margin-top: var(--8px);
}

.rs-obs {
	font-style: italic;
}

.rs-auth-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--8px) 0;
	border-bottom: 1px solid var(--border);
}

.rs-auth-label {
	font-size: var(--fs-xs);
	font-weight: 500;
}

.rs-auth-val {
	font-size: var(--fs-xs);
	font-weight: 700;
}

.rs-auth-yes {
	color: var(--success);
}

.rs-auth-no {
	color: var(--danger);
}

/* ── OTP INPUT ── */
.otp-wrap {
	display: flex;
	gap: var(--12px);
	justify-content: center;
	margin: var(--20px) 0;
	flex-wrap: wrap;
}

.otp-input {
	width: 52px;
	height: 64px;
	border: 2px solid white;
	border-radius: var(--12px);
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: var(--abacus-black);
	background: white;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	-moz-appearance: textfield;
}

  @media(max-width: 478px) {
    .otp-wrap {
      gap: var(--8px);
    }
    .otp-input {
      width: 42px;
	    height: 56px;
      font-size: 20px;
    }
  }

.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.otp-input:focus {
	border-color: var(--abacus-black);
	box-shadow: 0 0 0 3px rgba(1, 1, 1, 0.12);
}

.otp-input.filled {
	border-color: var(--abacus-black);
	background: var(--abacus-yellow);
	/*font-family: 'Quarto', serif;*/
}

/* ── RESUM DATA BLOCKS ── */
.resum-activity {
	background: var(--abacus-black);
	color: white;
	border-radius: var(--12px);
	padding: var(--16px) var(--20px);
	margin-bottom: var(--20px);
	display: flex;
	align-items: center;
	gap: var(--14px);
}

.resum-activity-icon {
	font-size: 24px;
	flex-shrink: 0;
}

.resum-activity-label {
	font-size: var(--fs-xxs);
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--4px);
}

.resum-activity-name {
	font-family: 'Jost', sans-serif;
	font-size: var(--fs-md);
	font-style: normal;
	color: var(--abacus-yellow);
}

.resum-accordion {
	margin-bottom: var(--20px);
	display: flex;
	flex-direction: column;
	gap: var(--8px);
}

.resum-acc-item {
	border: 1.5px solid var(--border);
	border-radius: var(--12px);
	background: white;
	overflow: hidden;
}

.resum-acc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--14px) var(--18px);
	cursor: pointer;
	user-select: none;
	transition: background 0.15s;
}

.resum-acc-header:hover {
	background: #FFFBF0;
}

.resum-acc-left {
	display: flex;
	align-items: center;
	gap: var(--12px);
}

.resum-acc-icon {
	font-size: 18px;
}

.resum-acc-title {
	font-size: var(--fs-sm);
	font-weight: 600;
}

.resum-acc-edit {
	font-size: var(--fs-xs);
	color: var(--abacus-black);
	font-weight: 700;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--4px);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.resum-acc-body {
	display: none;
	padding: 0 var(--18px) var(--16px);
	border-top: 1px solid var(--border);
}

.resum-acc-item.open .resum-acc-body {
	display: block;
}

.resum-data-row {
	display: flex;
	gap: var(--8px);
	padding: var(--8px) 0;
	border-bottom: 1px solid var(--full);
	font-size: var(--fs-xs);
}

.resum-data-row:last-child {
	border-bottom: none;
}

.resum-data-key {
	color: var(--muted);
	min-width: 140px;
	flex-shrink: 0;
}

.resum-data-val {
	font-weight: 500;
	color: var(--abacus-black);
}

.resum-data-val.yes {
	color: var(--success);
	font-weight: 600;
}

.resum-data-val.no {
	color: var(--danger);
	font-weight: 600;
}

.resum-notice {
	background: rgba(255, 255, 255, 0.6);
	border: none;
	border-radius: var(--12px);
	padding: var(--14px) var(--18px);
	margin-bottom: var(--24px);
	font-size: var(--fs-xs);
	line-height: 1.6;
	color: var(--abacus-black);
}

.resum-notice strong {
	display: block;
	margin-bottom: var(--2px);
}

.otp-section {
	background: rgba(255, 255, 255, 0.6);
	border: none;
	border-radius: var(--12px);
	padding: var(--24px) var(--20px);
	margin-bottom: var(--24px);
	text-align: center;
	text-wrap: balance;
}

.otp-section-title {
	font-family: 'Quarto', serif;
	font-size: 24px;
	font-weight: 900;
	margin-bottom: var(--8px);
}

.otp-section-sub {
	font-size: var(--fs-md);
	color: var(--abacus-black);
	line-height: 1.4;
	margin-bottom: var(--8px);
	opacity: 0.75;
}

.otp-resend {
	font-size: var(--fs-xs);
	color: var(--muted);
	margin-top: var(--8px);
	line-height: 1.6;
}

.otp-resend a {
	color: var(--abacus-black);
	font-weight: 600;
}

/* ── THANK YOU PAGE ── */
.thankyou-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: var(--36px) var(--24px) var(--80px);
}

.thankyou-header {
	text-align: center;
	padding: var(--40px);
	background: var(--abacus-black);
	border-radius: var(--16px);
	margin-bottom: var(--24px);
	position: relative;
	overflow: hidden;
}

.thankyou-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 70% 50%, rgba(245, 166, 35, 0.15) 0%, transparent 70%);
}

.ty-icon {
	font-size: 52px;
	display: block;
	margin-bottom: var(--12px);
	position: relative;
}

.ty-title {
	font-family: 'Quarto', serif;
	font-size: 36px;
	font-weight: 900;
	margin-bottom: var(--8px);
	position: relative;
}

.ty-title em {
	font-style: normal;
	color: var(--abacus-yellow);
	font-family: 'Quarto', serif;
}

.ty-sub {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.55);
	position: relative;
}

.ty-ref {
	display: inline-block;
	margin-top: var(--12px);
	background: rgba(255, 255, 255, 0.1);
	color: var(--gold-light);
	font-size: var(--fs-xs);
	font-weight: 700;
	padding: var(--8px) var(--16px);
	border-radius: var(--20px);
	letter-spacing: 0.06em;
	position: relative;
}

@media (max-width: 600px) {
	.rs-two-col {
		grid-template-columns: 1fr;
	}

	.rs-person-grid {
		grid-template-columns: 1fr 1fr;
	}

	.flow-content {
		padding: var(--24px) var(--14px) var(--96px);
	}

	.form-row.cols-3 {
    grid-template-columns: 1fr;
  }

	.form-row.cols-1-1-1 {
		grid-template-columns: 1fr 1fr;
	}

	.form-row.cols-2 {
		grid-template-columns: 1fr;
	}

	.breadcrumb {
		padding: 0 var(--14px);
	}

	.bc-label {
		display: none;
	}

	.bc-step.active .bc-label {
		display: block;
	}
}

.btn-sticky {
	background: var(--abacus-yellow) !important;
	color: var(--abacus-black) !important;
}

.material-icons {
	font-size: 18px;
	vertical-align: middle;
	line-height: 1;
}

.btn-sticky:hover {
	background: #ffd000 !important;
}

/* ══════════════════════════════════════════════
   WHITE SKIN OVERRIDES
   ══════════════════════════════════════════════ */
body {
	background: #fffaf1;
}

/* Page background */
.flow-wrapper {
	background: #FFFFFF;
}

/* Step content background */

/* Inputs & textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
	border: 1.5px solid #e7d4b2 !important;
	background: #fffaf1;
	border-radius: var(--8px);
}

input:focus,
textarea:focus,
select:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
	border-color: var(--abacus-black) !important;
	background: #fff !important;
	color: var(--abacus-black) !important;
	box-shadow: 0 0 0 3px rgba(1, 1, 1, 0.08);
}

/* Space cards */
.space-card {
	border: 1.5px solid #e7d4b2;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.space-card:hover {
	border-color: #AAAAAA;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

.space-card.selected {
	border: 1.5px solid var(--abacus-black) !important;
	background: var(--abacus-yellow) !important;
	box-shadow: 0 2px 12px rgba(1, 1, 1, 0.14);
}

/* Week chips */
.week-chip {
	border: 1.5px solid #e7d4b2;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.week-chip:hover {
	border-color: #AAAAAA;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.week-chip.selected {
	border-color: var(--abacus-black);
	background: var(--abacus-yellow);
}

.week-chip.full {
	border-color: #e7d4b2;
	background: #f5edd9;
}

/* Breadcrumb */
.breadcrumb-bar {
	background: #FFFFFF;
	border-bottom: 1px solid #EEEEEE;
}

/* Price ticker */
.price-ticker {
	background: var(--abacus-yellow);
	color: var(--abacus-black);
	border-radius: var(--12px);
	border: none;
}

/* Section separators */
.section-sep {
	border-color: #EEEEEE;
}

/* Auth blocks */

/* Legal checks — no box in white skin */
.legal-checks {
	background: transparent;
	border: none;
	padding: 0;
	margin-top: var(--20px);
}

/* Resum notice — yellow with 30% alpha */
.resum-notice {
	background: rgba(250, 187, 0, 0.3) !important;
	border: none;
	text-align: center;
	font-size: var(--fs-sm);
}

.resum-notice strong {
	text-transform: none;
	margin-bottom: 0;
}

/* Resum accordion */
.resum-acc-item {
	background: #FFFFFF;
	border: 1.5px solid #E8E8E8;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.resum-acc-header:hover {
	background: #FAFAFA;
}

/* Resum sel block */
.resum-sel-block {
	border: 1.5px solid #E8E8E8;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.resum-sel-total {
	background: #F7F7F7;
}

.resum-sel-row {
	border-bottom-color: #F0F0F0;
}

/* OTP section */
.otp-section {
	background: var(--abacus-yellow) !important;
	border: none !important;
}

.otp-section .otp-section-sub {
	opacity: 0.8;
}

.otp-input {
	border: 2px solid #fff !important;
	background: #FFFFFF;
}

.otp-input:focus {
	border-color: var(--abacus-black) !important;
	box-shadow: 0 0 0 3px rgba(1, 1, 1, 0.08);
}

.otp-input.filled {
	border-color: var(--abacus-black) !important;
	background: var(--abacus-yellow);
}

/* Form sections */

/* Auth form: no outer box */
#b-auth-form .form-section {
	background: transparent;
	border: none;
	padding: 0;
	margin-bottom: 0;
}

/* Allergy block */
.allergy-block {
	background: #FFF8E6;
	border: 1px solid rgba(250, 187, 0, 0.4);
	border-radius: var(--8px);
	padding: var(--12px);
}

/* Thank you page */
.thankyou-header {
	background: var(--abacus-yellow);
}

.thankyou-header p {
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.ty-title,
.ty-title em {
	color: var(--abacus-black) !important;
}

.ty-sub {
	color: var(--abacus-black);
	opacity: 0.7;
}

/* Autoritzat card */
.autoritzat-card {
	background: #FFFFFF;
	border: 1.5px solid #E0E0E0;
	border-radius: var(--12px);
	padding: var(--16px);
	margin-top: var(--12px);
}

/* ss-header tag */
.ss-tag {
	background: var(--abacus-black);
	color: var(--abacus-yellow);
}

/* Back button */
.btn-back {
	color: var(--abacus-black);
}

/* Step desc & labels */
.step-desc {
	color: #444444;
}

label {
	color: #222222;
}

/* Modal */

/* ── DESIGN TOKENS UPDATE ─────────────────────── */

/* wc-label — styles defined in base rules above */

/* Week chip: picto check */
.wc-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e7d4b2;
	color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-xxs);
	font-weight: 700;
	transition: all 0.15s;
	opacity: 0;
}

.wc-check .material-icons {
	font-size: var(--16px);
}

.week-chip.selected .wc-check {
	opacity: 1;
	background: var(--abacus-black);
	color: var(--abacus-yellow);
}

/* step-screen */
.step-screen {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 0 var(--36px) 0 !important;
}

/* form-section & auth-block */
.form-section {
	border: 1px solid var(--abacus-gray) !important;
	background: white !important;
	padding: var(--24px) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--12px);
}

#b-auth-form .form-section {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.auth-block {
	border: 1px solid var(--abacus-gray) !important;
	background: white !important;
	padding: var(--24px) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* resum-sel-block */
.resum-sel-block {
	border-color: var(--abacus-gray) !important;
}

.resum-sel-header {
	border-bottom: 1px solid var(--abacus-gray) !important;
}

/* resum accordion open header */
.resum-acc-item.open .resum-acc-header {
	background: #F7F7F7 !important;
}

/* inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select,
.field input,
.field textarea,
.field select {
	background: #fffaf1 !important;
	border-color: #e7d4b2 !important;
}

/* resum espai pill uppercase */
.resum-sel-espai {
	text-transform: uppercase;
}

/* otp input border white */
.otp-input {
	border: 2px solid #fff !important;
}

/* ── MODAL ────────────────────────────────────── */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(1, 1, 1, 0.55);
	align-items: center;
	justify-content: center;
	padding: var(--24px);
}

.modal-box {
	background: white;
	border-radius: var(--16px);
	max-width: 560px;
	width: 100%;
	padding: var(--32px);
	position: relative;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-title {
	font-family: 'Quarto', serif;
	font-size: 24px;
	margin-bottom: var(--16px);
}

.modal-body {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: #333;
	margin-bottom: var(--12px);
}

.modal-footnote {
	font-size: var(--fs-xs);
	color: #888;
	line-height: 1.5;
	margin-bottom: var(--24px);
}

/* ── THANK YOU EXTRAS ─────────────────────────── */
.ty-emoji {
	font-size: 72px;
	line-height: 1;
	margin-bottom: var(--16px);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.ty-body {
	font-size: var(--fs-md);
	margin-top: var(--16px);
}

/* ── NEW THANK YOU PAGE (shared) ── */
.ex-ty {
	padding: 0 !important;
	overflow: hidden;
}
.ex-ty-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 80px 24px 64px;
	background: #fff;
}
.ex-ty-emoji {
	font-size: 64px;
	line-height: 1;
	margin-bottom: 24px;
}
.ex-ty-title {
	font-family: "Quarto", serif;
	font-weight: 900;
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.15;
	margin-bottom: 24px;
	color: var(--abacus-black);
}
.ex-ty-title em {
	font-style: normal;
}
.ex-ty-body {
	font-size: 20px;
	line-height: 1.3;
	color: var(--abacus-black);
	margin-bottom: 12px;
}
.ex-ty-footer {
	background-color: var(--abacus-yellow);
	background-image: url(img/pattern07.svg);
	background-repeat: repeat;
	background-size: auto;
	padding: 64px 24px;
	text-align: center;
	font-size: 20px;
	line-height: 1.3;
	color: var(--abacus-black);
}
.ex-ty-footer strong {
	font-weight: 700;
}
.flow-content.step6 {
	max-width: none;
	background: white;
	padding: 0;
}


/* ── UTILITIES ────────────────────────────────── */
.mt-xs {
	margin-top: var(--8px);
}

.mb-sm {
	margin-bottom: var(--14px);
}

.w-full {
	width: 100%;
}

.btn-lg {
	font-size: var(--fs-sm);
	padding: var(--14px) var(--32px);
}