/* Kleurbrug naar de huisstijl van stickerskopen.com (20-09-2026).
   De studio komt van ricarddrukwerk.com en gebruikt variabelen die daar in de
   stylesheet staan (--red, --blue, --sun, --disp, --sans, --muted, --max).
   Zonder deze brug vallen ze terug op niets: de actieve vormknop en de
   bestelknop werden wit op wit en waren onleesbaar. Alles hangt aan de tokens
   die deze site zelf definieert, dus de studio kleurt vanzelf mee in licht en
   donker. */
.studio {
  --red: var(--accent);
  --blue: var(--c-board);
  --blue-soft: var(--surface-2);
  --sun: var(--c-warn, #E9A13B);
  --muted: var(--ink-soft);
  --disp: var(--font-display);
  --sans: inherit;
  --max: 1180px;
}

/* Vrije sticker-studio: opmaak in de stijl van ricarddrukwerk.com
   (de site-CSS met kleurtokens en typografie zit al in het gebouwde
   {{STYLE}}-blok, dit is alleen het studio-eigen laagje). */
.studio{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,52px) clamp(20px,5vw,44px) 80px}
.studio > h1{font-size:clamp(2rem,4.6vw,3rem);margin:0 0 .3em}
.studio-intro{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:0 0 2rem}
.studio-intro a{font-weight:700;text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:3px}

.studio-stap{background:var(--surface);border:2.5px solid var(--ink);border-radius:22px;
  padding:clamp(22px,3.4vw,34px);box-shadow:8px 9px 0 var(--ink);margin-bottom:34px}
.studio-stap h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin:0 0 1em}

#vormkeuze{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
#vormkeuze button{font-family:var(--sans);font-weight:800;font-size:.92rem;
  background:var(--surface);color:var(--ink);border:2.5px solid var(--ink);
  border-radius:100px;padding:.6em 1.2em;cursor:pointer;transition:transform .18s,box-shadow .18s}
#vormkeuze button:hover{transform:translateY(-2px)}
#vormkeuze button.actief{background:var(--red);color:#fff;box-shadow:3px 3px 0 var(--ink)}

.maatvelden{display:flex;flex-wrap:wrap;gap:1.4rem 1.8rem;margin-bottom:1rem}
.maatvelden label{display:flex;flex-direction:column;gap:.4em;font-weight:700;font-size:.9rem;color:var(--muted)}
/* T6-nasleep (T15 polish): [hidden] alleen verliest het anders van de eigen
   display:flex hierboven bij gelijke specificiteit, dus bleef #hoeklabel
   zichtbaar bij vorm rond/ovaal. label[hidden] is specifieker dan .maatvelden
   label en wint dus altijd, ongeacht de volgorde in de cascade. */
.maatvelden label[hidden]{display:none}
.maatvelden input[type="number"]{font:inherit;font-size:1rem;color:var(--ink);
  border:2px solid var(--line);border-radius:10px;padding:.5em .7em;width:9ch}
.maatvelden input[type="number"]:focus-visible{border-color:var(--blue)}
.maatvelden input:disabled{opacity:.45}
#laminaatlabel{flex-direction:row;align-items:center}

#maatmelding{background:var(--bg);border:2px dashed var(--blue-soft);border-radius:14px;
  padding:.9em 1.2em;font-size:.94rem;color:var(--muted);margin:0 0 1.2rem}
#maatmelding a{color:var(--blue);font-weight:700}

#prijsblok{font-size:1.05rem}
#prijsblok strong{font-family:var(--disp);font-size:2rem;font-weight:800}
#prijsblok .prijsdetail{display:inline-block;margin-top:.3em;color:var(--muted);font-size:.9rem}

#veltip{background:var(--sun);border:2.5px solid var(--ink);border-radius:14px;
  padding:.9em 1.2em;margin-top:1rem;font-weight:700}
#veltip button{font:inherit;font-weight:800;background:var(--ink);color:#fff;
  border:none;border-radius:100px;padding:.4em 1em;margin-left:.5em;cursor:pointer}
#veltip button:hover{background:var(--red)}

