/* ===================================================================
   MK Fototools
   Alles staat onder .mk-fototools, zodat de tool niets van de
   Divi-opmaak raakt en Divi niets van de tool. Josefin Sans wordt
   al door het thema geladen, dus die halen we hier niet nog eens op.
   =================================================================== */

.mk-fototools{
  --mkft-zwart:#1A1A1A;
  --mkft-goud:#D87B29;
  --mkft-paneel:#212121;
  --mkft-paneel-2:#2B2B2B;
  --mkft-rand:#3A3A3A;
  --mkft-tekst:#EDEAE6;
  --mkft-zacht:#A5A09A;
  --mkft-kop:'Josefin Sans',Helvetica,Arial,sans-serif;
  --mkft-cijfer:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  max-width:640px;
  margin:0 auto;
  font-family:var(--mkft-kop);
  line-height:1.55;
  background:var(--mkft-zwart);
  border-radius:20px;
  overflow:hidden;
  color:var(--mkft-tekst);
  box-shadow:0 18px 46px rgba(0,0,0,.22);
}
.mk-fototools.mkft-nacht{
  --mkft-zwart:#0A0000; --mkft-goud:#FF4B2B;
  --mkft-paneel:#140303; --mkft-paneel-2:#1E0505; --mkft-rand:#3D0D0D;
  --mkft-tekst:#FF7A5C; --mkft-zacht:#B04A38;
}
.mk-fototools *{box-sizing:border-box}

/* ---------- tabs ---------- */
.mk-fototools .mkft-tabs{
  display:flex;border-bottom:1px solid var(--mkft-rand);
  background:var(--mkft-paneel);margin:0;padding:0;
}
.mk-fototools .mkft-tabs button{
  flex:1;background:none !important;border:0 !important;
  border-bottom:2px solid transparent !important;border-radius:0 !important;
  font-family:var(--mkft-kop) !important;font-size:15px !important;font-weight:600 !important;
  color:var(--mkft-zacht) !important;padding:16px 6px !important;cursor:pointer;
  text-transform:none !important;letter-spacing:0 !important;line-height:1.4 !important;
  transition:color .15s,border-color .15s;box-shadow:none !important;
}
.mk-fototools .mkft-tabs button:hover{color:var(--mkft-tekst) !important}
.mk-fototools .mkft-tabs button[aria-selected="true"]{
  color:var(--mkft-goud) !important;border-bottom-color:var(--mkft-goud) !important;
}
.mk-fototools .mkft-tabs button:after{display:none !important}
.mk-fototools .mkft-nacht-knop{
  flex:0 0 auto !important;border-left:1px solid var(--mkft-rand) !important;
  font-size:17px !important;padding:0 16px !important;
}

/* ---------- panelen en invoer ---------- */
.mk-fototools .mkft-paneel{padding:24px 18px 26px;display:none}
.mk-fototools .mkft-paneel.mkft-actief{display:block}

.mk-fototools .mkft-veld{margin-bottom:18px}
.mk-fototools .mkft-veld label{
  display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mkft-zacht);font-weight:600;margin-bottom:8px;font-family:var(--mkft-kop);
}
.mk-fototools select,
.mk-fototools input[type=text]{
  width:100% !important;font-family:var(--mkft-kop) !important;font-size:18px !important;
  background-color:var(--mkft-paneel-2) !important;color:var(--mkft-tekst) !important;
  border:1px solid var(--mkft-rand) !important;border-radius:10px !important;
  padding:13px 14px !important;height:auto !important;line-height:1.4 !important;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  box-shadow:none !important;margin:0 !important;
}
.mk-fototools select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23A5A09A' d='M1 1l5 5 5-5'/></svg>") !important;
  background-repeat:no-repeat !important;background-position:right 14px center !important;
  padding-right:38px !important;
}
.mk-fototools select:focus,
.mk-fototools input[type=text]:focus{
  outline:2px solid var(--mkft-goud);outline-offset:1px;
  border-color:var(--mkft-goud) !important;
}
.mk-fototools input[type=text]{
  font-family:var(--mkft-cijfer) !important;font-variant-numeric:tabular-nums;
}

