/*
 * TTC Tickets — klantzijde (fase 2).
 * Rechtstreeks uit het goedgekeurde prototype (ticket-design/prototype.html):
 * AC-tokens (accent #4a90d9, radius 12, rand #e5e5e5, gedempt #767676) voor de
 * Mijn account-delen, ST-tokens (#0d6d5f, veldrand #cfcabf, radius 10) waar de
 * Slimme Track-componenten staan. Breekpunten van de echte site: 480/560/600.
 * Laadt achter hestia_woocommerce_style.
 */

.ttk-front{
	/* 2026-08-03 — één accent voor het hele ticketscherm.
	 *
	 * Stond hier eerst op AC-blauw (#4a90d9), naast het groen van de Slimme
	 * Track-componenten. Op de standalone bleek dat er een DERDE kleur bij kwam:
	 * het thema schildert knoppen en velden zelf (Hestia zet bij focus zelfs een
	 * gekleurde onderrand via background-image, wat als een rode streep onder je
	 * tekstvak eindigt). Resultaat: drie tinten door elkaar.
	 *
	 * Daarom: ons groen is de enige accentkleur, en verderop in dit bestand staat
	 * het "kleurpantser" dat het thema van onze knoppen en velden afhoudt. Wil je
	 * later een andere kleur, dan is dit de enige plek die je aanpast. */
	--ac-accent:#0d6d5f;--ac-accent-bg:#eef6f4;--ac-radius:12px;
	--ac-accent-dark:#0a5a4e;
	--ac-border:#e5e5e5;--ac-surface:#ffffff;--ac-surface-muted:#f7f7f5;
	--ac-text-muted:#767676;
	font-size:14px;line-height:1.6;color:#3a3a3a;
}
.ttk-front .ttk-hiddensvg{position:absolute;width:0;height:0;overflow:hidden}
.ttk-front [hidden]{display:none !important}
.ttk-front .ic{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none;fill:none}
/* 0.43.6 — weggeknipt, NIET display:none. Voor het JS-woordenboek #ttkI18n:
   GTranslate vertaalt geen display:none-inhoud, geknipte inhoud wél (gemeten
   in slimme-track, faq.css:55-58). De stijl staat ook inline op het blok zelf,
   voor het geval deze CSS uit een verouderde RUCSS-snapshot komt. */
#ttkI18n,.ttk-vhide{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* koppen, knoppen, notities (huisstijl uit het prototype) */
.ttk-front .ac-section-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin:0 0 12px;color:#3a3a3a}
.ttk-front .ac-section-title .ic{color:var(--ac-accent);font-size:18px}
.ttk-front .ac-section-intro{font-size:13px;color:var(--ac-text-muted);margin:-4px 0 14px}
.ttk-front .ac-btn,
.ttk-front a.ac-btn,
.ttk-front button.ac-btn{display:inline-block;background:var(--ac-accent);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-weight:500;font-size:14px;line-height:1.4;text-decoration:none;text-transform:none;box-shadow:none;cursor:pointer}
.ttk-front .ac-btn:hover{filter:brightness(.92);color:#fff}
.ttk-front .ac-btn--pill,
.ttk-front a.ac-btn--pill,
.ttk-front button.ac-btn--pill{display:inline-block;background:var(--ac-surface);border:1px solid var(--ac-border);border-radius:20px;padding:6px 16px;font-size:12px;font-weight:500;color:var(--ac-accent);text-decoration:none;cursor:pointer;line-height:1.5;text-transform:none}
.ttk-front .ac-btn--pill:hover{border-color:var(--ac-accent);background:var(--ac-accent-bg);color:var(--ac-accent)}
.ttk-front .ac-info-note{display:flex;align-items:flex-start;gap:8px;background:var(--ac-accent-bg);border-radius:8px;padding:10px 14px;margin:0 0 18px;font-size:12px;color:var(--ac-text-muted)}
.ttk-front .ac-info-note .ic{color:var(--ac-accent);font-size:15px;margin-top:1px}
.ttk-front .ac-msg{background:var(--ac-surface);border:1px solid var(--ac-border);border-left:4px solid var(--ac-accent);border-radius:var(--ac-radius);padding:14px 18px;margin:0 0 18px;font-size:14px}
.ttk-front .ac-msg--ok{border-left-color:#1a9d54;background:#edf9f1;color:#14532d}
.ttk-front .ac-msg--err{border-left-color:#d9534f}
.ttk-front .ac-msg--muted{border-left-color:#b8b8b4;background:var(--ac-surface-muted);color:#555}
.ttk-front .ac-msg p{margin:0}
.ttk-front .ac-msg p + p{margin-top:6px}
.ttk-front .ac-backlink{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ac-text-muted);text-decoration:none;margin:0 0 14px}
.ttk-front .ac-backlink:hover{color:var(--ac-accent)}

/* ticketslijst (scherm 02) */
.ttk-front .tk-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.ttk-front .tk-toolbar .sp{flex:1}
.ttk-front .tk-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;background:var(--ac-surface);border:1px solid var(--ac-border);border-radius:var(--ac-radius);padding:16px;margin:0 0 14px;text-decoration:none;color:inherit;transition:border-color .15s ease;cursor:pointer}
.ttk-front .tk-item:hover{border-color:var(--ac-accent)}
.ttk-front .tk-item__main{display:block;min-width:0}
.ttk-front .tk-item__nr{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ac-text-muted)}
.ttk-front .tk-item__sub{display:block;font-weight:600;font-size:14px}
/* De titel is de link, maar het klikvlak is de héle kaart: dat ::after ligt
   over de kaart heen. De Afronden-knop komt daar met z-index bovenuit. */
.ttk-front a.tk-item__link{color:inherit;text-decoration:none}
.ttk-front a.tk-item__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--ac-radius)}
.ttk-front a.tk-item__link:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}
.ttk-front .tk-item__meta{display:block;font-size:12px;color:var(--ac-text-muted);margin-top:2px}
.ttk-front .tk-item__side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;position:relative;z-index:2}
.ttk-front .tk-dot{position:absolute;top:14px;right:14px;width:9px;height:9px;border-radius:50%;background:var(--ac-accent);box-shadow:0 0 0 3px var(--ac-accent-bg)}
.ttk-front .tk-pill{display:inline-block;background:var(--ac-accent-bg);color:var(--ac-accent);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:500;white-space:nowrap}
/* 2026-08-06 — contrast van de groene statuspil. De tekst stond op #1a9d54 en
   haalde op #edf9f1 maar 3.24:1; WCAG AA vraagt 4.5:1 voor normale tekst. Zelfde
   tint (146.6°) en zelfde verzadiging, alleen donkerder: #158145 = 4.56:1. De
   achtergrond blijft ongewijzigd, dus het is herkenbaar dezelfde pil. */
