/* Audinc native booking wizard — replaces the old Trafft iframe.
   Scoped under .ab- so it never clashes with the landing page styles.
   Inherits the page's CSS vars where present, with on-brand fallbacks. */

.ab-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 20, 35, .55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s ease;
  padding: 16px;
}
.ab-overlay.ab-active { display: flex; }
.ab-overlay.ab-visible { opacity: 1; }

.ab-modal {
  background: var(--white, #fff);
  width: 100%; max-width: 560px; max-height: 92vh;
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,.12));
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(16px); transition: transform .25s ease;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}
.ab-overlay.ab-visible .ab-modal { transform: translateY(0); }

.ab-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.ab-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--dark, #1a1a2e); line-height: 1.3; }
.ab-header h3 span { font-weight: 500; color: var(--text-light, #666); font-size: 14px; }
.ab-close { background: none; border: 0; cursor: pointer; color: var(--text-light, #666); padding: 4px; line-height: 0; border-radius: 8px; }
.ab-close:hover { color: var(--dark, #1a1a2e); background: #f2f2f2; }

.ab-steps { display: flex; gap: 6px; padding: 12px 20px 0; flex-shrink: 0; }
.ab-steps .ab-dot { flex: 1; height: 4px; border-radius: 4px; background: #e6e6e6; transition: background .2s; }
.ab-steps .ab-dot.on { background: var(--orange, #f26722); }

.ab-body { padding: 16px 20px 20px; overflow-y: auto; flex: 1; }
.ab-stepTitle { font-size: 15px; font-weight: 600; color: var(--dark, #1a1a2e); margin: 4px 0 12px; }

.ab-back { background: none; border: 0; color: var(--text-light, #666); cursor: pointer; font-size: 13px; padding: 4px 0; margin-bottom: 4px; display: inline-flex; align-items: center; gap: 4px; }
.ab-back:hover { color: var(--orange, #f26722); }

.ab-catLabel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-light, #666); margin: 14px 0 8px; }
.ab-catLabel:first-child { margin-top: 0; }

.ab-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid #e6e6e6; border-radius: 10px; background: #fff;
  padding: 12px 14px; margin-bottom: 8px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ab-card:hover { border-color: var(--orange, #f26722); box-shadow: 0 2px 10px rgba(242,103,34,.12); }
.ab-card .ab-cardMain { min-width: 0; }
.ab-card .ab-cardName { font-weight: 600; font-size: 14px; color: var(--dark, #1a1a2e); }
.ab-card .ab-cardMeta { font-size: 12.5px; color: var(--text-light, #666); margin-top: 2px; }
.ab-card .ab-chev { color: var(--orange, #f26722); flex-shrink: 0; }

.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chip {
  border: 1px solid #e0e0e0; background: #fff; border-radius: 8px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--dark, #1a1a2e);
  transition: all .15s;
}
.ab-chip:hover { border-color: var(--orange, #f26722); }
.ab-chip.on { border-color: var(--orange, #f26722); background: var(--orange-light, #fff3ec); color: var(--orange-dark, #d4551a); font-weight: 600; }

.ab-locNote { display: flex; align-items: flex-start; gap: 9px; background: var(--bg-light, #f8f8f8); border-radius: 10px; padding: 11px 13px; margin-bottom: 18px; font-size: 13px; line-height: 1.4; }
.ab-locNote svg { color: var(--orange, #f26722); flex-shrink: 0; margin-top: 1px; }
.ab-locNote strong { color: var(--dark, #1a1a2e); font-weight: 600; display: block; }
.ab-locNote span { color: var(--text-light, #666); }

.ab-daterow { margin-bottom: 16px; }
.ab-daterow .ab-lbl { font-size: 12.5px; font-weight: 600; color: var(--text-light,#666); margin-bottom: 8px; }

.ab-field { margin-bottom: 12px; }
.ab-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--dark, #1a1a2e); margin-bottom: 5px; }
.ab-field input, .ab-field textarea {
  width: 100%; border: 1px solid #dcdcdc; border-radius: 8px; padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--text, #333); background: #fff; box-sizing: border-box;
}
.ab-field input:focus, .ab-field textarea:focus { outline: none; border-color: var(--orange, #f26722); box-shadow: 0 0 0 3px rgba(242,103,34,.12); }
.ab-field.ab-half { display: inline-block; width: calc(50% - 5px); }
.ab-field.ab-half + .ab-field.ab-half { margin-left: 10px; }
.ab-err { color: #d4351c; font-size: 12px; margin-top: 4px; }

.ab-summary { background: var(--bg-light, #f8f8f8); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; }
.ab-summary .ab-srow { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ab-summary .ab-srow span:first-child { color: var(--text-light, #666); }
.ab-summary .ab-srow span:last-child { color: var(--dark, #1a1a2e); font-weight: 600; text-align: right; }

.ab-submit {
  width: 100%; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--green, #10bf0c); color: #fff; font-weight: 700; font-size: 15px;
  padding: 14px; font-family: inherit; transition: background .15s;
}
.ab-submit:hover { background: var(--green-dark, #0ea00b); }
.ab-submit:disabled { opacity: .6; cursor: not-allowed; }

.ab-trust { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 12px 20px; border-top: 1px solid #eee; flex-shrink: 0; font-size: 12px; color: var(--text-light, #666); }

.ab-center { text-align: center; padding: 24px 8px; }
.ab-center .ab-checkC { width: 56px; height: 56px; border-radius: 50%; background: var(--green, #10bf0c); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px; }
.ab-center h4 { margin: 0 0 6px; font-size: 18px; color: var(--dark, #1a1a2e); }
.ab-center p { margin: 0; color: var(--text-light, #666); font-size: 14px; }

/* Bevestiging / bedankscherm */
.ab-confirm { padding: 8px 2px 4px; }
.ab-confirm .ab-checkC { width: 56px; height: 56px; border-radius: 50%; background: var(--green, #10bf0c); display: flex; align-items: center; justify-content: center; color: #fff; margin: 4px auto 12px; }
.ab-confirm h4 { margin: 0 0 4px; font-size: 19px; color: var(--dark, #1a1a2e); text-align: center; }
.ab-confirm .ab-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--text-light, #666); text-align: center; }
.ab-cDetails { background: var(--bg-light, #f8f8f8); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.ab-cRow { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: 14px; line-height: 1.4; }
.ab-cRow + .ab-cRow { border-top: 1px solid #ececec; }
.ab-cRow svg { color: var(--orange, #f26722); flex-shrink: 0; margin-top: 2px; }
.ab-cRow .ab-cMain strong { display: block; color: var(--dark, #1a1a2e); font-weight: 600; }
.ab-cRow .ab-cMain span { color: var(--text-light, #666); font-size: 13px; }
.ab-cRow .ab-cMain a { color: var(--orange-dark, #d4551a); text-decoration: none; font-weight: 600; font-size: 13px; }
.ab-cNext { font-size: 13.5px; color: var(--text, #333); margin: 0 2px 18px; }
.ab-cNext .ab-cStep { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; }
.ab-cNext .ab-cStep svg { color: var(--green, #10bf0c); flex-shrink: 0; margin-top: 1px; }
.ab-cBtn { display: block; text-align: center; background: var(--orange, #f26722); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 14px; border-radius: 10px; }
.ab-cBtn:hover { background: var(--orange-dark, #d4551a); }

.ab-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: ab-rot .7s linear infinite; vertical-align: middle; }
.ab-loadRow { display: flex; align-items: center; gap: 10px; color: var(--text-light, #666); font-size: 13.5px; padding: 20px 4px; justify-content: center; }
.ab-loadRow .ab-spin { border-color: rgba(0,0,0,.15); border-top-color: var(--orange, #f26722); }
@keyframes ab-rot { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .ab-modal { max-height: 96vh; }
  .ab-field.ab-half, .ab-field.ab-half + .ab-field.ab-half { display: block; width: 100%; margin-left: 0; }
}