/* ==========================================================================
   Olam Quote — front-end form
   Inherits the site tokens when present, falls back to the Olam charter.
   Written with logical properties so the Hebrew RTL layout needs no mirror.
   ========================================================================== */

.olq {
	--q-navy: var(--olam-navy, #0e2338);
	--q-navy-deep: var(--olam-navy-deep, #091825);
	--q-aegean: var(--olam-aegean, #3a7ca5);
	--q-gold: var(--olam-gold, #c9a44c);
	--q-gold-lt: var(--olam-gold-lt, #e0c987);
	--q-ivory: var(--olam-ivory, #f7f4ec);
	--q-cream: #faf8f2;
	--q-border: var(--olam-border, #e9e4d7);
	--q-muted: var(--olam-muted, #6a6f76);
	--q-ink: #2b3138;
	--q-danger: #b23b3b;

	--q-display: "Cormorant Garamond", Georgia, serif;
	--q-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--q-radius: 16px;
	--q-radius-sm: 10px;

	font-family: var(--q-body);
	color: var(--q-ink);
	font-size: 17px;
	line-height: 1.6;
	max-width: 940px;
	margin-inline: auto;
}

.olq *,
.olq *::before,
.olq *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Theme reset
   Page builders (Elementor kits in particular) style every <button> globally.
   These selectors carry two classes so they outrank ".elementor-kit-X button"
   without resorting to !important.
   -------------------------------------------------------------------------- */

.olq.olq button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	width: auto;
	margin: 0;
}

.olq.olq input[type="text"],
.olq.olq input[type="email"],
.olq.olq input[type="tel"],
.olq.olq select,
.olq.olq textarea {
	font-family: var(--q-body);
	text-transform: none;
	letter-spacing: normal;
}

.olq-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.olq-progress { margin-block-end: 34px; }

.olq-progress ol {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	list-style: none;
	margin: 0; padding: 0;
	counter-reset: none;
}

.olq.olq .olq-progress-btn {
	inline-size: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	border-block-start: 3px solid var(--q-border);
	padding: 12px 4px 0;
	font: inherit;
	font-size: 14px;
	color: var(--q-muted);
	text-align: start;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}

.olq.olq .olq-progress-btn[disabled] { cursor: default; }

.olq-progress-n {
	flex: 0 0 auto;
	inline-size: 26px; block-size: 26px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--q-border);
	color: var(--q-navy);
	font-size: 13px; font-weight: 600;
	transition: background .25s, color .25s;
}

.olq.olq .olq-progress-item.is-current .olq-progress-btn,
.olq.olq .olq-progress-item.is-done .olq-progress-btn {
	color: var(--q-navy);
	border-block-start-color: var(--q-gold);
}

.olq-progress-item.is-current .olq-progress-n,
.olq-progress-item.is-done .olq-progress-n {
	background: var(--q-gold);
	color: var(--q-navy);
}

.olq-progress-item.is-done .olq-progress-n { background: var(--q-gold-lt); }

@media (max-width: 640px) {
	.olq-progress-l { display: none; }
	.olq-progress ol { gap: 4px; }
	.olq-progress-btn { justify-content: center; padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   Steps and typography
   -------------------------------------------------------------------------- */

.olq-step { animation: olq-in .35s ease both; }
.olq-step[hidden] { display: none; }

@keyframes olq-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.olq-h {
	font-family: var(--q-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	line-height: 1.2;
	color: var(--q-navy);
	margin: 0 0 8px;
}

.olq-h3 {
	font-family: var(--q-display);
	font-weight: 500;
	font-size: 1.4rem;
	color: var(--q-navy);
	margin: 34px 0 14px;
}

.olq-lede { color: var(--q-muted); margin: 0 0 24px; }

.olq-fieldset { border: 0; padding: 0; margin: 0 0 28px; }

.olq-legend {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--q-gold);
	padding: 0;
	margin-block-end: 12px;
}

/* --------------------------------------------------------------------------
   Choice cards (stay, dates)
   -------------------------------------------------------------------------- */

.olq-choices { display: grid; gap: 14px; }
.olq-choices--program { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.olq-choice { display: block; cursor: pointer; }
.olq-choice input { position: absolute; opacity: 0; pointer-events: none; }

.olq-choice-in {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius);
	padding: 14px;
	block-size: 100%;
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.olq-choice:hover .olq-choice-in { border-color: var(--q-gold-lt); }

.olq-choice input:focus-visible + .olq-choice-in {
	outline: 2px solid var(--q-gold);
	outline-offset: 2px;
}

.olq-choice input:checked + .olq-choice-in {
	border-color: var(--q-gold);
	background: var(--q-cream);
	box-shadow: 0 6px 20px rgba(14, 35, 56, .08);
}

.olq-choice-body { flex: 1 1 auto; min-inline-size: 0; }

.olq-choice-t {
	display: block;
	font-family: var(--q-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--q-navy);
	line-height: 1.25;
}

.olq-choice-d { display: block; font-size: 14.5px; color: var(--q-muted); margin-block-start: 3px; }

.olq-choice-sub {
	display: block;
	font-size: 13px;
	color: var(--q-aegean);
	margin-block-start: 4px;
}

.olq-tick {
	flex: 0 0 auto;
	inline-size: 22px; block-size: 22px;
	border: 1px solid var(--q-border);
	border-radius: 50%;
	transition: background .2s, border-color .2s;
	position: relative;
}

.olq-choice input:checked + .olq-choice-in .olq-tick {
	background: var(--q-gold);
	border-color: var(--q-gold);
}

.olq-choice input:checked + .olq-choice-in .olq-tick::after {
	content: "";
	position: absolute;
	inset-block-start: 5px; inset-inline-start: 7px;
	inline-size: 6px; block-size: 10px;
	border: solid var(--q-navy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}


/* Programme cards: image on top, content below, tick over the image. */
.olq-choices--program { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.olq-choice--card .olq-choice-in {
	display: block;
	padding: 0;
	overflow: hidden;
	position: relative;
	block-size: 100%;
}

.olq-choice-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--q-border);
}

.olq-choice-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.olq-choice--card:hover .olq-choice-media img { transform: scale(1.04); }

.olq-choice--card .olq-choice-body { display: block; padding: 16px 18px 18px; }
.olq-choice--card .olq-choice-t { font-size: 1.35rem; }

.olq-choice--card .olq-tick {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	background: rgba(255, 255, 255, .92);
	border-color: rgba(255, 255, 255, .92);
}

/* Without an image the tick sits inline with the text instead. */
.olq-choice--card .olq-choice-in:not(:has(.olq-choice-media)) .olq-tick {
	position: absolute;
	inset-block-start: 16px;
	background: none;
	border-color: var(--q-border);
}

/* The dates fieldset only appears once a stay is chosen. */
.olq-fieldset[data-dates-wrap] { animation: olq-in .3s ease both; }

/* --------------------------------------------------------------------------
   Running tally
   -------------------------------------------------------------------------- */

.olq-tally {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--q-navy);
	color: #fff;
	border-radius: var(--q-radius);
	padding: 14px 18px;
	margin-block-end: 18px;
	font-size: 15px;
}

.olq-tally-strong { font-family: var(--q-display); font-size: 1.2rem; color: var(--q-gold-lt); }
.olq-tally-empty { background: var(--q-cream); color: var(--q-muted); border: 1px dashed var(--q-border); }

/* --------------------------------------------------------------------------
   Room block — the signature element
   -------------------------------------------------------------------------- */

.olq-picked { display: grid; gap: 16px; }

.olq-room {
	background: #fff;
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius);
	overflow: hidden;
	animation: olq-in .3s ease both;
}

.olq-room.is-invalid { border-color: var(--q-danger); }

.olq-room-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	background: var(--q-cream);
	border-block-end: 1px solid var(--q-border);
}

.olq-room-img {
	inline-size: 84px; block-size: 62px;
	object-fit: cover;
	border-radius: var(--q-radius-sm);
	flex: 0 0 auto;
	background: var(--q-border);
}

.olq-room-id { flex: 1 1 auto; min-inline-size: 0; }

.olq-room-index {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--q-navy);
	background: var(--q-gold-lt);
	border-radius: 20px;
	padding: 2px 9px;
	margin-block-end: 5px;
}

.olq-room-view {
	display: block;
	font-size: 11.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--q-gold);
}

.olq-room-name {
	font-family: var(--q-display);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--q-navy);
	margin: 1px 0 0;
	line-height: 1.2;
}

.olq-room-meta { font-size: 13.5px; color: var(--q-muted); margin: 2px 0 0; }

.olq.olq .olq-room-remove {
	flex: 0 0 auto;
	inline-size: 34px; block-size: 34px;
	border-radius: 50%;
	border: 1px solid var(--q-border);
	background: #fff;
	color: var(--q-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s, border-color .2s, background .2s;
}

.olq.olq .olq-room-remove:hover {
	color: var(--q-danger);
	border-color: var(--q-danger);
	background: #fff5f5;
}

/* Occupancy brackets */

.olq-brackets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 2px 24px;
	padding: 8px 18px 14px;
}

.olq-bracket {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 10px;
	border-block-end: 1px solid var(--q-border);
}

.olq-bracket:last-child { border-block-end: 0; }

.olq-bracket-l { font-size: 15px; color: var(--q-ink); }
.olq-bracket-l small { display: block; font-size: 12.5px; color: var(--q-muted); }

.olq-stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.olq.olq .olq-step-btn {
	inline-size: 38px; block-size: 38px;
	border: 1px solid var(--q-border);
	background: #fff;
	color: var(--q-navy);
	font-size: 19px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	display: grid; place-items: center;
	transition: border-color .18s, background .18s, color .18s, opacity .18s;
}

.olq.olq .olq-step-btn:hover:not(:disabled) { border-color: var(--q-gold); background: var(--q-cream); }
.olq.olq .olq-step-btn:disabled { opacity: .35; cursor: not-allowed; }
.olq.olq .olq-step-btn:focus-visible { outline: 2px solid var(--q-gold); outline-offset: 2px; }

.olq-step-val {
	inline-size: 36px;
	text-align: center;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--q-navy);
}

/* Capacity meter */

.olq-room-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px 16px;
	border-block-start: 1px solid var(--q-border);
	flex-wrap: wrap;
}

.olq-meter {
	flex: 1 1 160px;
	block-size: 6px;
	background: var(--q-border);
	border-radius: 20px;
	overflow: hidden;
}

.olq-meter-fill {
	display: block;
	block-size: 100%;
	inline-size: 0;
	background: var(--q-aegean);
	border-radius: 20px;
	transition: inline-size .3s ease, background .3s ease;
}

.olq-room.is-full .olq-meter-fill { background: var(--q-gold); }

.olq-room-read { font-size: 14px; color: var(--q-muted); margin: 0; flex: 0 0 auto; }
.olq-room-read.is-warn { color: var(--q-danger); }

/* --------------------------------------------------------------------------
   Room catalogue
   -------------------------------------------------------------------------- */

.olq-catalog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.olq.olq .olq-card {
	display: flex;
	flex-direction: column;
	text-align: start;
	background: #fff;
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius);
	overflow: hidden;
	padding: 0;
	font: inherit;
	cursor: pointer;
	transition: transform .25s, box-shadow .25s, border-color .25s;
}

