/* =========================================================
   EPA Booking Engine — booking.css
   1. Base
   2. Layout
   3. Step Indicators
   4. Fields
   5. Meal Cards
   6. Guests
   7. Summary
   8. Buttons
   9. Errors
   10. Mobile
   ========================================================= */

/* ---------- 1. Base ---------- */

.epa-booking-engine {
	--epa-gold: #D4AF37;
	--epa-gold-soft: rgba(212, 175, 55, 0.12);
	--epa-bg: #151515;
	--epa-bg-alt: #181818;
	--epa-bg-field: #1f1f1f;
	--epa-text: #f2f2f2;
	--epa-text-muted: #b3b3b3;
	--epa-border: #2c2c2c;
	--epa-error: #e35b5b;
	--epa-radius: 14px;

	background: var(--epa-bg);
	color: var(--epa-text);
	border-radius: var(--epa-radius);
	padding: 40px;
	max-width: 720px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.epa-booking-engine * {
	box-sizing: border-box;
}

.epa-be-form-title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-align: center;
	color: var(--epa-gold);
	margin: 0 0 32px;
}

.epa-booking-engine h3.epa-be-step-title {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.3px;
	margin: 0 0 28px;
	color: var(--epa-text);
}

/* ---------- 2. Layout ---------- */

.epa-be-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.epa-be-step {
	display: none;
}

.epa-be-step.is-active {
	display: block;
	animation: epa-be-fade-in 0.25s ease;
}

@keyframes epa-be-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- 3. Step Indicators ---------- */

.epa-be-steps {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 36px;
}

.epa-be-step-dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--epa-bg-field);
	border: 1px solid var(--epa-border);
	color: var(--epa-text-muted);
	font-size: 13px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.epa-be-step-dot.is-active {
	border-color: var(--epa-gold);
	color: var(--epa-gold);
	background: var(--epa-gold-soft);
}

.epa-be-step-dot.is-complete {
	border-color: var(--epa-gold);
	background: var(--epa-gold);
	color: #151515;
}

/* ---------- 4. Fields ---------- */

.epa-be-field {
	margin-bottom: 22px;
}

.epa-be-field label,
.epa-be-guest-field label {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--epa-text-muted);
	margin-bottom: 8px;
}

.epa-be-field input,
.epa-be-guest-field input {
	width: 100%;
	background: var(--epa-bg-field);
	border: 1px solid var(--epa-border);
	border-radius: 10px;
	padding: 14px 16px;
	color: var(--epa-text);
	font-size: 15px;
	transition: border-color 0.2s ease;
}

/* Phone field (intl-tel-input) — restyled to match the dark/gold theme.
   Only new selectors targeting the library's own markup are added here;
   nothing above this block was changed. */

.epa-be-field .iti {
	width: 100%;
}

.epa-be-field .iti .iti__flag-container {
	background: transparent;
}

.epa-be-field .iti .iti__selected-flag {
	background: transparent;
	border-radius: 10px 0 0 10px;
}

.epa-be-field .iti .iti__selected-flag:hover,
.epa-be-field .iti .iti__selected-flag:focus {
	background: var(--epa-gold-soft);
}

.epa-be-field .iti input {
	padding-left: 52px !important;
}

/* .iti__dropdown-content is the floating popup itself (the library sets
   its own background-color:#fff here); .iti__country-list is the <ul>
   inside it. Text color must be set explicitly — the library's own CSS
   never does, so without this it inherits var(--epa-text) (near-white)
   from .epa-booking-engine above and becomes unreadable on that white
   popup. */
.epa-be-field .iti .iti__dropdown-content {
	background: var(--epa-bg-field);
	border: 1px solid var(--epa-border);
}

.epa-be-field .iti .iti__country-list {
	color: var(--epa-text);
}

.epa-be-field .iti .iti__country-name {
	color: var(--epa-text);
}

.epa-be-field .iti .iti__dial-code {
	color: var(--epa-text-muted);
}

