/* ------------------------------------------------------------------ *
 * TTC Tickets 0.56.0 — "mijn adres klopt niet" in Mijn account.
 *
 * De knop zelf krijgt GEEN eigen vormgeving: hij draagt `.ac-btn--pill` en
 * staat in `.ko-actions`, dus hij erft precies de pil die daar al staat
 * (gemeten in myaccount-hestia.css r1804-1806: rand 1px var(--ac-border),
 * radius 20px, padding 6px 16px, 12px/500, kleur var(--ac-accent)).
 * Hieronder alleen het accent dat hem laat opvallen, plus het venster.
 *
 * ⚠️ Er wordt bewust met de bestaande `--ac-*`-variabelen gewerkt en niet met
 * eigen kleuren: dan blijft de knop kloppen als het thema verschuift. De
 * terugvalwaarden zijn gemeten op de echte pagina.
 * ------------------------------------------------------------------ */

.ko-actions .ttk-adresknop {
	/* Opvallen zonder uit de toon te vallen: dezelfde pil, maar met de
	   accentrand al aan in plaats van pas bij hover. */
	border-color: var(--ac-accent, #0d6d5f);
	font-weight: 600;
}
.ko-actions .ttk-adresknop:hover,
.ko-actions .ttk-adresknop:focus-visible {
	background: var(--ac-accent-bg, #e4f0ed);
}

/* ---------------- het venster ---------------- */

.ttk-am {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
/*
 * ⚠️ HET VENSTER WORDT NIET MET display:none VERBORGEN.
 * Alle zinnen van dit onderdeel staan erin, en `display:none` wordt door de
 * vertaler overgeslagen — dan staat er bij een vertaalde bezoeker later
 * Nederlandse tekst in een Engelse pagina. Clip wordt wél vertaald.
 * `pointer-events:none` erbij, anders vangt een onzichtbaar vlak nog kliks af.
 */
.ttk-am[hidden] {
	display: flex !important;
	inset: auto auto 0 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	background: none;
	pointer-events: none;
	padding: 0;
}

body.ttk-am-open { overflow: hidden; }

.ttk-am__dialog {
	background: var(--ac-surface, #fff);
	border: 1px solid var(--ac-border, #e3e6e4);
	border-radius: var(--ac-radius, 12px);
	max-width: 460px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.ttk-am__kop {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ac-border, #e3e6e4);
}
.ttk-am__titel { margin: 0; font-size: 17px; line-height: 1.3; flex: 1 1 auto; }
.ttk-am__x {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
	padding: 0 4px;
}
.ttk-am__x:hover { color: #111; }

.ttk-am__body { padding: 18px 20px 20px; }
.ttk-am__intro { margin: 0 0 16px; font-size: 14px; line-height: 1.55; }
.ttk-am__label {
	margin: 0 0 4px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b7280;
}
.ttk-am__nr { margin: 0 0 14px; font-weight: 600; }
.ttk-am__adres {
	margin: 0 0 18px;
	white-space: pre-line;      /* het adres komt met regeleindes binnen */
	line-height: 1.5;
	padding: 12px 14px;
	background: var(--ac-accent-bg, #f4f7f6);
	border-radius: 8px;
}

.ttk-am__acties { display: flex; gap: 10px; flex-wrap: wrap; }
.ttk-am__ok,
.ttk-am__fout {
	flex: 1 1 auto;
	border-radius: 20px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.4;
}
.ttk-am__ok {
	background: var(--ac-accent, #0d6d5f);
	border: 1px solid var(--ac-accent, #0d6d5f);
	color: #fff;
}
.ttk-am__fout {
	background: var(--ac-surface, #fff);
	border: 1px solid var(--ac-border, #e3e6e4);
	color: #b3261e;
}
.ttk-am__fout:hover:not(:disabled) { border-color: #b3261e; background: #fdf3f2; }
.ttk-am__fout:disabled { opacity: .55; cursor: default; }

.ttk-am__uitleg { margin: 14px 0 0; font-size: 12px; color: #6b7280; line-height: 1.5; }

.ttk-am__klaar,
.ttk-am__mis {
	margin: 0;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
}
.ttk-am__klaar { background: var(--ac-accent-bg, #e4f0ed); color: #14532d; }
.ttk-am__mis   { background: #fdf3f2; color: #b3261e; margin-top: 12px; }

/* ---------------- het adresformulier ---------------- */

.ttk-am__form { margin-top: 4px; }
.ttk-am__formkop {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 15px;
}
.ttk-am__veld { margin: 0 0 10px; }
.ttk-am__veld label {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 3px;
}
.ttk-am__veld input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--ac-border, #e3e6e4);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
	background: #fff;
}
.ttk-am__veld input:focus {
	outline: 2px solid #0d6d5f;
	outline-offset: 1px;
	border-color: #0d6d5f;
}
.ttk-am__veld input.is-leeg { border-color: #b3261e; background: #fdf3f2; }
.ttk-am__req { color: #b3261e; }

/* Twee smalle velden naast elkaar: postcode en plaats horen op één regel. */
@media (min-width: 420px) {
	.ttk-am__form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
	.ttk-am__formkop,
	.ttk-am__form .ttk-am__acties,
	.ttk-am__form .ttk-am__mis,
	.ttk-am__veld--address_1,
	.ttk-am__veld--company,
	.ttk-am__veld--country { grid-column: 1 / -1; }
}

.ttk-am__terug {
	flex: 1 1 auto;
	background: none;
	border: 1px solid var(--ac-border, #e3e6e4);
	border-radius: 20px;
	padding: 10px 18px;
	font-size: 14px;
	cursor: pointer;
	color: #6b7280;
}
.ttk-am__terug:hover { border-color: #9aa3a0; color: #111; }

.ttk-am__form .ttk-am__acties { margin-top: 6px; }

/* Verborgen blokken: clip in plaats van display:none, anders slaat de
   vertaler ze over en staat er later Engelse tekst in beeld. */
.ttk-am__form[hidden],
.ttk-am__klaar[hidden],
.ttk-am__mis[hidden],
.ttk-am__acties[hidden],
.ttk-am__uitleg[hidden] {
	display: block !important;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	padding: 0;
	margin: 0;
}

@media (max-width: 480px) {
	.ttk-am { padding: 0; align-items: flex-end; }
	.ttk-am__dialog { max-width: none; border-radius: 14px 14px 0 0; max-height: 92vh; }
	.ttk-am__acties { flex-direction: column-reverse; }
}