/*
 * Quote request form — the fields and the grid.
 *
 * Moved here from the Elementor widgets stylesheet so the form owns its
 * own styles: the form is a theme module rendered lazily wherever the
 * widgets (or a plain template) print it, and the outer section/panel
 * chrome stays with the widgets. The panel rules that remain in
 * widgets.css never collide with anything here.
 *
 * The grid is twelve columns. A field's span comes from an inline
 * --nesr-col variable the renderer prints — one stylesheet renders
 * every layout without knowing any field.
 */

.nesr-form-grid {
	--nesr-field-gap: 18px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--nesr-field-gap);
}

.nesr-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	grid-column: span var(--nesr-col, 12);
	min-width: 0;
}

/*
 * Spacing above a field, as a delta over the grid's own gap. block-start
 * margins shift the item within its grid area, so the four steps work on
 * every row without a per-field class.
 */
.nesr-field[data-gap="none"]  { margin-block-start: calc(-1 * var(--nesr-field-gap)); }
.nesr-field[data-gap="small"] { margin-block-start: calc(var(--nesr-field-gap) / -2); }
.nesr-field[data-gap="large"] { margin-block-start: calc(var(--nesr-field-gap) * 1.35); }

/* A field the conditional logic hides must not take a grid cell. */
.nesr-field[hidden] { display: none; }

.nesr-field__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--nesr-ink-2);
	font-size: 14px;
	font-weight: 500;
}
.nesr-field__label abbr {
	color: var(--nesr-orange);
	text-decoration: none;
	font-weight: 700;
}
.nesr-field__label .nesr-icon { color: var(--nesr-orange); }

.nesr-field__error {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--nesr-error);
	font-size: 13px;
	font-weight: 500;
}
.nesr-field.has-error input,
.nesr-field.has-error select,
.nesr-field.has-error textarea {
	border-color: var(--nesr-error);
	box-shadow: 0 0 0 3px rgba(182, 49, 49, .09);
}

.nesr-field__help {
	color: var(--nesr-muted);
	font-size: 12.5px;
	line-height: 1.6;
}

/* Optional-field marker: the counterpart of the required asterisk. */
.nesr-field__label em {
	padding: 2px 7px;
	border-radius: 99px;
	background: var(--nesr-warm-white);
	color: var(--nesr-muted);
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
}

/* ---- Latin content in an Arabic form: phone and email ---- */

/*
 * dir="ltr" on the control is about the characters: +966 55… and
 * name@host have one order and it is not the page's. It is not about
 * the edge they start from — but the browser reads it as both, and
 * parks the text against the left border, the far end of a form whose
 * every other answer begins at the right.
 *
 * So the two questions are answered separately: direction stays with the
 * element, alignment comes from the page. text-align:end would not do
 * it — "end" is resolved against the input's own dir, which is the very
 * thing being overruled here.
 */
.nesr-field input[type="tel"],
.nesr-field input[type="email"] { text-align: right; }

[dir="ltr"] .nesr-field input[type="tel"],
[dir="ltr"] .nesr-field input[type="email"] { text-align: left; }

/*
 * The country prefix, in the checkout's own vocabulary: same class names,
 * same chip inside the field's border rather than a box of its own —
 * because it is not a second thing to fill in, it is the beginning of the
 * number, and two adjacent boxes read as two questions. See
 * .nesr-checkout-block .nesr-tel in the theme's cart.css.
 *
 * Two differences, both deliberate. The chip sits at the RTL start edge
 * so the number begins where every other answer on this form begins. And
 * every side here is physical: the input carries dir="ltr" and the chip
 * sets direction:ltr for its own "+966", so inset-inline-start and
 * padding-inline-start on them resolve against LTR — the one thing being
 * overruled. Scoped under .nesr-field so a quote form printed on the
 * checkout page cannot reach the checkout's field.
 */
.nesr-field .nesr-tel { position: relative; display: block; }