#sjabloonbalk-blok h3{font-size:1rem;margin:0 0 .7em}
#sjabloonbalk{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.6rem}
.sjabloon-kaart{display:flex;flex-direction:column;align-items:center;gap:.4em;
  width:104px;font:inherit;background:var(--surface);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:14px;padding:.7em .6em;cursor:pointer;
  text-align:center;transition:transform .18s,box-shadow .18s}
.sjabloon-kaart:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--ink)}
.sjabloon-kaart .sjabloon-mini{border-radius:8px}
.sjabloon-kaart strong{font-size:.8rem;line-height:1.2}
.sjabloon-kaart span{font-size:.72rem;color:var(--muted);line-height:1.2}

.studio-editor{display:flex;gap:1.6rem;align-items:flex-start}
.studio-editor #studio-canvas{flex:0 0 auto;border:2px solid var(--line);border-radius:14px;background:#fff}
#paneel-elementen{flex:0 0 260px}
@media(max-width:800px){.studio-editor{flex-direction:column}#paneel-elementen{flex-basis:auto;width:100%}}

#paneel-achtergrond h3{font-size:1rem;margin:0 0 .8em}
#palet-achtergrond{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.2rem}
.kleur{width:100%;aspect-ratio:1;border-radius:100px;border:2px solid var(--line);
  background:var(--kleur);cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}
.kleur:hover{transform:scale(1.08)}
.kleur.actief{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
#eigen-kleur-label{display:flex;align-items:center;justify-content:space-between;
  font-weight:700;font-size:.9rem;color:var(--muted)}
#eigen-kleur{width:2.6rem;height:2.6rem;border:2px solid var(--line);border-radius:10px;
  padding:2px;cursor:pointer;background:var(--surface)}

/* Stap 3: bestelblok (Task 13) - zelfde veldstructuur als de andere
   configurators (SITE/stickers-bestellen/index.html), opmaak in de
   bestaande studio-stijl hierboven. */
.studio-loginhint{font-size:.88rem;color:var(--muted);font-weight:600;margin:0 0 1.2rem}
.studio-loginhint a{color:var(--red);font-weight:700;text-decoration:underline}
#bestelblok .veld{margin-bottom:14px}
#bestelblok .veld label{display:block;font-weight:800;font-size:.88rem;margin-bottom:5px}
#bestelblok .veld input,#bestelblok .veld textarea{width:100%;font:inherit;font-size:1rem;
  color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:.6em .8em;
  background:var(--surface)}
#bestelblok .veld input:focus-visible,#bestelblok .veld textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
#bestelblok .veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
#bestelblok .veld-rij.adres{grid-template-columns:3fr 1fr}
#bestelblok .hint{display:block;font-size:.8rem;color:var(--muted);font-weight:600}
.nieuwsbrief-label{display:flex;gap:.6em;align-items:flex-start;font-weight:600;
  font-size:.9rem;margin:8px 0 0;cursor:pointer}
#betaalkeuze{margin-top:16px;border:2.5px solid var(--ink);border-radius:14px;
  padding:14px 16px;background:var(--bg)}
#betaalkeuze p{font-weight:800;margin:0 0 8px}
#betaalkeuze label{display:flex;gap:.55em;font-weight:600;font-size:.92rem;
  cursor:pointer;margin-bottom:6px}
#bestelknop{font-family:var(--sans);font-weight:800;font-size:1rem;background:var(--red);
  color:#fff;border:2.5px solid var(--ink);border-radius:100px;padding:.8em 1.6em;
  cursor:pointer;margin-top:1.4rem;box-shadow:3px 3px 0 var(--ink);transition:transform .18s}
#bestelknop:hover{transform:translateY(-2px)}
#bestelknop:disabled{opacity:.6;cursor:default;transform:none}
#bestelfout{background:var(--bg);border:2px solid var(--red);border-radius:10px;
  color:var(--red);font-weight:700;padding:.8em 1em;margin-top:.8rem}
@media(max-width:640px){#bestelblok .veld-rij,#bestelblok .veld-rij.adres{grid-template-columns:1fr}}