/* V9138 — Shared accessible field surfaces for all Sayyarati pages.
   Intentionally does not change dimensions, layout, native select arrows,
   file uploaders, checkboxes/radios, slider thumbs or map canvas controls. */
:root {
  --sy-field-surface-v9138: #ebf4ff;
  --sy-field-border-v9138: #92b2d8;
  --sy-field-text-v9138: #142b4d;
  --sy-field-placeholder-v9138: #647894;
  --sy-field-hover-v9138: #6397de;
  --sy-field-focus-v9138: #1767e9;
  --sy-field-focus-ring-v9138: rgba(23,103,233,.19);
}

body :is(
  input:not([type]),
  input[type="text"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="url"], input[type="password"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="time"], input[type="month"], input[type="week"],
  select, textarea
):not(.maplibregl-ctrl-geocoder--input):not([data-unstyled-field]) {
  background-color: var(--sy-field-surface-v9138) !important;
  border-color: var(--sy-field-border-v9138) !important;
  color: var(--sy-field-text-v9138) !important;
  box-shadow: 0 1px 2px rgba(22,54,94,.055), inset 0 0 0 1px rgba(255,255,255,.7) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body :is(input,textarea):not([data-unstyled-field])::placeholder {
  color: var(--sy-field-placeholder-v9138) !important;
  opacity: 1;
}

body :is(
  input:not([type]), input[type="text"], input[type="search"],
  input[type="email"], input[type="tel"], input[type="url"],
  input[type="password"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="time"], input[type="month"],
  input[type="week"], select, textarea
):not(.maplibregl-ctrl-geocoder--input):not([data-unstyled-field]):not(:disabled):not([readonly]):hover {
  border-color: var(--sy-field-hover-v9138) !important;
}

body :is(
  input:not([type]), input[type="text"], input[type="search"],
  input[type="email"], input[type="tel"], input[type="url"],
  input[type="password"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="time"], input[type="month"],
  input[type="week"], select, textarea
):not(.maplibregl-ctrl-geocoder--input):not([data-unstyled-field]):focus-visible {
  border-color: var(--sy-field-focus-v9138) !important;
  background-color: #ffffff !important;
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--sy-field-focus-ring-v9138), 0 1px 2px rgba(22,54,94,.08) !important;
}

body :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea):is(:disabled,[readonly]):not([data-unstyled-field]) {
  background-color: #f0f4f9 !important;
  border-color: #c4d0e0 !important;
  color: #56667f !important;
}

body :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea)[aria-invalid="true"]:not([data-unstyled-field]),
body :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):user-invalid:not([data-unstyled-field]) {
  border-color: #c44242 !important;
}

/* The hotel form formerly overrode shared field colors with pale borders. */
body.hotel-manager-v8414-body .hotel-field-v8457 :is(
  input:not([type]), input[type="text"], input[type="tel"],
  input[type="number"], input[type="url"], input[type="email"],
  input[type="password"], select, textarea
) {
  background-color: var(--sy-field-surface-v9138) !important;
  border-color: var(--sy-field-border-v9138) !important;
  box-shadow: 0 1px 2px rgba(22,54,94,.055) !important;
}
body.hotel-manager-v8414-body .hotel-field-v8457 :is(
  input:not([type]), input[type="text"], input[type="tel"],
  input[type="number"], input[type="url"], input[type="email"],
  input[type="password"], select, textarea
):focus-visible {
  border-color: var(--sy-field-focus-v9138) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px var(--sy-field-focus-ring-v9138) !important;
}

/* These selectors live *inside* maps: transparent controls are intentional.
   Their dimensions and interaction must not be changed by global input styling. */
body .workshop-map-v8719__governorate select,
body .tow-map-v8759__governorate select,
body .dalili-map-governorate-v8708 > select,
body [data-fuel-nearby-map] [data-dalili-map-governorate] {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Dark palettes, only when the app explicitly enters a dark theme. */
body:is(.dark,.dark-mode,.theme-dark,[data-theme="dark"]) {
  --sy-field-surface-v9138: #17253d;
  --sy-field-border-v9138: #7892b7;
  --sy-field-text-v9138: #f4f7ff;
  --sy-field-placeholder-v9138: #b6c5dc;
  --sy-field-hover-v9138: #a2c4ff;
  --sy-field-focus-v9138: #79abff;
  --sy-field-focus-ring-v9138: rgba(121,171,255,.26);
}

@media (prefers-reduced-motion:reduce) {
  body :is(input, select, textarea) { transition: none !important; }
}