/* De Thermo Mann - contactvenster (4 nov 2026). Zie dtm-contact-dialog.js */

/* ---------- Venster ---------- */
.dtmc[hidden], .dtmc [hidden] { display: none !important; }
.dtmc { position: fixed; inset: 0; z-index: 100010; outline: none; font-family: var(--awb-typography4-font-family, Inter), Arial, sans-serif; }
.admin-bar .dtmc { top: 32px; }
@media (max-width: 782px) { .admin-bar .dtmc { top: 46px; } }

.dtmc__bg { position: absolute; inset: 0; overflow: hidden; background: rgba(27, 31, 37, 0.9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.dtmc__glow { position: absolute; left: 50%; top: 50%; width: 36rem; height: 36rem; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(27, 99, 173, 0.35); filter: blur(140px); }

/* Intro: logo groeit */
.dtmc__intro { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 24px; pointer-events: none; }
.dtmc__intro-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dtmc__intro img { width: clamp(150px, 22vw, 240px); height: auto; }
.dtmc__intro span { margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--awb-color4, #55cce5); }

.dtmc__sr-close { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dtmc__sr-close:focus { width: auto; height: auto; clip: auto; top: 16px; right: 16px; padding: 8px 14px; border-radius: 20px; background: #fff; color: #2b2e32; border: 0; z-index: 2; }

/* Formulier vouwt open */
.dtmc__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.dtmc__center { display: flex; min-height: 100%; align-items: center; justify-content: center; padding: 32px; box-sizing: border-box; }
.dtmc__panel { position: relative; width: 100%; max-width: 1120px; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 60px 140px -40px rgba(0, 0, 0, 0.75); }
.dtmc__panel:before { content: ""; position: absolute; right: -160px; top: -160px; width: 30rem; height: 30rem; border-radius: 50%; background: rgba(85, 204, 229, 0.18); filter: blur(120px); pointer-events: none; }
.dtmc__inner { position: relative; }

.dtmc__head { position: relative; display: flex; align-items: center; justify-content: center; padding: 22px 88px; border-bottom: 1px solid #eaeaea; }
.dtmc__logo { display: block; height: 68px; width: auto; }
.dtmc__close { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #eaeaea; background: #fff; color: #2b2e32; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.dtmc__close:hover { background: var(--awb-color5, #1b63ad); border-color: var(--awb-color5, #1b63ad); color: #fff; }
.dtmc__close:focus { outline: none; }
.dtmc__close:focus-visible { outline: 2px solid var(--awb-color4, #55cce5); outline-offset: 2px; }

.dtmc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding: 32px 40px 40px 32px; background: #f6f6f6; }
.dtmc__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--awb-color5, #1b63ad); }
.dtmc__title { margin: 14px 0 0 !important; font-family: var(--awb-typography1-font-family, Montserrat), Arial, sans-serif !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.015em !important; color: #2b2e32 !important; }
.dtmc__title span { color: var(--awb-color5, #1b63ad); }
.dtmc__lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: #494949; }
.dtmc__sub { margin: 36px 0 0 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase; color: #8a8f96 !important; }
.dtmc__steps { list-style: none; margin: 18px 0 0; padding: 0; }
.dtmc__steps li { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; color: #2b2e32; font-size: 15px; }
.dtmc__steps li span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(27, 99, 173, 0.35); color: var(--awb-color5, #1b63ad); font-size: 12px; font-weight: 700; }
.dtmc__contact { margin-top: 36px; }
.dtmc__contact a { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #2b2e32 !important; text-decoration: none !important; font-size: 15px; }
.dtmc__contact a svg { color: var(--awb-color5, #1b63ad); flex: none; }
.dtmc__contact a:hover { color: var(--awb-color5, #1b63ad) !important; }

/* Linkerkolom: DTM-blauwe kaart met foto (zoals het infoblok op /contact/) */
.dtmc__info { align-self: start; overflow: hidden; border-radius: 24px; background: linear-gradient(165deg, #1b63ad 0%, #154f8c 100%); color: #fff; box-shadow: 0 24px 50px -24px rgba(27, 99, 173, 0.6); }
.dtmc__photo { position: relative; height: 170px; background: #9a9ca6 url("https://dethermomann.nl/wp-content/uploads/2025/06/Voorbeeld2.jpg") center 60% / cover no-repeat; }
.dtmc__photo:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 99, 173, 0) 40%, rgba(27, 99, 173, 0.95) 100%); }
.dtmc__info-body { padding: 8px 28px 30px; }
.dtmc__info .dtmc__eyebrow { color: var(--awb-color4, #55cce5); }
.dtmc__info .dtmc__title { color: #fff !important; }
.dtmc__info .dtmc__title span { color: var(--awb-color4, #55cce5); }
.dtmc__info .dtmc__lead { color: rgba(255, 255, 255, 0.88); font-size: 16px; }
.dtmc__info .dtmc__sub { margin-top: 28px !important; color: rgba(255, 255, 255, 0.6) !important; }
.dtmc__info .dtmc__steps li { color: #fff; }
.dtmc__info .dtmc__steps li span { border-color: rgba(85, 204, 229, 0.6); color: var(--awb-color4, #55cce5); background: rgba(255, 255, 255, 0.06); }
.dtmc__info .dtmc__contact { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.dtmc__info .dtmc__contact a { color: #fff !important; }
.dtmc__info .dtmc__contact a svg { color: var(--awb-color4, #55cce5); }
.dtmc__info .dtmc__contact a:hover { color: var(--awb-color4, #55cce5) !important; }

.dtmc__form { position: relative; min-height: 420px; }
.dtmc__iframe { display: block; width: 100%; height: 520px; border: 0; opacity: 0; transition: opacity .3s ease; }
.dtmc__form.is-loaded .dtmc__iframe { opacity: 1; }
.dtmc__form.is-loaded .dtmc__loading { display: none; }
.dtmc__loading { position: absolute; inset: 0; display: grid; place-items: center; color: #aaaaaa; font-size: 14px; }

@media (max-width: 900px) {
  .dtmc__center { padding: 12px; }
  .dtmc__head { padding: 16px 64px; }
  .dtmc__logo { height: 50px; }
  .dtmc__close { right: 14px; }
  .dtmc__grid { grid-template-columns: 1fr; gap: 24px; padding: 16px 14px 24px; }
  .dtmc__photo { height: 120px; }
  .dtmc__info-body { padding: 4px 20px 22px; }
  .dtmc__title { font-size: 28px !important; }
  .dtmc__sub, .dtmc__steps { display: none; }
  .dtmc__contact { margin-top: 20px; }
}

/* ---------- In het iframe: alleen het formulier ---------- */
html.dtm-embed { margin-top: 0 !important; overflow-x: hidden; }
html.dtm-embed, html.dtm-embed body, html.dtm-embed #wrapper, html.dtm-embed #boxed-wrapper, html.dtm-embed #main { background: transparent !important; }
html.dtm-embed body { margin: 0 !important; padding: 0 !important; }
.dtm-embed #wpadminbar,
.dtm-embed .fusion-tb-header,
.dtm-embed .fusion-header-wrapper,
.dtm-embed #sliders-container,
.dtm-embed .avada-page-titlebar-wrapper,
.dtm-embed .fusion-page-title-bar,
.dtm-embed .fusion-tb-footer,
.dtm-embed .fusion-footer,
.dtm-embed .cmplz-cookiebanner,
.dtm-embed #cmplz-manage-consent,
.dtm-embed .cmplz-manage-consent,
.dtm-embed .fusion-sliding-bar-wrapper,
.dtm-embed .awb-off-canvas-wrap,
.dtm-embed .to-top-container,
.dtm-embed #toTop,
.dtm-embed .dtm-hulp,
.dtm-embed .post-content > .fusion-fullwidth:not(:has(.fusion-form)),
.dtm-embed .post-content > .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:not(:has(.fusion-form)),
.dtm-embed .post-content > .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:has(.fusion-form) > .fusion-column-wrapper > .fusion-title,
.dtm-embed .post-content > .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:has(.fusion-form) > .fusion-column-wrapper > .fusion-text,
.dtm-embed .post-content > .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:has(.fusion-form) > .fusion-column-wrapper > .fusion-separator { display: none !important; }
.dtm-embed #main { padding: 0 !important; margin: 0 !important; }
.dtm-embed .post-content > .fusion-fullwidth:has(.fusion-form) { padding: 0 2px !important; margin: 0 !important; min-height: 0 !important; }
.dtm-embed .post-content > .fusion-fullwidth:has(.fusion-form) > .fusion-builder-row { margin: 0 !important; width: 100% !important; max-width: none !important; }
.dtm-embed .post-content > .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:has(.fusion-form) { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin: 0 !important; padding: 0 !important; }
.dtm-embed .post-content > .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:has(.fusion-form) > .fusion-column-wrapper { padding: 0 !important; margin: 0 !important; }
.dtm-embed .post-content > .fusion-fullwidth:has(.fusion-form) { background: transparent !important; --awb-background-color: transparent !important; }
.dtm-embed .post-content > .fusion-fullwidth:has(.fusion-form) > .awb-background-pattern,
.dtm-embed .post-content > .fusion-fullwidth:has(.fusion-form) > .awb-background-mask { display: none !important; }
.dtm-embed .post-content > .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column:has(.fusion-form) > .fusion-column-wrapper { background: transparent !important; box-shadow: none !important; }