/* EROME Modal Studio v1.0.0
   IMPORTANT: all styling is explicitly scoped to elements marked by front.js.
   No WordPress core/Yoast/global theme selectors are changed.
*/
.erome-ui-overlay {
  background: rgba(4, 5, 9, var(--ems-overlay-opacity, .76)) !important;
  -webkit-backdrop-filter: blur(var(--ems-blur, 9px));
  backdrop-filter: blur(var(--ems-blur, 9px));
  z-index: 99980;
}
.erome-ui-overlay.erome-ui-overlay-scrollfix {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  overscroll-behavior: contain;
  display: flex !important;
  justify-content: center !important;
  align-items: safe center !important;
}
.erome-ui-card {
  --ems-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  display: block;
  box-sizing: border-box !important;
  border: 1px solid var(--ems-border, #33343e) !important;
  border-radius: var(--ems-radius, 22px) !important;
  background: var(--ems-surface, #141418) !important;
  background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ems-primary, #e72332) 8%, transparent), transparent 44%) !important;
  color: var(--ems-text, #f9fafb) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 3px 18px rgba(0,0,0,.25) !important;
  padding: var(--ems-padding, 30px) !important;
  font-family: var(--ems-font) !important;
  isolation: isolate;
  width: calc(100% - 0px) !important;
  max-width: var(--ems-login-width, 470px) !important;
  min-width: 0 !important;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
.erome-ui-card.erome-ui-upload { max-width: var(--ems-upload-width, 570px) !important; }
.erome-ui-card.erome-ui-scrollfix {
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-color: var(--ems-border, #33343e) transparent;
  scrollbar-width: thin;
}
.erome-ui-overlay.erome-ui-overlay-scrollfix .erome-ui-card {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 1 auto !important;
  margin: auto !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
}
.erome-ui-card *, .erome-ui-card *::before, .erome-ui-card *::after { box-sizing: border-box; }
.erome-ui-card .ems-kicker {
  color: var(--ems-accent, #ff4765) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}
.erome-ui-card .ems-title {
  margin: 8px 38px 8px 0 !important;
  color: var(--ems-text, #f9fafb) !important;
  font-size: clamp(23px, 2.4vw, 30px) !important;
  line-height: 1.17 !important;
  font-weight: 780 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}
.erome-ui-card .ems-subtitle {
  color: var(--ems-muted, #aaaab7) !important;
  line-height: 1.55 !important;
  font-size: 13.5px !important;
  margin: 0 0 18px !important;
}
.erome-ui-card label { color: var(--ems-text, #f9fafb) !important; }
.erome-ui-card .ems-label {
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}
.erome-ui-card :is(input,select,textarea).ems-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.erome-ui-card textarea.ems-input,
.erome-ui-card select.ems-input {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--ems-text, #f9fafb) !important;
  background: var(--ems-surface-alt, #1f1f25) !important;
  border: 1px solid var(--ems-border, #33343e) !important;
  border-radius: var(--ems-input-radius, 12px) !important;
  outline: none;
  box-shadow: none !important;
  padding: 13px 15px !important;
  min-height: 46px !important;
  line-height: 1.35 !important;
  transition: border-color .17s ease, box-shadow .17s ease !important;
}
.erome-ui-card textarea.ems-input { min-height: 86px !important; resize: vertical; }
.erome-ui-card .ems-input::placeholder { color: var(--ems-muted, #aaaab7) !important; opacity: .7; }
.erome-ui-card :is(input,select,textarea).ems-input:focus-visible {
  border-color: var(--ems-accent, #ff4765) !important;
  outline: 2px solid transparent !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ems-primary, #e72332) 19%, transparent) !important;
}
.erome-ui-card :is(input,textarea).ems-input:disabled { cursor: not-allowed; opacity: .7; }
.erome-ui-card input[type="checkbox"], .erome-ui-card input[type="radio"] { accent-color: var(--ems-primary, #e72332) !important; }
.erome-ui-card .ems-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 46px !important;
  padding: 11px 20px !important;
  border-radius: var(--ems-input-radius, 12px) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  background: linear-gradient(120deg, var(--ems-primary, #e72332), var(--ems-accent, #ff4765)) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ems-primary, #e72332) 19%, transparent) !important;
  font-weight: 750 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .17s ease, filter .17s ease, box-shadow .17s ease !important;
}
.erome-ui-card .ems-primary:hover:not(:disabled) { filter: brightness(1.10); transform: translateY(-1px); }
.erome-ui-card .ems-primary:disabled { opacity: .6; cursor: not-allowed; }
.erome-ui-card .ems-primary:focus-visible,
.erome-ui-card .ems-close:focus-visible { outline: 2px solid var(--ems-accent, #ff4765) !important; outline-offset: 3px !important; }
.erome-ui-card a { color: var(--ems-accent, #ff4765); text-underline-offset: 3px; }
.erome-ui-card a:hover { color: var(--ems-text, #f9fafb); }
.erome-ui-card .ems-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ems-surface-alt, #1f1f25) !important;
  border: 1px solid var(--ems-border, #33343e) !important;
  color: var(--ems-text, #f9fafb) !important;
  border-radius: 50% !important;
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; min-height: 34px !important;
  cursor: pointer;
}
.erome-ui-card .ems-dropzone {
  border: 1.5px dashed color-mix(in srgb, var(--ems-accent, #ff4765) 45%, var(--ems-border, #33343e)) !important;
  border-radius: calc(var(--ems-input-radius, 12px) + 4px) !important;
  background: color-mix(in srgb, var(--ems-surface-alt, #1f1f25) 88%, var(--ems-primary, #e72332)) !important;
  padding: 18px !important;
  transition: border-color .2s ease, background-color .2s ease !important;
}
.erome-ui-card .ems-dropzone:focus-within,
.erome-ui-card .ems-dropzone:hover { border-color: var(--ems-accent, #ff4765) !important; }
.erome-ui-card input[type="file"].ems-file {
  max-width: 100% !important;
  width: 100% !important;
  color: var(--ems-muted, #aaaab7) !important;
  background: transparent !important;
  font-size: 12px !important;
  border: none !important;
  padding: 0 !important;
}
.erome-ui-card input[type="file"].ems-file::file-selector-button {
  background: var(--ems-surface-alt, #1f1f25) !important;
  color: var(--ems-text, #f9fafb) !important;
  border: 1px solid var(--ems-border, #33343e) !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  margin: 8px 12px 8px 0 !important;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
.erome-ui-card .ems-file-name { display: block; color: var(--ems-accent, #ff4765); font-size: 12px; margin-top: 6px; overflow-wrap: anywhere; }
.erome-ui-card hr { border: 0; border-top: 1px solid var(--ems-border, #33343e); }
@media (max-width: 640px) {
  .erome-ui-overlay.erome-ui-overlay-scrollfix { padding: max(9px, env(safe-area-inset-top)) 9px max(9px, env(safe-area-inset-bottom)) !important; }
  .erome-ui-card { padding: clamp(17px, 5vw, 24px) !important; width: 100% !important; max-width: calc(100vw - 18px) !important; border-radius: 17px !important; }
  .erome-ui-card.erome-ui-scrollfix { max-height: calc(100vh - 18px) !important; max-height: calc(100dvh - 18px) !important; }
  .erome-ui-card .ems-title { font-size: 24px !important; }
  .erome-ui-card .ems-dropzone { padding: 13px !important; }
  .erome-ui-card :is(input,select,textarea).ems-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .erome-ui-card, .erome-ui-card * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}