/* =====================================================================
   Rijschool Van Noort — Modal / Pop-up runtime styles
   Shared by the live website AND the admin live-preview, so what the
   admin sees is exactly what visitors get.

   Everything is scoped under .rvnm-root and uses CSS variables that the
   renderer sets inline per modal:
     --rvnm-accent, --rvnm-text, --rvnm-overlay, --rvnm-width, --rvnm-radius
   ===================================================================== */

.rvnm-root,
.rvnm-root *,
.rvnm-root *::before,
.rvnm-root *::after {
  box-sizing: border-box;
}

.rvnm-root {
  --rvnm-accent: #e94560;
  --rvnm-text: #1f2937;
  --rvnm-overlay: 0.6;
  --rvnm-width: 520px;
  --rvnm-radius: 16px;

  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--rvnm-text);
  -webkit-font-smoothing: antialiased;
}

/* Non-blocking styles never trap the page: clicks pass through the root,
   only the card itself is interactive. */
.rvnm-root.rvnm-inline {
  pointer-events: none;
  padding: 0;
}
.rvnm-root.rvnm-inline .rvnm-dialog { pointer-events: auto; }

/* ----- Overlay (blocking styles only) ----- */
.rvnm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 24, var(--rvnm-overlay));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.rvnm-root.rvnm-inline .rvnm-overlay { display: none; }

/* ----- Dialog (shared shell) ----- */
.rvnm-dialog {
  position: relative;
  width: var(--rvnm-width);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #ffffff;
  border-radius: var(--rvnm-radius);
  box-shadow: 0 24px 70px rgba(8, 12, 30, 0.35);
  overflow-wrap: break-word;
}

