/* Moroc Sans (custom) - Webfont CSS */
@font-face {
  font-family: 'Moroc Sans';
  src: url('MorocSans-Regular.woff2') format('woff2'),
       url('MorocSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moroc Sans';
  src: url('MorocSans-SemiBold.woff2') format('woff2'),
       url('MorocSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moroc Sans';
  src: url('MorocSans-Bold.woff2') format('woff2'),
       url('MorocSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



/* Autofill overrides (shared, auto-detected)

   Goal: prevent browser autofill from painting yellow/blue backgrounds and
   breaking the floating-label field design.

   Implementation:
   - JS (applyAutofillColors in dependency_field.js) walks up the DOM to find
     the nearest ancestor with an opaque background, then sets
     --moroc-autofill-bg and --moroc-autofill-text directly on the .moroc-field
     and its floating label span.
   - No manual --moroc-canvas-bg needed on containers.
*/

/* Focused / focus-within border — blue accent on the pill shape.
   Overrides the Tailwind focus-within utilities (if any) via higher
   specificity from the :not() attribute chain. */
.moroc-field:not([data-moroc-field-style="stacked"]).focused,
.moroc-field:not([data-moroc-field-style="stacked"]):focus-within {
  border-color: rgb(96 165 250); /* blue-400 */
}

/* Error state border — rose replaces blue when the field is in error.
   Must come after the focus rule so same-specificity source-order wins
   when the field is idle in error state. The focused-error selector
   adds one more attribute, so it beats the plain focus rule (0-4-0 vs
   0-3-0) without needing source order. */
.moroc-field:not([data-moroc-field-style="stacked"])[data-moroc-ui-state="error"] {
  border-color: rgb(251 113 133); /* rose-400 */
}
.moroc-field:not([data-moroc-field-style="stacked"])[data-moroc-ui-state="error"]:focus-within,
.moroc-field:not([data-moroc-field-style="stacked"])[data-moroc-ui-state="error"].focused {
  border-color: rgb(244 63 94); /* rose-500 slightly darker on focus */
}

/* Required asterisk always inherits from the floating label's color.
   Without this, the asterisk keeps whatever Tailwind color class the PHP
   rendered (text-blue-400), fighting the label's CSS-driven color in
   error state. Inheriting means the asterisk automatically tracks the
   label — JS doesn't need to swap classes on focus/blur/error. */
.moroc-field:not([data-moroc-field-style="stacked"]) [data-moroc-floating-label="1"] > span {
  color: inherit !important;
}

/* Active floating label: sits centered on the top border line with a
   canvas-colored chip background notching out the border behind it.
   --moroc-autofill-bg is set by dependency_field.js on every field init
   (resolveAncestorBg walks up to the nearest opaque ancestor), so the
   chip tracks whatever real background sits behind the field in any
   context (signup canvas, overlay card, etc). */
.moroc-field:not([data-moroc-field-style="stacked"]):not([data-moroc-textarea-field="1"]).focused [data-moroc-floating-label="1"],
.moroc-field:not([data-moroc-field-style="stacked"]):not([data-moroc-textarea-field="1"]).has-value [data-moroc-floating-label="1"] {
  top: 0;
  left: 1.75rem;
  /* Tailwind v4 (@tailwindcss/browser@4) emits the modern `translate` CSS
     property for `-translate-y-1/2`, not the legacy `transform: translate()`.
     The two properties cascade independently and would stack if both were set,
     so we explicitly own `translate` here and null out any legacy transform. */
  translate: 0 -50%;
  transform: none;
  padding: 0 0.375rem; /* 6px — matches Tailwind px-1.5 on the label span */
  background-color: var(--moroc-autofill-bg, #000000);
  font-size: 0.75rem; /* 12px */
  line-height: 1;
  z-index: 1;
}

/* Idle floating label (pill inputs only): slight inset so it reads as
   centered within the pill's horizontal padding (1.75rem), and the
   translate is explicitly owned to match Tailwind v4 output. Textareas
   keep their original top-[0.875rem] static positioning. */
.moroc-field:not([data-moroc-field-style="stacked"]):not([data-moroc-textarea-field="1"]):not(.focused):not(.has-value) [data-moroc-floating-label="1"] {
  top: 50%;
  left: 1.5rem;
  translate: 0 -50%;
  transform: none;
  background-color: transparent;
}

/* Active label color - dark theme */
.moroc-field[data-moroc-field-theme="dark"]:not([data-moroc-field-style="stacked"]).focused:not([data-moroc-ui-state="error"]) [data-moroc-floating-label="1"],
.moroc-field[data-moroc-field-theme="dark"]:not([data-moroc-field-style="stacked"]).has-value:not([data-moroc-ui-state="error"]) [data-moroc-floating-label="1"] {
  color: rgb(96 165 250); /* blue-400 */
}

/* Active label color - light theme */
.moroc-field[data-moroc-field-theme="light"]:not([data-moroc-field-style="stacked"]).focused:not([data-moroc-ui-state="error"]) [data-moroc-floating-label="1"],
.moroc-field[data-moroc-field-theme="light"]:not([data-moroc-field-style="stacked"]).has-value:not([data-moroc-ui-state="error"]) [data-moroc-floating-label="1"] {
  color: rgb(59 130 246); /* blue-500 */
}

/* Error state label color */
.moroc-field:not([data-moroc-field-style="stacked"])[data-moroc-ui-state="error"] [data-moroc-floating-label="1"] {
  color: rgb(251 113 133); /* rose-400 */
}

/* Idle label color — when the field is not focused, has no value, and is not
   in error state. Overrides any stale Tailwind color classes PHP might have
   rendered (e.g. text-blue-400 from an initial has-value state that was later
   cleared). Specificity 0-6-0 beats both the PHP-rendered Tailwind utilities
   (0-1-0) and leaves an explicit anchor for the idle color in one place. */
.moroc-field[data-moroc-field-theme="dark"]:not([data-moroc-field-style="stacked"]):not(.focused):not(.has-value):not([data-moroc-ui-state="error"]) [data-moroc-floating-label="1"] {
  color: rgb(163 163 163); /* neutral-400 */
}
.moroc-field[data-moroc-field-theme="light"]:not([data-moroc-field-style="stacked"]):not(.focused):not(.has-value):not([data-moroc-ui-state="error"]) [data-moroc-floating-label="1"] {
  color: rgb(115 115 115); /* neutral-500 */
}

/* Chrome applies autofill font styling via ::first-line - this is the key selector */
.moroc-field:not([data-moroc-field-style="stacked"]) input:-webkit-autofill::first-line,
.moroc-field:not([data-moroc-field-style="stacked"]) textarea:-webkit-autofill::first-line {
  font-family: "Moroc Sans Soft", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: var(--moroc-autofill-text) !important;
}

.moroc-field:not([data-moroc-field-style="stacked"]) input:-webkit-autofill,
.moroc-field:not([data-moroc-field-style="stacked"]) input:-webkit-autofill:hover,
.moroc-field:not([data-moroc-field-style="stacked"]) input:-webkit-autofill:focus,
.moroc-field:not([data-moroc-field-style="stacked"]) textarea:-webkit-autofill,
.moroc-field:not([data-moroc-field-style="stacked"]) textarea:-webkit-autofill:hover,
.moroc-field:not([data-moroc-field-style="stacked"]) textarea:-webkit-autofill:focus,
.moroc-field:not([data-moroc-field-style="stacked"]) select:-webkit-autofill,
.moroc-field:not([data-moroc-field-style="stacked"]) select:-webkit-autofill:hover,
.moroc-field:not([data-moroc-field-style="stacked"]) select:-webkit-autofill:focus {
  /* Allows JS to detect autofill via `animationstart` */
  animation-name: morocAutofillStart;
  animation-duration: 0.01s;
  animation-iteration-count: 1;

  /* Ensure autofilled text uses the same typography as the field.
       NOTE: We use explicit values instead of `inherit` because Chrome applies
       autofill styles BEFORE the CSS cascade fully computes, causing `inherit`
       to pick up wrong values on fresh page loads. */
  font-family: "Moroc Sans Soft", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif !important;
  font-size: 0.875rem !important; /* text-sm - explicit to avoid fresh-load race */
  font-weight: 400 !important; /* explicit weight — Chrome's autofill paint path can pick up a heavier match */
  line-height: 1.25rem !important; /* matches text-sm line-height */
  letter-spacing: inherit !important;
  /* Force grayscale antialiasing on autofilled glyphs — without this, Chrome
     paints autofill text via subpixel (LCD) smoothing, which renders glyphs
     noticeably thicker/brighter than the same characters before autofill. */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: var(--moroc-autofill-text) !important;
  -webkit-text-fill-color: var(--moroc-autofill-text) !important;
  caret-color: var(--moroc-autofill-text);
  -webkit-box-shadow: 0 0 0 1000px var(--moroc-autofill-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--moroc-autofill-bg) inset !important;
  border-radius: inherit !important;
  transition: background-color 99999s ease-in-out 0s;
  filter: none !important;
}

/* Stacked fields: autofill detection animation only.
   No box-shadow paint — the canvas field has its own translucent
   bg-white/[0.02] wash and we want it to show through the autofilled
   input. The bordered (pill) variant masks autofill with an inset
   solid box-shadow because the input fully fills the pill, but for
   stacked the input is transparent and sits inside a footprint that
   already paints the visible surface. The transition trick below
   blocks Chrome/WebKit's native autofill bg paint without us having
   to mask anything. */
.moroc-field[data-moroc-field-style="stacked"] input:-webkit-autofill,
.moroc-field[data-moroc-field-style="stacked"] textarea:-webkit-autofill,
.moroc-field[data-moroc-field-style="stacked"] select:-webkit-autofill {
  animation-name: morocAutofillStart;
  animation-duration: 0.01s;
  animation-iteration-count: 1;
  -webkit-text-fill-color: var(--moroc-autofill-text) !important;
  color: var(--moroc-autofill-text) !important;
  caret-color: var(--moroc-autofill-text);
  /* Match antialiasing with the rest of the page so autofill doesn't paint thicker */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  transition: background-color 99999s ease-in-out 0s;
  filter: none !important;
}

/* Legacy "paint via text-shadow" workaround — disabled because the shadow
   rasterizer renders glyphs slightly thicker/brighter on Edge and some
   Chromium builds, which was the opposite of what it was trying to fix.
   The -webkit-font-smoothing:antialiased in the main autofill rule above
   is the actual fix for weight/antialiasing consistency. Kept the selector
   here as a no-op so any stale data-moroc-autofill-shadow="1" attributes
   from JS don't re-enable the broken path. */
.moroc-field [data-moroc-autofill-shadow="1"]:-webkit-autofill,
.moroc-field [data-moroc-autofill-shadow="1"]:-webkit-autofill:hover,
.moroc-field [data-moroc-autofill-shadow="1"]:-webkit-autofill:focus {
  /* text-shadow trick intentionally removed */
}

@keyframes morocAutofillStart {
  from {
  }
  to {
  }
}

.moroc-field:not([data-moroc-field-style="stacked"]) input:-moz-autofill,
.moroc-field:not([data-moroc-field-style="stacked"]) textarea:-moz-autofill,
.moroc-field:not([data-moroc-field-style="stacked"]) select:-moz-autofill {
  /* Match WebKit typography overrides for consistency */
  font-family: "Moroc Sans Soft", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: var(--moroc-autofill-text) !important;
  box-shadow: 0 0 0 1000px var(--moroc-autofill-bg) inset !important;
  -moz-text-fill-color: var(--moroc-autofill-text) !important;
  caret-color: var(--moroc-autofill-text);
  border-radius: inherit !important;
}

.moroc-field:has(.modal-select-field) .typeable-label {
  display: block;
}

.moroc-field:has(.modal-select-field):not(.focused):not(.has-value)
  .modal-select-field {
  color: transparent;
}

.moroc-field.focused .modal-select-field:not(.has-value) {
  color: transparent;
}

/* ---- Field-message slide/fade transitions ---- */
.field-message,
.field-helper,
.field-help {
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out,
    max-height 120ms ease-out,
    margin-top 120ms ease-out;
}

.field-msg-out {
  opacity: 0 !important;
  transform: translateY(-2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .field-message,
  .field-helper,
  .field-help {
    transition: none !important;
  }
}

/* ActionOverlay search inputs: suppress native browser search/cancel UI */
[data-ao-root] input[type="search"]::-webkit-search-decoration,
[data-ao-root] input[type="search"]::-webkit-search-cancel-button,
[data-ao-root] input[type="search"]::-webkit-search-results-button,
[data-ao-root] input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
[data-ao-root] input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

/* In overlay forms, floating labels stay inside the field (no background mask needed) */
[data-ao-root] .moroc-actionoverlay-form .moroc-field [data-moroc-floating-label="1"] {
  background-color: transparent;
}

/* ---- Stacked field — canvas surface ----
   The stacked field renders as a soft rounded panel with a faint white
   wash and a hairline border. Focus deepens the wash; error tints the
   surface rose and swaps the border to rose. Owned entirely by CSS so
   JS only flips data-moroc-ui-state — no inline styles. Base footprint
   classes (border border-white/[0.05] rounded-xl bg-white/[0.02] pt-4
   px-[1.125rem] pb-3) are emitted by
   FormFieldHelper::getFootprintBaseClasses and the JS createField twin. */

.moroc-field[data-moroc-field-style="stacked"].focused,
.moroc-field[data-moroc-field-style="stacked"]:focus-within {
  background-color: rgba(255, 255, 255, 0.035);
}

.moroc-field[data-moroc-field-style="stacked"][data-moroc-ui-state="error"] {
  background-color: rgba(251, 113, 133, 0.06);
  border-color: rgba(251, 113, 133, 0.30);
}

/* Larger writing-canvas typography for default stacked textareas. */
.moroc-field[data-moroc-field-style="stacked"][data-moroc-textarea-field="1"] textarea.input-field {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}
.moroc-field[data-moroc-field-style="stacked"][data-moroc-textarea-field="1"] textarea.input-field::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

/* ---- Stacked field — compact size ----
   Opt-in via FormFieldHelper config 'size' => 'compact' (or
   data-moroc-field-size="compact" on the footprint). Reduces vertical
   footprint by ~25% by trimming padding and dropping label/input type
   one step. Textareas keep the writing-canvas type since compact is
   for input-list density, not editor space. */
.moroc-field[data-moroc-field-style="stacked"][data-moroc-field-size="compact"] {
  padding: 0.75rem 0.875rem 0.625rem; /* 12px 14px 10px */
}
.moroc-field[data-moroc-field-style="stacked"][data-moroc-field-size="compact"] [data-moroc-floating-label="1"] {
  font-size: 0.8125rem; /* 13px */
  line-height: 1rem;    /* 16px */
  margin-bottom: 2px;
}
.moroc-field[data-moroc-field-style="stacked"][data-moroc-field-size="compact"] .input-field {
  font-size: 0.875rem;  /* 14px */
  line-height: 1.25rem; /* 20px */
}
.moroc-field[data-moroc-field-style="stacked"][data-moroc-field-size="compact"][data-moroc-textarea-field="1"] textarea.input-field {
  font-size: 0.875rem;  /* 14px */
  line-height: 1.25rem; /* 20px */
}
.moroc-field[data-moroc-field-style="stacked"][data-moroc-field-size="compact"][data-moroc-textarea-field="1"]:not(:has([data-moroc-floating-label="1"])):has(textarea.input-field[rows="1"]) {
  min-height: 2.625rem;       /* Match compact text input visual height */
  padding-top: 0.75rem;       /* keep compact top rhythm */
  padding-bottom: 0.625rem;   /* match compact stacked field baseline */
  justify-content: center;
}
.moroc-field[data-moroc-field-style="stacked"][data-moroc-field-size="compact"][data-moroc-textarea-field="1"]:not(:has([data-moroc-floating-label="1"])) .moroc-field-input-row {
  align-items: center;
}

/* ---- Fullscreen action overlay ----
   Opt-in via fullscreen on ActionOverlay config.
   Values: true/"sm" (< 640px), "md" (< 768px), "lg" (< 1024px),
           "xl" (< 1280px), "always" (all viewports).
   Card fills the viewport with no border-radius or margins. */

[data-ao-card][data-ao-fullscreen="always"] {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
  width: 100% !important;
          max-width: 100% !important;
}

@media (max-width: 1279px) {
  [data-ao-card][data-ao-fullscreen="xl"] {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    width: 100% !important;
            max-width: 100% !important;
  }
}

@media (max-width: 1023px) {
  [data-ao-card][data-ao-fullscreen="lg"] {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    width: 100% !important;
            max-width: 100% !important;

  }
}

@media (max-width: 767px) {
  [data-ao-card][data-ao-fullscreen="md"] {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    width: 100% !important;
        max-width: 100% !important;

  }
}

@media (max-width: 639px) {
  [data-ao-card][data-ao-fullscreen="sm"] {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    width: 100% !important;
            max-width: 100% !important;
  }
}

/* ---- Bordered field spacing: compensate for active label overhang ----
   When a bordered field's floating label rises to sit on its top border,
   it visually encroaches on whatever sits above it. Bump the vertical gap
   only when the label has actually risen (focused or has-value). */
.moroc-form-group:has(.moroc-field:not([data-moroc-field-style="stacked"])) {
  transition: margin-top 180ms ease;
}

/* Stacked siblings: bump only the active form group. First form group
   (no preceding sibling) is protected — no label-above-label collision. */
:not(.grid) > .moroc-form-group + .moroc-form-group:has(.moroc-field:not([data-moroc-field-style="stacked"]).focused),
:not(.grid) > .moroc-form-group + .moroc-form-group:has(.moroc-field:not([data-moroc-field-style="stacked"]).has-value) {
  margin-top: 1.35rem;
}

/* Grid-wrapped: bump the whole row uniformly so columns stay aligned
   when one field is active and its neighbor is empty. */
.grid:has(.moroc-field:not([data-moroc-field-style="stacked"]).focused) > .moroc-form-group,
.grid:has(.moroc-field:not([data-moroc-field-style="stacked"]).has-value) > .moroc-form-group {
  margin-top: 1.35rem;
}