.olq.olq .olq-card:hover {
	transform: translateY(-3px);
	border-color: var(--q-gold-lt);
	box-shadow: 0 12px 26px rgba(14, 35, 56, .12);
}

.olq.olq .olq-card:focus-visible { outline: 2px solid var(--q-gold); outline-offset: 2px; }

.olq-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--q-border); }
.olq-card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .5s; }
.olq.olq .olq-card:hover .olq-card-media img { transform: scale(1.05); }

.olq-card-body { display: block; padding: 12px 14px 4px; flex: 1 1 auto; }

.olq-card-view {
	display: block;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--q-gold);
}

.olq-card-name {
	display: block;
	font-family: var(--q-display);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--q-navy);
	line-height: 1.25;
	margin-block-start: 2px;
}

.olq-card-feats { display: block; font-size: 12.5px; color: var(--q-muted); margin-block-start: 5px; }

.olq-card-add {
	display: block;
	padding: 10px 14px 14px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--q-aegean);
}

.olq-card-add::before { content: "+ "; }

/* --------------------------------------------------------------------------
   Text fields
   -------------------------------------------------------------------------- */

.olq-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}

.olq-field { margin: 0; }
.olq-field--wide { grid-column: 1 / -1; }

.olq-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--q-navy);
	margin-block-end: 6px;
}

