/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("/assets/leaflet-c9b65058.css");
@import url("/assets/lexxy-f326a350.css");
@import url("/assets/slimselect-6ab0d5f3.css");

@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/assets/TwemojiCountryFlags-468538bb.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}

.leaflet-container { isolation: isolate; }
.leaflet-control, .leaflet-top { z-index: initial; }

:root {
  --ss-animation-timing: 0.2s;
  --ss-focus-color: var(--color-petrol-600);
  --ss-primary-color: var(--color-petrol-600);
  --ss-bg-color: var(--color-sand-100);
  --ss-border-color: var(--color-sand-100);
  --ss-font-color: var(--color-sand-900);
  --ss-placeholder-color: var(--color-sand-500);
  --ss-border-radius: var(--radius-xl);

  --lexxy-color-ink: var(--color-sand-900);
  --lexxy-color-ink-lighter: var(--color-sand-300);
  --lexxy-color-accent-dark: var(--color-petrol-600);
  --lexxy-color-accent-medium: var(--color-petrol-400);
  --lexxy-color-accent-light: var(--color-petrol-200);
  --lexxy-color-accent-lightest: var(--color-petrol-50);
  --lexxy-color-red: var(--color-red-600);
}

.ss-main .ss-single .ss-country-name { display: none; }

.notification[popover] { margin: 0; border: 0; background: transparent; overflow: visible; }

/* Mark a SlimSelect field invalid: the widget is turbo-permanent, so the
   error border is driven by a class on a non-permanent ancestor wrapper. */
.select-error { --ss-border-color: var(--color-red-500); --ss-focus-color: var(--color-red-500); }