/**
 * Diamonds Booking — front-end styles.
 *
 * Scoped under .db-* so nothing here can leak into the theme. Every colour is
 * a variable: override them once on :root to match the site's palette.
 */

/* Defaults are taken from the live site: navy #00306A for calls to action and
   headings, #333 body text, pill-shaped buttons. Override on :root to retheme. */
:root {
	--db-ink: #333333;
	--db-muted: #6f6a63;
	--db-line: #e3e0da;
	--db-bg: #ffffff;
	--db-surface: #f7f6f3;
	--db-accent: #00306a;
	/* The brand tan is #AA8D73, but white text on it lands at 3.1:1 — under
	   the 4.5:1 WCAG AA floor for text this size. Same hue, taken deeper:
	   4.7:1, and it still reads as the brand's brown. */
	--db-accent-hover: #8a6e55;
	--db-accent-ink: #ffffff;
	--db-danger: #a3342f;
	--db-success: #1f6b45;
	--db-radius: 10px;
	--db-btn-radius: 50px;
	--db-shadow: 0 1px 2px rgba(0, 48, 106, .06), 0 8px 24px rgba(0, 48, 106, .08);
}

.db-search,
.db-listings,
.db-listing,
.db-widget,
.db-reviews {
	color: var(--db-ink);
	font-size: 16px;
	line-height: 1.6;
	text-align: right;
}

.db-search *,
.db-listings *,
.db-listing *,
.db-widget *,
.db-reviews * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Buttons */

.db-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--db-btn-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

/* Themes commonly repaint every link on hover — Hello Elementor sets
   `a:active, a:hover { color: #333366 }`, which beats a plain `.db-btn`
   rule and leaves dark text on a dark button. Every interactive state
   therefore states its own colour instead of inheriting one. */
.db-btn--primary,
.db-btn--primary:link,
.db-btn--primary:visited {
	background: var(--db-accent);
	color: var(--db-accent-ink);
}

.db-btn--primary:hover:not(:disabled),
.db-btn--primary:focus:not(:disabled),
.db-btn--primary:active:not(:disabled) {
	background: var(--db-accent-hover);
	color: var(--db-accent-ink);
}

.db-btn--ghost,
.db-btn--ghost:link,
.db-btn--ghost:visited {
	background: transparent;
	border-color: var(--db-line);
	color: var(--db-ink);
}

.db-btn--ghost:hover,
.db-btn--ghost:focus,
.db-btn--ghost:active {
	border-color: var(--db-accent-hover);
	color: var(--db-accent-hover);
}

.db-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* ----------------------------------------------------------------- Fields */

.db-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 160px;
	min-width: 0;
}

.db-field--narrow {
	flex: 0 1 110px;
}

.db-field label,
.db-field > span {
	font-size: 13px;
	font-weight: 600;
	color: var(--db-muted);
}

.db-field input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	background: var(--db-bg);
	font: inherit;
	color: var(--db-ink);
}

.db-field input:focus-visible {
	outline: 2px solid var(--db-accent);
	outline-offset: 1px;
	border-color: var(--db-accent);
}

/* A honeypot: off-screen for bots, invisible and unreachable for people. */
.db-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ----------------------------------------------------------------- Search */

.db-search {
	position: relative;
	padding: 20px;
	background: var(--db-surface);
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow);
}

.db-search__title {
	margin: 0 0 16px;
	font-size: 22px;
}

.db-search__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.db-search__submit {
	flex: 0 0 auto;
	height: 46px;
}

.db-search .db-calendar {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	right: 20px;
	left: 20px;
}

/* --------------------------------------------------------------- Calendar */

.db-calendar,
.db-book__calendar {
	padding: 16px;
	background: var(--db-bg);
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow);
}

.db-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.db-cal__hint {
	font-size: 14px;
	color: var(--db-muted);
}

.db-cal__nav {
	width: 34px;
	height: 34px;
	border: 1px solid var(--db-line);
	border-radius: 50%;
	background: var(--db-bg);
	font-size: 18px;
	line-height: 1;
	color: var(--db-ink);
	cursor: pointer;
}

.db-cal__nav:hover {
	border-color: var(--db-accent);
	color: var(--db-accent);
}

.db-cal__nav svg {
	display: block;
	margin: 0 auto;
	width: 16px;
	height: 16px;
	pointer-events: none;
}

