/*! Shipit Toog Theme — core styles
 * (c) 2026 Shipit Digital | https://shipitdigital.nl
 *
 * This file is a placeholder. Real Tailwind utilities + base/typography styles
 * are compiled into assets/css/dist/tailwind.min.css in Phase 2 of the migration.
 */

/* WoodMart-era stretch behaviour replacement.
 * The original site relied on WoodMart's `wd-section-stretch` class to make
 * Elementor full-width containers fill the viewport. With WoodMart gone we
 * have to ensure built-in `e-con-full` containers behave the same way.
 * Without this, Elementor's global Kit setting (max-width ≈ 1140) leaves
 * empty bands on the right of every section.
 */
.elementor-element.e-con-full,
.e-con.e-con-full {
  max-width: 100% !important;
  width: 100% !important;
}

/* Skip-to-content link (accessibility) */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:99999;background:#106CD8;color:#fff;font-size:14px;font-weight:700;padding:12px 24px;text-decoration:none;border-radius:0 0 8px 0}
.skip-link:focus{position:fixed;left:0;top:0;width:auto;height:auto;overflow:visible;clip:auto}

/* Focus styles (accessibility — visible keyboard navigation) */
*:focus-visible{outline:2px solid #106CD8!important;outline-offset:2px!important}
a:focus-visible,button:focus-visible{outline:2px solid #106CD8!important;outline-offset:2px!important}

/* =====================================================
 * FAQ ACCORDION — global, all pages
 *
 * Toog's FAQ markup uses <details class="group rounded-[1.6rem] border border-slate-200 bg-slate-50 ...">.
 * Each page's old inline <style> block (now hoisted below) defined slightly
 * different `.toog-X .faq-item` overrides which made the FAQ look subtly
 * different per page. These rules force a single canonical look that matches
 * the live toogvastgoed.nl site, regardless of page wrapper class.
 * ===================================================== */
details.group {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1.6rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  transition: box-shadow .2s ease, border-color .2s ease;
}
details.group[open] {
  box-shadow: 0 4px 16px 0 rgba(2, 6, 23, .06) !important;
  border-color: #cbd5e1 !important;
}
details.group > summary,
details.group .faq-summary {
  cursor: pointer !important;
  list-style: none !important;
  padding: 20px 24px !important;
}
details.group > summary::-webkit-details-marker { display: none !important; }
details.group > summary::marker { display: none !important; content: '' !important; }

/* Animated body — the original Tailwind markup uses CSS Grid trick:
 * .faq-answer { display:grid; grid-template-rows:0fr; transition }
 * details[open] .faq-answer { grid-template-rows:1fr }
 * Make sure that works regardless of which per-page wrapper is in scope. */
details .faq-answer {
  display: grid !important;
  grid-template-rows: 0fr !important;
  transition: grid-template-rows .3s ease !important;
}
details[open] .faq-answer {
  grid-template-rows: 1fr !important;
}
details .faq-answer > div {
  overflow: hidden !important;
}
/* =====================================================
 * AUTO-HOISTED PAGE STYLES — Faz 2
 *
 * These rules were originally inlined as <style> blocks at the top
 * of each page's mega-HTML widget. They've been extracted, deduped,
 * and grouped by their page-wrapper class so the same CSS doesn't
 * ship N times. Faz 3's split script removes the <style> blocks
 * from the actual HTML widget content.
 * ===================================================== */

/* ----- .toog-about (used by 1 pages) ----- */
.toog-about .faq-item summary { cursor: pointer !important; }
.toog-about .faq-item summary::-webkit-details-marker { display: none !important; }
.toog-about .faq-item summary::marker { display: none !important; content: '' !important; }
.toog-about .faq-item { border: 1px solid #e2e8f0 !important; border-radius: 1rem !important; }
.toog-about .service-card { border: 1px solid #e2e8f0 !important; border-radius: 1.5rem !important; background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; transition: all 0.3s ease !important; }
.toog-about .service-card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 50px rgba(15,23,42,0.08) !important; }
.toog-about a { text-decoration: none !important; }
.toog-about h1, .toog-about h2, .toog-about h3, .toog-about h4 { padding: 0 !important; }
.toog-about img { max-width: 100% !important; height: auto !important; border: none !important; }
.toog-about p, .toog-about blockquote { border: none !important; border-left: none !important; padding-left: 0 !important; }
.toog-about ul, .toog-about ol { list-style: none !important; }
::after { box-sizing: border-box !important; }
@media (max-width: 640px) { .toog-about h1 { font-size: 1.75rem !important; line-height: 1.15 !important; } .toog-about h2 { font-size: 1.4rem !important; line-height: 1.2 !important; } }
details .faq-answer > div { overflow: hidden !important; }
details .faq-answer { display: grid !important; grid-template-rows: 0fr !important; transition: grid-template-rows 0.3s ease !important; }
details[open] .faq-answer { grid-template-rows: 1fr !important; }

/* ----- .toog-contact-form (used by 1 pages) ----- */
.cta-shimmer { position: relative; overflow: hidden; }
.cta-shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: cta-shimmer-anim 3s ease-in-out infinite; }
.faq-item summary { cursor: pointer !important; }
.faq-item summary::-webkit-details-marker { display: none !important; }
.faq-item summary::marker { display: none !important; content: '' !important; }
.faq-item { border: 1px solid #e2e8f0 !important; border-radius: 1.25rem !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; }
.faq-item:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important; }
.form-card { position: relative; overflow: visible; }
.form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(16,108,216,0.5), rgba(249,115,22,0.4), transparent); }
.glow-dot { width: 8px; height: 8px; border-radius: 50%; background: #F97316; box-shadow: 0 0 12px 4px rgba(249, 115, 22, 0.35); animation: pulse-glow 2.5s ease-in-out infinite; }
.hero-grain::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; }
.hero-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(16,108,216,0.4), rgba(249,115,22,0.3), transparent); background-size: 200% 100%; animation: shimmer-line 4s ease-in-out infinite; }
.info-card { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.info-card:hover { border-color: #cbd5e1 !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important; transform: translateY(-2px) !important; }
.toog-contact a { text-decoration: none !important; }
.toog-contact h1, .toog-contact h2, .toog-contact h3, .toog-contact h4 { padding: 0 !important; }
.toog-contact img { max-width: 100% !important; height: auto !important; border: none !important; }
.toog-contact p, .toog-contact blockquote { border: none !important; border-left: none !important; padding-left: 0 !important; }
.toog-contact section { margin-left: 0 !important; margin-right: 0 !important; }
.toog-contact ul, .toog-contact ol { list-style: none !important; }
.toog-contact-form .toog-field { position: relative; }
.toog-contact-form .toog-field, .toog-contact-form .wpcf7-form-control-wrap { overflow: visible !important; position: relative !important; }
.toog-contact-form .toog-field-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); margin-bottom: 0.5rem; }
.toog-contact-form .toog-privacy .wpcf7-list-item { margin: 0 !important; }
.toog-contact-form .toog-privacy input[type="checkbox"] { width: 18px !important; height: 18px !important; min-width: 18px !important; margin-top: 3px !important; border: 1.5px solid rgba(255,255,255,0.25) !important; border-radius: 5px !important; accent-color: #3b82f6 !important; cursor: pointer !important; background: rgba(255,255,255,0.07) !important; }
.toog-contact-form .toog-privacy label { font-size: 0.8125rem !important; line-height: 1.65 !important; color: rgba(255,255,255,0.55) !important; cursor: pointer !important; }
.toog-contact-form .toog-privacy { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0; background: transparent; border: none; border-radius: 0; }
.toog-contact-form .toog-row { display: flex; flex-direction: column; gap: 1.25rem; }
.toog-contact-form .toog-row { overflow: visible !important; }
.toog-contact-form .toog-row.two-col { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.toog-contact-form .toog-submit-wrap { margin-top: 0.75rem; }
.toog-contact-form .wpcf7-not-valid { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12) !important; }
.toog-contact-form .wpcf7-not-valid-tip { color: #fca5a5 !important; font-size: 0.8125rem !important; margin-top: 0.5rem !important; display: flex !important; align-items: center !important; gap: 0.375rem !important; }
.toog-contact-form .wpcf7-response-output { border: none !important; padding: 1rem 1.25rem !important; border-radius: 0.875rem !important; font-size: 0.875rem !important; margin-top: 1.25rem !important; color: #f1f5f9 !important; background: rgba(255,255,255,0.07) !important; }
.toog-contact-form .wpcf7-spinner { margin: 0.75rem auto 0 !important; display: block !important; }
.toog-contact-form input.toog-submit, .toog-contact-form .toog-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; width: 100% !important; padding: 1.0625rem 2.5rem !important; font-size: 0.9375rem !important; font-weight: 600 !important; color: #ffffff !important; background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; border: none !important; border-radius: 0.875rem !important; cursor: pointer !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important; letter-spacing: 0.01em !important; text-transform: none !important; position: relative !important; overflow: hidden !important; }
.toog-contact-form input.toog-submit:active, .toog-contact-form .toog-submit:active { transform: translateY(0) !important; box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3) !important; }
.toog-contact-form input.toog-submit:hover, .toog-contact-form .toog-submit:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af) !important; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255,255,255,0.12) !important; transform: translateY(-2px) !important; }
.toog-contact-form input::placeholder, .toog-contact-form textarea::placeholder { color: rgba(255,255,255,0.45) !important; font-weight: 400 !important; }
.toog-contact-form input:focus, .toog-contact-form textarea:focus, .toog-contact-form select:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; background: rgba(255,255,255,0.09) !important; }
.toog-contact-form input:hover, .toog-contact-form textarea:hover, .toog-contact-form select:hover { border-color: rgba(255,255,255,0.22) !important; background: rgba(255,255,255,0.09) !important; }
.toog-contact-form input[type="text"], .toog-contact-form input[type="email"], .toog-contact-form input[type="tel"], .toog-contact-form input[type="url"], .toog-contact-form input[type="number"], .toog-contact-form textarea, .toog-contact-form select { width: 100% !important; padding: 1rem 1.25rem !important; font-size: 0.9375rem !important; line-height: 1.5 !important; color: #f1f5f9 !important; background: rgba(255,255,255,0.07) !important; border: 1.5px solid rgba(255,255,255,0.14) !important; border-radius: 0.875rem !important; outline: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; font-family: inherit !important; -webkit-appearance: none !important; appearance: none !important; }
.toog-contact-form p { overflow: visible !important; height: auto !important; margin: 0 !important; }
.toog-contact-form select option { background: #1e293b !important; color: #f1f5f9 !important; padding: 0.5rem !important; }
.toog-contact-form select option { background: #1e293b !important; color: #f1f5f9 !important; padding: 0.75rem 1rem !important; font-size: 0.9375rem !important; }
.toog-contact-form select option:first-child { color: #94a3b8 !important; }
.toog-contact-form select, .toog-contact-shortcode select, .toog-contact-form .wpcf7-form-control.wpcf7-select { height: auto !important; min-height: 54px !important; padding: 0.875rem 2.75rem 0.875rem 1.25rem !important; line-height: 1.5 !important; display: block !important; position: relative !important; z-index: 10 !important; }
.toog-contact-form textarea { min-height: 140px !important; resize: vertical !important; }
.toog-contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.toog-contact-shortcode .toog-contact-form select, .toog-contact-form select, .toog-contact-form .wpcf7-form-control.wpcf7-select { color: #f1f5f9 !important; background-color: rgba(255,255,255,0.07) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23cbd5e1' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 1.125rem center !important; background-size: 16px !important; padding-right: 2.75rem !important; cursor: pointer !important; }
.toog-contact-shortcode .wpcf7-form, .toog-contact-shortcode { font-family: inherit !important; }
.trust-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.3); animation: trust-pulse 3s ease-in-out infinite; }
::after { box-sizing: border-box !important; }
@keyframes cta-shimmer-anim { 0% { left: -100%; } 100% { left: 200%; } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 12px 4px rgba(249, 115, 22, 0.35); } 50% { box-shadow: 0 0 20px 8px rgba(249, 115, 22, 0.5); } }
@keyframes shimmer-line { 0%, 100% { background-position: 200% 0; } 50% { background-position: -200% 0; } }
@keyframes trust-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (min-width: 640px) { .toog-contact-form .toog-row.two-col { grid-template-columns: 1fr 1fr; } }
details .faq-answer > div { overflow: hidden; }
details .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
details[open] .faq-answer { grid-template-rows: 1fr; }

/* ----- .toog-diensten (used by 1 pages) ----- */
.card-lift { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.card-lift:hover { transform: translateY(-6px) !important; box-shadow: 0 32px 64px -12px rgba(15, 23, 42, 0.14) !important; }
.faq-item summary { cursor: pointer !important; }
.faq-item summary::-webkit-details-marker { display: none !important; }
.faq-item summary::marker { display: none !important; content: '' !important; }
.faq-item { border: 1px solid #e2e8f0 !important; border-radius: 1.25rem !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; }
.faq-item:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important; }
.glow-dot { width: 8px; height: 8px; border-radius: 50%; background: #F97316; box-shadow: 0 0 12px 4px rgba(249, 115, 22, 0.35); animation: pulse-glow 2.5s ease-in-out infinite; }
.hero-grain::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; }
.link-underline { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; }
.link-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #106CD8; transition: width 0.3s ease; }
.link-underline:hover::after { width: 100%; }
.stat-number { font-variant-numeric: tabular-nums; }
.sub-card { border: 1px solid #e2e8f0 !important; border-radius: 1.25rem !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative; overflow: hidden; }
.sub-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #106CD8, #F97316); opacity: 0; transition: opacity 0.35s ease; border-radius: 4px 0 0 4px; }
.sub-card:hover { border-color: #cbd5e1 !important; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.1) !important; background: #ffffff !important; }
.sub-card:hover::before { opacity: 1; }
.text-gradient { background: linear-gradient(135deg, #106CD8 0%, #0a4fa3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.toog-diensten a { text-decoration: none !important; }
.toog-diensten h1, .toog-diensten h2, .toog-diensten h3, .toog-diensten h4 { padding: 0 !important; }
.toog-diensten img { max-width: 100% !important; height: auto !important; border: none !important; }
.toog-diensten p, .toog-diensten blockquote { border: none !important; border-left: none !important; padding-left: 0 !important; }
.toog-diensten section { margin-left: 0 !important; margin-right: 0 !important; }
.toog-diensten ul, .toog-diensten ol { list-style: none !important; }
::after { box-sizing: border-box !important; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 12px 4px rgba(249, 115, 22, 0.35); } 50% { box-shadow: 0 0 20px 8px rgba(249, 115, 22, 0.5); } }
details .faq-answer > div { overflow: hidden; }
details .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
details[open] .faq-answer { grid-template-rows: 1fr; }

/* ----- .toog-home (used by 1 pages) ----- */
.toog-home .faq-item summary { cursor: pointer !important; }
.toog-home .faq-item summary::-webkit-details-marker { display: none !important; }
.toog-home .faq-item summary::marker { display: none !important; content: '' !important; }
.toog-home .faq-item { border: 1px solid #e2e8f0 !important; border-radius: 1rem !important; }
.toog-home .service-card { border: 1px solid #e2e8f0 !important; border-radius: 1rem !important; background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; transition: all 0.3s ease !important; }
.toog-home .service-card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 50px rgba(15,23,42,0.08) !important; }
.toog-home .sub-service { border: 1px solid #e2e8f0 !important; border-radius: 0.75rem !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important; transition: all 0.2s ease !important; }
.toog-home .sub-service:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
.toog-home .trust-card { border: 1px solid #e2e8f0 !important; border-radius: 1rem !important; background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; }
.toog-home a { text-decoration: none !important; }
.toog-home h1, .toog-home h2, .toog-home h3, .toog-home h4 { padding: 0 !important; }
.toog-home img { max-width: 100% !important; height: auto !important; border: none !important; }
.toog-home p, .toog-home blockquote { border: none !important; border-left: none !important; padding-left: 0 !important; }
.toog-home section { margin-left: 0 !important; margin-right: 0 !important; }
.toog-home ul, .toog-home ol { list-style: none !important; }
::after { box-sizing: border-box !important; }
@media (max-width: 640px) { .toog-home h1 { font-size: 1.75rem !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; } .toog-home h2 { font-size: 1.4rem !important; line-height: 1.2 !important; } .toog-home .hero-section { padding-top: 3rem !important; padding-bottom: 3.5rem !important; } .toog-home .hero-desc { font-size: 0.9rem !important; line-height: 1.6 !important; } .toog-home .hero-checks { font-size: 0.8rem !important; gap: 0.5rem !important; flex-direction: column !important; align-items: center !important; } .toog-home .hero-buttons { flex-direction: column !important; gap: 0.625rem !important; } .toog-home .hero-buttons a { width: 100% !important; text-align: center !important; min-height: 48px !important; font-size: 0.9rem !important; } }
details .faq-answer > div { overflow: hidden !important; }
details .faq-answer { display: grid !important; grid-template-rows: 0fr !important; transition: grid-template-rows 0.3s ease !important; }
details[open] .faq-answer { grid-template-rows: 1fr !important; }

/* ----- .toog-offerte (used by 1 pages) ----- */
.form-card-glow { position: relative; }
.form-card-glow, .toog-form-card { overflow: visible !important; }
.form-card-glow::before { content: ''; position: absolute; inset: -1px; border-radius: 2rem; background: linear-gradient(135deg, #106CD8, #F97316, #106CD8); z-index: -1; opacity: 0.15; filter: blur(1px); }
.toog-field-error input, .toog-field-error select, .toog-field-error textarea { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.08) !important; animation: toogShake 0.4s ease; }
.toog-mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: #fff; border-top: 1px solid #e2e8f0; padding: 12px 16px; display: none; box-shadow: 0 -4px 20px rgba(15,23,42,0.08); }
.toog-multistep .toog-section { border: none !important; margin: 0 !important; padding: 0 !important; }
.toog-multistep .toog-section-header { display: none !important; }
.toog-nav-spacer { flex: 1; }
.toog-offerte .faq-item summary { cursor: pointer !important; }
.toog-offerte .faq-item summary::-webkit-details-marker { display: none !important; }
.toog-offerte .faq-item summary::marker { display: none !important; content: '' !important; }
.toog-offerte .faq-item { border: 1px solid #e2e8f0 !important; border-radius: 1rem !important; }
.toog-offerte .toog-nav-next br, .toog-offerte .toog-nav-back br { display: none !important; }
.toog-offerte .toog-nav-next i, .toog-offerte .toog-nav-back i { display: inline-block !important; font-size: 13px !important; line-height: 1 !important; vertical-align: middle !important; }
.toog-offerte .toog-nav-next span, .toog-offerte .toog-nav-back span { display: inline !important; line-height: 1 !important; vertical-align: middle !important; }
.toog-offerte .wpcf7-form.submitting input.wpcf7-submit, .toog-offerte .wpcf7-form.invalid input.wpcf7-submit, .toog-offerte .wpcf7-form.failed input.wpcf7-submit, .toog-offerte .wpcf7-form.sent input.wpcf7-submit { color: #fff !important; background: linear-gradient(135deg, #F97316, #ea580c) !important; opacity: 1 !important; font-size: 14px !important; font-weight: 700 !important; height: 46px !important; padding: 0 24px !important; border-radius: 12px !important; border: none !important; text-transform: none !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; width: auto !important; overflow: visible !important; box-shadow: 0 4px 14px rgba(249,115,22,0.25) !important; }
.toog-offerte a { text-decoration: none !important; }
.toog-offerte h1, .toog-offerte h2, .toog-offerte h3, .toog-offerte h4 { padding: 0 !important; }
.toog-offerte img { max-width: 100% !important; height: auto !important; border: none !important; }
.toog-offerte input.wpcf7-submit, .toog-offerte .wpcf7-form input.wpcf7-submit, .toog-offerte .wpcf7-form.submitting input.wpcf7-submit, .toog-offerte .wpcf7-form.invalid input.wpcf7-submit, .toog-offerte .wpcf7-form.failed input.wpcf7-submit, .toog-offerte .wpcf7-form.sent input.wpcf7-submit, .toog-offerte .wpcf7-form.init input.wpcf7-submit { color: #fff !important; background: linear-gradient(135deg, #F97316, #ea580c) !important; opacity: 1 !important; font-size: 14px !important; font-weight: 700 !important; height: 46px !important; padding: 0 24px !important; border-radius: 12px !important; border: none !important; text-transform: none !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; width: auto !important; overflow: visible !important; box-shadow: 0 4px 14px rgba(249,115,22,0.25) !important; cursor: pointer !important; font-family: inherit !important; line-height: 1.4 !important; text-indent: 0 !important; -webkit-text-fill-color: #fff !important; }
.toog-offerte p { border: none !important; border-left: none !important; padding-left: 0 !important; }
.toog-offerte ul, .toog-offerte ol { list-style: none !important; }
.toog-offerte-form .toog-field label .req, .toog-contact-form .toog-field label .req { color: #F97316; font-weight: 700; }
.toog-offerte-form .toog-field label, .toog-contact-form .toog-field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.toog-offerte-form .toog-field, .toog-contact-form .toog-field { min-width: 0; }
.toog-offerte-form .toog-row, .toog-contact-form .toog-row { display: grid; gap: 14px; margin-bottom: 14px; }
.toog-offerte-form .toog-row.one-col, .toog-contact-form .toog-row.one-col { grid-template-columns: 1fr; }
.toog-offerte-form .toog-row.two-col, .toog-contact-form .toog-row.two-col { grid-template-columns: 1fr 1fr; }
.toog-offerte-form .toog-row:last-child, .toog-contact-form .toog-row:last-child { margin-bottom: 0; }
.toog-offerte-form .wpcf7-form-control-wrap, .toog-contact-form .wpcf7-form-control-wrap { display: block !important; width: 100% !important; }
.toog-offerte-form .wpcf7-not-valid, .toog-contact-form .wpcf7-not-valid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.08) !important; }
.toog-offerte-form .wpcf7-not-valid-tip, .toog-contact-form .wpcf7-not-valid-tip { font-size: 12px !important; color: #ef4444 !important; margin-top: 5px !important; display: block !important; }
.toog-offerte-form .wpcf7-response-output, .toog-contact-form .wpcf7-response-output { border-radius: 12px !important; padding: 12px 16px !important; font-size: 14px !important; line-height: 1.6 !important; margin: 14px 0 0 !important; text-align: center !important; }
.toog-offerte-form .wpcf7-spinner, .toog-contact-form .wpcf7-spinner { display: block !important; margin: 12px auto 0 !important; }
.toog-offerte-form input.wpcf7-submit, .toog-contact-form input.wpcf7-submit { opacity: 1 !important; overflow: visible !important; text-transform: none !important; letter-spacing: normal !important; }
.toog-offerte-form input::placeholder, .toog-offerte-form textarea::placeholder, .toog-contact-form input::placeholder, .toog-contact-form textarea::placeholder { color: #94a3b8 !important; font-weight: 400 !important; }
.toog-offerte-form input:focus, .toog-offerte-form select:focus, .toog-offerte-form textarea:focus, .toog-contact-form input:focus, .toog-contact-form select:focus, .toog-contact-form textarea:focus { border-color: #106CD8 !important; box-shadow: 0 0 0 3px rgba(16,108,216,0.08) !important; background: #fff !important; }
.toog-offerte-form input[type="text"], .toog-offerte-form input[type="email"], .toog-offerte-form input[type="tel"], .toog-offerte-form select, .toog-contact-form input[type="text"], .toog-contact-form input[type="email"], .toog-contact-form input[type="tel"], .toog-contact-form select { height: 46px !important; }
.toog-offerte-form input[type="text"], .toog-offerte-form input[type="email"], .toog-offerte-form input[type="tel"], .toog-offerte-form select, .toog-offerte-form textarea, .toog-contact-form input[type="text"], .toog-contact-form input[type="email"], .toog-contact-form input[type="tel"], .toog-contact-form select, .toog-contact-form textarea { width: 100% !important; padding: 11px 14px !important; font-size: 14px !important; line-height: 1.5 !important; color: #1e293b !important; background: #f8fafc !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; font-family: inherit !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important; }
.toog-offerte-form select, .toog-contact-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px !important; padding-right: 36px !important; cursor: pointer !important; }
.toog-offerte-form textarea, .toog-contact-form textarea { min-height: 110px !important; resize: vertical !important; }
.toog-offerte-form, .toog-contact-form { width: 100%; font-family: inherit; }
.toog-privacy .wpcf7-form-control-wrap { display: block; }
.toog-privacy .wpcf7-list-item label, .toog-privacy label { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-size: 13px !important; line-height: 1.6 !important; color: #64748b !important; cursor: pointer !important; }
.toog-privacy .wpcf7-list-item { margin: 0 !important; }
.toog-privacy a { color: #106CD8 !important; text-decoration: underline !important; font-weight: 600 !important; }
.toog-privacy input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 18px !important; min-width: 18px !important; height: 18px !important; margin: 2px 0 0 !important; border: 1.5px solid #cbd5e1 !important; border-radius: 5px !important; background: #fff !important; position: relative !important; cursor: pointer !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; }
.toog-privacy input[type="checkbox"]:checked { background: #F97316 !important; border-color: #F97316 !important; }
.toog-privacy input[type="checkbox"]:checked::after { content: "" !important; position: absolute !important; left: 5px !important; top: 1.5px !important; width: 5px !important; height: 10px !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; }
.toog-privacy input[type="checkbox"]:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important; }
.toog-privacy { margin: 12px 0 0; }
.toog-step-content { display: none; animation: toogStepIn 0.3s ease; }
.toog-step-content.active { display: block; }
.toog-step-item { display: flex; align-items: center; gap: 8px; cursor: default; }
.toog-step-item.active .toog-step-label { color: #0f172a; }
.toog-step-item.active .toog-step-num { background: #106CD8; color: #fff; box-shadow: 0 2px 8px rgba(16,108,216,0.25); }
.toog-step-item.completed .toog-step-label { color: #64748b; }
.toog-step-item.completed .toog-step-num { background: #F97316; color: transparent; font-size: 0; box-shadow: 0 2px 8px rgba(249,115,22,0.2); position: relative; }
/* Unicode checkmark — replaces the previous SVG which double-rendered at
 * small sizes due to stroke-linejoin overlap on a 14px canvas. The glyph
 * `✓` (U+2713) renders as a single, crisp shape at any zoom. */
.toog-step-item.completed .toog-step-num::after {
	content: "\2713";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.toog-step-label { font-size: 13px; font-weight: 600; color: #94a3b8; transition: color 0.3s ease; }
.toog-step-line { flex: 1; height: 2px; background: #e2e8f0; margin: 0 12px; border-radius: 1px; transition: background 0.3s ease; max-width: 60px; }
.toog-step-line.completed { background: linear-gradient(90deg, #F97316, #106CD8); }
.toog-step-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f1f5f9; flex-wrap: wrap; }
/* The buttons inside the nav are wrapped in <p> by Elementor's HTML widget
 * (Terug, Volgende), and `.toog-nav-submit` is a DIV wrapper CF7 emits which
 * itself contains empty <p></p> placeholders + the actual <input type=submit>.
 * Those phantom paragraphs add ~36px of layout height on step 3, making the
 * submit wrapper measure 116px tall while the visual button is only 44px —
 * which (a) misaligns Terug vs Submit and (b) makes the form card look
 * abruptly taller on the final step. `display:contents` on the <p> wrappers
 * makes the buttons themselves the flex items; collapsing the empty <p>s and
 * re-flexing the submit wrapper restores symmetric alignment. */
.toog-step-nav > p { display: contents !important; }
.toog-step-nav > p:empty,
.toog-nav-submit > p:empty { display: none !important; }
.toog-step-nav > .toog-nav-back ~ .toog-nav-submit,
.toog-step-nav > p ~ .toog-nav-submit { margin-left: auto !important; }
/* When step 1 has only Volgende visible (Terug hidden), keep the lone button
 * pinned to the right so the layout doesn't reflow to the left edge. */
.toog-step-nav > p:has(> .toog-nav-next:not(.toog-wizard-hide)):only-of-type { margin-left: auto !important; }
/* Collapse the submit wrapper's phantom height — make it a flex container
 * sized to its actual button so Terug + Submit are bottom-aligned. */
.toog-nav-submit { display: inline-flex !important; align-items: center !important; min-height: 0 !important; line-height: 1 !important; }
.toog-nav-submit > input[type="submit"] { min-height: 44px !important; }
.toog-nav-back, .toog-nav-next, .toog-nav-submit { box-sizing: border-box !important; }
.toog-step-num { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; background: #f1f5f9; color: #94a3b8; transition: all 0.3s ease; flex-shrink: 0; }
.toog-steps-bar { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #f1f5f9; }
.toog-wizard-hide { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; border: 0 !important; pointer-events: none !important; opacity: 0 !important; }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output { border-color: #ef4444 !important; background: #fef2f2 !important; color: #991b1b !important; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #22c55e !important; background: #f0fdf4 !important; color: #166534 !important; }
::after { box-sizing: border-box !important; }
@keyframes toogShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes toogStepIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 1023px) { .toog-mobile-cta { display: flex; gap: 10px; align-items: center; } .toog-offerte main { padding-bottom: 80px; } }
@media (max-width: 640px) { .toog-offerte h1 { font-size: 1.65rem !important; line-height: 1.15 !important; } .toog-offerte-form .toog-row.two-col, .toog-contact-form .toog-row.two-col { grid-template-columns: 1fr; gap: 12px; } .toog-steps-bar { margin-bottom: 20px; padding-bottom: 18px; } .toog-step-label { font-size: 11px; } .toog-step-num { width: 26px; height: 26px; font-size: 11px; } .toog-step-line { max-width: 30px; margin: 0 6px; } }
details .faq-answer > div { overflow: hidden !important; }
details .faq-answer { display: grid !important; grid-template-rows: 0fr !important; transition: grid-template-rows 0.3s ease !important; }
details[open] .faq-answer { grid-template-rows: 1fr !important; }
html { scroll-behavior: smooth; }

/* ============================================================
 * Offerte / Contact form — tighten label-to-input spacing.
 * CF7 wraps each field in a <p> and inserts a <br> between
 * the <label> and the input, which adds an unwanted line-break
 * gap. Hide that <br> and zero the <p> margin so labels sit
 * directly above their input.
 * ============================================================ */
.toog-offerte-form .toog-field p > br,
.toog-contact-form .toog-field p > br,
.toog-offerte-form .toog-field p br,
.toog-contact-form .toog-field p br { display: none !important; }
.toog-offerte-form .toog-field p,
.toog-contact-form .toog-field p { margin: 0 !important; }
.toog-offerte-form .toog-field label,
.toog-contact-form .toog-field label {
	display: block !important;
	margin: 0 0 4px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.1px !important;
}

/* ============================================================
 * Offerte form submit + step-nav buttons — brand-blue gradient.
 * The page-level `.toog-offerte` wrapper class is not present
 * in the current DOM, so target the form template directly via
 * `.toog-offerte-form` and the wizard's submit holder.
 * ============================================================ */
.toog-offerte-form input.wpcf7-submit,
.toog-offerte-form .wpcf7-submit,
.toog-offerte-form .toog-submit,
.toog-nav-submit input[type="submit"],
.toog-nav-submit .wpcf7-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-family: 'Lato', system-ui, Arial, sans-serif !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.2px !important;
	text-transform: none !important;
	cursor: pointer !important;
	width: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	box-shadow: 0 4px 18px rgba(37, 99, 235, 0.28),
	            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.toog-offerte-form input.wpcf7-submit:hover,
.toog-offerte-form .wpcf7-submit:hover,
.toog-nav-submit input[type="submit"]:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 22px rgba(37, 99, 235, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.toog-offerte-form input.wpcf7-submit:disabled,
.toog-nav-submit input[type="submit"]:disabled { opacity: .6 !important; cursor: not-allowed !important; }

/* Wizard nav buttons (Terug / Volgende) — paired secondary + primary look */
.toog-nav-back,
.toog-nav-next {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 44px !important;
	padding: 0 22px !important;
	border-radius: 10px !important;
	font-family: 'Lato', system-ui, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}
.toog-nav-back {
	background: transparent !important;
	color: #475569 !important;
	border: 1.5px solid #e2e8f0 !important;
}
.toog-nav-back:hover {
	background: #f8fafc !important;
	color: #0f172a !important;
	border-color: #cbd5e1 !important;
}
.toog-nav-next {
	background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25),
	            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.toog-nav-next:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35),
	            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.toog-nav-next i, .toog-nav-back i {
	font-size: 12px !important;
	line-height: 1 !important;
}
/* Drop the legacy <br> CF7 sometimes injects between span + icon */
.toog-nav-next br, .toog-nav-back br { display: none !important; }

/* ============================================================
 * Accessibility — :focus-visible, skip-link, reduced-motion.
 * `:focus` alone fires for mouse clicks too (which then leaves
 * a thick outline around tapped buttons); :focus-visible only
 * fires for keyboard / non-mouse interactions, so the visible
 * outline is reserved for the users who actually need it.
 * ============================================================ */
:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.toog-step-item:focus-visible {
	outline: 3px solid #106CD8 !important;
	outline-offset: 2px;
	border-radius: 4px;
}
/* Skip-link is hidden until focused. The link itself lives in header.php. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: #106CD8;
	color: #fff !important;
	padding: 12px 18px;
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 6px 0;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}
.skip-link:focus,
.skip-link:focus-visible {
	left: 0;
	top: 0;
	outline: 3px solid #fb923c;
	outline-offset: 2px;
}
/* Honour user reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
 * Footer mobile centering.
 *
 * The footer is a single HTML widget (cms_block 7631 → wrapper
 * `.toog-footer-wrap`). On desktop it lays out as a multi-column
 * grid (logo + 3 link columns) which reads naturally left-aligned.
 * On mobile the columns stack vertically and left-alignment looks
 * unbalanced, so we centre everything below 768px:
 *   - text-align: center on all blocks
 *   - flex containers (logo row, social row) → justify-content: center
 *   - hover-translate underline effect (`padding-left:4px`) is
 *     disabled on mobile so it doesn't shift the centred anchor.
 * ============================================================ */
@media (max-width: 768px) {
	.toog-footer-wrap,
	.toog-footer-wrap h2,
	.toog-footer-wrap h3,
	.toog-footer-wrap h4,
	.toog-footer-wrap p,
	.toog-footer-wrap ul,
	.toog-footer-wrap li,
	.toog-footer-wrap .footer-link {
		text-align: center !important;
	}
	.toog-footer-wrap [class*="grid"],
	.toog-footer-wrap [class*="flex"] {
		justify-content: center !important;
	}
	.toog-footer-wrap [class*="items-start"] {
		align-items: center !important;
	}
	/* Logo + social icon rows — centre the inline-flex group */
	.toog-footer-wrap img,
	.toog-footer-wrap svg,
	.toog-footer-wrap .social-icon {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	/* Social-icons cluster: centre as a group */
	.toog-footer-wrap [class*="social"]:not(.social-icon),
	.toog-footer-wrap [class*="socials"] {
		display: flex !important;
		justify-content: center !important;
		gap: 12px;
	}
	/* Disable the desktop "shift right on hover" effect — would push
	 * the link off-centre on mobile and look broken. */
	.toog-footer-wrap .footer-link:hover {
		padding-left: 0 !important;
	}
}

* { box-sizing: border-box; }