.ttk-front .tk-pill--ok{background:#edf9f1;color:#158145}
.ttk-front .tk-pill--warn{background:#fff6e5;color:#8a5a00}
.ttk-front .tk-pill--muted{background:#f0f0f0;color:var(--ac-text-muted)}
.ttk-front .tk-empty{background:var(--ac-surface);border:1px dashed var(--ac-border);border-radius:var(--ac-radius);padding:34px 20px;text-align:center;color:var(--ac-text-muted);font-size:13px}
.ttk-front .tk-empty .ic{display:block;margin:0 auto 10px;font-size:30px;color:var(--ac-accent);width:1em;height:1em}
.ttk-front .tk-empty p{margin:0 0 14px}

/* gesprek (scherm 06) */
.ttk-front .tk-thread{display:flex;flex-direction:column;gap:12px;margin:0 0 18px}
.ttk-front .tk-msg{background:var(--ac-surface);border:1px solid var(--ac-border);border-radius:var(--ac-radius);padding:14px 16px}
.ttk-front .tk-msg--klant{border-left:4px solid var(--ac-accent)}
.ttk-front .tk-msg--admin{background:var(--ac-surface-muted);margin-left:22px}
.ttk-front .tk-msg__head{display:flex;align-items:center;gap:10px;margin:0 0 8px;flex-wrap:wrap}
.ttk-front .tk-avatar{width:32px;height:32px;border-radius:50%;background:var(--ac-accent-bg);color:var(--ac-accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}
.ttk-front .tk-msg__who{font-size:13px;font-weight:600}
.ttk-front .tk-msg__when{font-size:12px;color:var(--ac-text-muted)}
.ttk-front .tk-msg__body p{margin:0 0 8px}
.ttk-front .tk-msg__body p:last-child{margin-bottom:0}
.ttk-front .tk-chip{display:inline-flex;align-items:center;gap:5px;background:var(--ac-surface-muted);border:1px solid var(--ac-border);border-radius:999px;padding:2px 10px;font-size:11px;color:var(--ac-text-muted)}
.ttk-front .tk-editrow{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--ac-border);flex-wrap:wrap}
.ttk-front .tk-editrow__hint{font-size:12px;color:var(--ac-text-muted)}
.ttk-front #ttkEditBox{margin-top:12px}
.ttk-front .tk-textarea{width:100%;border:1px solid var(--ac-border);border-radius:8px;padding:10px 12px;background:var(--ac-surface-muted);font:inherit;min-height:110px;resize:vertical;box-sizing:border-box}
.ttk-front .tk-textarea:focus{border-color:var(--ac-accent);background:var(--ac-surface);outline:none;box-shadow:none}
.ttk-front .tk-label{display:block;margin:0 0 6px;font-size:13px;font-weight:500;color:var(--ac-text-muted)}
.ttk-front .tk-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.ttk-front .tk-actions__hint{font-size:12px;color:var(--ac-text-muted)}
.ttk-front .tk-day{display:flex;align-items:center;gap:10px;margin:2px 0;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ac-text-muted);white-space:nowrap}
.ttk-front .tk-day::before,.ttk-front .tk-day::after{content:"";flex:1;height:1px;background:var(--ac-border)}
/* Systeemregel aan de klantkant (2026-08-03 duidelijker gemaakt).
   Stond al apart van de bubbels, maar was een kale grijze zin die tussen twee
   berichten wegviel. Nu een eigen, rustig kader met een streep aan weerszijden:
   je ziet meteen dat dit geen bericht van een mens is, zonder dat het schreeuwt.
   Bewust geen bubbelvorm en geen afzender — het is een gebeurtenis. */
.ttk-front .tk-sys{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:12.5px;line-height:1.55;color:var(--ac-text-muted);white-space:normal;text-align:center;justify-content:center;padding:9px 14px;background:var(--ac-surface);border:1px dashed var(--ac-border);border-radius:10px}
.ttk-front .tk-sys::before,
.ttk-front .tk-sys::after{content:"";flex:1;height:1px;background:var(--ac-border);min-width:12px}
.ttk-front .tk-sys a{color:var(--ac-accent);font-weight:600}
.ttk-front .tk-older{display:block;width:100%;background:var(--ac-surface-muted);border:1px dashed var(--ac-border);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:500;color:var(--ac-accent);cursor:pointer;text-align:center;text-transform:none}
.ttk-front .tk-older:hover{border-color:var(--ac-accent);background:var(--ac-accent-bg)}
.ttk-front #ttkOldMsgs{display:contents}
.ttk-front .ttk-thread-title{margin-bottom:4px}
.ttk-front .ttk-thread-card{margin:0 0 18px}
.ttk-front .ttk-reopen-row{margin:0 0 18px}

/* dubbel ticket (§9c punt 1) */
.ttk-front .tk-dup{display:flex;gap:14px;align-items:flex-start;background:var(--ac-accent-bg);border:1px solid var(--ac-accent);border-radius:var(--ac-radius);padding:18px;margin:16px 0 0}
.ttk-front .tk-dup__icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--ac-surface);display:flex;align-items:center;justify-content:center;color:var(--ac-accent);font-size:20px}
.ttk-front .tk-dup__body{min-width:0}
.ttk-front .tk-dup__title{margin:0 0 4px;font-size:14px;font-weight:600}
.ttk-front .tk-dup__text{margin:0 0 10px;font-size:13px;color:#4a4a52}
.ttk-front .tk-dup__ref{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px;font-size:13px}
.ttk-front .ttk-dupnote{margin-top:10px}

/* ST-componenten (getrapte kiezer, scherm 03) — exacte ST-tokens */
.ttk-front .st-scope{--st-accent:#0d6d5f;--st-accent-ink:#0a544a;--st-soft:#e4f1ed;--st-line:#e6e3dc;--st-ink:#16161a;--st-muted:#6c6c76}
.ttk-front .st-scope .st-cform-label{display:block;font-weight:600;margin:0 0 6px;color:#16161a;font-size:14px}
.ttk-front .st-scope select,
.ttk-front .st-scope textarea{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #cfcabf;border-radius:10px;font:inherit;background:#fff;color:#16161a}
.ttk-front .st-scope textarea{min-height:140px;padding:10px 12px;resize:vertical}
.ttk-front .st-scope select:focus,.ttk-front .st-scope textarea:focus{border-color:var(--st-accent);box-shadow:0 0 0 3px var(--st-soft);outline:none}
.ttk-front .st-scope .ttk-cat{max-width:320px;margin:0 0 14px}
.ttk-front .st-scope .ttk-cat-label{margin-top:16px}
.ttk-front .st-scope .st-cform-note{font-size:.85em;opacity:.75;margin:8px 0 14px}
.ttk-front .st-scope .st-cform-ok{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#e8f5ef;color:#0d6d5f}
.ttk-front .st-scope .stfaq-btn{display:inline-block;background:var(--st-accent);color:#fff;border:0;border-radius:10px;padding:11px 18px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:normal;box-shadow:none}
.ttk-front .st-scope .stfaq-btn:hover{filter:brightness(1.1);background:var(--st-accent);color:#fff}
.ttk-front .st-scope .stfaq-btn.stfaq-sec{background:#faf9f6;color:#16161a;border:1px solid var(--st-line);filter:none}
.ttk-front .st-scope .stfaq-btn.stfaq-sec:hover{border-color:var(--st-accent);background:#faf9f6;color:#16161a}
.ttk-front .st-scope .st-cform-pick{margin:0 0 16px;padding:0;border:0;min-width:0}
.ttk-front .st-scope .st-modepills{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.ttk-front .st-scope .st-modepill{background:#fff;border:1px solid #cfcabf;border-radius:999px;padding:10px 18px;font:inherit;font-size:14.5px;font-weight:600;color:#16161a;cursor:pointer;text-transform:none;letter-spacing:normal;box-shadow:none}
.ttk-front .st-scope .st-modepill:hover{border-color:var(--st-accent);background:#fff;color:#16161a}
.ttk-front .st-scope .st-modepill[aria-pressed="true"]{background:var(--st-accent);border-color:var(--st-accent);color:#fff}
.ttk-front .st-scope .st-backlink{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:#0a544a;text-decoration:none;margin:0 0 8px;font-weight:600}
.ttk-front .st-scope .st-backlink:hover{text-decoration:underline}
.ttk-front .st-scope .st-pick-empty{border:1px dashed #cfcabf;border-radius:10px;background:#faf9f6;padding:18px;text-align:center;font-size:13.5px;color:#6c6c76;margin:0 0 12px}
.ttk-front .st-scope .st-pick-empty p{margin:0 0 12px}
.ttk-front .st-scope .st-pick-empty__btn{padding:9px 16px;font-size:14px}
.ttk-front .st-scope .st-cpick-list{margin:0 0 4px}
.ttk-front .st-scope .st-cpick-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 8px;border:1px solid #cfcabf;border-radius:10px;cursor:pointer;background:#fff}
.ttk-front .st-scope .st-cpick-row input{margin:3px 0 0;flex:none;width:auto;accent-color:var(--st-accent)}
.ttk-front .st-scope .st-cpick-row:has(input:checked){border-color:var(--st-accent);box-shadow:0 0 0 3px var(--st-soft)}
.ttk-front .st-scope .st-cpick-body{display:block;min-width:0}
.ttk-front .st-scope .st-cpick-top{display:block}
.ttk-front .st-scope .st-cpick-top b{margin-right:8px}
.ttk-front .st-scope .st-cpick-state{font-size:.9em;opacity:.8;margin-right:8px}
.ttk-front .st-scope .st-cpick-tag{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.4px;opacity:.65}
.ttk-front .st-scope .st-cpick-meta{display:block;font-size:.85em;opacity:.7;margin-top:2px;word-break:break-word}
.ttk-front .st-scope .st-cpick-toggle{display:flex;gap:9px;align-items:center;font-weight:600;margin:0 0 12px;cursor:pointer;font-size:14px}
.ttk-front .st-scope .st-cpick-toggle input{flex:none;margin:0;width:auto;accent-color:var(--st-accent)}

/* deflectieblok (scherm 05) */
.ttk-front .st-defl{border:1px solid #e6e3dc;border-radius:14px;background:#fff;overflow:hidden;margin:16px 0}
.ttk-front .st-defl__card .st-card{margin:0;border:0;border-radius:0;box-shadow:none}
.ttk-front .st-defl__faq{padding:14px 18px;border-top:1px solid #e6e3dc}
.ttk-front .st-defl__faq h4{margin:0 0 6px;font-size:14.5px;font-weight:600;color:#16161a}
.ttk-front .st-defl__faq p{margin:0 0 6px;font-size:13.5px;color:#4a4a52}
.ttk-front .st-defl__ask{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 18px;background:#faf9f6;border-top:1px solid #e6e3dc;font-size:13.5px;font-weight:600;color:#16161a}
.ttk-front .st-defl__btn{padding:8px 14px;font-size:14px}

/* wachttermijn-popup (scherm 04) — exact het stfaq-waitpop-idioom */
.ttk-front .stfaq-waitpop-overlay{position:fixed;inset:0;background:rgba(16,16,20,.45);z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px}
.ttk-front .stfaq-waitpop{background:#fff;border-radius:16px;max-width:400px;width:100%;padding:24px 22px 20px;text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);color:#16161a}
.ttk-front .stfaq-waitpop-ic{width:48px;height:48px;border-radius:50%;background:#e4f1ed;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 10px;color:#0d6d5f}
.ttk-front .stfaq-waitpop h4{font-size:17px;margin:0 0 10px;font-weight:600}
.ttk-front .stfaq-waitpop-days{display:inline-flex;align-items:baseline;gap:6px;background:#e4f1ed;color:#0a544a;border-radius:999px;padding:5px 14px;margin:0 0 12px}
.ttk-front .stfaq-waitpop-days b{font-size:21px;line-height:1}
.ttk-front .stfaq-waitpop-days span{font-size:13px;font-weight:600}
.ttk-front .stfaq-waitpop p{font-size:14px;color:#16161a;margin:0 0 10px;text-align:left}
.ttk-front .stfaq-waitpop .stfaq-waitpop-sub{color:#6c6c76;font-size:13px}
.ttk-front .stfaq-waitpop-row{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.ttk-front .stfaq-waitpop-row .stfaq-btn{padding:10px 16px;font-size:14px}

/* ==================================================================== */
/* Fase 3 — gastformulier (scherm 07), magic-linkpagina (08), bijlagen  */
/* ==================================================================== */

/* pagina-containers buiten Mijn account (shortcode + /ticket/<ref>/) */
.ttk-guestpage{max-width:760px;margin:32px auto 48px;padding:0 20px;box-sizing:border-box}
.ttk-guestform{max-width:640px;margin:0 auto}
.ttk-front .ttk-accountnote{margin-top:22px}

/* 0.38.0 — de kleine uitleg over de levensduur van de persoonlijke link, en de
 * pagina "deze link is al gebruikt". Rustiger dan de lopende tekst eromheen:
 * het is achtergrondinformatie, geen instructie. */
.ttk-front .ttk-linkuitleg{font-size:13px;line-height:1.6;color:#6b6b6b;margin:10px 0 0}

/* invoervelden van het gastformulier — exact de ST-veldtaal (rand #cfcabf,
   radius 10), inclusief het Hestia-materialgevecht (border:0 + gradient) */
.ttk-front .st-scope input[type="text"],
.ttk-front .st-scope input[type="email"]{width:100%;box-sizing:border-box;padding:9px 12px;margin:0 0 12px;border:1px solid #cfcabf !important;border-radius:10px;font:inherit;background:#fff !important;color:#16161a;background-image:none !important;box-shadow:none !important}
.ttk-front .st-scope input[type="text"]:focus,
.ttk-front .st-scope input[type="email"]:focus{border-color:var(--st-accent) !important;box-shadow:0 0 0 3px var(--st-soft) !important;outline:none}
.ttk-front .ttk-turnstile{margin:0 0 14px}
.ttk-front .ttk-gerr{color:#b32d2e;opacity:1}

/* honeypot: visueel weggeklipt, niet display:none (bots kijken daarnaar) */
.ttk-front .ttk-hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* uploadvak (prototype .tk-upload) */
.ttk-front .tk-upload{display:block;border:1px dashed var(--ac-border);border-radius:8px;background:var(--ac-surface-muted);padding:14px;text-align:center;font-size:12px;color:var(--ac-text-muted);margin:10px 0 0;cursor:pointer}
.ttk-front .tk-upload:hover{border-color:var(--ac-accent)}
.ttk-front .tk-upload .ic{margin-right:4px}
.ttk-front .tk-upload-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ttk-front .tk-upload-count{display:block;margin-top:6px;font-size:11px;color:var(--ac-accent);word-break:break-word}
.ttk-front .st-scope .tk-upload{margin:0 0 14px}

/* bijlage-chips onder een bericht */
.ttk-front .tk-att{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ttk-front .tk-att-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ac-border);border-radius:999px;background:var(--ac-surface);padding:5px 12px;font-size:12px;color:var(--ac-accent);text-decoration:none;max-width:100%}
.ttk-front .tk-att-chip:hover{border-color:var(--ac-accent);background:var(--ac-accent-bg)}
.ttk-front .tk-att-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttk-front .tk-att-size{color:var(--ac-text-muted)}

/* ---- 2026-08-03: sleepzone, foto's in een venster, stapsgewijs gesprek ----
   Alles hangt aan de bestaande AC-tokens (--ac-border, --ac-surface,
   --ac-accent), zodat het thema leidend blijft en er geen tweede kleurenset
   ontstaat. Geen nieuwe kleuren = geen RUCSS-verrassingen. */

.ttk-front .tk-drop{margin:10px 0}
.ttk-front .tk-drop__zone{display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px;border:1px dashed var(--ac-border);border-radius:12px;background:var(--ac-surface);cursor:pointer;text-align:center;transition:border-color .12s,background .12s}
.ttk-front .tk-drop__zone:hover{border-color:var(--ac-accent)}
.ttk-front .tk-drop.is-over .tk-drop__zone{border-color:var(--ac-accent);border-style:solid}
.ttk-front .tk-drop__zone .ic{font-size:20px;color:var(--ac-text-muted)}
.ttk-front .tk-drop__main{font-size:14px;font-weight:500}
.ttk-front .tk-drop__or{font-weight:400;color:var(--ac-accent);text-decoration:underline}
.ttk-front .tk-drop__rules{font-size:12px;color:var(--ac-text-muted)}
/* Het echte bestandsveld blijft bereikbaar voor toetsenbord en schermlezer:
   wegclippen, niet display:none. */
.ttk-front .tk-upload-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ttk-front .tk-drop__list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ttk-front .tk-dropchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ac-border);border-radius:999px;background:var(--ac-surface);padding:4px 6px 4px 12px;font-size:12px;max-width:100%}
.ttk-front .tk-dropchip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.ttk-front .tk-dropchip b{font-weight:400;color:var(--ac-text-muted);flex:none}
.ttk-front .tk-dropchip button{border:0;background:transparent;cursor:pointer;color:var(--ac-text-muted);font-size:15px;line-height:1;padding:0 3px}

.ttk-front .tk-shots{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.ttk-front .tk-shot{margin:0;width:132px}
.ttk-front .tk-shot__btn{display:block;width:100%;height:100px;padding:0;border:1px solid var(--ac-border);border-radius:10px;overflow:hidden;background:var(--ac-surface);cursor:zoom-in}
.ttk-front .tk-shot__btn:hover{border-color:var(--ac-accent)}
.ttk-front .tk-shot__btn img{width:100%;height:100%;object-fit:cover;display:block}
.ttk-front .tk-shot figcaption{display:flex;justify-content:space-between;gap:6px;align-items:baseline;margin-top:4px;font-size:11.5px;color:var(--ac-text-muted)}
.ttk-front .tk-shot figcaption .tk-att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttk-front .tk-shot__dl{flex:none;color:var(--ac-accent)}

/* het venster staat buiten .ttk-front (direct op body), dus zonder prefix */
.tk-lightbox{position:fixed;inset:0;z-index:100200;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:20px}
.tk-lightbox__box{background:#fff;border-radius:14px;overflow:hidden;max-width:min(1000px,95vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 70px -20px rgba(0,0,0,.55)}
.tk-lightbox__bar{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid #e6e6e9;background:#fafafb}
.tk-lightbox__name{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#16161a}
.tk-lightbox__dl{font-size:12.5px;flex:none}
.tk-lightbox__x{flex:none;border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:#6b6b74;padding:0 4px}
.tk-lightbox__img{display:block;max-width:100%;max-height:calc(92vh - 48px);object-fit:contain;background:#f4f4f6}

.ttk-front .tk-msgwrap[hidden]{display:none !important}
.ttk-front .tk-day[hidden]{display:none !important}
.ttk-front .tk-older__n{opacity:.7}

/* "Nieuw ticket" als venster over de lijst (2026-08-03). Hergebruikt de
   lightbox-schil; alleen breder en scrollbaar, want er past een pakketkiezer
   met meerdere zendingen in. */
.tk-newmodal__box{width:min(720px,95vw);max-height:92vh}
.tk-newmodal__body{overflow-y:auto;max-height:calc(92vh - 64px);padding:22px 24px 26px;background:#fff}
/* De balk draagt de titel; de kop IN het blok gaat daarom uit (zie hieronder).
   Zonder titel was dit een lege grijze strook met alleen een kruisje. */
.tk-newmodal__bar{padding:13px 16px 12px;gap:10px}
.tk-newmodal__title{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap;font-size:15px;color:#16161a}
.tk-newmodal__title .ic{width:1em;height:1em;font-size:17px;color:#0d6d5f;flex:none;fill:none}
.tk-newmodal__title b{font-weight:700}
.tk-newmodal__sub{font-size:13px;color:#6b6b74;font-weight:400}
/* In het venster is "Alle tickets" onzin (je staat op die lijst) en staat de
   titel al in de balk. Op de losse pagina blijft de kop gewoon staan. */
.tk-newmodal .ttk-newhead{display:none}
@media (max-width:600px){
	.tk-newmodal__body{padding:16px 14px 20px}
	.tk-newmodal__sub{display:none}
}

/* Waar gaat je bericht over — twee keuzekaarten in plaats van twee pillen.
   Een pil van 350 px zonder uitleg zei niets over wat er daarna gebeurt; deze
   kaarten vertellen het wél, en het verschil tussen "mét bestelling" (track &
   trace gaat automatisch mee) en "iets anders" is nu zichtbaar vóór de keuze. */
.ttk-front .ttk-choice-label{margin-bottom:10px}
.ttk-front .ttk-choice{display:grid;gap:10px;margin:0 0 18px}
.ttk-front .ttk-choice__card{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;background:var(--ac-surface,#fff);border:1px solid var(--ac-border,#e0dcd3);border-radius:14px;padding:15px 14px;cursor:pointer;font:inherit;color:var(--ac-text,#16161a);text-transform:none;letter-spacing:normal;box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s}
.ttk-front .ttk-choice__card:hover{border-color:#0d6d5f;background:#fff;box-shadow:0 6px 18px -12px rgba(0,0,0,.4);color:var(--ac-text,#16161a)}
.ttk-front .ttk-choice__card:focus-visible{outline:2px solid #0d6d5f;outline-offset:2px}
.ttk-front .ttk-choice__card[aria-pressed="true"]{border-color:#0d6d5f;background:#f2f9f7;box-shadow:inset 0 0 0 1px #0d6d5f}
.ttk-front .ttk-choice__ic{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:#eef6f4;color:#0d6d5f}
.ttk-front .ttk-choice__card[aria-pressed="true"] .ttk-choice__ic{background:#0d6d5f;color:#fff}
.ttk-front .ttk-choice__ic .ic{font-size:19px;width:1em;height:1em}
.ttk-front .ttk-choice__txt{flex:1;min-width:0;display:block}
.ttk-front .ttk-choice__txt b{display:block;font-size:15px;font-weight:700;line-height:1.35;margin:0 0 3px}
.ttk-front .ttk-choice__txt>span{display:block;font-size:13.5px;line-height:1.55;color:var(--ac-text-muted,#6b6b74);font-weight:400}
.ttk-front .ttk-choice__go{flex:none;align-self:center;color:#b4b0a8}
.ttk-front .ttk-choice__go .ic{font-size:17px;width:1em;height:1em}
.ttk-front .ttk-choice__card:hover .ttk-choice__go,
.ttk-front .ttk-choice__card[aria-pressed="true"] .ttk-choice__go{color:#0d6d5f}
@media (max-width:600px){
	.ttk-front .ttk-choice__go{display:none}
	.ttk-front .ttk-choice__card{padding:13px 12px}
}

/* "Hoe werkt een ticket?" — dicht tenzij iemand het opent. */
.ttk-front .ttk-help{margin:22px 0 0;border-top:1px solid var(--ac-border,#e6e3dc);padding-top:14px}
.ttk-front .ttk-help__sum{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--ac-text,#16161a);padding:4px 0}
.ttk-front .ttk-help__sum::-webkit-details-marker{display:none}
.ttk-front .ttk-help__sum .ic{font-size:17px;color:#0d6d5f;width:1em;height:1em}
.ttk-front .ttk-help__sum::after{content:"";width:8px;height:8px;border-right:2px solid #9b968d;border-bottom:2px solid #9b968d;transform:rotate(45deg);margin-left:auto;margin-top:-4px;transition:transform .15s}
.ttk-front .ttk-help[open] .ttk-help__sum::after{transform:rotate(-135deg);margin-top:2px}
.ttk-front .ttk-help__sum:hover{color:#0d6d5f}
.ttk-front .ttk-help__body{padding:6px 0 2px}
.ttk-front .ttk-help__item{padding:10px 0;border-top:1px dashed var(--ac-border,#e6e3dc)}
.ttk-front .ttk-help__item:first-child{border-top:0}
.ttk-front .ttk-help__item b{display:block;font-size:13.8px;font-weight:700;margin:0 0 3px}
.ttk-front .ttk-help__item p{margin:0;font-size:13.4px;line-height:1.6;color:var(--ac-text-muted,#6b6b74)}

/* Het korte formulier voor wie uit de mail komt (2026-08-03).
   Mag er verzorgd uitzien: dit is voor veel klanten het eerste echte contact
   met het ticketsysteem. Eén kaart, veel lucht, grote velden — en verder niets
   om over na te denken, want naam, adres en bestelling kennen we al. */
.ttk-front.ttk-slim{max-width:640px;margin:0 auto}
.ttk-slim__card{background:var(--ac-surface,#fff);border:1px solid var(--ac-border,#e6e3dc);border-radius:18px;padding:34px 32px 30px;box-shadow:0 18px 40px -28px rgba(0,0,0,.35)}
.ttk-slim__title{margin:0 0 8px;font-size:26px;line-height:1.25;font-weight:700}
.ttk-slim__sub{margin:0 0 24px;font-size:14.5px;line-height:1.65;color:var(--ac-text-muted,#6b6b74)}
.ttk-slim__label{display:block;font-weight:600;font-size:14px;margin:0 0 7px}
.ttk-slim__opt{font-weight:400;font-size:12.5px;color:var(--ac-text-muted,#6b6b74);margin-left:6px}
.ttk-slim__form input[type="text"],
.ttk-slim__form textarea{width:100%;box-sizing:border-box;padding:13px 15px;border:1px solid var(--ac-border,#e6e3dc);border-radius:12px;font:inherit;font-size:15px;margin:0 0 20px;background:#fff}
.ttk-slim__form input[type="text"]:focus,
.ttk-slim__form textarea:focus{outline:none;border-color:var(--ac-accent,#0d6d5f);box-shadow:0 0 0 3px rgba(13,109,95,.12)}
.ttk-slim__form textarea{resize:vertical;min-height:150px;line-height:1.6}
/* ⚠️ !important is hier bewust. Thema's stylen `button` en `.btn` met hoge
   specificiteit (Hestia doet dat, en op de standalone gebeurt hetzelfde op
   andere plekken): zonder dit wordt onze knop themablauw en past hij niet meer
   bij de rest van het ticketsysteem. Alleen op ONZE eigen klassen, dus geen
   enkele themaknop wordt geraakt. */
/* ⚠️ Vaste kleur, GEEN var(--ac-accent). Die variabele bestaat wél op deze
   site — account-customizations zet hem op de themakleur — en die is hier
   blauw. De fallback werd dus nooit gebruikt en de knop volgde het thema.
   Het ticketsysteem heeft zijn eigen groen; dat moet overal hetzelfde zijn,
   ook op de standalone waar een ander thema staat. Aanpasbaar met het filter
   ttk_slim_button_color als je hem ooit toch mee wilt laten lopen. */
.ttk-slim__btn,
.ttk-front .ttk-slim__btn{display:block !important;width:100% !important;padding:15px 20px !important;border:0 !important;border-radius:12px !important;background:#0d6d5f !important;background-color:#0d6d5f !important;background-image:none !important;color:#fff !important;font-size:15.5px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:normal !important;box-shadow:none !important;cursor:pointer}
.ttk-slim__btn:hover,
.ttk-front .ttk-slim__btn:hover,
.ttk-slim__btn:focus,
.ttk-front .ttk-slim__btn:focus{background:#0a5a4e !important;background-color:#0a5a4e !important;color:#fff !important}
.ttk-slim__btn:focus-visible{outline:3px solid rgba(13,109,95,.35);outline-offset:2px}
.ttk-slim__note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--ac-text-muted,#6b6b74);text-align:center}
@media (max-width:600px){
	.ttk-slim__card{padding:26px 20px 24px;border-radius:14px}
	.ttk-slim__title{font-size:22px}
}

/* De eigen landingspagina /ticket-starten/ (2026-08-03, bijgesteld dezelfde dag).
   Eerst stond hier padding-top:140px, voor thema's met een vaste header die
   over de inhoud valt. Gemeten op Hestia: dat thema rendert op deze pagina zijn
   EIGEN titelbanner ("Stel je vraag") én zet er zelf 70px boven — samen met
   onze 140 + 32 marge werd dat 242px leegte boven de kaart, en onderaan nog
   eens 112. Dat is de "gapende ruimte" die de eigenaar zag.
   Nu laten we de opmaak aan het thema en houden we alleen wat lucht over. Heeft
   een ander thema géén titelbanner en valt de kop onder een vaste header, zet
   padding-top dan hier terug — niet ergens anders. */
.ttk-front.ttk-landingpage,
main.ttk-landingpage{padding-top:8px;padding-bottom:24px;margin-top:0;margin-bottom:24px}

/* Hestia stopt elk veld in een .form-group met eigen marges, boven op de marges
   van onze labels. Dat gaf een gat van ~50px tussen de uitleg en het eerste
   veld. Binnen de kaart voeren wij de afstanden. */
.ttk-slim .form-group{margin:0 !important;padding:0 !important}
.ttk-slim .form-group + .ttk-slim__label,
.ttk-slim__label{display:block;margin:16px 0 6px}
.ttk-slim__card > .ttk-slim__label:first-of-type{margin-top:0}
/* wpautop maakt lege <p>'s rond de verborgen velden (naam, adres, bestelnummer)
   en achter het formulier. Ze zijn onzichtbaar maar houden wél hun marge — dat
   was de resterende lege strook tussen de uitleg en het eerste veld. */
.ttk-slim p:empty{display:none !important;margin:0 !important}
/* En de echte boosdoener: wpautop zet een <br> tussen de verborgen velden. Die
   zijn onzichtbaar maar wel 16px hoog — drie verborgen velden = 48px lege
   strook boven het eerste zichtbare veld. Gemeten in de browser. */
.ttk-slim__form > br{display:none}
/* Het zwaaiende handje naast de naam (2026-08-04). Zwaait twee keer bij het
   laden en dan niet meer — een handje dat blijft bewegen leidt af terwijl
   iemand zijn vraag zit te typen. Wie beweging heeft uitgezet in zijn systeem
   krijgt gewoon een stilstaand handje. */
.ttk-slim__wave{display:inline-block;transform-origin:70% 80%;animation:ttk-zwaai 1.6s ease-in-out 2}
@keyframes ttk-zwaai{
	0%,60%,100%{transform:rotate(0deg)}
	10%{transform:rotate(14deg)}
	20%{transform:rotate(-8deg)}
	30%{transform:rotate(14deg)}
	40%{transform:rotate(-4deg)}
	50%{transform:rotate(10deg)}
}
@media (prefers-reduced-motion:reduce){
	.ttk-slim__wave{animation:none}
}
.ttk-slim__form > p{margin:0}
.ttk-slim__form input[type="hidden"]{display:none}
.ttk-slim__form > .ttk-slim__label:first-of-type,
.ttk-slim__form > *:first-child.ttk-slim__label{margin-top:0}

/* Snelle "Afronden" naast een ticketrij (2026-08-03). De knop staat naast de
   link, niet erin — een knop in een <a> is ongeldig en werkt niet. Rustig
   uitgevoerd en pas duidelijk zichtbaar bij hover/focus: afsluiten is geen
   hoofdactie en mag niet uitnodigen tot een misklik. */
/* ⚠️ NIET absoluut positioneren. Dat was de eerste opzet (rechtsonder in de
   rij) en de knop kwam bovenop de statuspil "Nieuw" te liggen — gemeld door de
   eigenaar. De rij is een kaart met eigen inhoud; een knop die daar overheen
   zweeft botst altijd met iets. Hij staat nu gewoon ONDER de rij, rechts
   uitgelijnd, in de normale flow. */
/* De knop zit IN de kaart, rechtsonder onder de statuspil (2026-08-03: hij
   hing eronder en botste met de pil). Rustig tot je over de kaart zweeft. */
.ttk-front .tk-quickclose{display:inline-flex;align-items:center;gap:5px;margin:0;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text-muted);border-radius:999px;padding:4px 12px 4px 10px;font:inherit;font-size:12px;line-height:1.5;cursor:pointer;white-space:nowrap;opacity:.62;text-transform:none;letter-spacing:normal;box-shadow:none;transition:opacity .12s,border-color .12s,color .12s,background .12s}
.ttk-front .tk-quickclose .ic{font-size:13px;width:1em;height:1em}
.ttk-front .tk-item:hover .tk-quickclose,.ttk-front .tk-quickclose:focus-visible{opacity:1}
/* 2026-08-06 — contrast van de hoverstand. Tekst stond op #1a9d54 en haalde op
   #f2fbf5 maar 3.32:1; WCAG AA vraagt 4.5:1. Zelfde tint (146.6°) en zelfde
   verzadiging, alleen donkerder: #158145 = 4.67:1. Dat is exact hetzelfde groen
   als de statuspil .tk-pill--ok, dus de klantzijde heeft nu één accentgroen in
   plaats van twee bijna-gelijke. De rand gaat mee — anders is de knop bij hover
   half oud en half nieuw. De achtergrond #f2fbf5 blijft ongewijzigd. */
.ttk-front .tk-quickclose:hover{border-color:#158145;color:#158145;background:#f2fbf5;opacity:1}
.ttk-front .tk-quickclose:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}
/* Een ongelezen-stip rechtsboven zou onder de pil vallen; die staat daarom
   links van de titel zodra er ook een knop in de kaart zit. */
.ttk-front .tk-item--closable .tk-dot{top:11px;right:auto;left:5px}
@media (max-width:600px){
	.ttk-front .tk-quickclose{opacity:1}
}

/* breekpunten van de echte site */
@media (max-width:600px){
	.ttk-front .tk-item{grid-template-columns:1fr}
	.ttk-front .tk-item__side{flex-direction:row;align-items:center;justify-content:flex-start}
}
@media (max-width:480px){
	.ttk-front .tk-actions .ac-btn{width:100%;text-align:center;box-sizing:border-box}
	.ttk-front .st-scope .stfaq-btn{width:100%}
	.ttk-front .st-scope .st-modepill{width:100%;text-align:center}
	.ttk-front .stfaq-waitpop-row{flex-direction:column}
	.ttk-front .stfaq-waitpop-row .stfaq-btn{width:100%}
	.ttk-front .tk-msg--admin{margin-left:12px}
}

/* ============================================================================
   KLEURPANTSER (2026-08-03)
   ----------------------------------------------------------------------------
   Op de standalone schilderde het thema onze knoppen en velden over: knoppen in
   een eigen groen, en een tekstvak dat bij het typen een RODE onderrand kreeg
   (Hestia tekent die rand als background-image op .form-control, plus een eigen
   box-shadow). Onze eigen regels verloren dat gevecht op specificiteit.

   Daarom staan de knop- en veldstijlen hier nog een keer, aan het eind van het
   bestand, met !important. Alles blijft binnen .ttk-front — buiten het
   ticketscherm raken we niets van het thema aan.

   Wijzig je hier een kleur: --ac-accent bovenaan is de bron, deze regels
   verwijzen ernaar. Nooit hier een losse hexcode neerzetten.
   ========================================================================== */

/* --- velden ---------------------------------------------------------------- */
.ttk-front input[type="text"],.ttk-front input[type="email"],.ttk-front input[type="tel"],
.ttk-front input[type="number"],.ttk-front input[type="search"],.ttk-front input[type="url"],
.ttk-front textarea,.ttk-front select{
	background-color:#fff !important;background-image:none !important;
	border:1px solid #cfcabf !important;border-radius:10px !important;
	color:#16161a !important;font:inherit !important;font-size:14px !important;
	box-shadow:none !important;transition:border-color .12s,box-shadow .12s !important;
}
.ttk-front input[type="text"]:hover,.ttk-front input[type="email"]:hover,
.ttk-front textarea:hover,.ttk-front select:hover{border-color:#b9b3a6 !important}
.ttk-front input[type="text"]:focus,.ttk-front input[type="email"]:focus,
.ttk-front input[type="tel"]:focus,.ttk-front input[type="number"]:focus,
.ttk-front input[type="search"]:focus,.ttk-front input[type="url"]:focus,
.ttk-front textarea:focus,.ttk-front select:focus{
	outline:none !important;background-image:none !important;
	border-color:var(--ac-accent) !important;
	box-shadow:0 0 0 3px rgba(13,109,95,.16) !important;
}
/* Hestia hangt de gekleurde onderstreping aan de wikkel, niet aan het veld. */
.ttk-front .form-group.is-focused .form-control,
.ttk-front .form-group.is-focused label,
.ttk-front .form-group.is-focused .form-control:focus{
	background-image:none !important;color:#16161a !important;
}
.ttk-front ::placeholder{color:#9a958c !important;opacity:1}

/* --- knoppen --------------------------------------------------------------- */
.ttk-front .stfaq-btn,.ttk-front button.stfaq-btn,.ttk-front a.stfaq-btn,
.ttk-front .ac-btn,.ttk-front button.ac-btn,.ttk-front a.ac-btn{
	background-color:var(--ac-accent) !important;background-image:none !important;
	border:1px solid var(--ac-accent) !important;color:#fff !important;
	text-transform:none !important;letter-spacing:normal !important;
	box-shadow:none !important;font:inherit !important;font-weight:600 !important;
}
.ttk-front .stfaq-btn:hover,.ttk-front .ac-btn:hover,
.ttk-front .stfaq-btn:focus,.ttk-front .ac-btn:focus{
	background-color:var(--ac-accent-dark) !important;border-color:var(--ac-accent-dark) !important;
	color:#fff !important;filter:none !important;
}
.ttk-front .stfaq-btn:focus-visible,.ttk-front .ac-btn:focus-visible{
	outline:2px solid var(--ac-accent) !important;outline-offset:2px !important;
}
.ttk-front .stfaq-btn[disabled],.ttk-front .ac-btn[disabled]{opacity:.55 !important;cursor:default !important}
/* Tweede keus: dezelfde kleur, maar als omlijning. */
.ttk-front .stfaq-btn.stfaq-sec,.ttk-front button.stfaq-btn.stfaq-sec{
	background-color:#fff !important;color:var(--ac-accent) !important;
	border:1px solid var(--ac-accent) !important;
}
.ttk-front .stfaq-btn.stfaq-sec:hover{background-color:var(--ac-accent-bg) !important;color:var(--ac-accent-dark) !important}
.ttk-front .ac-btn--pill,.ttk-front a.ac-btn--pill,.ttk-front button.ac-btn--pill{
	background-color:#fff !important;background-image:none !important;
	border:1px solid var(--ac-border) !important;color:var(--ac-accent) !important;
}
.ttk-front .ac-btn--pill:hover{border-color:var(--ac-accent) !important;background-color:var(--ac-accent-bg) !important}
/* Radio en vinkje: het thema geeft ze soms zijn eigen kleur. */
.ttk-front input[type="radio"],.ttk-front input[type="checkbox"]{accent-color:var(--ac-accent)}

/* De vensterbalk staat BUITEN .ttk-front (het venster hangt onder <body>), dus
   die regels gelden hier niet. Zonder deze paar regels geeft het thema het
   kruisje een grijs blok — zoals op de proefopname van 3 augustus. */
.tk-lightbox__x,.tk-lightbox button.tk-lightbox__x{
	background:transparent !important;background-image:none !important;
	border:0 !important;box-shadow:none !important;color:#6b6b74 !important;
	width:32px !important;height:32px !important;padding:0 !important;margin:0 !important;
	border-radius:8px !important;font-size:22px !important;line-height:1 !important;
	display:flex !important;align-items:center;justify-content:center;
	text-transform:none !important;min-width:0 !important;
}
.tk-lightbox__x:hover{background:#eceaea !important;color:#16161a !important}
.tk-lightbox__x:focus-visible{outline:2px solid #0d6d5f !important;outline-offset:2px}

/* ============================================================================
   OVERGENOMEN GESPREK (2026-08-03)
   Een gesprek dat uit een ander ticket is overgezet krijgt zijn eigen venster
   in de draad: dicht bij het openen, inhoud komt pas na een klik binnen. Geen
   track & trace erbij — dat hoort bij de bestelling van DIT ticket.
   ========================================================================== */
.ttk-front .tk-import{margin:4px 0 14px}
.ttk-front .tk-import__knop{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--ac-surface-muted);border:1px solid var(--ac-border);border-radius:var(--ac-radius);padding:12px 14px;cursor:pointer;font:inherit;color:var(--ac-text,#3a3a3a);text-transform:none;letter-spacing:normal;box-shadow:none;transition:border-color .15s,background .15s}
.ttk-front .tk-import__knop:hover{border-color:var(--ac-accent);background:#fff}
.ttk-front .tk-import__knop:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}
.ttk-front .tk-import__ic{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--ac-accent-bg);color:var(--ac-accent)}
.ttk-front .tk-import__ic .ic{font-size:17px;width:1em;height:1em}
.ttk-front .tk-import__txt{flex:1;min-width:0}
.ttk-front .tk-import__txt b{display:block;font-size:13.5px;font-weight:700;line-height:1.4}
.ttk-front .tk-import__txt>span{display:block;font-size:12px;color:var(--ac-text-muted);margin-top:1px}
.ttk-front .tk-import__go{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ac-accent);white-space:nowrap}
.ttk-front .tk-import__go .ic{font-size:15px;width:1em;height:1em;transition:transform .15s}
.ttk-front .tk-import--open .tk-import__go .ic{transform:rotate(90deg)}
.ttk-front .tk-import--laden .tk-import__knop{opacity:.7;cursor:progress}
/* De ingeladen berichten staan ingesprongen onder de knop, met een lijn ernaast
   zodat zichtbaar blijft dat het één blok uit een ander gesprek is. */
.ttk-front .tk-import__body{margin:10px 0 0;padding:12px 12px 10px;border:1px solid var(--ac-border);border-left:4px solid var(--ac-accent);border-radius:var(--ac-radius);background:var(--ac-surface-muted);display:flex;flex-direction:column;gap:10px}
.ttk-front .tk-import__msgs{display:flex;flex-direction:column;gap:10px}
/* Duidelijk maken dat dit een ANDER gesprek is; zonder deze regels lezen de
   bubbels als een doorlopend gesprek met de draad erboven. */
.ttk-front .tk-import__mark{margin:0;padding:9px 12px;border-radius:8px;background:var(--ac-accent-bg);color:#0a5a4e;font-size:12.5px;line-height:1.55}
.ttk-front .tk-import__end{margin:0;padding-top:8px;border-top:1px dashed var(--ac-border);color:var(--ac-text-muted);font-size:12px;text-align:center}
.ttk-front .tk-import__body .tk-msg{background:var(--ac-surface)}
.ttk-front .tk-import__body .tk-day:first-child{margin-top:0}
@media (max-width:600px){
	.ttk-front .tk-import__knop{flex-wrap:wrap;gap:10px;padding:11px 12px}
	.ttk-front .tk-import__txt{flex:1 1 auto;min-width:0}
	/* Onder elkaar is de knop 3 regels hoog; het label naar rechts onderin. */
	.ttk-front .tk-import__go{order:3;margin-left:auto}
	.ttk-front .tk-import__body{margin-left:0;padding-left:10px}
	.ttk-front .tk-import__body .tk-msg--admin{margin-left:0}
}

/* ==================================================================
 * 0.50.0 - adresverificatie (klantzijde).
 *
 * Eén blok voor BEIDE klantpagina's: Mijn account en de persoonlijke
 * link. Beide wikkelen hun inhoud in .ttk-front, dus deze regels gelden
 * op allebei zonder een tweede variant.
 *
 * Het formulier wordt met het hidden-attribuut geschakeld (net als
 * ttkStep2 en .ttk-dupblock elders in deze plugin). Bewust GEEN
 * display:none in CSS met een class erbij: dan wint de class van
 * [hidden] en blijft het staan - die fout staat al in orderbox.css
 * beschreven.
 * ================================================================== */
.ttk-front .ttk-addr{margin:0 0 18px;padding:16px 18px;border:1px solid var(--ac-accent);border-radius:12px;background:var(--ac-accent-bg)}
.ttk-front .ttk-addr__kop{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px;font-weight:600;color:var(--ac-text)}
.ttk-front .ttk-addr__kop .ic{width:20px;height:20px;flex:0 0 20px}
.ttk-front .ttk-addr__uit{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--ac-text-muted)}
.ttk-front .ttk-addr__kaart{margin:0 0 14px;padding:12px 14px;border:1px solid var(--ac-border);border-radius:8px;background:var(--ac-surface)}
.ttk-front .ttk-addr__regel{margin:0;font-size:14px;line-height:1.55;color:var(--ac-text)}
.ttk-front .ttk-addr__acties{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ttk-front .ttk-addr__form{margin:14px 0 0;padding:14px;border:1px solid var(--ac-border);border-radius:8px;background:var(--ac-surface)}
.ttk-front .ttk-addr__form[hidden]{display:none}
.ttk-front .ttk-addr__form .tk-label{margin:10px 0 4px}
.ttk-front .ttk-addr__form .tk-label:first-of-type{margin-top:0}
.ttk-front .tk-input{width:100%;border:1px solid var(--ac-border);border-radius:8px;padding:9px 12px;background:var(--ac-surface-muted);font:inherit;box-sizing:border-box}
.ttk-front .tk-input:focus{border-color:var(--ac-accent);background:var(--ac-surface);outline:none;box-shadow:none}
.ttk-front .ttk-addr__form .tk-actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ttk-front .ttk-addr__voet{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ac-text-muted)}
.ttk-front .ttk-addr__klaar{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13.5px;line-height:1.6;color:var(--ac-text)}
.ttk-front .ttk-addr__klaar .ic{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
@media (max-width:600px){
	.ttk-front .ttk-addr{padding:14px}
	/* Op 390 px staan twee knoppen naast elkaar te krap; onder elkaar
	 * over de volle breedte leest beter en is beter te raken. */
	.ttk-front .ttk-addr__acties{flex-direction:column;align-items:stretch}
	.ttk-front .ttk-addr__acties .ac-btn,
	.ttk-front .ttk-addr__acties .ac-btn--pill{width:100%;text-align:center}
}.ttk-front .ttk-addr__hint{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--ac-text-muted)}/* ⚠️ Het thema zet een eigen marge op elke <p>; met alleen .ttk-addr__regel
 * (0-2-0) stonden de adresregels ver uit elkaar - gezien op de opname, niet in
 * de code. Elementnaam + oudercontainer erbij zodat deze regel wint. */
.ttk-front .ttk-addr__kaart p.ttk-addr__regel{margin:0;padding:0;line-height:1.55}
.ttk-front .ttk-addr__kaart p.ttk-addr__regel + p.ttk-addr__regel{margin-top:2px}