/*
 * Bel-mij-terug — kleine knop onder het telefoonblok + popup (native <dialog>).
 * Het formulier in de popup staat in .contact-form en erft daardoor de
 * bestaande Gravity Forms-styling (velden, select, verzendknop).
 */

/* ----------------------------------------
 * Trigger-knop (in de info-sidebar)
 * ---------------------------------------- */

.callback-trigger {
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  margin-top:       var(--space-3);
  padding:          9px 16px;
  background-color: var(--color-bg-accent-soft);
  color:            var(--color-accent);
  border:           1px solid transparent;
  border-radius:    var(--radius-full);
  font-family:      var(--font-heading);
  font-size:        13.5px;
  font-weight:      var(--font-semibold);
  line-height:      1;
  cursor:           pointer;
  transition:       background-color var(--transition-fast),
                    color var(--transition-fast),
                    box-shadow var(--transition-fast),
                    transform var(--transition-fast);
}

.callback-trigger svg {
  width:  15px;
  height: 15px;
}

.callback-trigger:hover,
.callback-trigger:focus-visible {
  background-color: var(--color-accent);
  color:            #ffffff;
  outline:          none;
  box-shadow:       var(--shadow-primary-hover);
  transform:        translateY(-1px);
}

/* ----------------------------------------
 * Popup (native <dialog>)
 * ---------------------------------------- */

.callback-modal {
  /* margin:auto centreert de modal in beeld; de theme-reset (* { margin:0 })
   * overschrijft anders de standaard auto-marge van <dialog> → linksboven. */
  margin:        auto;
  width:         min(460px, calc(100vw - 32px));
  max-width:     460px;
  max-height:    calc(100vh - 40px);
  padding:       0;
  border:        none;
  border-radius: 18px;
  background:    var(--color-bg-white);
  box-shadow:    0 24px 60px rgba(26, 31, 33, 0.28);
  color:         var(--color-text-body);
  overflow:      auto;
}

.callback-modal::backdrop {
  background:       rgba(26, 31, 33, 0.55);
  backdrop-filter:  blur(2px);
}

/* Subtiele in-animatie */
.callback-modal[open] {
  animation: callback-modal-in var(--transition-base);
}

@keyframes callback-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.callback-modal__panel {
  position: relative;
  padding:  var(--space-8);
}

.callback-modal__close {
  position:        absolute;
  top:             14px;
  right:           14px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  padding:         0;
  border:          none;
  border-radius:   var(--radius-full);
  background:      var(--color-bg-section);
  color:           var(--color-text-meta);
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast);
}

.callback-modal__close:hover,
.callback-modal__close:focus-visible {
  background: var(--color-border);
  color:      var(--color-text-heading);
  outline:    none;
}

.callback-modal__close svg {
  width:  18px;
  height: 18px;
}

.callback-modal__title {
  margin:         0 0 var(--space-2);
  padding-right:  44px;
  font-size:      22px;
  font-weight:    var(--font-extrabold);
  letter-spacing: -0.4px;
  color:          var(--color-text-heading);
}

.callback-modal__intro {
  margin:      0 0 var(--space-6);
  font-size:   var(--text-sm);
  line-height: 1.55;
  color:       var(--color-text-meta);
}

@media (max-width: 480px) {
  .callback-modal__panel {
    padding: var(--space-6);
  }
}