.db-cal__months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.db-cal__month-name {
	margin-bottom: 8px;
	font-weight: 600;
	text-align: center;
}

.db-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.db-cal__weekday {
	padding-bottom: 6px;
	font-size: 12px;
	color: var(--db-muted);
	text-align: center;
}

.db-cal__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 44px;
	padding: 2px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	font: inherit;
	color: var(--db-ink);
	cursor: pointer;
}

.db-cal__day:hover:not(.is-disabled) {
	border-color: var(--db-accent);
}

.db-cal__num {
	font-size: 15px;
	line-height: 1.1;
}

.db-cal__price {
	font-size: 10px;
	color: var(--db-muted);
	white-space: nowrap;
}

/* On a phone a day cell is ~33px wide, which a five-figure nightly rate
   would overrun. The total is what the guest is deciding on, so the
   per-night labels step aside rather than clip. */
@media (max-width: 420px) {
	.db-cal__price {
		display: none;
	}

	.db-cal__day {
		min-height: 38px;
	}
}

.db-cal__day.is-disabled {
	color: #c4bfb7;
	cursor: not-allowed;
	text-decoration: line-through;
}

.db-cal__day.is-start,
.db-cal__day.is-end {
	background: var(--db-accent);
	color: var(--db-accent-ink);
}

.db-cal__day.is-start .db-cal__price,
.db-cal__day.is-end .db-cal__price {
	color: rgba(255, 255, 255, .8);
}

.db-cal__day.is-between {
	background: var(--db-surface);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.db-cal__day.is-between {
		background: color-mix(in srgb, var(--db-accent) 14%, transparent);
	}
}

/* --------------------------------------------------------------- Listings */

.db-listings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 28px;
}

.db-card {
	overflow: hidden;
	background: var(--db-bg);
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	transition: box-shadow .2s ease, transform .2s ease;
}

.db-card:hover {
	box-shadow: var(--db-shadow);
	transform: translateY(-2px);
}

.db-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.db-card__media {
	aspect-ratio: 4 / 3;
	background: var(--db-surface);
}

.db-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.db-card__body {
	padding: 16px 18px 20px;
}

.db-card__title {
	margin: 0 0 6px;
	font-size: 18px;
	line-height: 1.35;
}

.db-card__meta {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--db-muted);
}

.db-card__price {
	margin: 0 0 12px;
	font-size: 15px;
}

.db-card__price span {
	color: var(--db-muted);
}

.db-card__cta {
	font-size: 14px;
	font-weight: 600;
	color: var(--db-accent);
}

/* Boom's minimum-nights rule, shown on the card so a guest learns it in the
   search results and not only on the cabin's page. Same navy pill as the
   calendar badge; the "too short for these dates" variant turns to the
   warning colour and the card's price is hidden, since that price is for a
   stay Boom would refuse. */
.db-card__stay {
	/* Block, so the card's CTA keeps its own line, but only as wide as its
	   text so it reads as a pill and not a banner. */
	display: block;
	width: fit-content;
	margin: 0 0 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--db-accent);
	color: var(--db-accent-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

.db-card__stay.is-short {
	background: var(--db-danger);
}

.db-inline-results__note {
	margin: -8px 0 20px;
	padding: 10px 14px;
	border-radius: var(--db-radius);
	background: var(--db-surface);
	border: 1px solid var(--db-line);
	font-size: 14px;
	color: var(--db-ink);
}

.db-listings__more {
	margin-top: 28px;
	text-align: center;
}

/* ---------------------------------------------------------- Listing page */

.db-listing__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 40px;
	align-items: start;
	margin-top: 32px;
}

@media (max-width: 900px) {
	.db-listing__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

.db-gallery__main {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--db-radius);
	background: var(--db-surface);
}

.db-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.db-gallery__strip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin-top: 10px;
	padding-bottom: 4px;
}

.db-gallery__thumb {
	flex: 0 0 96px;
	height: 68px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 6px;
	background: none;
	cursor: pointer;
}

.db-gallery__thumb.is-active {
	border-color: var(--db-accent);
}

.db-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.db-details__title {
	margin: 0 0 8px;
	font-size: 30px;
	line-height: 1.25;
}

.db-details__meta {
	margin: 0 0 4px;
	color: var(--db-muted);
}

