/* The modal card (docs/STYLE-GUIDE.md S10 requirement 1): the site's own
   card on a dimmed scrim - never a browser dialog, never Django's popup
   window. Separate from portal.css on purpose; portal.css skins the admin,
   this file is the one modal language shared by the portal and the
   storefront, so every token carries a literal fallback and nothing here
   depends on which token sheet loaded first.

   .rh-modal-card is also rendered inline by each flow's full page (the
   no-JavaScript path), so the card styling sits on the card and only the
   floating treatment hangs off .rh-modal-scrim. */

.rh-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
  background: rgba(26, 43, 74, 0.45);
}

.rh-modal {
  width: 100%;
  max-width: 520px;
  /* Sized to content, never taller than the viewport. */
  max-height: calc(100vh - 8vh - 32px);
  display: flex;
}

.rh-modal-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* OPAQUE, and NOT --surface. That token is rgba(18, 22, 34, 0.72), which is
     correct for a panel sitting ON the aurora - its 1px border is a hole
     through to it and the translucency is the whole technique.

     A modal is not that panel. It floats over whatever the page has scrolled
     to, and on the orders list that is a dense grid of dates, totals and pay
     buttons: 28% of it read straight through the words an operator is trying
     to act on, with the table's own header colliding with the card's labels.

     The rail reached the same conclusion for the same reason - see
     --portal-rail-bg in portal-rail.css, opaque because it is fixed over the
     aurora and over the scrolled page. A backdrop blur is not an alternative
     here: aurora.css forbids it on a panel whose border is a window.

     No literal fallback, unlike the tokens around it: this one is a policed
     palette colour, and tests/theming/test_palette_integrity.py forbids
     re-spelling it. --hairline above already stands without one. */
  background: var(--surface-modal);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(26, 43, 74, 0.04);
  font-family: var(
    --font-sans,
    "Poppins",
    "Montserrat",
    "Segoe UI",
    system-ui,
    sans-serif
  );
  color: var(--ink);
}

/* Floating over the page it came from: the storefront card lift, deepened. */
.rh-modal-scrim .rh-modal-card {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.rh-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}

.rh-modal-title {
  margin: 0;
  font-family: var(--font-sans, "Playfair Display", Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.rh-modal-close {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.rh-modal-close:hover {
  border-color: var(--hairline);
  color: var(--ink);
}

/* Tall cards scroll inside themselves, so the page behind never moves. */
.rh-modal-body {
  padding: 18px 20px 20px;
  overflow-y: auto;
  min-height: 0;
}

.rh-modal-body > p {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.rh-modal-list {
  margin: 0 0 16px;
  padding: 10px 14px;
  list-style: none;
  background: var(--surface-tile);
  border-radius: 10px;
  font-size: 0.85rem;
}

.rh-modal-list li + li {
  margin-top: 4px;
}

/* --- Fields ---------------------------------------------------------- */

.rh-modal-field {
  margin-bottom: 14px;
}

.rh-modal-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.rh-modal-required {
  color: var(--error-fg, #a03232);
}

.rh-modal-field input[type="text"],
.rh-modal-field input[type="number"],
.rh-modal-field input[type="url"],
.rh-modal-field input[type="email"],
.rh-modal-field input[type="file"],
.rh-modal-field select,
.rh-modal-field textarea {
  width: 100%;
  box-sizing: border-box;
  /* Django's forms.css gives every bare <select> a fixed height. With
     border-box and our padding that leaves ~12px of content box for a
     14px line, so the chosen option renders with its top and bottom
     sliced off. The field sizes to its text instead. */
  height: auto;
  line-height: 1.4;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #d5dade);
  border-radius: 8px;
  background: var(--surface, #ffffff);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
}

.rh-modal-field input:focus,
.rh-modal-field select:focus,
.rh-modal-field textarea:focus {
  outline: 2px solid var(--glow-magenta);
  outline-offset: 1px;
  border-color: var(--glow-magenta);
}

.rh-modal-help {
  margin: 5px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.rh-modal-field ul.errorlist,
.rh-modal-errors ul.errorlist {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--error-fg, #a03232);
}

.rh-modal-field--error input,
.rh-modal-field--error select,
.rh-modal-field--error textarea {
  border-color: var(--error-fg, #a03232);
}

.rh-modal-messages {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.rh-modal-messages li {
  margin-bottom: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  background: var(--message-success-bg, #eaf6ef);
}

.rh-modal-messages li.warning {
  background: var(--message-warning-bg);
}

.rh-modal-messages li.error {
  background: var(--message-error-bg, #faeceb);
  color: var(--error-fg, #a03232);
  font-weight: 600;
}

/* --- Actions: the storefront pill ------------------------------------ */

.rh-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.rh-modal-submit,
.rh-modal-cancel {
  display: inline-block;
  border-radius: 999px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

/* Accent yellow is the primary action only (STYLE-GUIDE S3/S6). */
.rh-modal-submit {
  background: var(--rh-accent);
  border: 1px solid var(--rh-accent);
  color: var(--accent-ink);
}

.rh-modal-submit:hover {
  background: var(--default-button-hover-bg, #eecc5f);
}

.rh-modal-cancel {
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline);
  color: var(--ink);
}

.rh-modal-cancel:hover {
  border-color: var(--glow-magenta);
}

.rh-modal-form--busy {
  opacity: 0.6;
  pointer-events: none;
}

/* Visible focus on every interactive element (STYLE-GUIDE S10). */
.rh-modal-card a:focus-visible,
.rh-modal-card button:focus-visible,
.rh-modal-card input:focus-visible,
.rh-modal-card select:focus-visible,
.rh-modal-card textarea:focus-visible {
  outline: 2px solid var(--glow-magenta);
  outline-offset: 2px;
}

/* --- Mobile ----------------------------------------------------------- */

@media (max-width: 600px) {
  .rh-modal-scrim {
    padding: 12px;
    align-items: flex-end;
  }

  .rh-modal {
    max-width: none;
    max-height: calc(100vh - 24px);
  }

  .rh-modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .rh-modal-submit,
  .rh-modal-cancel {
    text-align: center;
  }
}

/* --- The price sheet's card (admin/catalog/agentprice/modal_form.html) -- */

.rh-price-card-item {
  margin: 0 0 2px;
  font-weight: 600;
  color: var(--ink);
}

.rh-price-card-context {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
}