.epa-be-field .iti .iti__country.iti__highlight {
	background: var(--epa-gold-soft);
}

.epa-be-field input:focus,
.epa-be-guest-field input:focus {
	outline: none;
	background: var(--epa-bg-field);
	border-color: var(--epa-gold);
	color: var(--epa-text);
}

/* ---------- 5. Meal Cards ---------- */

.epa-be-meal-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	border-radius: 10px;
}

.epa-be-meal-card {
	background: var(--epa-bg-field);
	border: 1px solid var(--epa-border);
	border-radius: var(--epa-radius);
	padding: 26px 22px;
	text-align: center;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.epa-be-meal-card.active {
	border-color: var(--epa-gold);
	background: linear-gradient(180deg, var(--epa-gold-soft), var(--epa-bg-field));
}

.epa-be-meal-title {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 10px;
	color: var(--epa-text);
}

.epa-be-meal-price {
	font-size: 14px;
	color: var(--epa-text-muted);
	margin: 0 0 20px;
}

.epa-booking-engine .epa-be-meal-select {
	width: 100%;
	padding: 12px 0;
	border-radius: 8px;
	border: 1px solid var(--epa-border);
	background: transparent;
	color: var(--epa-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.epa-booking-engine .epa-be-meal-card.active .epa-be-meal-select {
	background: var(--epa-gold);
	border-color: var(--epa-gold);
	color: #151515;
}

/* Background and colour declared on hover AND focus. Declaring only
   border-color left the background undeclared, so the theme's own
   button:hover kept painting it. A rule that does not declare a
   property does not protect it. The selected state stays solid gold
   and outranks these at 0,3,0, so hovering a chosen meal keeps it. */
.epa-booking-engine .epa-be-meal-select:hover,
.epa-booking-engine .epa-be-meal-select:focus {
	background: var(--epa-gold-soft);
	border-color: var(--epa-gold);
	color: var(--epa-gold);
}

/* Step 1 Shabbat cards reuse the same visual language as meal cards */

.epa-be-shabbat-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	border-radius: 10px;
}

.epa-be-shabbat-card {
	background: var(--epa-bg-field);
	border: 1px solid var(--epa-border);
	border-radius: var(--epa-radius);
	padding: 18px 22px;
	cursor: pointer;
	font-size: 15px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.epa-be-shabbat-card:hover {
	border-color: var(--epa-gold);
}

.epa-be-shabbat-card.active {
	border-color: var(--epa-gold);
	background: linear-gradient(180deg, var(--epa-gold-soft), var(--epa-bg-field));
	color: var(--epa-gold);
	font-weight: 600;
}

.epa-be-loading {
	color: var(--epa-text-muted);
	font-size: 14px;
	padding: 12px 0;
}

/* Step 2 Branch cards reuse the same visual language as the Shabbat cards above */

.epa-be-branch-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	border-radius: 10px;
}

.epa-be-branch-card {
	background: var(--epa-bg-field);
	border: 1px solid var(--epa-border);
	border-radius: var(--epa-radius);
	padding: 18px 22px;
	cursor: pointer;
	font-size: 15px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.epa-be-branch-card:hover {
	border-color: var(--epa-gold);
}

.epa-be-branch-card.active {
	border-color: var(--epa-gold);
	background: linear-gradient(180deg, var(--epa-gold-soft), var(--epa-bg-field));
	color: var(--epa-gold);
	font-weight: 600;
}

/* ---------- 6. Guests ---------- */

.epa-be-guests {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	border-radius: 10px;
}

/* Step 4 with two meals selected: one .epa-be-guests block per meal,
   each under its own heading — built by booking.js's renderDinersStep(). */

.epa-be-meal-guest-group + .epa-be-meal-guest-group {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--epa-border);
}

.epa-be-meal-guest-group-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--epa-gold);
	margin: 0 0 14px;
}

/* ---------- 7. Summary ---------- */

