/* =============================================================================
   WPF Booking — public.css
   Estils específics del wizard (pas 1–3) i chips d'educació.
   Complementa i sobreescriu puntualment la secció 10 de main.css.
   ============================================================================= */


/* =============================================================================
   00. Utilitats de layout compartides
   ============================================================================= */

.wpf-fields-2col {
	margin-bottom: 1em;
}

.wpf-block.wpf-field-error {
	background-color: #fff0f0;
	border-color: #E30613 !important;
}


/* =============================================================================
   01. Chips de nivell educatiu (Pas 1)
   ============================================================================= */

.wpf-edu-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.wpf-edu-chip {
	padding: 0.4rem 0.9rem;
	border-radius: 2px;
	border: 1px solid #CCCCCC;
	font-size: 0.85rem;
	cursor: pointer;
	background: white;
	color: #111111;
	font-family: inherit;
	transition: all 0.15s;
}

.wpf-edu-chip:hover {
	border-color: #111111;
}

.wpf-edu-chip.selected {
	background: #111111;
	color: white;
	border-color: #111111;
}


/* =============================================================================
   02. Botons de guia com a cercles (Pas 1)
   ============================================================================= */

.wpf-guide-btn {
	padding: 0.3rem 0.6rem;
	border-radius: 2px;
	border: 1.5px solid #444444;
	background: transparent;
	color: #AAAAAA;
	font-size: 0.75rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	transition: all 0.15s;
}

.wpf-guide-btn:hover:not(:disabled) {
	border-color: #FFFFFF;
	color: #FFFFFF;
}

.wpf-guide-btn.wpf-guide--selected {
	background: #111111;
	border-color: #111111;
	color: white;
}

.wpf-guide-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.wpf-slot-notice-icon {
	font-size: 0.85rem;
	color: #CCCCCC;
	cursor: help;
	flex-shrink: 0;
}


/* =============================================================================
   03. Taula de selecció de franges (Pas 1)
   ============================================================================= */

.wpf-slot-table {
	width: 100%;
	border-collapse: collapse;
	background: #FFFFFF;
	border-radius: 4px;
	overflow: hidden;
	table-layout: fixed;
}

.wpf-slot-table thead th {
	background: #F5F5F5;
	color: #666666;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.6rem 0.75rem;
	border-bottom: 2px solid #DDDDDD;
	text-align: center;
}

.wpf-slot-th-hora {
	text-align: left !important;
	width: 140px;
}

.wpf-slot-time-col {
	padding: 0.75rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: #111111;
	white-space: nowrap;
	border-right: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
}

.wpf-slot-cell {
	padding: 0.5rem 0.4rem;
	text-align: center;
	border: 1px solid #DDDDDD;
}

.wpf-slot-cell--available {
	background: #FFFFFF;
}

.wpf-slot-cell--selected {
	background: #111111;
}

.wpf-slot-cell--taken {
	background: #F5F5F5;
}

.wpf-slot-cell-dash {
	text-decoration: line-through;
	color: #BBBBBB;
	font-size: 0.85rem;
}

.wpf-slot-cell .wpf-guide-btn {
	width: 100%;
	padding: 0.4rem 0.25rem;
	font-size: 0.8rem;
}

.wpf-slot-cell--selected .wpf-guide-btn {
	background: #111111;
	border-color: #111111;
	color: white;
	cursor: default;
}

.wpf-slot-cell--taken .wpf-slot-cell-dash {
	cursor: not-allowed;
}


/* =============================================================================
   03b. Chips de ràdio per nivell educatiu (Pas 2)
   ============================================================================= */

.wpf-radio-chips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.4rem;
}

.wpf-radio-chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid #CCCCCC;
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.85rem;
	background: white;
	color: #111111;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	user-select: none;
}

.wpf-radio-chip input[type="radio"] {
	margin: 0;
	flex-shrink: 0;
	accent-color: #111111;
}

.wpf-radio-chip:hover {
	border-color: #111111;
}

.wpf-radio-chip.checked {
	background: #111111;
	color: white;
	border-color: #111111;
}

.wpf-radio-chip.checked input[type="radio"] {
	accent-color: white;
}


/* =============================================================================
   04. Capçalera de franja — barra negra (Pas 2)
   ============================================================================= */

.wpf-slot-form-header {
	background: #111111;
	color: white;
	padding: 0.875rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	border-radius: 4px 4px 0 0;
}

.wpf-slot-form-header .slot-id {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #AAAAAA;
	text-transform: uppercase;
}

.wpf-slot-form-header .slot-date {
	color: white;
	font-weight: 500;
}

