/* ======================================================
   OREJIME — aligned with MOVE theme tokens
========================================================= */

.orejime-Env {
  --orejime-font-family: var(--font-azo-sans), sans-serif;
  --orejime-font-size-small: 1rem;

  --orejime-color-text: black;
  --orejime-color-subdued: var(--color-neutral-600);
  --orejime-color-background: #fff;
  --orejime-color-backdrop: #00000066;
  --orejime-color-shadow: 0, 0, 0;
  --orejime-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);

  --orejime-color-interactive: var(--color-terracotta-500);
  --orejime-color-on-interactive: var(--color-redwood-950);

  --orejime-space-m: 1rem;
  --orejime-space-s: calc(var(--orejime-space-m) * 0.5);
  --orejime-space-xs: calc(var(--orejime-space-m) * 0.25);
  --orejime-space-l: calc(var(--orejime-space-m) * 1.5);
  --orejime-radius: 1rem;
  --orejime-modal-max-width: 64ch;
  --orejime-banner-max-width: 48ch;
  --orejime-collision-padding: 1rem;
}

.orejime-Banner {
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
}

.orejime-Banner-body,
.orejime-Modal {
  border: 1px solid var(--color-parchment-300);
  border-radius: 1rem;
}

.orejime-Banner-description {
    margin-bottom: 9px !important;
}

.orejime-Banner-body {
  background: var(--color-parchment-50);
  color: black;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.orejime-Modal {
  background: #fff;
}

.orejime-ButtonList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.orejime-Button {
  border: 1px solid var(--color-parchment-300);
  border-radius: 9999px;
  padding: 0.625rem 1rem;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-redwood-950);
  background: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.orejime-Button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-terracotta-300);
}

.orejime-Button:not([disabled]):not([aria-disabled='true']):hover {
  background: var(--color-parchment-100);
  border-color: var(--color-parchment-400);
}

/* Primary action */
.orejime-Button.orejime-Button--save {
  background: var(--color-terracotta-500);
  border-color: var(--color-terracotta-500);
  color: var(--color-redwood-950);
}

.orejime-Button.orejime-Button--save:not([disabled]):not([aria-disabled='true']):hover {
  background: var(--color-terracotta-300);
  border-color: var(--color-terracotta-300);
}

/* Secondary action */
.orejime-Button.orejime-Button--decline {
  background: #fff;
}

/* "Configure / Learn more" action */
.orejime-Button.orejime-Button--info {
  background: var(--color-perano-100);
  border-color: var(--color-perano-200);
  color: var(--color-redwood-950);
}

.orejime-Button.orejime-Button--info:not([disabled]):not([aria-disabled='true']):hover {
  background: var(--color-perano-200);
  border-color: var(--color-perano-300);
}

/* Keep "configure" button visually separated when there is room */
.orejime-Banner-actionItem.orejime-Banner-actionItem--info {
  margin-left: auto;
}

@media (max-width: 640px) {
  .orejime-Banner {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .orejime-Banner-actionItem.orejime-Banner-actionItem--info {
    margin-left: 0;
  }

  .orejime-Button {
    width: 100%;
    justify-content: center;
  }
}