.epa-be-summary {
	background: var(--epa-bg-field);
	border: 1px solid var(--epa-border);
	border-radius: var(--epa-radius);
	padding: 22px 26px;
	margin-bottom: 20px;
}

.epa-be-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--epa-border);
	font-size: 15px;
	color: var(--epa-text-muted);
}

.epa-be-summary-row span:last-child {
	color: var(--epa-text);
	font-weight: 500;
	/* end, not right: in Hebrew the value belongs on the left edge. */
	text-align: end;
}

/* The meals value is a stack of lines, one per selected meal, so it
   needs to align to the top of the row rather than centre against a
   single-line label. */
.epa-be-summary-row .epa-be-summary-meal-line {
	display: block;
}

.epa-be-summary-row:has(.epa-be-summary-meal-line) {
	align-items: flex-start;
	gap: 18px;
}

.epa-be-summary-row:last-child {
	border-bottom: none;
}

.epa-be-summary-total {
	padding-top: 16px;
	font-size: 18px;
}

.epa-be-summary-total span {
	color: var(--epa-gold) !important;
	font-weight: 700 !important;
}

.epa-be-payment-placeholder {
	font-size: 13px;
	color: var(--epa-text-muted);
	text-align: center;
	margin: 0 0 20px;
}

.epa-be-confirmation {
	background: var(--epa-gold-soft);
	border: 1px solid var(--epa-gold);
	color: var(--epa-gold);
	border-radius: var(--epa-radius);
	padding: 20px;
	text-align: center;
	font-size: 15px;
}

/* ---------- 8. Buttons ---------- */

.epa-be-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
}

.epa-booking-engine .epa-be-btn {
	flex: 1;
	padding: 15px 24px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--epa-border);
	background: transparent;
	color: var(--epa-text);
	transition: all 0.2s ease;
}

.epa-booking-engine .epa-be-btn-next,
.epa-booking-engine .epa-be-btn-submit {
	background: transparent;
	border-color: var(--epa-gold);
	color: var(--epa-gold);
}

/* Hover and focus both declare background explicitly. A rule that only
   tweaked brightness left the background undeclared, which let the
   theme's own button:hover colour through. */
.epa-booking-engine .epa-be-btn-next:hover,
.epa-booking-engine .epa-be-btn-next:focus,
.epa-booking-engine .epa-be-btn-submit:hover,
.epa-booking-engine .epa-be-btn-submit:focus {
	background: var(--epa-gold);
	border-color: var(--epa-gold);
	color: #151515;
}

.epa-booking-engine .epa-be-btn-prev:hover,
.epa-booking-engine .epa-be-btn-prev:focus {
	background: transparent;
	border-color: var(--epa-gold);
	color: var(--epa-gold);
}

.epa-booking-engine .epa-be-btn-submit.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.epa-booking-engine .epa-be-btn[hidden] {
	display: none;
}

/* ---------- 9. Errors ---------- */

.epa-be-error {
	color: var(--epa-error);
	font-size: 13px;
	margin: 10px 0 0;
	min-height: 1px;
}

.has-error {
	border-color: var(--epa-error) !important;
}

.epa-be-field input.has-error {
	border-color: var(--epa-error);
}

/* ---------- 10. Mobile ---------- */