.db-details__rating {
	margin: 0 0 20px;
	font-weight: 600;
	color: var(--db-accent);
}

.db-details__section {
	margin-top: 28px;
}

.db-details__section h2 {
	margin: 0 0 10px;
	font-size: 20px;
}

.db-details__text {
	white-space: pre-line;
}

.db-amenities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.db-amenities li {
	position: relative;
	padding-right: 20px;
	font-size: 15px;
}

.db-amenities li::before {
	content: "✓";
	position: absolute;
	right: 0;
	color: var(--db-accent);
}

/* --------------------------------------------------------- Booking panel */

.db-book {
	position: sticky;
	top: 24px;
	padding: 22px;
	background: var(--db-surface);
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow);
}

@media (max-width: 900px) {
	.db-book {
		position: static;
	}
}

.db-book__title {
	margin: 0 0 16px;
	font-size: 20px;
}

.db-book__calendar {
	padding: 12px;
	box-shadow: none;
}

.db-book__summary {
	margin-top: 18px;
}

.db-book__hint,
.db-book__note {
	margin: 0;
	font-size: 14px;
	color: var(--db-muted);
}

.db-book__error {
	margin: 0 0 12px;
	color: var(--db-danger);
}

.db-book__dates {
	margin: 0 0 12px;
	font-size: 15px;
}

.db-book__dates span {
	color: var(--db-muted);
}

.db-price {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 16px;
	margin: 0 0 12px;
	font-size: 15px;
}

.db-price dt {
	margin: 0;
	color: var(--db-muted);
}

.db-price dd {
	margin: 0;
	text-align: left;
}

.db-price .is-discount {
	color: var(--db-success);
}

.db-price .is-total {
	padding-top: 10px;
	border-top: 1px solid var(--db-line);
	font-size: 17px;
	font-weight: 700;
	color: var(--db-ink);
}

.db-book__guests {
	display: flex;
	gap: 12px;
	margin: 18px 0;
}

.db-guest h3 {
	margin: 18px 0 12px;
	font-size: 17px;
}

.db-guest .db-field {
	margin-bottom: 12px;
}

.db-guest__error {
	margin: 0 0 12px;
	color: var(--db-danger);
	font-size: 14px;
}

.db-guest__submit {
	width: 100%;
}

.db-book__payment-title {
	margin: 20px 0 12px;
	font-size: 18px;
}

.db-book__frame {
	width: 100%;
	min-height: 620px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	background: var(--db-bg);
}

/* ------------------------------------------------------- States, reviews */

.db-empty,
.db-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 24px;
	text-align: center;
	background: var(--db-surface);
	border-radius: var(--db-radius);
}

.db-error p {
	margin: 0;
	color: var(--db-danger);
}

.db-success {
	padding: 28px;
	text-align: center;
	background: var(--db-bg);
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
}

.db-success h2 {
	margin: 0 0 8px;
	color: var(--db-success);
}

.db-success__code {
	font-weight: 700;
}

.db-skeleton {
	min-height: 220px;
	border-radius: var(--db-radius);
	background: linear-gradient(90deg, var(--db-surface) 25%, #f1ede7 37%, var(--db-surface) 63%);
	background-size: 400% 100%;
	animation: db-shimmer 1.4s ease infinite;
}

.db-skeleton--hero {
	min-height: 380px;
}

.db-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

@keyframes db-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.db-skeleton { animation: none; }
	.db-card { transition: none; }
}

.db-reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.db-review {
	margin: 0;
	padding: 20px;
	background: var(--db-surface);
	border-radius: var(--db-radius);
}

.db-review__score {
	margin-bottom: 8px;
	font-weight: 700;
	color: var(--db-accent);
}

.db-review__text {
	margin: 0 0 10px;
}

.db-review__source {
	font-size: 13px;
	color: var(--db-muted);
	font-style: normal;
}

/* --------------------------------------------------------- Booking widget

   The card that drops into a unit page's own column. It sticks to the
   viewport as the guest scrolls the description, the way Airbnb's does. */

.db-widget {
	position: sticky;
	top: 24px;
	align-self: start;
	padding: 22px;
	background: var(--db-bg);
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow);
}

.db-widget__title {
	margin: 0 0 18px;
	font-size: 20px;
	color: var(--db-accent);
}