.olq-req { color: var(--q-gold); }

.olq input[type="text"],
.olq input[type="email"],
.olq input[type="tel"],
.olq select,
.olq textarea {
	inline-size: 100%;
	font: inherit;
	font-size: 16px; /* keeps iOS from zooming on focus */
	color: var(--q-navy);
	background: #fff;
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius-sm);
	padding: 12px 14px;
	transition: border-color .2s, box-shadow .2s;
}

.olq textarea { resize: vertical; }

.olq input:focus,
.olq select:focus,
.olq textarea:focus {
	outline: none;
	border-color: var(--q-gold);
	box-shadow: 0 0 0 3px rgba(201, 164, 76, .16);
}

.olq .is-invalid input,
.olq .is-invalid select { border-color: var(--q-danger); }

/* Phone: country code + national number side by side, one logical field. */
.olq-phone-group {
	display: flex;
	gap: 8px;
}

.olq-phone-code-wrap { flex: 0 0 auto; }

.olq-phone-group select#olq-phone-code {
	inline-size: auto;
	max-inline-size: 132px;
}

.olq-phone-group .olq-phone-number { flex: 1 1 auto; min-inline-size: 0; }

@media (max-width: 620px) {
	.olq-fields { grid-template-columns: 1fr; }

	.olq-phone-group select#olq-phone-code { max-inline-size: 112px; }
}

