/* css/telefoon.css — de schil van js/telefoon.js: landcode + nummer op één regel.
 *
 * ⚠️ ELKE VARIABELE HEEFT EEN EIGEN TERUGVAL. Dit bestand hangt onder portal.html,
 * admin.html, account.html en t/activate.php, en die hebben ieder hun eigen kopie
 * van de tokens in een <style> in de pagina zelf. Ontbreekt er één, dan valt de
 * component terug op de merkkleur in plaats van op zwart-op-wit.
 *
 * ⚠️ ALLES STAAT HIER, NIETS WORDT INGESPOTEN. portal.html en t/activate.php
 * draaien onder een CSP zonder 'unsafe-inline' in script-src; stijl via JS in de
 * pagina duwen is precies het soort ding dat daar stukloopt. Een los CSS-bestand
 * valt onder `style-src 'self'` en mag overal.
 */

.tt-tel { display: block; }

.tt-tel-rij {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* DE LANDKEUZE. Wat je ziet is `.tt-tel-kort` — vlag + belcode, meer niet, want in
 * een vak van ~110px past niet meer en een half afgekapte landnaam leest als een fout.
 * De echte <select> ligt er doorzichtig overheen: die vangt de klik, opent de NATIVE
 * lijst van de browser (mét alle landnamen) en houdt toetsenbord en schermlezer heel.
 * Onder 700px blijven de twee velden náást elkaar — samen zijn ze smal genoeg, en onder
 * elkaar lezen ze als twee vragen in plaats van als één. */
.tt-tel-land {
  position: relative;
  flex: 0 0 auto;
  width: 112px;
  display: flex;
  align-items: center;
  background: var(--white, #fff);
  border: 1.5px solid var(--border, #e7e5e4);
  border-radius: var(--r, 12px);
  padding: 11px 26px 11px 12px;
  cursor: pointer;
}

/* Het pijltje. Zelf getekend, want het pijltje van de <select> eronder is onzichtbaar. */
.tt-tel-land::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-right: 1.8px solid var(--muted, #78716c);
  border-bottom: 1.8px solid var(--muted, #78716c);
  transform: rotate(45deg);
  pointer-events: none;
}

.tt-tel-kort {
  /* 16px, en dat is geen smaakkwestie: onder de 16px zoomt iOS bij het focussen in op
   * het veld en komt de pagina scheef te staan. */
  font-size: 16px;
  line-height: 1.2;
  color: var(--text, #1c1917);
  white-space: nowrap;
}

/* De echte keuzelijst: onzichtbaar, maar volledig aanwezig en aanklikbaar. */
.tt-tel-kies {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  font-family: inherit;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tt-tel-nr {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-family: inherit;
  color: var(--text, #1c1917);
  background: var(--white, #fff);
  border: 1.5px solid var(--border, #e7e5e4);
  border-radius: var(--r, 12px);
  padding: 11px 12px;
}

/* De focusring hoort om het ZICHTBARE vakje, niet om de doorzichtige <select>. */
.tt-tel-land:focus-within,
.tt-tel-nr:focus {
  outline: none;
  border-color: var(--navy, #1a2744);
}

/* Fout uit de component zelf (te kort, te lang, `00` vooraan). */
.tt-tel-nr.fout {
  border-color: var(--err, #dc2626);
  background: #fef2f2;
}

/* Fout uit de PAGINA: die zet `invalid` op het oorspronkelijke veld, dat nu
 * verborgen is. js/telefoon.js spiegelt die klasse hierheen zodat het rode randje
 * blijft verschijnen zonder dat portal.js of admin.js iets hoeft te weten. */
.tt-tel.paginafout .tt-tel-nr {
  border-color: var(--err, #dc2626);
  background: #fef2f2;
}

.tt-tel-fout {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--err, #dc2626);
}

.tt-tel-fout.toon { display: block; }