/* Two date cells sharing one outline, as a single control. */
.db-widget__dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	overflow: hidden;
}

.db-widget__date {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 0;
	background: var(--db-bg);
	font: inherit;
	text-align: right;
	cursor: pointer;
}

.db-widget__date + .db-widget__date {
	border-right: 1px solid var(--db-line);
}

.db-widget__date:hover,
.db-widget__date:focus-visible {
	background: var(--db-surface);
	outline: none;
}

.db-widget__date-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--db-muted);
}

.db-widget__date-value {
	font-size: 15px;
	color: var(--db-muted);
}

.db-widget__date-value.is-set {
	color: var(--db-ink);
	font-weight: 600;
}

.db-widget .db-calendar {
	margin-top: 10px;
	box-shadow: none;
}

/* ---------------------------------------------------------- Steppers */

.db-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 2px;
	border-bottom: 1px solid var(--db-line);
}

/* In the search bar the steppers sit side by side. With the label pushed to
   one edge and the controls to the other, "ילדים" ends up nearer the adults
   count than its own — so here each group is a self-contained box, label
   next to its own numbers, matching the bordered date fields beside it. */
.db-search .db-stepper {
	flex: 0 1 auto;
	justify-content: flex-start;
	gap: 12px;
	padding: 7px 14px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	background: var(--db-bg);
}

.db-search .db-stepper__label {
	font-size: 13px;
	color: var(--db-muted);
}

.db-stepper__label {
	font-size: 15px;
	font-weight: 600;
}

.db-stepper__controls {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.db-stepper__btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--db-line);
	border-radius: 50%;
	background: var(--db-bg);
	font-size: 17px;
	line-height: 1;
	color: var(--db-accent);
	cursor: pointer;
}

.db-stepper__btn:hover:not(:disabled) {
	border-color: var(--db-accent);
}

.db-stepper__btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.db-stepper__value {
	min-width: 20px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

/* ------------------------------------------------------------ Coupon */

.db-widget__coupon-toggle {
	display: block;
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--db-accent);
	text-decoration: underline;
	cursor: pointer;
}

.db-widget__coupon {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.db-widget__coupon .db-field {
	margin: 0;
}

.db-widget__coupon .db-btn {
	flex: 0 0 auto;
	padding: 11px 20px;
}

/* ------------------------------------------------- Summary and steps */

.db-widget__summary:not(:empty) {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--db-line);
}

.db-widget__hint,
.db-widget__note {
	margin: 0;
	font-size: 14px;
	color: var(--db-muted);
}

.db-widget__error {
	margin: 0 0 12px;
	color: var(--db-danger);
}

.db-widget__dates-summary {
	margin: 0 0 12px;
	font-size: 15px;
}

.db-widget__dates-summary span {
	color: var(--db-muted);
}

.db-widget__cta {
	width: 100%;
	margin-top: 18px;
}

.db-widget__payment:not(:empty) {
	margin-top: 20px;
}

.db-widget__payment iframe,
.db-widget .db-book__frame {
	width: 100%;
	min-height: 620px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
}

/* -------------------------------------------------------- Sticky bar */

.db-stickybar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--db-bg);
	border-top: 1px solid var(--db-line);
	box-shadow: 0 -4px 20px rgba(0, 48, 106, .1);
	direction: rtl;
}

.db-stickybar__price {
	font-size: 15px;
	color: var(--db-ink);
}

.db-stickybar__price span {
	color: var(--db-muted);
}

.db-stickybar__hint {
	color: var(--db-muted);
}

.db-stickybar__cta {
	flex: 0 0 auto;
	padding: 12px 26px;
}

/* The bar is a phone affordance; on a desktop the card is always in reach. */
@media (max-width: 900px) {
	.db-stickybar:not([hidden]) {
		display: flex;
	}

	.db-widget {
		position: static;
	}

	/* Keep the last of the page clear of the fixed bar. */
	body:has(.db-stickybar:not([hidden])) {
		padding-bottom: 76px;
	}
}

/* ------------------------------------------------- Pre-credentials state

   Shown while the Booking API keys are missing: the page keeps a working
   route to Boom instead of showing a guest an error. */

.db-widget--fallback {
	position: static;
	text-align: center;
}