/* --------------------------------------------------------------------------
   Review
   -------------------------------------------------------------------------- */

.olq-review { display: grid; gap: 14px; margin-block-end: 22px; }

.olq-rev {
	background: var(--q-cream);
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius);
	padding: 16px 18px;
}

.olq-rev-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 8px;
}

.olq-rev-t {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--q-gold);
}

.olq.olq .olq-rev-edit {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13.5px;
	color: var(--q-aegean);
	text-decoration: underline;
	cursor: pointer;
}

.olq-rev dl { margin: 0; display: grid; gap: 4px; }
.olq-rev dt { font-size: 13px; color: var(--q-muted); }
.olq-rev dd { margin: 0 0 6px; color: var(--q-navy); }
.olq-rev-room { padding-block: 6px; border-block-end: 1px dashed var(--q-border); }
.olq-rev-room:last-child { border-block-end: 0; }
.olq-rev-room b { font-family: var(--q-display); font-weight: 500; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Consent, traps, errors
   -------------------------------------------------------------------------- */

.olq-consent { margin: 18px 0 0; font-size: 15px; }
.olq-consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.olq-consent input { margin-block-start: 4px; accent-color: var(--q-gold); }

.olq-trap {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
}

.olq-error {
	display: block;
	color: var(--q-danger);
	font-size: 13.5px;
	margin-block-start: 6px;
}

.olq-error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.olq-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-block-start: 30px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--q-border);
}

/* On the rooms step the list can be long, so the action bar sticks to the
   bottom of the viewport and stays reachable while scrolling. It remains in
   normal flow on short content (sticky only engages when needed). */
.olq[data-current-step="2"] .olq-actions {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin-block-start: 24px;
	padding: 16px;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(6px);
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius);
	box-shadow: 0 -6px 20px rgba(14, 35, 56, .08);
}

/* A running summary on the left of the sticky bar, so the total is visible
   right next to the button that advances. Populated by the tally logic. */
.olq[data-current-step="2"] .olq-actions::before {
	content: attr(data-summary);
	margin-inline-end: auto;
	align-self: center;
	font-size: 14px;
	color: var(--q-muted);
	font-family: var(--q-display);
	font-size: 1.05rem;
	color: var(--q-navy);
}

.olq.olq .olq-btn {
	font: inherit;
	font-size: 15px;
	letter-spacing: .4px;
	padding: 14px 30px;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: filter .2s, background .2s, color .2s;
}

.olq.olq .olq-btn--gold { background: var(--q-gold); color: var(--q-navy); font-weight: 600; }
.olq.olq .olq-btn--gold:hover { filter: brightness(.94); }
.olq.olq .olq-btn--ghost { background: none; border-color: var(--q-navy); color: var(--q-navy); }
.olq.olq .olq-btn--ghost:hover { background: var(--q-cream); }
.olq.olq .olq-btn:focus-visible { outline: 2px solid var(--q-gold); outline-offset: 3px; }
.olq.olq .olq-btn[hidden] { display: none; }
.olq.olq .olq-btn.is-busy { opacity: .6; pointer-events: none; }

@media (max-width: 560px) {
	.olq-actions { flex-direction: column-reverse; }
	.olq-btn { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   Done screen
   -------------------------------------------------------------------------- */

.olq-done { text-align: center; padding: 40px 20px; }

.olq-done-mark {
	inline-size: 64px; block-size: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--q-gold);
	color: var(--q-navy);
	font-size: 32px;
	display: grid; place-items: center;
}

.olq-done-ref {
	font-family: var(--q-display);
	font-size: 1.3rem;
	color: var(--q-navy);
}

.olq-setup-notice {
	background: #fff8e5;
	border: 1px solid #e0c987;
	border-radius: 10px;
	padding: 14px 16px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.olq *,
	.olq *::before,
	.olq *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Touch targets — steppers get the full 44px on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.olq-step-btn { inline-size: 44px; block-size: 44px; font-size: 21px; }
	.olq-step-val { inline-size: 42px; font-size: 18px; }
	.olq-bracket { padding-block: 12px; }
	.olq-room-remove { inline-size: 40px; block-size: 40px; }
}