.wpf-slot-form-header .slot-price {
	color: #E30613;
	font-weight: 700;
	margin-left: auto;
}


/* =============================================================================
   05. Layout dues columnes per seccions (Pas 2)
   ============================================================================= */

.wpf-form-section {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 2rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid #EEEEEE;
	margin-bottom: 0;
}

.wpf-form-section:last-child {
	border-bottom: none;
}

.wpf-form-section-label {
	font-size: 1em;
	font-weight: 600;
	color: #111111;
	padding-top: 0.25rem;
}

.wpf-form-section-fields {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}


/* =============================================================================
   06. Taula de franges del resum (Pas 3)
   ============================================================================= */

.wpf-summary-slot-row {
	background: #2A2A2A;
	border-bottom: 1px solid #3A3A3A;
	padding: 1rem 1.25rem;
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	align-items: center;
	gap: 1rem;
	color: white;
}

.wpf-summary-slot-badge {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #E30613;
	display: block;
	margin-bottom: 0.2rem;
	text-transform: uppercase;
}

.wpf-summary-total-row {
	background: #111111;
	color: white;
	font-weight: 700;
}

.wpf-summary-total-row td {
	color: white;
	padding: 0.75rem;
	border-bottom: none;
}


/* =============================================================================
   06b. Codi postal / Municipi 30-70 split (Pas 2 — Facturació)
   ============================================================================= */

.wpf-fields-postal-muni {
	display: grid;
	grid-template-columns: 70% 30%;
	gap: 1rem;
}

@media (max-width: 480px) {
	.wpf-fields-postal-muni {
		grid-template-columns: 1fr;
	}
}


/* =============================================================================
   07. Responsive
   ============================================================================= */

@media (max-width: 768px) {
	.wpf-form-section {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.wpf-slot-row .slot-time,
	.wpf-slot-row .wpf-slot-time {
		min-width: 100px;
		font-size: 0.85rem;
	}

	.wpf-summary-slot-row,
	.wpf-summary-total-row {
		grid-template-columns: auto 1fr auto;
	}
}


/* =============================================================================
   08. Cards de tipus de grup — Pas 1 (fons fosc del wizard)
   ============================================================================= */

.wpf-group-type-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.wpf-group-type-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.25rem;
	background: transparent;
	border: 1.5px solid #444444;
	border-radius: 4px;
	color: #AAAAAA;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.wpf-group-type-card:hover {
	border-color: #333333;
	background: #333333;
	color: #FFFFFF;
}

.wpf-group-type-card.selected {
	border-color: #111111;
	background: #111111;
	color: #FFFFFF;
}

.wpf-group-type-card__title {
	font-size: 0.9rem;
	font-weight: 700;
}

.wpf-group-type-card__desc {
	font-size: 0.75rem;
	opacity: 0.75;
}

@media (max-width: 768px) {
	.wpf-group-type-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.wpf-group-type-cards {
		grid-template-columns: 1fr;
	}
}


/* =============================================================================
   09. Porta d'accés — login + registre (page-acces.php)
   ============================================================================= */

.wpf-access-gate-wrap {
	max-width: 900px;
	margin: 3rem auto;
	padding: 0 1.5rem;
}

.wpf-access-gate__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
}

.wpf-access-gate__col-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: #111111;
}

.wpf-access-gate__col-desc {
	font-size: 0.875rem;
	color: #666666;
	margin-bottom: 1.5rem;
}

.wpf-access-gate__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.wpf-access-gate__field label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #111111;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wpf-access-gate__field input {
	padding: 0.6rem 0.75rem;
	border: 1px solid #CCCCCC;
	border-radius: 2px;
	font-size: 0.9rem;
	font-family: inherit;
	color: #111111;
	background: white;
	transition: border-color 0.15s;
}

.wpf-access-gate__field input:focus {
	outline: none;
	border-color: #111111;
}

.wpf-access-gate__btn {
	width: 100%;
	padding: 0.75rem 1.5rem;
	background: #111111;
	color: white;
	border: 2px solid #111111;
	border-radius: 2px;
	font-size: 0.9rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	margin-top: 0.5rem;
	transition: background 0.15s, color 0.15s;
}

.wpf-access-gate__btn:hover {
	background: white;
	color: #111111;
}

.wpf-access-gate__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wpf-access-gate__error {
	color: #E30613;
	font-size: 0.85rem;
	margin-bottom: 0.5rem;
}

.wpf-access-gate__forgot {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.8rem;
	color: #666666;
	text-decoration: underline;
	text-align: center;
}

