/*
Lamy LP - Modal system (Phase 9 STAGE 2)
Reusable accessible modal shell. Z-index 10000 per locked hierarchy.
RTL: inset-inline-end places the close button on the LEFT in RTL document.
*/

/* ============================================================
   Modal container + states
   ============================================================ */
.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.lp-modal.is-open {
  display: block;
}

.lp-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

/* ============================================================
   Dialog
   ============================================================ */
.lp-modal__dialog {
  position: relative;
  max-width: 800px;
  max-height: 90vh;
  margin: 5vh auto;
  background: #0A0A0A;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 56px 32px 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 768px) {
  .lp-modal__dialog {
    margin: 16px;
    max-height: calc(100vh - 32px);
    padding: 56px 20px 20px;
  }
}

/* ============================================================
   Close button (Phase 9.1: top-RIGHT physical via `right:` not
   `inset-inline-end:` per boss UX preference; X must read as
   "close" in physical-right position regardless of RTL document)
   ============================================================ */
.lp-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  color: #D4AF37;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Phase 9.2: text-glyph × (U+00D7) replaces SVG that didn't render
     reliably across browsers. Properties below shape the glyph weight
     to match the previous SVG's visual intent. */
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  font-family: Arial, "Helvetica Neue", sans-serif;
  padding: 0;
  text-align: center;
}

.lp-modal__close:hover {
  background: rgba(212, 175, 55, 0.1);
}

.lp-modal__close:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

/* ============================================================
   Body + content
   ============================================================ */
.lp-modal__body {
  overflow-y: auto;
  flex: 1;
  padding-inline: 8px;
}

.lp-modal__content {
  color: #EAEAEA;
  font-size: 17px;
  line-height: 1.75;
}

.lp-modal__content h1 {
  color: #D4AF37;
  font-size: 28px;
  margin: 0 0 24px;
}

.lp-modal__content h2 {
  color: #D4AF37;
  font-size: 22px;
  margin: 32px 0 12px;
}

.lp-modal__content h3 {
  color: #EAEAEA;
  font-size: 18px;
  margin: 24px 0 10px;
}

.lp-modal__content p {
  margin: 0 0 14px;
}

.lp-modal__content ul,
.lp-modal__content ol {
  padding-inline-start: 24px;
  margin: 0 0 14px;
}

.lp-modal__content a {
  color: #D4AF37;
  text-decoration: underline;
}

/* ============================================================
   Loading + error states
   ============================================================ */
.lp-modal__loading,
.lp-modal__error {
  padding: 40px 20px;
  text-align: center;
  color: #EAEAEA;
}

/* ============================================================
   Screen-reader only utility (for default aria-labelledby target)
   ============================================================ */
.lp-modal__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================
   Phase 11.4 (Fix D) — RTL scrollbar fix.
   Browsers place the scrollbar on the END side of the writing
   direction. In our RTL document that puts the scrollbar on the
   LEFT physical edge, which feels awkward when the page itself
   uses a right-side scrollbar. Forcing the scrollable container
   to direction:ltr moves the scrollbar to the RIGHT, then we
   restore direction:rtl on its children so the content reads
   correctly. !important is used so this overrides any plugin or
   GeneratePress base styles that might set direction on the
   modal body or its descendants.
   The broad [class*="modal"] selectors are a safety net so the
   same fix applies to any plugin-rendered modal (Complianz, etc.)
   that may load its content on this page.
   ============================================================ */
.lp-modal__body,
.legal-modal__content,
.legal-modal-content,
.modal-content,
.modal-body,
[class*="modal"] [class*="content"] {
  direction: ltr !important;
  overflow-y: auto !important;
  /* Phase 11.5 (Fix E): breathing room on the right so the scrollbar
     doesn't visually overlap content (e.g. ordered-list section numbers
     like "18." "19." were getting clipped under the scrollbar track). */
  padding-right: 16px !important;
}

.lp-modal__body > *,
.legal-modal__content > *,
.legal-modal-content > *,
.modal-content > *,
.modal-body > *,
[class*="modal"] [class*="content"] > * {
  direction: rtl !important;
  text-align: right !important;
}