/* Stijlen voor de interactieve tools op /dakkapel-configurator, /kozijnen-configurator,
   /uitbouw-calculator, /offerte-maken en /werkbon-template.
   Volgt de tokens uit blog.css (--blauw, --rand, --vlak, --ink, --grijs). */

.as-tool { margin: 8px 0 26px; }

.tl-kaart {
  border: 1px solid var(--rand);
  border-radius: 20px;
  background: #fff;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
html.dark .tl-kaart { background: #141414; border-color: rgba(255, 255, 255, .14); }

.tl-stap { display: flex; flex-direction: column; gap: 10px; }

.tl-label {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--grijs);
}
html.dark .tl-label { color: #9CA3AF; }

.tl-waarde {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blauw);
}

.tl-schuif {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--vlak);
  outline: none;
  cursor: pointer;
}
html.dark .tl-schuif { background: rgba(255, 255, 255, .16); }
.tl-schuif::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--blauw);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.tl-schuif::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--blauw);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.tl-schuif:focus-visible { box-shadow: 0 0 0 3px rgba(37, 150, 190, .3); }

.tl-schaal {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--grijs);
}
html.dark .tl-schaal { color: #9CA3AF; }

.tl-keuzes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tl-keuzes[data-aantal="2"] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .tl-keuzes, .tl-keuzes[data-aantal="2"] { grid-template-columns: 1fr; } }

.tl-knop {
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .18s ease, background .18s ease;
}
.tl-knop strong { font-size: 14.5px; font-weight: 700; }
.tl-knop small { font-size: 12px; color: var(--grijs); line-height: 1.35; }
.tl-knop:hover { border-color: var(--blauw-licht); }
.tl-knop[aria-pressed="true"] {
  border-color: var(--blauw);
  background: var(--ijs);
  box-shadow: inset 0 0 0 1px var(--blauw);
}
html.dark .tl-knop { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #fff; }
html.dark .tl-knop small { color: #9CA3AF; }
html.dark .tl-knop[aria-pressed="true"] { background: rgba(37, 150, 190, .18); border-color: var(--blauw-licht); box-shadow: inset 0 0 0 1px var(--blauw-licht); }

.tl-vinkjes { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-vinkjes .tl-knop { flex: 1 1 220px; }

.tl-uitkomst {
  border-top: 1px solid var(--rand);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html.dark .tl-uitkomst { border-color: rgba(255, 255, 255, .14); }

.tl-prijs {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
html.dark .tl-prijs { color: #fff; }

.tl-noot { font-size: 13px; line-height: 1.55; color: var(--grijs); margin: 0; }
html.dark .tl-noot { color: #9CA3AF; }

/* Documenttools: formulier links, live voorbeeld rechts.
   Ze breken uit de 820px-kolom van .lp-section, anders is geen van beide helften
   breed genoeg voor de invoerregels. */
.as-tool[data-tool="offerte"],
.as-tool[data-tool="werkbon"] {
  width: min(1120px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}

.tl-doc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1040px) { .tl-doc-wrap { grid-template-columns: 1fr; } }

.tl-veld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.tl-veld > span { font-weight: 600; color: var(--grijs); }
html.dark .tl-veld > span { color: #9CA3AF; }
.tl-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .tl-rij { grid-template-columns: 1fr; } }

.tl-invoer {
  font: inherit;
  font-size: 14px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--rand);
  background: #fff;
  color: var(--ink);
}
.tl-invoer:focus-visible { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(37, 150, 190, .18); }
html.dark .tl-invoer { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); color: #fff; }
textarea.tl-invoer { min-height: 96px; resize: vertical; }

.tl-regel { display: grid; grid-template-columns: minmax(0, 1fr) 78px 96px 34px; gap: 8px; margin-bottom: 8px; }
.tl-regel--materiaal { grid-template-columns: 78px minmax(0, 1fr) 34px; }
@media (max-width: 1040px) and (min-width: 561px) {
  .tl-regel { grid-template-columns: minmax(0, 1fr) 90px 110px 34px; }
}
@media (max-width: 560px) {
  .tl-regel { grid-template-columns: minmax(0, 1fr) 1fr 34px; }
  .tl-regel > :first-child { grid-column: 1 / -1; }
  .tl-regel--materiaal { grid-template-columns: 78px minmax(0, 1fr) 34px; }
  .tl-regel--materiaal > :first-child { grid-column: auto; }
}

.tl-weg {
  font: inherit;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid var(--rand);
  background: transparent;
  color: var(--grijs);
  line-height: 1;
}
.tl-weg:hover:not(:disabled) { border-color: #DC2626; color: #DC2626; }
.tl-weg:disabled { opacity: .4; cursor: default; }
html.dark .tl-weg { border-color: rgba(255, 255, 255, .16); color: #9CA3AF; }

.tl-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: transparent;
  color: var(--ink);
}
.tl-btn:hover { border-color: var(--blauw); color: var(--blauw); }
.tl-btn--primair { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.tl-btn--primair:hover { background: var(--blauw-donker); border-color: var(--blauw-donker); color: #fff; }
html.dark .tl-btn { color: #fff; border-color: rgba(255, 255, 255, .2); }
html.dark .tl-btn--primair { color: #fff; }

.tl-doc {
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: #fff;
  color: #14171A;
  padding: 24px;
  font-size: 13.5px;
  line-height: 1.55;
}
html.dark .tl-doc { border-color: rgba(255, 255, 255, .14); }

.tl-doc-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.tl-doc-bedrijf { font-size: 16px; font-weight: 700; }
.tl-doc-titel { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; }
.tl-doc-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
.tl-doc-meta div { display: flex; flex-direction: column; }
.tl-doc-meta span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.tl-doc-tabel { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.tl-doc-tabel th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; border-bottom: 1px solid #E5E7EB; padding: 6px 8px 6px 0; }
.tl-doc-tabel td { padding: 7px 8px 7px 0; border-bottom: 1px solid #F1F2F4; vertical-align: top; }
.tl-doc-tabel td:not(:first-child) { text-align: right; white-space: nowrap; }
.tl-regel--materiaal ~ * .tl-doc-tabel td:first-child { text-align: right; }
.tl-doc-leeg { color: #9CA3AF; font-style: italic; text-align: left !important; }
.tl-doc-totalen { display: flex; flex-direction: column; gap: 5px; margin-left: auto; max-width: 280px; }
.tl-doc-totalen div { display: flex; justify-content: space-between; gap: 24px; }
.tl-doc-totaal { font-weight: 700; border-top: 1px solid #E5E7EB; padding-top: 6px; }
.tl-doc-voet { font-size: 12px; color: #6B7280; margin: 14px 0 0; }
.tl-doc-handtekening { display: none; }

.tl-melding { font-size: 13px; margin: 8px 0 0; }
.tl-melding[data-soort="fout"] { color: #DC2626; }
.tl-melding[data-soort="goed"] { color: #15803D; }

@media print {
  body > *:not(.vel), .vel > *:not(.art):not(.lp-section),
  .lp-section > *:not(.as-tool), .as-tool > *:not(.tl-doc-wrap),
  .tl-doc-wrap > *:not(.tl-doc) { display: none !important; }
  .as-tool, .tl-doc-wrap, .lp-section { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .tl-doc { border: none; padding: 0; color: #000; }
  .tl-doc-handtekening { display: block; margin-top: 48px; }
}