.db-widget--fallback .db-widget__hint {
	margin-bottom: 18px;
}

.db-cta-link {
	width: 100%;
	text-decoration: none;
}

.db-widget__admin-note {
	margin: 18px 0 0;
	padding: 12px 14px;
	border: 1px dashed var(--db-line);
	border-radius: var(--db-radius);
	font-size: 13px;
	line-height: 1.5;
	color: var(--db-muted);
	text-align: right;
}

/* ------------------------------------------------------ Unit selector

   Shown only when one page covers several bookable listings. */

.db-widget__units {
	margin-bottom: 14px;
}

.db-widget__units-label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--db-muted);
}

.db-widget__units select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	background: var(--db-bg);
	font: inherit;
	color: var(--db-ink);
}

.db-widget__units select:focus-visible {
	outline: 2px solid var(--db-accent);
	outline-offset: 1px;
}

/* --------------------------------------------- Archive search injection

   Sits above the cabins archive without touching the Elementor template,
   so it needs its own outer spacing to match the page's rhythm. */

.db-archive-search {
	max-width: 1140px;
	margin: 0 auto 32px;
	padding: 0 20px;
}

/* ============================================================ Hardening

   The plugin renders inside a theme that styles bare <button> elements, so
   the calendar states are re-stated at a specificity the theme cannot beat.
   Without this the selected day inherited the theme's own accent. */

.db-calendar .db-cal__day,
.db-calendar .db-cal__day:hover,
.db-calendar .db-cal__day:focus,
.db-calendar .db-cal__day:active {
	background: transparent;
	color: var(--db-ink);
	box-shadow: none;
	text-shadow: none;
}

.db-calendar .db-cal__day.is-disabled {
	color: #b9b4ab;
	background: transparent;
}

.db-calendar .db-cal__day.is-between {
	background: var(--db-surface);
	color: var(--db-ink);
}

.db-calendar .db-cal__day.is-start,
.db-calendar .db-cal__day.is-end,
.db-calendar .db-cal__day.is-start:hover,
.db-calendar .db-cal__day.is-end:hover,
.db-calendar .db-cal__day.is-start:focus,
.db-calendar .db-cal__day.is-end:focus {
	background: var(--db-accent);
	color: var(--db-accent-ink);
}

.db-calendar .db-cal__nav,
.db-calendar .db-cal__nav:hover,
.db-calendar .db-cal__nav:focus {
	background: var(--db-bg);
	color: var(--db-accent);
	box-shadow: none;
}

.db-calendar .db-cal__nav:disabled {
	opacity: .3;
	cursor: not-allowed;
	border-color: var(--db-line);
}

.db-stepper .db-stepper__btn,
.db-stepper .db-stepper__btn:hover,
.db-stepper .db-stepper__btn:focus {
	background: var(--db-bg);
	color: var(--db-accent);
	box-shadow: none;
}

/* ------------------------------------------------- Inline search results */

.db-inline-results {
	margin-top: 28px;
}

.db-inline-results__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.db-inline-results__title {
	margin: 0;
	font-size: 20px;
	color: var(--db-accent);
}

.db-inline-results__reset {
	flex: 0 0 auto;
	padding: 10px 20px;
	font-size: 14px;
}

.db-inline-results .db-listings__grid {
	margin-top: 0;
}

/* ================================================== Responsive behaviour */

/* Tablets and small laptops: the search bar wraps into two tidy rows
   instead of squeezing five controls onto one line. */
@media (max-width: 860px) {
	.db-search__fields {
		gap: 10px;
	}

	.db-search__fields > .db-field {
		flex: 1 1 calc(50% - 5px);
	}

	.db-search .db-stepper {
		flex: 1 1 calc(50% - 5px);
		justify-content: space-between;
	}

	.db-search__submit {
		flex: 1 1 100%;
	}
}

/* Phones: everything goes full width, and the calendar stops floating over
   the page — it drops into the flow so it can never sit off-screen. */
