/**
 * Quick Order — Phase 1 structural implementation (screens 27–28, TASK-037).
 * Mobile-first and logical-direction only. `.zahra-shell` (layout.css) owns the max-width
 * container, matching every other page stylesheet in this layer. Desktop values sit under the
 * shared 1024px breakpoint, the same convention Contact/Categories/Brands already use.
 */

/*
 * JS toggles page state with the plain `hidden` attribute. Several elements below also carry
 * their own `display: flex/grid` declaration (needed while visible), which - being author CSS -
 * outranks the UA stylesheet's `[hidden] { display: none }` default. This one rule keeps
 * `hidden` authoritative everywhere inside this page, regardless of what else an element's own
 * rule sets.
 */
.zahra-quick-order [hidden] {
	display: none !important;
}

.zahra-quick-order__breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	block-size: 36px;
	border-block-end: 1px solid var(--zahra-color-line);
	color: var(--zahra-color-muted);
	font-size: 11px;
	text-decoration: none;
}

.zahra-quick-order__breadcrumb a {
	color: var(--zahra-color-muted);
	text-decoration: none;
}

.zahra-quick-order__breadcrumb [aria-current="page"] {
	color: var(--zahra-color-ink);
	font-weight: 600;
}

.zahra-quick-order__shell {
	padding-block: 12px 32px;
}

.zahra-quick-order__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.zahra-quick-order__title {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
}

.zahra-quick-order__head-count {
	font-size: 12px;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__lead {
	margin-block: 6px 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--zahra-color-ink-2);
}

.zahra-quick-order__grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block-start: 14px;
}

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