.nesr-field .nesr-tel__code {
	position: absolute;
	top: 1px;
	bottom: 1px;
	right: 1px;
	display: flex;
	align-items: center;
	padding-inline: 14px;
	border-left: 1px solid var(--nesr-border);
	border-radius: 0 var(--nesr-radius-control) var(--nesr-radius-control) 0;
	background: rgba(222, 215, 208, .28);
	color: var(--nesr-ink-2);
	font-size: 15px;
	font-weight: 500;
	direction: ltr;
	unicode-bidi: isolate;
	pointer-events: none; /* the click belongs to the input underneath */
}
.nesr-field .nesr-tel__input { padding-right: 78px; padding-left: 15px; }

[dir="ltr"] .nesr-field .nesr-tel__code {
	right: auto;
	left: 1px;
	border-left: 0;
	border-right: 1px solid var(--nesr-border);
	border-radius: var(--nesr-radius-control) 0 0 var(--nesr-radius-control);
}
[dir="ltr"] .nesr-field .nesr-tel__input { padding-right: 15px; padding-left: 78px; }

/* ---- Layout types ---- */

.nesr-form-heading {
	margin: 4px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--nesr-ink);
}
.nesr-form-heading--h2 { font-size: 20px; }
.nesr-form-heading--h4 { font-size: 15.5px; color: var(--nesr-ink-2); }
.nesr-form-paragraph {
	margin: 0;
	color: var(--nesr-muted);
	font-size: 14.5px;
	line-height: 1.8;
}
.nesr-form-divider {
	width: 100%;
	margin: 10px 0;
	border: 0;
	border-block-start: 1px solid var(--nesr-border);
}
.nesr-form-spacer { block-size: 22px; }

/* Range: the meter's live value rides the input as data-val (set by
   oninput), shown beside the track without a script file of its own. */
.nesr-field:has(input[type="range"]) { flex-direction: row; flex-wrap: wrap; align-items: center; }
.nesr-field:has(input[type="range"]) .nesr-field__label { flex-basis: 100%; }
.nesr-field:has(input[type="range"]) input[type="range"] { accent-color: var(--nesr-orange); flex: 1; }
.nesr-field:has(input[type="range"]) input[type="range"]::after {
	content: attr(data-val);
	min-inline-size: 2.4em;
	color: var(--nesr-ink-2);
	font-size: 13px;
	font-weight: 600;
	text-align: start;
}

/* ---- Choice groups ---- */

.nesr-checklist {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 0;
	padding: 0;
	border: 0;
}
.nesr-checklist__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	cursor: pointer;
}

.nesr-rating {
	/*
	 * Stars sit in the DOM as 5..1. row-reverse in RTL lays them out so
	 * reading order (right → left) runs 1..5, and a chosen value fills
	 * contiguously from the right edge — the mirrored meter look.
	 */
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
}
.nesr-rating__star { cursor: pointer; }
.nesr-rating__star input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.nesr-rating__star span {
	font-size: 22px;
	line-height: 1;
	color: #C9C0B8;
	transition: color 120ms ease;
}
/*
 * The fill: the hovered/checked label PLUS its following siblings —
 * the smaller values, visually toward the right (reading start).
 *
 * The checked pair must go through :has(): the input's only sibling is
 * the span inside its own label, so `input:checked ~ .nesr-rating__star`
 * matched nothing — the checked star lit alone and the ones before it
 * stayed grey. Hover never had the bug because it starts from the label.
 * Browsers without :has() simply keep the single-star fill.
 */
.nesr-rating__star:hover span,
.nesr-rating__star:hover ~ .nesr-rating__star span,
.nesr-rating__star:has(input:checked) span,
.nesr-rating__star:has(input:checked) ~ .nesr-rating__star span { color: var(--nesr-orange); }
.nesr-rating__star input:focus-visible ~ span { box-shadow: 0 0 0 3px rgba(243, 107, 33, .25); border-radius: 4px; }

/* ---- Consent ---- */

/*
 * The consent card: checkbox beside its sentence in a two-column grid
 * with a real gap — never source whitespace — inside a bordered,
 * warm-toned card so the legal sentence reads as one unit.
 *
 * Owned here since the form styles moved out of the widgets plugin;
 * inner.css carried it before. has-error (the definition renderer) and
 * is-invalid (legacy markup) share the invalid look.
 */