@media (max-width: 620px) {
	.db-search {
		padding: 16px;
	}

	.db-search__fields > .db-field,
	.db-search .db-stepper {
		flex: 1 1 100%;
	}

	.db-search .db-calendar {
		position: static;
		margin-top: 12px;
	}

	.db-cal__months {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.db-archive-search {
		padding: 0 14px;
		margin-bottom: 24px;
	}

	.db-inline-results__head {
		flex-direction: column;
		align-items: stretch;
	}

	.db-inline-results__reset {
		width: 100%;
	}

	.db-listings__grid,
	.db-reviews__list {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.db-widget {
		padding: 16px;
	}

	.db-widget__frame,
	.db-widget__payment iframe,
	.db-book__frame {
		min-height: 540px;
	}
}

/* Touch targets stay comfortable on small screens. */
@media (max-width: 620px) and (pointer: coarse) {
	.db-stepper__btn {
		width: 38px;
		height: 38px;
	}

	.db-cal__day {
		min-height: 44px;
	}
}

/* A theme column can be narrower than the card's natural width — never let
   the widget push the page sideways. */
.db-widget,
.db-search,
.db-inline-results {
	max-width: 100%;
	min-width: 0;
}

/* ======================================================= Hidden state

   `.db-btn` sets `display: inline-flex`, and an author rule beats the
   browser's own `[hidden] { display: none }`. The "הזמן עכשיו" button
   therefore stayed on screen after the next step opened. The same caught
   the search results panel: an empty stay-rule pill showed as a stray navy
   dash on every card without a minimum. Stated once, at a specificity
   nothing else here reaches. */

.db-search [hidden],
.db-listings [hidden],
.db-listing [hidden],
.db-widget [hidden],
.db-checkout [hidden],
.db-inline-results[hidden],
.db-inline-results [hidden],
.db-btn[hidden] {
	display: none !important;
}

/* ===================================================== Checkout page

   The page "הזמן עכשיו" leads to: order summary beside the guest form,
   then the payment frame in the same column. */

.db-checkout {
	color: var(--db-ink);
	font-size: 16px;
	line-height: 1.6;
	text-align: right;
	max-width: 1100px;
	margin: 0 auto;
}

.db-checkout * {
	box-sizing: border-box;
}

.db-checkout__title {
	margin: 0 0 24px;
	font-size: 28px;
	color: var(--db-accent);
}

.db-checkout__layout {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.db-checkout__summary {
	position: sticky;
	top: 24px;
	padding: 20px;
	background: var(--db-surface);
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
}

.db-checkout__picture {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--db-radius);
	margin-bottom: 14px;
}

.db-checkout__cabin {
	margin: 0 0 4px;
	font-size: 20px;
	color: var(--db-accent);
}

.db-checkout__summary .db-widget__dates-summary {
	margin-top: 14px;
}

.db-checkout__main {
	padding: 24px;
	background: var(--db-bg);
	border: 1px solid var(--db-line);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow);
}

.db-checkout__main .db-guest h3 {
	margin-top: 0;
}

@media (max-width: 860px) {
	.db-checkout__layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.db-checkout__summary {
		position: static;
	}

	.db-checkout__main {
		padding: 18px;
	}
}

/* The checkout section renders inside the theme's content column, which
   gives it no breathing room of its own: cards sat flush under the page
   title and against the footer band. */
.db-checkout {
	padding: 8px 20px 64px;
}

.db-checkout__layout {
	margin-top: 8px;
}

@media (max-width: 860px) {
	.db-checkout {
		padding: 4px 14px 48px;
	}
}

/* A disabled primary button stays the brand navy, faded — the theme paints
   disabled buttons in its own pink, which made "מעבר לתשלום…" look broken. */
.db-btn--primary:disabled,
.db-btn--primary[disabled]:hover {
	background: var(--db-accent);
	color: var(--db-accent-ink);
	opacity: .55;
	filter: none;
	box-shadow: none;
}

/* The date fields are <button>s too, and the theme paints buttons magenta
   on hover/focus. Every state stated explicitly, like the calendar days. */
.db-widget .db-widget__date,
.db-widget .db-widget__date:hover,
.db-widget .db-widget__date:focus,
.db-widget .db-widget__date:active,
.db-widget .db-widget__date:focus-visible {
	background: var(--db-bg);
	color: var(--db-ink);
	box-shadow: none;
	text-shadow: none;
	outline: none;
}

.db-widget .db-widget__date:hover,
.db-widget .db-widget__date:focus-visible {
	background: var(--db-surface);
}

.db-widget .db-widget__date:focus-visible {
	box-shadow: inset 0 0 0 2px var(--db-accent);
}

.db-widget .db-widget__coupon-toggle,
.db-widget .db-widget__coupon-toggle:hover,
.db-widget .db-widget__coupon-toggle:focus {
	background: none;
	color: var(--db-accent);
	box-shadow: none;
}

/* ============================================================ Loading

   One spinner for every wait: the price in the card, the results panel,
   and the button that hands the guest over to payment. */

.db-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-inline-end: 8px;
	vertical-align: -3px;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	opacity: .85;
	animation: db-spin .7s linear infinite;
}