/* ----- Close button ----- */
.rvnm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a2e;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background 0.15s ease;
}
.rvnm-close:hover { transform: scale(1.08); background: #fff; }
.rvnm-close:focus-visible { outline: 3px solid var(--rvnm-accent); outline-offset: 2px; }

/* ----- Media ----- */
.rvnm-media { margin: 0; line-height: 0; }
.rvnm-img { display: block; width: 100%; height: auto; object-fit: cover; }

/* ----- Content ----- */
.rvnm-content { padding: 28px; }
.rvnm-title {
  margin: 0 0 8px;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  color: inherit;
}
.rvnm-subtitle {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.7;
}
.rvnm-body {
  font-size: 1rem;
  line-height: 1.6;
  color: inherit;
}
.rvnm-body :first-child { margin-top: 0; }
.rvnm-body :last-child { margin-bottom: 0; }
.rvnm-body p { margin: 0 0 0.7em; }
.rvnm-body a { color: var(--rvnm-accent); text-decoration: underline; }
.rvnm-body h1, .rvnm-body h2, .rvnm-body h3,
.rvnm-body h4, .rvnm-body h5, .rvnm-body h6 { margin: 0.4em 0 0.4em; line-height: 1.25; }
.rvnm-body ul, .rvnm-body ol { margin: 0 0 0.7em; padding-left: 1.4em; }
.rvnm-body blockquote {
  margin: 0 0 0.7em;
  padding: 0.4em 0 0.4em 1em;
  border-left: 4px solid var(--rvnm-accent);
  opacity: 0.85;
}
.rvnm-body .ql-align-center { text-align: center; }
.rvnm-body .ql-align-right { text-align: right; }
.rvnm-body .ql-align-justify { text-align: justify; }

/* ----- Actions / buttons ----- */
.rvnm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.rvnm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rvnm-btn:hover { transform: translateY(-1px); }
.rvnm-btn--primary {
  background: var(--rvnm-accent);
  color: #fff;
  box-shadow: 0 8px 20px -8px var(--rvnm-accent);
}
.rvnm-btn--primary.rvnm-btn--outline {
  background: transparent;
  color: var(--rvnm-accent);
  border-color: var(--rvnm-accent);
  box-shadow: none;
}
.rvnm-btn--secondary {
  background: transparent;
  color: var(--rvnm-text);
  border-color: rgba(0, 0, 0, 0.18);
}
.rvnm-btn--secondary:hover { border-color: rgba(0, 0, 0, 0.4); }

/* =====================================================================
   Positioning (blocking styles)
   ===================================================================== */
.rvnm-root.rvnm-pos--top { align-items: flex-start; }
.rvnm-root.rvnm-pos--top .rvnm-dialog { margin-top: 4vh; }
.rvnm-root.rvnm-pos--bottom-right { align-items: flex-end; justify-content: flex-end; }
.rvnm-root.rvnm-pos--bottom-left { align-items: flex-end; justify-content: flex-start; }

/* =====================================================================
   STYLE: center (classic)  — uses the shared shell as-is
   ===================================================================== */

/* =====================================================================
   STYLE: spotlight — bold, image-led
   ===================================================================== */
.rvnm--spotlight .rvnm-dialog { --rvnm-width: 600px; text-align: center; }
.rvnm--spotlight .rvnm-media .rvnm-img { max-height: 280px; }
.rvnm--spotlight .rvnm-content { padding: 34px 38px 38px; }
.rvnm--spotlight .rvnm-title { font-size: 2rem; }
.rvnm--spotlight .rvnm-actions { justify-content: center; }
.rvnm--spotlight.rvnm-img--top .rvnm-content {
  margin-top: -28px;
  position: relative;
  background: #fff;
  border-radius: var(--rvnm-radius) var(--rvnm-radius) 0 0;
}

/* =====================================================================
   STYLE: split — image left, content right
   ===================================================================== */
.rvnm--split .rvnm-dialog {
  --rvnm-width: 860px;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: stretch;
}
.rvnm--split .rvnm-media { height: 100%; }
.rvnm--split .rvnm-media .rvnm-img { height: 100%; min-height: 320px; }
.rvnm--split .rvnm-content { padding: 38px; display: flex; flex-direction: column; justify-content: center; }
.rvnm--split.rvnm-img--none .rvnm-dialog,
.rvnm--split:not([data-has-image]) .rvnm-dialog { grid-template-columns: 1fr; }

/* =====================================================================
   STYLE: minimal — compact, no image
   ===================================================================== */
.rvnm--minimal .rvnm-dialog { --rvnm-width: 420px; }
.rvnm--minimal .rvnm-media { display: none; }
.rvnm--minimal .rvnm-content { padding: 30px; }
.rvnm--minimal .rvnm-title { font-size: 1.35rem; }

/* =====================================================================
   STYLE: fullscreen — takeover
   ===================================================================== */
.rvnm--fullscreen { padding: 0; }
.rvnm--fullscreen .rvnm-overlay { background: rgba(10, 12, 24, 0.96); backdrop-filter: none; }
.rvnm--fullscreen .rvnm-dialog {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.rvnm--fullscreen .rvnm-media { max-width: 540px; width: 80%; margin: 0 auto 8px; }
.rvnm--fullscreen .rvnm-media .rvnm-img { border-radius: 14px; max-height: 40vh; }
.rvnm--fullscreen .rvnm-content { max-width: 680px; color: #fff; }
.rvnm--fullscreen .rvnm-title { font-size: 2.6rem; }
.rvnm--fullscreen .rvnm-subtitle { opacity: 0.85; }
.rvnm--fullscreen .rvnm-actions { justify-content: center; }
.rvnm--fullscreen .rvnm-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.rvnm--fullscreen .rvnm-close { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* =====================================================================
   STYLE: slide-in — corner card (non-blocking)
   ===================================================================== */
/* Default to the bottom-LEFT corner so it never covers the bottom-right
   WhatsApp float button; admins can opt into the right corner via position. */
.rvnm--slide-in { align-items: flex-end; justify-content: flex-start; padding: 22px; }
.rvnm--slide-in.rvnm-pos--bottom-left { justify-content: flex-start; }
.rvnm--slide-in.rvnm-pos--bottom-right { justify-content: flex-end; }
.rvnm--slide-in .rvnm-dialog {
  --rvnm-width: 360px;
  box-shadow: 0 18px 50px rgba(8, 12, 30, 0.28);
}
.rvnm--slide-in .rvnm-media .rvnm-img { max-height: 150px; }
.rvnm--slide-in .rvnm-content { padding: 20px 22px; }
.rvnm--slide-in .rvnm-title { font-size: 1.2rem; }
.rvnm--slide-in .rvnm-actions { margin-top: 16px; }
.rvnm--slide-in .rvnm-btn { padding: 9px 16px; font-size: 0.92rem; }

/* =====================================================================
   STYLE: bottom-bar / top-banner — full-width strips (non-blocking)
   ===================================================================== */
.rvnm--bottom-bar,
.rvnm--top-banner { padding: 0; }
.rvnm--bottom-bar { align-items: flex-end; }
.rvnm--top-banner { align-items: flex-start; }

.rvnm--bottom-bar .rvnm-dialog,
.rvnm--top-banner .rvnm-dialog {
  --rvnm-width: 100%;
  width: 100%;
  max-width: 100%;
  max-height: none;
  border-radius: 0;
  background: var(--rvnm-accent);
  color: #fff;
  box-shadow: 0 -6px 24px rgba(8, 12, 30, 0.2);
}
.rvnm--top-banner .rvnm-dialog { box-shadow: 0 6px 24px rgba(8, 12, 30, 0.2); }

.rvnm--bottom-bar .rvnm-media,
.rvnm--top-banner .rvnm-media { display: none; }

.rvnm--bottom-bar .rvnm-content,
.rvnm--top-banner .rvnm-content {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 56px 14px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.rvnm--bottom-bar .rvnm-title,
.rvnm--top-banner .rvnm-title { font-size: 1.05rem; margin: 0; }
.rvnm--bottom-bar .rvnm-subtitle,
.rvnm--top-banner .rvnm-subtitle { margin: 0; opacity: 0.9; }
.rvnm--bottom-bar .rvnm-body,
.rvnm--top-banner .rvnm-body { flex: 1 1 220px; min-width: 0; }
.rvnm--bottom-bar .rvnm-actions,
.rvnm--top-banner .rvnm-actions { margin: 0; }
.rvnm--bottom-bar .rvnm-btn--primary,
.rvnm--top-banner .rvnm-btn--primary { background: #fff; color: var(--rvnm-accent); box-shadow: none; }
.rvnm--bottom-bar .rvnm-btn--secondary,
.rvnm--top-banner .rvnm-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.rvnm--bottom-bar .rvnm-close,
.rvnm--top-banner .rvnm-close { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; }

/* =====================================================================
   Background-image variant (any blocking style)
   ===================================================================== */
.rvnm-img--background .rvnm-media { display: none; }
.rvnm-img--background .rvnm-dialog {
  background-size: cover;
  background-position: center;
  color: #fff;
}
.rvnm-img--background .rvnm-content {
  background: linear-gradient(180deg, rgba(10, 12, 24, 0.15), rgba(10, 12, 24, 0.82));
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.rvnm-img--background .rvnm-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

/* Left-image on non-split styles falls back to a top image visual */
.rvnm-img--left:not(.rvnm--split) .rvnm-media .rvnm-img { max-height: 260px; }

/* =====================================================================
   Animations
   ===================================================================== */
.rvnm-root { opacity: 0; transition: opacity 0.28s ease; }
.rvnm-root.is-open { opacity: 1; }
.rvnm-root.is-closing { opacity: 0; }

.rvnm-dialog { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease; }

.rvnm-anim--zoom .rvnm-dialog { transform: scale(0.9); opacity: 0; }
.rvnm-anim--zoom.is-open .rvnm-dialog { transform: scale(1); opacity: 1; }

.rvnm-anim--slide-up .rvnm-dialog { transform: translateY(40px); opacity: 0; }
.rvnm-anim--slide-up.is-open .rvnm-dialog { transform: translateY(0); opacity: 1; }

.rvnm-anim--slide-down .rvnm-dialog { transform: translateY(-40px); opacity: 0; }
.rvnm-anim--slide-down.is-open .rvnm-dialog { transform: translateY(0); opacity: 1; }

.rvnm-anim--fade .rvnm-dialog { opacity: 0; }
.rvnm-anim--fade.is-open .rvnm-dialog { opacity: 1; }

/* Corner / bar styles always slide from their edge regardless of anim choice */
.rvnm--slide-in .rvnm-dialog { transform: translateY(30px); opacity: 0; }
.rvnm--slide-in.is-open .rvnm-dialog { transform: translateY(0); opacity: 1; }
.rvnm--bottom-bar .rvnm-dialog { transform: translateY(100%); }
.rvnm--bottom-bar.is-open .rvnm-dialog { transform: translateY(0); }
.rvnm--top-banner .rvnm-dialog { transform: translateY(-100%); }
.rvnm--top-banner.is-open .rvnm-dialog { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .rvnm-root, .rvnm-dialog { transition: opacity 0.2s ease; }
  .rvnm-dialog { transform: none !important; }
}

/* Scroll lock applied to <body> by the runtime for blocking modals */
body.rvnm-scroll-lock { overflow: hidden !important; }

/* In the admin preview the modal re-renders on every keystroke, so suppress
   the open animation to avoid a distracting flash. */
.rvnm-root.rvnm-preview,
.rvnm-root.rvnm-preview .rvnm-dialog { transition: none !important; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 768px) {
  .rvnm-root { padding: 16px; }
  .rvnm--split .rvnm-dialog { grid-template-columns: 1fr; }
  .rvnm--split .rvnm-media .rvnm-img { min-height: 180px; max-height: 220px; }
  .rvnm--spotlight .rvnm-title { font-size: 1.6rem; }
  .rvnm--fullscreen .rvnm-title { font-size: 1.9rem; }
  .rvnm-content { padding: 22px; }
  .rvnm--slide-in { padding: 12px; }
  .rvnm--slide-in .rvnm-dialog { --rvnm-width: calc(100vw - 24px); }
  .rvnm--bottom-bar .rvnm-content,
  .rvnm--top-banner .rvnm-content { padding: 14px 48px 14px 18px; }
  .rvnm-actions .rvnm-btn { flex: 1 1 auto; }
}

/* =====================================================================
   Admin live-preview scoping
   The preview renders the modal inside an <iframe>, so .rvnm-root keeps
   its real fixed positioning. The .rvnm-preview-page below just provides
   a faux page background inside that iframe.
   ===================================================================== */
.rvnm-preview-page {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, #eef1f6 0%, #e2e7f0 100%);
  font-family: 'Poppins', system-ui, sans-serif;
}
.rvnm-preview-page .rvnm-skeleton {
  padding: 28px;
  opacity: 0.55;
}
.rvnm-preview-page .rvnm-skeleton .bar {
  height: 14px;
  border-radius: 7px;
  background: #c7cedb;
  margin-bottom: 14px;
}
.rvnm-preview-page .rvnm-skeleton .bar.w70 { width: 70%; }
.rvnm-preview-page .rvnm-skeleton .bar.w40 { width: 40%; }
.rvnm-preview-page .rvnm-skeleton .bar.tall { height: 180px; border-radius: 14px; }