.nesr-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 10px;
	margin-block: 4px 20px;
	padding: 14px 16px;
	border: 1px solid var(--nesr-border);
	border-radius: var(--nesr-radius-control);
	background: var(--nesr-warm-white);
}
.nesr-consent input[type="checkbox"] { margin-block-start: 3px; }
.nesr-consent label {
	color: var(--nesr-ink-2);
	font-size: 14px;
	line-height: 1.75;
	cursor: pointer;
}
.nesr-consent a {
	color: var(--nesr-orange-hover);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nesr-consent a:hover { color: var(--nesr-ink); }

/* The error message spans both columns, under the label. */
.nesr-consent .nesr-field__error { grid-column: 1 / -1; }
.nesr-consent.is-invalid,
.nesr-consent.has-error {
	border-color: var(--nesr-error);
	background: rgba(203, 47, 47, .04);
}

/* -------------------------------------------------------------------------
   Upload control
   -------------------------------------------------------------------------
   Three states in one component: an empty drop zone, the selected file, and
   a rejection. The native input is the only thing that submits — it is moved
   out of sight rather than hidden, so it keeps focus and keyboard access, and
   without JavaScript (no .is-enhanced) the browser's own control shows
   instead of a drop zone that could not work.
   ------------------------------------------------------------------------- */

.nesr-upload__zone { display: none; }
.nesr-upload.is-enhanced .nesr-upload__zone { display: flex; }

.nesr-upload.is-enhanced .nesr-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.nesr-upload__zone {
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 1.5px dashed #C9C0B8;
	border-radius: var(--nesr-radius-control);
	background: var(--nesr-warm-white);
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.nesr-upload__zone:hover {
	border-color: var(--nesr-orange);
	background: var(--nesr-orange-soft);
}

/* Dragging over: the same treatment as hover, lifted, so the target is unmistakable. */
.nesr-upload__zone.is-dragging {
	border-color: var(--nesr-orange);
	border-style: solid;
	background: var(--nesr-orange-soft);
	transform: translateY(-1px);
}

/* The input is invisible, so its focus ring has to be drawn on the zone. */
.nesr-upload__input:focus-visible + .nesr-upload__zone {
	border-color: var(--nesr-orange);
	box-shadow: 0 0 0 3px rgba(243, 107, 33, .16);
}

.nesr-upload__icon {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--nesr-orange-soft);
	color: var(--nesr-orange);
	transition: background 160ms ease;
}
.nesr-upload__zone:hover .nesr-upload__icon,
.nesr-upload__zone.is-dragging .nesr-upload__icon {
	background: rgba(243, 107, 33, .16);
}

.nesr-upload__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nesr-upload__copy strong { font-size: 14px; font-weight: 600; }
.nesr-upload__copy small { color: var(--nesr-muted); font-size: 12px; }

/* The rejection message replaces the hint line, in the error colour. */
.nesr-upload.has-error .nesr-upload__zone { border-color: var(--nesr-error); }
.nesr-upload.has-error .nesr-upload__icon { background: rgba(182, 49, 49, .1); color: var(--nesr-error); }
.nesr-upload__zone[data-message] .nesr-upload__copy small { display: none; }
.nesr-upload__zone[data-message]::after {
	content: attr(data-message);
	order: 3;
	color: var(--nesr-error);
	font-size: 12px;
	font-weight: 500;
}

/* ---- The selected file ---- */

.nesr-upload__file {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--nesr-border);
	border-radius: var(--nesr-radius-control);
	background: var(--nesr-white);
	animation: nesr-upload-in 220ms ease both;
}
@keyframes nesr-upload-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* Image preview when there is one, a document tile when there is not. */
.nesr-upload__thumb {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: 9px;
	background: var(--nesr-orange-soft) center / cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.nesr-upload__thumb:not(.has-image)::after {
	content: "PDF";
	height: 100%;
	display: grid;
	place-items: center;
	color: var(--nesr-orange);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

.nesr-upload__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nesr-upload__meta strong {
	font-size: 14px;
	font-weight: 600;
	/* A long file name must not push the remove button off the card. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nesr-upload__meta small { color: var(--nesr-muted); font-size: 12px; }

.nesr-upload__remove {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid var(--nesr-border);
	border-radius: 9px;
	background: transparent;
	color: var(--nesr-muted);
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.nesr-upload__remove:hover {
	border-color: rgba(182, 49, 49, .4);
	background: #FFF0EF;
	color: var(--nesr-error);
}

/* ---- Submit ---- */

.nesr-quote-form__submit { width: 100%; margin-block-start: 22px; }

/*
 * A form may set its own accent, so the button's ink has to follow it:
 * the theme hard-codes near-black, which disappears on a navy accent.
 * --nesr-form-ink is computed from the chosen colour's luminance, and
 * falls back to the theme's own value when no colour was chosen.
 *
 * Two classes deep on purpose — the theme's .nesr-button--primary is one,
 * and a tie would be settled by whichever stylesheet loaded last.
 */
.nesr-quote-form .nesr-quote-form__submit { color: var(--nesr-form-ink, #171717); }

/* A button that does not need the whole width should not take it. */
.nesr-quote-form__submit[data-width="auto"] { width: auto; }

/* The "send another" button revealed after an AJAX success, under the
   confirmation message that replaced the form. */
.nesr-quote-form__again {
	display: block;
	margin: 18px auto 0;
	padding: 12px 26px;
	border: 1px solid var(--nesr-border);
	border-radius: var(--nesr-radius-control);
	background: var(--nesr-white);
	color: var(--nesr-ink);
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease;
}
.nesr-quote-form__again:hover {
	border-color: var(--nesr-orange);
	background: var(--nesr-orange-soft);
}

/* Submitting: the button keeps its label and grows a spinner beside it, so
   the row never changes width mid-click. */
.nesr-quote-form__submit.is-loading { pointer-events: none; opacity: .82; }
.nesr-quote-form__submit.is-loading .nesr-icon { display: none; }
.nesr-quote-form__submit.is-loading::after {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: nesr-spin 620ms linear infinite;
}
@keyframes nesr-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.nesr-quote-form__submit.is-loading::after { animation-duration: 2s; }
	.nesr-upload__file { animation: none; }
}
.nesr-quote-form__note {
	margin-block-start: 12px;
	color: var(--nesr-muted);
	font-size: 12px;
	text-align: center;
}

/* Honeypot — hidden from sight and screen readers, visible to bots. */
.nesr-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Status messages */
.nesr-form-success,
.nesr-form-error {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block-end: 24px;
	padding: 14px 16px;
	border-radius: 9px;
	font-size: 14px;
}
.nesr-form-success {
	border: 1px solid rgba(24, 121, 78, .28);
	background: #EDF8F2;
	color: var(--nesr-success);
}
.nesr-form-success strong { display: block; }
.nesr-form-success span { display: block; margin-block-start: 3px; color: #315E49; }
.nesr-form-error {
	border: 1px solid rgba(182, 49, 49, .3);
	background: #FFF0EF;
	color: #A72828;
}
.nesr-form-success .nesr-icon,
.nesr-form-error .nesr-icon { flex: 0 0 auto; margin-block-start: 2px; }

/* -------------------------------------------------------------------------
   Searchable select (city)
   -------------------------------------------------------------------------
   The native <select> is what submits; the text input above it is the
   search. Without JavaScript the .is-enhanced class is never added and the
   select stays visible — the field degrades to an ordinary dropdown.
   ------------------------------------------------------------------------- */

.nesr-combo { position: relative; }

.nesr-combo.is-enhanced .nesr-combo__select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* The search input wears the select's clothes, chevron included. */
.nesr-combo__input {
	width: 100%;
	height: 52px;
	padding-inline: 15px 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 15px center;
	cursor: pointer;
}
[dir="ltr"] .nesr-combo__input { background-position: right 15px center; }
.nesr-combo__input:focus { cursor: text; }
.nesr-combo.is-empty .nesr-combo__input {
	border-color: var(--nesr-error);
	box-shadow: 0 0 0 3px rgba(182, 49, 49, .09);
}

/* Locked: the district field before a city has been chosen, while its
   districts are being fetched, or under a city with no district list.
   Dimmed rather than hidden — a field that appears only once you answer
   another one is a field nobody knows is coming, and the placeholder is
   where the reason is written. */
/* Muted, not dashed: beside a normal field — the city, on checkout — a
   dashed border reads as a broken control rather than a waiting one. */
.nesr-combo.is-locked .nesr-combo__input {
	background-color: rgba(222, 215, 208, .28);
	color: var(--nesr-muted);
	cursor: not-allowed;
}
.nesr-combo.is-locked .nesr-combo__input::placeholder { opacity: 1; }

/* Fetching: the chevron becomes a spinner, so the wait reads as work in
   progress rather than as a field that refuses to open. */
.nesr-combo.is-loading .nesr-combo__input {
	border-style: solid;
	cursor: progress;
	background-image: none;
}
.nesr-combo.is-loading::after {
	content: "";
	position: absolute;
	/* Where the chevron sits: the 42px padding is on the inline END, which
	   is the left of a right-to-left page and the right of a left-to-right
	   one. Same edge, both directions, no [dir] rule needed. */
	inset-inline-end: 15px;
	top: calc(50% - 9px);
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid var(--nesr-border);
	border-top-color: var(--nesr-muted);
	border-radius: 50%;
	animation: nesr-combo-spin .7s linear infinite;
}
@keyframes nesr-combo-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.nesr-combo.is-loading::after { animation-duration: 2.4s; }
}

.nesr-combo__list {
	position: absolute;
	z-index: 30;
	inset-inline: 0;
	top: calc(100% + 6px);
	max-height: 292px;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--nesr-border);
	border-radius: var(--nesr-radius-control);
	background: var(--nesr-white);
	box-shadow: 0 18px 40px rgba(24, 21, 19, .13);
}

.nesr-combo__option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
}
.nesr-combo__option small { color: var(--nesr-muted); font-size: 12px; }

/* One highlight for both the mouse and the keyboard, so the two never
   disagree about which row is current. */
.nesr-combo__option:hover,
.nesr-combo__option.is-active { background: var(--nesr-orange-soft); }
.nesr-combo__option.is-active { box-shadow: inset 0 0 0 1px rgba(243, 107, 33, .35); }

.nesr-combo__empty {
	padding: 14px 12px;
	color: var(--nesr-muted);
	font-size: 14px;
	text-align: center;
}

/* ---- Mobile: one column ---- */

@media (max-width: 640px) {
	.nesr-form-grid {
		--nesr-field-gap: 15px;
		grid-template-columns: 1fr;
		gap: var(--nesr-field-gap);
	}
	.nesr-field { grid-column: 1 / -1; }
}

/*
 * A form that is not accepting requests. Not an error — the visitor did
 * nothing wrong — so it carries the calm of a notice rather than the red
 * of a failure.
 */
.nesr-form-notice {
	padding: 14px 16px;
	margin-block-end: 16px;
	background: var(--nesr-stone-1, #F4F0EC);
	border-inline-start: 3px solid var(--nesr-orange, #F36B21);
	border-radius: 8px;
	color: var(--nesr-ink, #211F1F);
}

.nesr-form-notice__admin {
	margin-block: -8px 16px;
	font-size: 13px;
	color: var(--nesr-stone-4, #6B6560);
}

/* --------------------------------------------------------------------- *
 * Date and time
 *
 * The native control arrives with a black system glyph and its format
 * spelled out as literal text — "mm/dd/yyyy" — in the browser's locale,
 * which nothing on the page can translate. So the shape of the field is
 * where the work goes: the icon is masked and painted in the form's own
 * accent, the empty format text is muted so it reads as a prompt rather
 * than as data, and the segment being edited is highlighted.
 *
 * All of it degrades: a browser without ::-webkit-* keeps its own
 * control, which is exactly what it had before.
 * --------------------------------------------------------------------- */

.nesr-field input[type="date"],
.nesr-field input[type="time"] {
	position: relative;
	font-variant-numeric: tabular-nums;
	/* Room for the icon so a long value never slides under it. */
	padding-inline-end: 44px;
}

/*
 * The icon is the native indicator, masked: the click target stays
 * exactly where the browser put it, and the glyph becomes ours — painted
 * with the accent, so a form given its own colour gets its own calendar.
 */
.nesr-field input[type="date"]::-webkit-calendar-picker-indicator,
.nesr-field input[type="time"]::-webkit-calendar-picker-indicator {
	inline-size: 20px;
	block-size: 20px;
	margin: 0;
	padding: 0;
	background-color: var(--nesr-orange);
	background-image: none;
	opacity: 0.9;
	cursor: pointer;
	transition: opacity 140ms ease, transform 140ms ease;
	-webkit-mask: var(--nesr-date-glyph) center / contain no-repeat;
	mask: var(--nesr-date-glyph) center / contain no-repeat;
}

.nesr-field input[type="date"] {
	--nesr-date-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3.5'/%3E%3Cpath d='M8 2.6v4M16 2.6v4M3 10.2h18'/%3E%3C/svg%3E");
}

.nesr-field input[type="time"] {
	--nesr-date-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.3l3.4 2'/%3E%3C/svg%3E");
}

.nesr-field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.nesr-field input[type="time"]:hover::-webkit-calendar-picker-indicator {
	opacity: 1;
	transform: scale(1.09);
}

/*
 * Empty means "here is the shape of what I want", so it is muted; a real
 * answer is full contrast. The class comes from the script — CSS has no
 * :placeholder-shown for a date input.
 */
.nesr-field input[type="date"]:not(.has-value)::-webkit-datetime-edit,
.nesr-field input[type="time"]:not(.has-value)::-webkit-datetime-edit {
	color: var(--nesr-muted);
}

.nesr-field input[type="date"].has-value::-webkit-datetime-edit,
.nesr-field input[type="time"].has-value::-webkit-datetime-edit {
	color: var(--nesr-ink);
	font-weight: 600;
}

/* The segment under the cursor, so typing a date feels aimed. */
.nesr-field input[type="date"]::-webkit-datetime-edit-day-field:focus,
.nesr-field input[type="date"]::-webkit-datetime-edit-month-field:focus,
.nesr-field input[type="date"]::-webkit-datetime-edit-year-field:focus,
.nesr-field input[type="time"]::-webkit-datetime-edit-hour-field:focus,
.nesr-field input[type="time"]::-webkit-datetime-edit-minute-field:focus,
.nesr-field input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
	background: var(--nesr-orange-soft);
	color: var(--nesr-orange-hover);
	border-radius: 5px;
	outline: none;
	padding-inline: 3px;
}

/* An empty field is a prompt, so it invites the whole surface. */
.nesr-field input[type="date"]:not(.has-value),
.nesr-field input[type="time"]:not(.has-value) {
	cursor: pointer;
}

/* --------------------------------------------------------------------- *
 * The date picker
 *
 * Built because the browser's own calendar answers to the BROWSER's
 * language, not the page's: an Arabic form opened an English month grid
 * with Su/Mo headers and Clear/Today buttons, and no attribute reaches
 * any of it. This one takes its words from WordPress, so it speaks
 * whatever the rest of the page speaks.
 *
 * The native input is still in the DOM and still the thing that submits.
 * It is only put out of sight — deliberately not display:none, which
 * would drop it from the tab order and leave the browser with nothing to
 * anchor a validation message to.
 * --------------------------------------------------------------------- */

.nesr-date { position: relative; }

.nesr-date input[type="date"] {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 14px;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* The field surface: a button that looks exactly like every other control. */
.nesr-date__field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	inline-size: 100%;
	padding: 12px 14px;
	border: 1px solid var(--nesr-border);
	border-radius: var(--nesr-radius-control);
	background: var(--nesr-warm-white);
	color: var(--nesr-muted);
	font: inherit;
	font-size: 15px;
	text-align: start;
	cursor: pointer;
	transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.nesr-date__field:hover { border-color: var(--nesr-orange); }

.nesr-date__field:focus-visible {
	outline: none;
	border-color: var(--nesr-orange);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nesr-orange) 22%, transparent);
}

/* A chosen date is data; the prompt before it is not. */
.nesr-date__field.has-value {
	background: #fff;
	color: var(--nesr-ink);
	font-weight: 600;
}

.nesr-field.has-error .nesr-date__field { border-color: var(--nesr-error); }

.nesr-date__icon {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	background-color: var(--nesr-orange);
	-webkit-mask: var(--nesr-date-glyph) center / contain no-repeat;
	mask: var(--nesr-date-glyph) center / contain no-repeat;
}

.nesr-date {
	--nesr-date-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3.5'/%3E%3Cpath d='M8 2.6v4M16 2.6v4M3 10.2h18'/%3E%3C/svg%3E");
}

/* ---- The popover ---- */

.nesr-date__pop {
	position: absolute;
	z-index: 30;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;
	inline-size: min(21rem, calc(100vw - 32px));
	padding: 14px;
	background: #fff;
	border: 1px solid var(--nesr-border);
	border-radius: 16px;
	box-shadow: 0 24px 48px -24px rgba(33, 31, 31, .38), 0 2px 6px rgba(33, 31, 31, .06);
	animation: nesr-date-in 140ms ease-out;
}

@keyframes nesr-date-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nesr-date__pop { animation: none; }
}

.nesr-date__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-block-end: 10px;
}

.nesr-date__title {
	flex: 1;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--nesr-ink);
}

.nesr-date__nav {
	inline-size: 32px;
	block-size: 32px;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 9px;
	background: none;
	color: var(--nesr-ink-2);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 130ms ease, color 130ms ease;
}

.nesr-date__nav:hover {
	background: var(--nesr-orange-soft);
	color: var(--nesr-orange-hover);
}

.nesr-date__nav:focus-visible {
	outline: 2px solid var(--nesr-orange);
	outline-offset: 1px;
}

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

.nesr-date__dow {
	padding-block: 6px;
	color: var(--nesr-muted);
	font-size: 11.5px;
	font-weight: 600;
	text-align: center;
}

.nesr-date__day {
	position: relative; /* the today dot is absolutely placed inside it */
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--nesr-ink-2);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.nesr-date__day:hover:not(:disabled) { background: var(--nesr-orange-soft); }

.nesr-date__day:focus-visible {
	outline: 2px solid var(--nesr-orange);
	outline-offset: -2px;
}

/* Days either side of the month are context, not choices you meant. */
.nesr-date__day.is-outside { color: #C4BDB6; }

.nesr-date__day:disabled {
	color: #D6CFC8;
	cursor: not-allowed;
}

/* Today is marked, not selected — a dot, so the fill stays the answer. */
.nesr-date__day.is-today {
	font-weight: 700;
	color: var(--nesr-orange-hover);
}

.nesr-date__day.is-today::after {
	content: "";
	position: absolute;
	transform: translateY(11px);
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: currentColor;
}

.nesr-date__day.is-picked,
.nesr-date__day.is-picked:hover {
	background: var(--nesr-orange);
	color: var(--nesr-form-ink, #171717);
	font-weight: 700;
}

.nesr-date__day.is-picked::after { background: currentColor; }

.nesr-date__foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-block-start: 12px;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--nesr-border);
}

.nesr-date__action {
	padding: 6px 14px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--nesr-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.nesr-date__action:hover:not(:disabled) { color: var(--nesr-ink); }

.nesr-date__action.is-strong { color: var(--nesr-orange-hover); }

.nesr-date__action.is-strong:hover:not(:disabled) {
	background: var(--nesr-orange-soft);
}

.nesr-date__action:disabled {
	color: #C4BDB6;
	cursor: not-allowed;
}

/* The chevrons are SVG, so they need a size — and they must not mirror. */
.nesr-date__nav svg {
	inline-size: 18px;
	block-size: 18px;
}