.zahra-quick-order__search {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zahra-quick-order__search-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__search-box {
	display: flex;
	align-items: center;
	block-size: 50px;
	border: 1.5px solid var(--zahra-color-ink);
	background: var(--zahra-color-surface);
}

.zahra-quick-order__search-icon {
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__search-input {
	flex: 1 1 0;
	min-inline-size: 0;
	block-size: 100%;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 14px;
	font-family: inherit;
	color: var(--zahra-color-ink);
	padding: 0;
}

.zahra-quick-order__search-submit {
	flex: 0 0 auto;
	block-size: 100%;
	padding-inline: 16px;
	background: var(--zahra-color-brand);
	color: #fff;
	border: 0;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.zahra-quick-order__search-submit:hover {
	background: var(--zahra-color-brand-dark);
}

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

.zahra-quick-order__prompt,
.zahra-quick-order__no-results-title,
.zahra-quick-order__no-results-hint {
	margin: 0;
}

.zahra-quick-order__no-results {
	margin-block-start: 8px;
	border: 1px solid var(--zahra-color-line);
	padding: 20px 14px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.zahra-quick-order__no-results-title {
	font-size: 13.5px;
	font-weight: 600;
}

.zahra-quick-order__no-results-hint {
	font-size: 12px;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__results-panel {
	margin-block-start: 8px;
	border: 1px solid var(--zahra-color-line);
}

.zahra-quick-order__results-head {
	padding: 8px 12px;
	background: var(--zahra-color-sand);
	border-block-end: 1px solid var(--zahra-color-line);
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 600;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__results-list,
.zahra-quick-order__selected-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zahra-quick-order__result {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 76px;
	gap: 11px;
	align-items: center;
	padding: 10px 12px;
	border-block-end: 1px solid var(--zahra-color-line-2);
}

.zahra-quick-order__result:last-child {
	border-block-end: 0;
}

.zahra-quick-order__result-media,
.zahra-quick-order__selected-media {
	display: block;
	overflow: hidden;
	background: var(--zahra-color-sand);
	border: 1px solid var(--zahra-color-line);
}

.zahra-quick-order__result-media {
	inline-size: 44px;
	block-size: 44px;
}

.zahra-quick-order__selected-media {
	inline-size: 52px;
	block-size: 52px;
}

.zahra-quick-order__result-img,
.zahra-quick-order__selected-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

.zahra-quick-order__result-body,
.zahra-quick-order__selected-body {
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.zahra-quick-order__result-name,
.zahra-quick-order__selected-name {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}

.zahra-quick-order__result-meta,
.zahra-quick-order__selected-meta {
	display: flex;
	gap: 4px;
	font-size: 11px;
	color: var(--zahra-color-muted);
	flex-wrap: wrap;
}

.zahra-quick-order__result-brand::after,
.zahra-quick-order__selected-brand::after {
	content: " · ";
}

.zahra-quick-order__result-brand[hidden]::after,
.zahra-quick-order__selected-brand[hidden]::after {
	content: none;
}

.zahra-quick-order__result-stock,
.zahra-quick-order__selected-stock {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 500;
}

.zahra-quick-order__stock-dot {
	inline-size: 6px;
	block-size: 6px;
	flex: 0 0 auto;
}

.zahra-quick-order__result-stock.is-in-stock .zahra-quick-order__stock-dot,
.zahra-quick-order__selected-stock.is-in-stock .zahra-quick-order__stock-dot {
	background: var(--zahra-color-success);
}

.zahra-quick-order__result-stock.is-in-stock,
.zahra-quick-order__selected-stock.is-in-stock {
	color: var(--zahra-color-success);
}

.zahra-quick-order__result-stock.is-out-of-stock,
.zahra-quick-order__selected-stock.is-out-of-stock {
	color: var(--zahra-color-muted);
}

.zahra-quick-order__result-stock.is-out-of-stock .zahra-quick-order__stock-dot,
.zahra-quick-order__selected-stock.is-out-of-stock .zahra-quick-order__stock-dot {
	background: var(--zahra-color-muted);
}

.zahra-quick-order__result-select {
	block-size: 44px;
	padding-inline: 12px;
	background: var(--zahra-color-surface);
	border: 1.5px solid var(--zahra-color-ink);
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	color: var(--zahra-color-ink);
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Selected products
 * ------------------------------------------------------------------------ */

.zahra-quick-order__selected {
	margin-block-start: 18px;
}

.zahra-quick-order__selected-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.zahra-quick-order__selected-heading {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.zahra-quick-order__clear {
	block-size: 32px;
	padding-inline: 11px;
	background: var(--zahra-color-surface);
	border: 1px solid var(--zahra-color-line);
	font-size: 11.5px;
	font-weight: 600;
	font-family: inherit;
	color: var(--zahra-color-ink-2);
	cursor: pointer;
}

.zahra-quick-order__selected-empty {
	margin-block-start: 10px;
	font-size: 12.5px;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__selected-row {
	border: 1px solid var(--zahra-color-line);
	background: var(--zahra-color-surface);
	padding: 12px;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 11px;
	margin-block-start: 8px;
}

.zahra-quick-order__selected-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-block-start: 4px;
	flex-wrap: wrap;
	/* Below the 1024px layout (which gives this its own column, see the media query
	 * further down) the row is only a 2-column grid (media + body) - without an explicit
	 * span this auto-places into those same narrow columns and the stepper overflows into
	 * the remove button below it. */
	grid-column: 1 / -1;
}

.zahra-quick-order__stepper {
	display: flex;
	block-size: 44px;
	border: 1px solid var(--zahra-color-field);
	inline-size: 126px;
}

.zahra-quick-order__stepper-decrement,
.zahra-quick-order__stepper-increment {
	inline-size: 42px;
	background: var(--zahra-color-sand);
	border: 0;
	font-size: 16px;
	font-family: inherit;
	cursor: pointer;
}

.zahra-quick-order__stepper-decrement:disabled,
.zahra-quick-order__stepper-increment:disabled {
	cursor: not-allowed;
	color: var(--zahra-color-muted-2);
}

.zahra-quick-order__stepper-decrement {
	border-inline-end: 1px solid var(--zahra-color-line);
}

.zahra-quick-order__stepper-increment {
	border-inline-start: 1px solid var(--zahra-color-line);
}

.zahra-quick-order__stepper-value {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13.5px;
	font-weight: 600;
}

.zahra-quick-order__qty-note {
	font-size: 11px;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__qty-cartons {
	font-size: 11px;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__selected-remove {
	block-size: 44px;
	padding-inline: 14px;
	background: var(--zahra-color-surface);
	border: 1px solid var(--zahra-color-line);
	color: var(--zahra-color-ink-2);
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	margin-block-start: 8px;
	inline-size: 100%;
	/* Same reason as .zahra-quick-order__selected-qty above: span the full row below 1024px
	 * instead of auto-placing into the media/body 2-column grid. */
	grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
 * Employee Quote pricing (EMPLOYEE-QUOTE-02) - only ever present in the DOM for an
 * authorized employee request (page-quick-order.php's server-side capability gate); no rule
 * here needs its own visibility guard on top of that.
 * ------------------------------------------------------------------------ */

.zahra-quick-order__selected-price,
.zahra-quick-order__selected-subtotal {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-block-start: 4px;
	/* Below the 1024px layout, same reason as .zahra-quick-order__selected-qty/-remove above:
	 * without an explicit span these two new items auto-place into the media/body 2-column
	 * grid and overflow. */
	grid-column: 1 / -1;
}

.zahra-quick-order__price-label,
.zahra-quick-order__subtotal-label {
	font-size: 11px;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__price-input {
	inline-size: 100%;
	max-inline-size: 140px;
	block-size: 40px;
	padding-inline: 10px;
	border: 1px solid var(--zahra-color-field);
	font-family: inherit;
	font-size: 13.5px;
	background: var(--zahra-color-surface);
}

.zahra-quick-order__price-input:focus-visible {
	outline: 2px solid var(--zahra-color-brand);
	outline-offset: 1px;
}

.zahra-quick-order__subtotal-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--zahra-color-ink);
}

.zahra-quick-order__employee-quote {
	border: 1px solid var(--zahra-color-line);
	background: var(--zahra-color-sand);
	padding: 14px 16px;
	margin-block-end: 14px;
}

.zahra-quick-order__employee-quote-heading {
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 700;
}

.zahra-quick-order__employee-quote-total {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	color: var(--zahra-color-ink);
}

.zahra-quick-order__employee-quote-readiness {
	margin: 0;
	font-size: 11.5px;
	color: var(--zahra-color-muted);
}

.zahra-quick-order__employee-quote-whatsapp-missing {
	margin: 8px 0 0;
	padding: 8px 10px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--zahra-color-brand);
	background: var(--zahra-color-surface);
	border: 1px solid var(--zahra-color-brand);
}

/* ---------------------------------------------------------------------------
 * Summary panel
 * ------------------------------------------------------------------------ */

.zahra-quick-order__summary {
	border: 1px solid var(--zahra-color-line);
	padding: 16px 18px;
}

.zahra-quick-order__summary-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
}

.zahra-quick-order__summary-list {
	margin: 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.zahra-quick-order__summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 13.5px;
	color: var(--zahra-color-ink-2);
}

.zahra-quick-order__summary-row dt {
	margin: 0;
}

.zahra-quick-order__summary-row dd {
	margin: 0;
	font-weight: 600;
	color: var(--zahra-color-ink);
}

.zahra-quick-order__clear--summary {
	inline-size: 100%;
	block-size: 42px;
}

.zahra-quick-order__note {
	margin-block: 11px 0;
	padding-block-start: 11px;
	border-block-start: 1px solid var(--zahra-color-line-2);
	font-size: 11.5px;
	line-height: 1.8;
	color: var(--zahra-color-muted);
}

/* ---------------------------------------------------------------------------
 * Identity form + submit (TASK-038)
 * ------------------------------------------------------------------------ */

.zahra-quick-order__identity {
	margin-block-start: 16px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--zahra-color-line-2);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zahra-quick-order__identity-title {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
}

.zahra-quick-order__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.zahra-quick-order__field-label {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--zahra-color-ink-2);
}

.zahra-quick-order__field-input {
	block-size: 44px;
	padding-inline: 12px;
	border: 1.5px solid var(--zahra-color-field);
	background: var(--zahra-color-surface);
	font-size: 13px;
	font-family: inherit;
	color: var(--zahra-color-ink);
}

.zahra-quick-order__field-input:focus-visible {
	outline: 2px solid var(--zahra-focus-ring-color, var(--zahra-color-brand));
	outline-offset: 1px;
}

.zahra-quick-order__field-input:invalid:not(:placeholder-shown) {
	border-color: var(--zahra-color-brand);
}

.zahra-quick-order__field-error {
	font-size: 11px;
	color: var(--zahra-color-brand);
}

.zahra-quick-order__field-error:empty {
	display: none;
}

.zahra-quick-order__submit {
	block-size: 48px;
	background: var(--zahra-color-brand);
	color: #fff;
	border: 0;
	font-size: 13.5px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.zahra-quick-order__submit:hover:not(:disabled) {
	background: var(--zahra-color-brand-dark);
}

.zahra-quick-order__submit:disabled {
	background: var(--zahra-color-muted-2);
	cursor: not-allowed;
}

.zahra-quick-order__submit-status {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--zahra-color-brand);
}

.zahra-quick-order__submit-status:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Success panel (TASK-038)
 * ------------------------------------------------------------------------ */

.zahra-quick-order__success {
	margin-block-start: 16px;
	padding: 16px;
	background: var(--zahra-color-success-bg);
	border: 1px solid var(--zahra-color-success-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.zahra-quick-order__success-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--zahra-color-success-2);
}

.zahra-quick-order__success-hint {
	margin: 0;
	font-size: 11.5px;
	color: var(--zahra-color-ink-2);
}

.zahra-quick-order__whatsapp-link,
.zahra-quick-order__new-request {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 44px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.zahra-quick-order__whatsapp-link {
	background: var(--zahra-color-success);
	color: #fff;
}

.zahra-quick-order__whatsapp-link:hover {
	background: var(--zahra-color-success-2);
}

.zahra-quick-order__new-request {
	background: transparent;
	border: 1px solid var(--zahra-color-line);
	color: var(--zahra-color-ink-2);
}

/* ---------------------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.zahra-quick-order__title {
		font-size: 30px;
	}

	.zahra-quick-order__lead {
		font-size: 13.5px;
		max-inline-size: 640px;
	}

	.zahra-quick-order__grid {
		flex-direction: row;
		align-items: start;
	}

	.zahra-quick-order__main {
		flex: 1 1 0;
		min-inline-size: 0;
	}

	.zahra-quick-order__summary {
		flex: 0 0 340px;
		position: sticky;
		top: 20px;
	}

	.zahra-quick-order__search-box {
		block-size: 52px;
	}

	.zahra-quick-order__result {
		grid-template-columns: 44px minmax(0, 1fr) 180px 96px 96px;
	}

	.zahra-quick-order__result-meta {
		flex-direction: row;
	}

	.zahra-quick-order__selected-row {
		grid-template-columns: 52px minmax(0, 1fr) 168px 104px 150px 92px;
		align-items: center;
	}

	.zahra-quick-order__selected-remove {
		inline-size: auto;
		margin-block-start: 0;
		grid-column: auto;
	}

	.zahra-quick-order__selected-qty {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		grid-column: auto;
	}

	/*
	 * EMPLOYEE-QUOTE-02: fills the 4th (104px) and 5th (150px) tracks the row's own
	 * grid-template-columns above already declares - unused/empty for a guest's 4-child row,
	 * where auto-placement stops at track 4 with .zahra-quick-order__selected-remove. No track
	 * size changed to accommodate these two employee-only columns.
	 */
	.zahra-quick-order__selected-price,
	.zahra-quick-order__selected-subtotal {
		grid-column: auto;
		margin-block-start: 0;
	}
}