/* ✅ Fix: modals krijgen blur/dim achtergrond + glass card look */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  /* 1) Fullscreen overlays (meest voorkomende modal wrappers) */
  [role="dialog"]::before,
  [aria-modal="true"]::before,
  .modal::before,
  .popup::before,
  .dialog::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.60);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: -1;
  }

  /* 2) Modal panel/card zelf (glassy) */
  [role="dialog"],
  [aria-modal="true"],
  .modal,
  .popup,
  .dialog {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.65) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 16px;
  }
}

/* ✅ Premium Text Block (alleen voor .text-block component) */
.text-block .py-6.lg\:py-8 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

/* container max width + center */
.text-block > .py-6 > .mb-4,
.text-block > .py-6 > .bg-card,
.text-block > .py-6 > div:last-child {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* background card (als show_background aan staat) */
.text-block .bg-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0,0,0,.40);
  padding: 22px !important;
}

/* subtle top glow */
.text-block .bg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 200px at 20% 0%, rgba(255,255,255,.08), transparent 60%);
  pointer-events: none;
}

/* title wrapper spacing */
.text-block .mb-4 {
  margin-bottom: 14px !important;
}

/* title style: weg met harde border-left, maak het strak */
.text-block h2 {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-size: 22px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
  padding-left: 0 !important;
  border-left: 0 !important;
}

/* kleine accent pill/line voor de title */
.text-block h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgb(var(--cl-accent));
  box-shadow: 0 0 0 4px rgba(var(--cl-accent), .18);
  display: inline-block;
}

/* paragraph typography */
.text-block p {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,.72) !important;
}

/* buttons row iets netter */
.text-block .mt-4 {
  margin-top: 16px !important;
}

/* als content center/right is: buttons netjes mee */
.text-block .items-center + .mx-auto,
.text-block .items-end + .ml-auto {
  width: 100%;
}

/* mobile padding refinement */
@media (max-width: 640px) {
  .text-block .bg-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }
  .text-block h2 {
    font-size: 20px !important;
  }
}