.db-loading {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 14px;
	color: var(--db-muted);
}

.db-btn .db-spinner {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
}

.db-inline-results__title .db-spinner {
	width: 18px;
	height: 18px;
	vertical-align: -3px;
}

@keyframes db-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.db-spinner {
		animation: none;
		border-inline-end-color: currentColor;
		opacity: .5;
	}
}

/* A night closed by a stay rule (minimum / maximum nights) is not a booked
   night: no strike-through, just quiet — the hint above the grid says why. */
.db-calendar .db-cal__day.is-rule {
	color: #c4bfb7;
	text-decoration: none;
	cursor: not-allowed;
}

.db-calendar .db-cal__day.is-rule .db-cal__price {
	opacity: .5;
}

/* ------------------------------------------------------ Brand search bar

   [diamonds_search theme="brand"] — the home-page variant. Painted like the
   tan band it sits above (#AA8D73, 32px corners, white type) so the two read
   as one composition rather than a form dropped onto the page. Only the
   surfaces change; the fields keep their white so they stay readable. */

.db-search--brand {
	padding: 36px 40px;
	background: #aa8d73;
	border: 0;
	border-radius: 32px;
	box-shadow: none;
	color: #ffffff;
}

.db-search--brand .db-search__title {
	color: #ffffff;
}

.db-search--brand .db-field label {
	color: rgba(255, 255, 255, .92);
}

.db-search--brand .db-field input {
	border-color: transparent;
	background: #ffffff;
	color: var(--db-ink);
}

.db-search--brand .db-field input::placeholder {
	color: var(--db-muted);
}

.db-search--brand .db-field input:focus-visible {
	outline-color: #ffffff;
	border-color: transparent;
}

.db-search--brand .db-stepper {
	border-color: transparent;
	background: #ffffff;
}

.db-search--brand .db-stepper__label {
	color: var(--db-muted);
}

/* Navy on tan is the brand's own pairing — same as the site's buttons. */
.db-search--brand .db-search__submit {
	background: var(--db-accent);
	color: var(--db-accent-ink);
}

.db-search--brand .db-search__submit:hover:not(:disabled),
.db-search--brand .db-search__submit:focus:not(:disabled) {
	background: #ffffff;
	color: var(--db-accent);
}

/* The calendar drops down as its own white sheet — unchanged on purpose. */
.db-search--brand .db-calendar {
	right: 40px;
	left: 40px;
	color: var(--db-ink);
}

@media (max-width: 620px) {
	.db-search--brand {
		padding: 22px 18px;
		border-radius: 22px;
	}

	.db-search--brand .db-calendar {
		right: 0;
		left: 0;
	}
}

/* The brand bar sets white type for its own labels; the stepper's count sits
   inside a white box and must not inherit that — it vanished. */
.db-search--brand .db-stepper__value {
	color: var(--db-ink);
}

.db-search--brand .db-stepper__btn {
	border-color: var(--db-line);
	color: var(--db-accent);
}

/* ------------------------------------------- Stay rule, made unmissable

   A minimum-nights rule used to be a quiet grey caption between the arrows;
   guests read straight past it and then wondered why days would not click.
   Now it is a navy badge, the greyed nights get a dotted frame so they are
   not mistaken for booked ones, and a boxed note under the grid says why. */

.db-calendar .db-cal__hint.is-rule {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--db-accent);
	color: var(--db-accent-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
}

.db-calendar .db-cal__day.is-rule {
	border: 1px dotted #c4bfb7;
	background: var(--db-surface);
}

.db-cal__note {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-right: 3px solid var(--db-accent);
	border-radius: 6px;
	background: rgba(0, 48, 106, .06);
	font-size: 13px;
	line-height: 1.5;
	color: var(--db-ink);
}