/* ── PXC Appointments – Gutschein-Shop ([pxca_voucher_shop]) ──────────────── */
/* Inputs/buttons come from the shared form controls in booking.css (.pxca-control,
 * .pxca-field, .pxca-float, .pxca-btn). Here only shop-specific layout. Scoped
 * under .pxca-voucher-shop so nothing bleeds in/out. No background card — matches
 * the booking flow. */

.pxca-voucher-shop { width: 100%; }
.pxca-voucher-shop .pxca-vs-lead { margin: 0 0 1.5rem; color: var(--pxca-muted); }

.pxca-voucher-shop .pxca-vs-section { margin-bottom: 1.6rem; }
.pxca-voucher-shop .pxca-vs-label {
	display: block;
	font-weight: 700;
	margin-bottom: .7rem;
}

/* Value tiles */
.pxca-voucher-shop .pxca-vs-presets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .65rem;
	margin-bottom: .85rem;
}
.pxca-voucher-shop .pxca-vs-preset {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .8rem;
	padding: .9rem 1rem;
	border: 1.5px solid var(--pxca-border);
	border-radius: var(--pxca-radius);
	background: var(--pxca-card-bg, #fff);
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, background .15s, transform .08s;
}
.pxca-voucher-shop .pxca-vs-preset:hover { border-color: var(--pxca-primary); background: var(--pxca-card-bg, #fff); transform: translateY(-1px); }
.pxca-voucher-shop .pxca-vs-preset.is-active {
	border-color: var(--pxca-primary);
	background: var(--pxca-primary-light, #eff6ff);
}
.pxca-voucher-shop .pxca-vs-preset__icon  { font-size: 1.5rem; color: var(--pxca-primary); line-height: 1; flex-shrink: 0; }
.pxca-voucher-shop .pxca-vs-preset__text  { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pxca-voucher-shop .pxca-vs-preset__name  { font-weight: 600; font-size: .95rem; }
.pxca-voucher-shop .pxca-vs-preset__price { font-weight: 800; color: var(--pxca-primary); }

/* Field rows — one consistent vertical rhythm everywhere. */
.pxca-voucher-shop .pxca-field { margin-bottom: .75rem; }
.pxca-voucher-shop .pxca-vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.pxca-voucher-shop .pxca-vs-grid .pxca-field { margin-bottom: 0; }
.pxca-voucher-shop .pxca-vs-grid--zip { grid-template-columns: 1fr 2fr; }

/* Choice cards (delivery + payment) */
.pxca-voucher-shop .pxca-vs-choice { display: grid; gap: .6rem; }
.pxca-voucher-shop .pxca-vs-choice--row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pxca-voucher-shop .pxca-vs-choice__opt {
	display: flex;
	align-items: center;                      /* radio centred in the box */
	gap: .7rem;
	padding: .9rem 1rem;
	border: 1.5px solid var(--pxca-border);
	border-radius: var(--pxca-radius);
	background: var(--pxca-bg-white);          /* same as input fields */
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.pxca-voucher-shop .pxca-vs-choice__opt:hover { border-color: var(--pxca-primary); }
.pxca-voucher-shop .pxca-vs-choice__opt:has(input:checked) {
	border-color: var(--pxca-primary);
	background: var(--pxca-primary-light, #eff6ff);
}
.pxca-voucher-shop .pxca-vs-choice__opt input { accent-color: var(--pxca-primary); flex-shrink: 0; }
.pxca-voucher-shop .pxca-vs-choice__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--pxca-primary);
}
.pxca-voucher-shop .pxca-vs-choice__body { display: flex; flex-direction: column; gap: .35rem; }
.pxca-voucher-shop .pxca-vs-choice__title { font-weight: 700; }
.pxca-voucher-shop .pxca-vs-choice__desc  { font-size: .85rem; color: var(--pxca-muted); }

/* Card element + summary */
.pxca-voucher-shop #pxca-vs-card-wrap { margin-bottom: 1rem; }
.pxca-voucher-shop .pxca-vs-summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 1rem 0 .25rem;
	border-top: 1px solid var(--pxca-border);
	margin-top: .5rem;
}
.pxca-voucher-shop .pxca-vs-summary span   { color: var(--pxca-muted); font-weight: 600; }
.pxca-voucher-shop .pxca-vs-summary strong { font-size: 1.4rem; font-weight: 800; }

@media ( max-width: 480px ) {
	.pxca-voucher-shop .pxca-vs-grid,
	.pxca-voucher-shop .pxca-vs-grid--zip { grid-template-columns: 1fr; }
}