@media (max-width: 640px) {
	.epa-booking-engine {
		padding: 24px 18px;
		border-radius: 0;
	}

	.epa-be-meal-cards,
	.epa-be-guests {
		grid-template-columns: 1fr;
	}

	.epa-be-nav {
		flex-direction: column;
	}

	.epa-booking-engine .epa-be-btn {
		width: 100%;
	}

	.epa-be-steps {
		gap: 8px;
	}

	.epa-be-step-dot {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	h3.epa-be-step-title {
		font-size: 19px;
	}
}

/* ---------- Summary image ----------
   The summary sits beside the picture of whatever meal was chosen.
   Grid rather than float so the two columns share a baseline, and a
   single-column fallback below 720px keeps the image from squeezing
   the figures. */

.epa-booking-engine .epa-be-summary-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

@media (min-width: 720px) {
	.epa-booking-engine .epa-be-summary-layout:has(.epa-be-summary-media:not([hidden])) {
		grid-template-columns: 1fr minmax(200px, 260px);
	}
}

.epa-booking-engine .epa-be-summary-media {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.epa-booking-engine .epa-be-summary-media[hidden] {
	display: none;
}

.epa-booking-engine .epa-be-summary-figure {
	margin: 0;
	background: var(--epa-bg-field);
	border: 1px solid var(--epa-border);
	border-radius: var(--epa-radius);
	overflow: hidden;
}

.epa-booking-engine .epa-be-summary-figure img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.epa-booking-engine .epa-be-summary-figure figcaption {
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--epa-gold);
	text-align: center;
}

/* ---------- Multi-date booking (1.6.0) ---------- */

.epa-booking-engine .epa-be-step-hint {
	margin: 12px 0 0;
	font-size: 0.9em;
	opacity: 0.75;
}

.epa-booking-engine .epa-be-summary-date {
	padding: 10px 0;
	border-bottom: 1px solid var(--epa-gold-soft, rgba(0, 0, 0, 0.08));
}

.epa-booking-engine .epa-be-summary-date:last-child {
	border-bottom: 0;
}

.epa-booking-engine .epa-be-summary-date-head {
	font-weight: 600;
	align-items: center;
	gap: 12px;
}

.epa-booking-engine .epa-be-summary-date-actions {
	display: inline-flex;
	gap: 12px;
	font-weight: 400;
}

.epa-booking-engine .epa-be-summary-meal-line,
.epa-booking-engine .epa-be-summary-subtotal {
	/* Indented on the start edge so it follows the text direction
	   rather than sitting on the left of a right-to-left summary. */
	padding-inline-start: 14px;
}

.epa-booking-engine .epa-be-summary-subtotal {
	font-weight: 600;
}

.epa-booking-engine .epa-be-link-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.85em;
	color: var(--epa-gold, currentColor);
	cursor: pointer;
	text-decoration: underline;
}

.epa-booking-engine .epa-be-link-btn:hover,
.epa-booking-engine .epa-be-link-btn:focus {
	opacity: 0.75;
}

.epa-booking-engine .epa-be-link-btn.is-destructive {
	color: #a33;
}

.epa-booking-engine .epa-be-btn-add-date {
	display: block;
	width: 100%;
	margin-top: 16px;
	background: transparent;
	border: 1px dashed var(--epa-gold, currentColor);
	color: var(--epa-gold, currentColor);
}

.epa-booking-engine .epa-be-btn-add-date:hover,
.epa-booking-engine .epa-be-btn-add-date:focus {
	background: var(--epa-gold-soft, rgba(0, 0, 0, 0.04));
	border-style: solid;
	color: var(--epa-gold, currentColor);
}

/* ---------- Multi-date refinements (1.6.2) ---------- */

/* A date already in the booking. Left visible rather than hidden so the
   guest can see it is theirs, not that it stopped being offered. */
.epa-booking-engine .epa-be-shabbat-card.is-taken {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.epa-booking-engine .epa-be-shabbat-card-taken {
	display: block;
	margin-top: 4px;
	font-size: 0.8em;
	font-style: italic;
}

/* Name on one line, counts on the next. Where the break falls is a
   decision here, not a consequence of the column width. */
.epa-booking-engine .epa-be-summary-meal-line {
	display: block;
	padding-inline-start: 14px;
	margin: 6px 0;
}

.epa-booking-engine .epa-be-summary-meal-name {
	display: block;
	font-weight: 600;
	text-align: start;
}

.epa-booking-engine .epa-be-summary-meal-guests {
	display: block;
	text-align: start;
	font-size: 0.92em;
	opacity: 0.85;
}