.mk-fototools .mkft-met-eenheid{position:relative}
.mk-fototools .mkft-met-eenheid input{padding-right:52px !important}
.mk-fototools .mkft-met-eenheid .mkft-eenheid{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--mkft-zacht);font-size:15px;pointer-events:none;
}
.mk-fototools .mkft-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- uitkomst ---------- */
.mk-fototools .mkft-uitkomst{
  background:linear-gradient(160deg,var(--mkft-paneel-2),var(--mkft-paneel));
  border:1px solid var(--mkft-rand);border-radius:14px;
  padding:24px 18px;text-align:center;margin:22px 0 0;
}
.mk-fototools .mkft-uitkomst .mkft-label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mkft-zacht);font-weight:600;
}
.mk-fototools .mkft-uitkomst .mkft-groot{
  font-family:var(--mkft-cijfer);font-size:clamp(30px,8.5vw,46px);font-weight:700;
  color:var(--mkft-goud);line-height:1.12;margin:8px 0 2px;font-variant-numeric:tabular-nums;
}
/* Een uitkomst met twee afstanden is bijna twee keer zo lang als "8,2 s"
   en krijgt daarom een eigen maat, zodat hij op één regel blijft. */
.mk-fototools .mkft-uitkomst .mkft-groot.mkft-lang{font-size:clamp(22px,6.2vw,34px)}
.mk-fototools .mkft-uitkomst .mkft-onder{font-size:15px;color:var(--mkft-zacht)}

.mk-fototools .mkft-stat-rij{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--mkft-rand);
  border:1px solid var(--mkft-rand);border-radius:14px;overflow:hidden;margin-top:16px;
}
.mk-fototools .mkft-stat{background:var(--mkft-paneel);padding:13px 6px;text-align:center}
.mk-fototools .mkft-stat .mkft-k{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mkft-zacht);font-weight:600;
}
.mk-fototools .mkft-stat .mkft-v{
  font-family:var(--mkft-cijfer);font-size:18px;font-weight:700;margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.mk-fototools .mkft-stat .mkft-v.mkft-accent{color:var(--mkft-goud)}

/* ---------- de scène ---------- */
.mk-fototools .mkft-scene-doos{
  border:1px solid var(--mkft-rand);border-radius:14px;
  background:var(--mkft-paneel);margin-top:18px;overflow:hidden;
}
.mk-fototools .mkft-scene{display:block;width:100%;height:auto}

/* De scherpe zone schuift mee als je een getal aanpast. De overgang staat
   pas aan nadat de scène één keer getekend is, anders schuift alles bij het
   laden van de pagina zichtbaar op zijn plek. transform-origin op 0 0 houdt
   de schaling van de zonebalk aan de linkerkant vast. */
.mk-fototools .mkft-vloeiend{transform-origin:0 0}
.mk-fototools .mkft-scene.mkft-animeer .mkft-vloeiend{
  transition:transform .38s cubic-bezier(.22,.61,.36,1),
             filter .38s ease,
             fill .38s ease,
             opacity .25s ease;
}
@media (prefers-reduced-motion:reduce){
  .mk-fototools .mkft-scene.mkft-animeer .mkft-vloeiend{transition:none}
}
.mk-fototools .mkft-scene-voet{
  display:flex;justify-content:center;gap:18px;padding:10px 12px 12px;
  border-top:1px solid var(--mkft-rand);font-size:13px;color:var(--mkft-zacht);flex-wrap:wrap;
}
.mk-fototools .mkft-scene-voet span{display:flex;align-items:center;gap:7px}
.mk-fototools .mkft-legenda{width:13px;height:13px;border-radius:3px;flex-shrink:0}
.mk-fototools .mkft-legenda.mkft-is-scherp{background:var(--mkft-goud)}
.mk-fototools .mkft-legenda.mkft-is-onscherp{background:var(--mkft-rand)}