/* Project 114 - measured interaction fixes. Additive only.
   Evidence: project-114-cross-device-design-audit-2026-08-22.md */

/* 1. Overlay stacking was a tie, not a decision.
      .visitor-preferences and .consent-centre are both position:fixed,
      full-viewport, z-index:100000 - so which one wins is decided by DOM
      order alone. The consent panel covers the preferences button, which is
      why the preferences control could not be clicked at all.
      Make the intended order explicit rather than accidental. */
.visitor-preferences { z-index: 99990 !important; }
.consent-centre      { z-index: 100000 !important; }

/* 2. Touch targets below the agreed 44px floor.
      Expanding the HIT AREA with a pseudo-element rather than resizing the
      control, so nothing moves visually and no layout shifts. */
.field-tip { position: relative; }
.field-tip::after {
	content: "";
	position: absolute;
	top: -14px; right: -14px; bottom: -14px; left: -14px;
}

.swap-button { position: relative; }
.swap-button::after {
	content: "";
	position: absolute;
	top: -6px; right: -6px; bottom: -6px; left: -6px;
}

/* 3. Hero highlight controls measured 22x4 CSS px AND sat under div.shell,
      so elementFromPoint never returned them - dead controls.
      Give them a real hit area and lift them out of the parent's stack.
      This is an interim measure: the slider is approved for replacement. */
button[aria-label^="Show highlight"],
button[aria-label^="عرض الإبراز"] {
	position: relative;
	z-index: 2;
	min-height: 12px;
}
button[aria-label^="Show highlight"]::after,
button[aria-label^="عرض الإبراز"]::after {
	content: "";
	position: absolute;
	top: -20px; right: -6px; bottom: -20px; left: -6px;
}

/* 4. The place-picker block was invisible (P114 #52).
      google-place-autocomplete.js stops the submit dead when a place id is
      missing, and the only feedback is [data-scc-google-address-status] at
      9-10px in #66736E - the same colour and size as the passive hint next
      to it. Measured on both brands. Give the blocked state real weight.
      #B3261E on white = 6.5:1, AA at any size. Scoped to the search form. */
[data-taxi-search] .has-scc-google-address-error input,
[data-taxi-search] .has-scc-google-address-error .scc-place-autocomplete {
	border-color: #B3261E !important;
	box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.18) !important;
}

[data-taxi-search] .has-scc-google-address-error [data-scc-google-address-status] {
	display: flex !important;
	gap: 0.35rem;
	align-items: flex-start;
	margin-top: 0.35rem;
	color: #B3261E !important;
	font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	height: auto !important;
	min-height: 0 !important;
}

[data-taxi-search] .has-scc-google-address-error [data-scc-google-address-status]::before {
	content: "\26A0";
	flex: 0 0 auto;
	font-weight: 700;
}

/* Summary beside the submit button, so the reason the button "did nothing"
   is legible without hunting for a 10px line further up the form. */
.scc-sf-block {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0.75rem 0 0;
	padding: 0.625rem 0.75rem;
	border: 1px solid #B3261E;
	border-left-width: 4px;
	border-radius: 8px;
	background: #FDECEA;
	color: #8C1D18;
	font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
	font-weight: 600;
	line-height: 1.45;
}

.scc-sf-block::before {
	content: "\26A0";
	flex: 0 0 auto;
	font-weight: 700;
}

.scc-sf-block[hidden] { display: none !important; }

/* One-click add-to-basket feedback (v1.9.0). Evidence: cta-clicks.js, 25 Aug 2026. */

@keyframes sccSfSpin { to { transform: rotate(360deg); } }

[data-scc-select-quote].is-scc-adding,
[data-scc-save-quote][aria-busy="true"] {
	opacity: .8;
	cursor: progress;
}

[data-scc-select-quote].is-scc-adding::after,
[data-scc-save-quote][aria-busy="true"]::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: .85em;
	height: .85em;
	margin-inline-start: .5em;
	vertical-align: -.1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: sccSfSpin .7s linear infinite;
}

[data-scc-select-quote].is-scc-added {
	background: #0F5132 !important;
	background-image: none !important;
	border-color: #0F5132 !important;
	color: #FFFFFF !important;
	cursor: pointer;
}

[data-scc-select-quote].is-scc-added::before {
	content: "\2713";
	margin-inline-end: .45em;
	font-weight: 700;
}

.scc-sf-pending {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 10px;
	padding: 12px;
	border-radius: 10px;
	background: #F1F5F4;
	color: #2F3D39;
	font-weight: 600;
	font-size: clamp(.875rem, .85rem + .15vw, .9375rem);
	line-height: 1.4;
}

.scc-sf-pending::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: sccSfSpin .7s linear infinite;
}

.scc-sf-note-group,
.scc-sf-note-guest {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: clamp(.8125rem, .78rem + .15vw, .875rem);
	line-height: 1.55;
	font-weight: 500;
}

.scc-sf-note-group {
	background: #F1F5F4;
	color: #2F3D39;
}

.scc-sf-note-guest {
	background: #FFF7E6;
	color: #56400A;
}

@media (prefers-reduced-motion: reduce) {
	[data-scc-select-quote].is-scc-adding::after,
	[data-scc-save-quote][aria-busy="true"]::after,
	.scc-sf-pending::before {
		animation: none;
	}
}

/* The theme's two-language switcher is superseded by the plugin's, which lists
   every locale Polylang serves. Hidden rather than removed: the theme file is
   untouched, so dropping this plugin restores the original control exactly.
   Evidence: functions.php:315 hardcodes $published = ['en','ar']. */
.site-language:not([data-scc-sf-switcher]) {
	display: none !important;
}