.wpf-access-gate__forgot:hover {
	color: #111111;
}

/* Static (non-editable) field value — used for locked email in booking form */
.wpf-field__static {
	padding: 0.6rem 0.75rem;
	border: 1px solid #EEEEEE;
	border-radius: 2px;
	background: #F8F8F8;
	color: #555555;
	font-size: 0.9rem;
	margin: 0;
}

/* =============================================================================
   10. Multi-slot student edit — pending changes panel
   ============================================================================= */

.wpf-slot-students-input {
	width: 5rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid #CCCCCC;
	border-radius: 2px;
	font-size: 0.9rem;
	font-family: inherit;
	text-align: center;
	transition: border-color 0.15s;
}

.wpf-slot-students-input.wpf-input--changed {
	border-color: #E07B00;
	outline: none;
	box-shadow: 0 0 0 2px rgba(224,123,0,0.2);
}

.wpf-pending-changes {
	margin: 0.75rem 0 0;
	padding: 1rem 1.25rem;
	background: #FFFBF5;
	border: 1.5px solid #E07B00;
	border-radius: 4px;
}

.wpf-pending-changes__msg {
	font-size: 0.9rem;
	color: #7A4000;
	margin: 0 0 0.75rem;
}

.wpf-pending-changes__btns {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.wpf-btn--black {
	padding: 0.55rem 1.25rem;
	background: #111111;
	color: white;
	border: 2px solid #111111;
	border-radius: 2px;
	font-size: 0.875rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.wpf-btn--black:hover {
	background: white;
	color: #111111;
}

.wpf-btn--black:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wpf-btn--grey {
	padding: 0.55rem 1.25rem;
	background: white;
	color: #555555;
	border: 1.5px solid #AAAAAA;
	border-radius: 2px;
	font-size: 0.875rem;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.wpf-btn--grey:hover {
	border-color: #555555;
	color: #111111;
}

.wpf-pending-changes__feedback {
	margin-top: 0.6rem;
	font-size: 0.85rem;
}

@media (max-width: 768px) {
	.wpf-access-gate__cols {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* =============================================================================
   11. Discount coupon block (step 3)
   ============================================================================= */

#wpf-block-coupon .wpf-coupon-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}

#wpf-coupon-code {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid #CCCCCC;
	border-radius: 2px;
	font-size: 0.95rem;
	font-family: inherit;
	text-transform: uppercase;
}

#wpf-coupon-code:disabled {
	background: #F2F2F2;
	color: #555555;
	cursor: not-allowed;
}

.wpf-coupon-msg {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
}

.wpf-coupon-msg--err { color: #C00; }
.wpf-coupon-msg--ok  { color: #1E7A1E; }

.wpf-coupon-summary {
	margin-top: 0.85rem;
	padding: 0.85rem 1rem;
	background: #F8F8F8;
	border: 1px solid #EEEEEE;
	border-radius: 2px;
}

.wpf-coupon-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.2rem 0;
	font-size: 0.95rem;
}

.wpf-coupon-summary__row--total {
	margin-top: 0.4rem;
	padding-top: 0.6rem;
	border-top: 1px solid #DDDDDD;
	font-size: 1.05rem;
}

.wpf-coupon-summary__label {
	color: #555555;
	font-size: 0.85rem;
	margin-left: 0.25rem;
}

@media (max-width: 480px) {
	#wpf-block-coupon .wpf-coupon-form {
		flex-direction: column;
		align-items: stretch;
	}
	#wpf-coupon-code { flex: 1 1 auto; }
	#wpf-coupon-apply,
	#wpf-coupon-remove { width: 100%; }
}

/* ── Calendar day states ──────────────────────────────────────────────────── */

.wpf-cal-day {
	width: 100%;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	cursor: default;
	color: #AAAAAA;
	margin: 0 auto;
}

.wpf-cal-day--available,
.wpf-cal-day--selected,
.wpf-cal-day--full {
	width: 36px;
	height: 36px;
	margin: 0 auto;
}

.wpf-cal-day--available {
	background: #DDDDDD !important;
	color: #111111 !important;
	border-radius: 50% !important;
	cursor: pointer;
	font-weight: 500;
}

.wpf-cal-day--available:hover {
	background: #111111 !important;
	color: #ffffff !important;
}

.wpf-cal-day--selected {
	background: #111111 !important;
	color: #ffffff !important;
	border-radius: 50% !important;
	font-weight: 600;
}

.wpf-cal-day--full {
	background: #EEEEEE !important;
	color: #AAAAAA !important;
	border-radius: 50% !important;
	cursor: not-allowed;
}

.wpf-cal-day--past,
.wpf-cal-day--disabled {
	background: transparent !important;
	color: #CCCCCC !important;
	cursor: default;
}


/* =============================================================================
   === RESPONSIVE === — Mòbil ≤480px i Tablet 481-768px (Sessió V)
   Reglas agrupadas: layout, mida táctil i densitat per al wizard de reserva.
   ============================================================================= */

@media (max-width: 768px) {

	/* --- Pas 1: Botons numèrics +/- (mida tàctil mínima 44×44) --- */
	.wpf-qty-btn {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.25rem;
	}

	.wpf-qty-num {
		width: 4.5rem;
		padding: 0.6rem;
		font-size: 1.05rem;
	}

	/* +/- petits dins resum de franja: també táctils */
	.wpf-qty-input--small .wpf-qty-btn {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1rem;
	}

	.wpf-qty-input--small .wpf-qty-num {
		width: 3rem;
		font-size: 1rem;
		padding: 0.45rem;
	}

	/* --- Pas 1: Botons "Grup 1/2/3/4" — altura tàctil --- */
	.wpf-slot-cell .wpf-guide-btn,
	.wpf-guide-btn {
		min-height: 44px;
		padding: 0.5rem 0.4rem;
	}

	/* --- Pas 1: Cards Tipus de grup més compactes per encaixar 2 cols --- */
	.wpf-group-type-card {
		padding: 0.85rem 0.9rem;
	}

	.wpf-group-type-card__title {
		font-size: 0.85rem;
	}

	.wpf-group-type-card__desc {
		font-size: 0.7rem;
	}
}

@media (max-width: 480px) {

	/* En mòbil molt petit, deixem el qty-input--small en una sola línia compacta */
	.wpf-qty-input--small {
		gap: 0.35rem;
	}
}


/* =============================================================================
   === RESPONSIVE === — Pas 1 (Calendari + taula de franges) — Sessió V
   ============================================================================= */

/* Tablet i mòbil — taula compacta i wrapper amb scroll horitzontal */
@media (max-width: 768px) {

	/* Wrapper de la taula amb scroll horitzontal per evitar desbordament */
	#wpf-slot-grid {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wpf-slot-table {
		min-width: 480px;
	}

	/* Columnes més compactes */
	.wpf-slot-th-hora {
		width: 110px;
	}

	.wpf-slot-time-col {
		padding: 0.6rem 0.5rem;
		font-size: 0.85rem;
	}

	.wpf-slot-cell {
		padding: 0.4rem 0.25rem;
	}

	.wpf-slot-table thead th {
		font-size: 0.7rem;
		padding: 0.5rem 0.4rem;
	}

	/* Resum de franjes — apila vertical si l'amplada és limitada */
	.wpf-summary-slot-row,
	.wpf-summary-total-row {
		grid-template-columns: 1fr auto;
		gap: 0.6rem;
	}

	/* Calendari mensual — assegurar mida de cel·la tàctil ≥36px */
	.wpf-calendar__grid {
		gap: 0.2rem;
	}

	.wpf-cal-day {
		min-height: 36px;
		font-size: 0.9rem;
	}

	/* Tabs Matí/Tarda */
	.wpf-slot-tabs {
		flex-wrap: wrap;
	}
}

/* Mòbil — layout 100% vertical i icona-info clarament tàctil */
@media (max-width: 480px) {

	/* Padding wizard més compacte ja al tema; aquí afinem el bloc selecció */
	#wpf-block-selection,
	#wpf-block-slots,
	#wpf-block-calendar {
		padding-left: 0;
		padding-right: 0;
	}

	/* La taula manté scroll horitzontal però amb min-width més petit per a 320px */
	.wpf-slot-table {
		min-width: 360px;
		font-size: 0.85rem;
	}

	/* Resum de franjes — totalment apilat */
	.wpf-summary-slot-row {
		grid-template-columns: 1fr;
		gap: 0.4rem;
		padding: 0.85rem 1rem;
	}

	.wpf-summary-slot-row > * {
		justify-self: start;
	}

	/* Primera columna HORA: min-width per evitar truncament a 375px */
	.wpf-slot-th-hora,
	.wpf-slot-time-col {
		min-width: 110px;
	}

	/* Icona ⓘ d'avís: tàctil 24×24 i no tallada per overflow */
	.wpf-slot-notice-icon {
		font-size: 1.05rem;
		padding: 0 0.15rem;
		min-width: 24px;
		min-height: 24px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Caixa de franja seleccionada (pas 1) — menys padding en mòbil */
	.wpf-slot-selected {
		padding: 10px 12px;
		gap: 0.5rem;
	}
}


/* =============================================================================
   === RESPONSIVE === — Pas 2 (Dades de la reserva) — Sessió V
   ============================================================================= */

@media (max-width: 768px) {

	/* Capçalera de bloc de franja: alinea correcte amb flex-wrap */
	.wpf-sf__header {
		padding: 0.75rem 1rem;
		gap: 0.5rem;
		font-size: 0.85rem;
	}

	.wpf-sf__qty {
		margin-left: 0;
		flex-basis: 100%;
		display: flex;
		justify-content: flex-end;
		order: 99;
	}

	.wpf-sf__price {
		margin-left: auto;
	}

	/* Bloc de franja — padding intern menor */
	.wpf-sf__body {
		padding: 1rem;
	}

	/* Layout 2-col de seccions del pas 2 — ja era 1col bajo 768; reduïm gap */
	.wpf-form-section {
		margin-bottom: 1.25rem;
		padding-bottom: 1.25rem;
	}

	/* Copy-notice (avís copiar dades): permet wrapping */
	.wpf-copy-notice {
		flex-wrap: wrap;
		font-size: 0.8rem;
	}
}

@media (max-width: 480px) {

	/* Capçalera de franja — apilada en mòbil molt petit */
	.wpf-sf__header {
		row-gap: 0.4rem;
	}

	.wpf-sf__date,
	.wpf-sf__time {
		flex-basis: auto;
	}

	/* Entity/edu fields del pas 2: 1 col garantit */
	.wpf-entity-fields,
	.wpf-edu-fields {
		grid-template-columns: 1fr !important;
	}
}


/* =============================================================================
   === RESPONSIVE === — Pas 3 (Resum + pagament) — Sessió V
   ============================================================================= */

@media (max-width: 768px) {

	/* Taula resum (7 cols) — scroll horitzontal dins del bloc que la conté */
	.wpf-block:has(> .wpf-summary-table) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wpf-summary-table {
		min-width: 600px;
		font-size: 0.8rem;
	}

	.wpf-summary-table th,
	.wpf-summary-table td {
		padding: 0.45rem 0.4rem;
	}

	/* Header del bloc resum — botó EDITAR no perjudica wrap */
	.wpf-summary-block__header {
		justify-content: space-between;
	}

	.wpf-summary-block__title {
		font-size: 0.9rem;
	}

	/* Dades grid (4 col) ja és auto-fill; reforcem 2 cols mínim */
	.wpf-dades-grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.85rem;
	}

	/* Approval list — checkboxes amb hit-area suficient */
	.wpf-approval-item {
		font-size: 0.85rem;
	}

	.wpf-approval-item input[type="checkbox"] {
		width: 1.2rem;
		height: 1.2rem;
	}
}

@media (max-width: 480px) {

	/* Dades grid → 1 col en mòbil molt petit */
	.wpf-dades-grid {
		grid-template-columns: 1fr;
	}

	/* Taula resum — ample mínim més reduït i layout natural per columnes */
	.wpf-summary-table {
		min-width: 480px;
		table-layout: auto;
	}
}


/* =============================================================================
   === RESPONSIVE === — Pàgina d'accés (login / registre) — Sessió V
   La regla principal .wpf-access-gate__cols ja s'apila a ≤768px (secció 10).
   Aquí refinem mida tàctil dels camps i botons.
   ============================================================================= */

@media (max-width: 768px) {

	.wpf-access-gate-wrap {
		margin: 1.5rem auto;
		padding: 0 1rem;
	}

	.wpf-access-gate__field input {
		padding: 0.7rem 0.85rem;
		font-size: 0.95rem;
	}

	.wpf-access-gate__btn {
		min-height: 48px;
		padding: 0.85rem 1.5rem;
	}
}

@media (max-width: 480px) {

	.wpf-access-gate-wrap {
		margin: 1rem auto;
	}

	.wpf-access-gate__col-title {
		font-size: 1rem;
	}

	.wpf-access-gate__col-desc {
		font-size: 0.82rem;
	}

	/* Botones "Confirmar ampliació" / "Descartar canvis" — apilats i tàctils */
	.wpf-pending-changes__btns {
		flex-direction: column;
		gap: 0;
	}

	.wpf-btn-confirm-changes,
	.wpf-btn-discard-changes {
		display: block;
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
		margin-bottom: 8px;
	}

	.wpf-btn-discard-changes {
		margin-bottom: 0;
	}
}