/**
 * AI Frame — publieke consistentie-laag.
 * De home-onepager is volledig self-contained (eigen header/footer, inline styles).
 * Over-ons/contact/auth krijgen de gedeelde AF-topbar via header.php; de
 * wrapper heeft daar padding-top:64px zodat niets onder de balk valt.
 */
.imgx-public-page { --maxw: 1280px; }

/* Contact: natuurlijke hoogte i.p.v. volledige viewport (topbar-offset zit al op de wrapper) */
.imgx-contact-page .split { min-height: auto; }

/* ═══════════════════════════════════════════════════════════════
   AI FRAME — AUTH (inloggen / registreren)
   Volledige styling voor .ia-auth-* in AI Frame-stijl. Hoge specificiteit
   (#imgx-page-content) zodat dit altijd wint van de oude plugin auth.css.
   ═══════════════════════════════════════════════════════════════ */
#imgx-page-content .ia-auth-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 78% 18%, rgba(200,162,75,0.06), transparent 60%),
    radial-gradient(50vw 40vh at 12% 88%, rgba(127,176,196,0.05), transparent 60%); }
#imgx-page-content .ia-auth { position: relative; z-index: 1; min-height: calc(100vh - 64px);
  display: flex; align-items: center; justify-content: center; padding: clamp(24px,5vw,64px) clamp(16px,4vw,48px);
  font-family: 'Manrope', -apple-system, sans-serif; color: #1E1C19; }
#imgx-page-content .ia-auth-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(24px,4vw,56px); align-items: center; width: 100%; max-width: 1120px; }
@media (max-width: 900px){ #imgx-page-content .ia-auth-grid { grid-template-columns: 1fr; max-width: 460px; }
  #imgx-page-content .ia-auth-showcase { display: none; } }

/* Form kop */
#imgx-page-content .ia-auth-top { margin-bottom: 24px; }
#imgx-page-content .ia-auth-kicker { display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #B49A3E; }
#imgx-page-content .ia-auth-kicker .pulse { width: 7px; height: 7px; border-radius: 50%; background: #C8A24B;
  box-shadow: 0 0 0 0 rgba(200,162,75,0.5); animation: iaPulse 2s infinite; }
@keyframes iaPulse { 0%{box-shadow:0 0 0 0 rgba(200,162,75,0.5)} 70%{box-shadow:0 0 0 8px rgba(200,162,75,0)} 100%{box-shadow:0 0 0 0 rgba(200,162,75,0)} }
#imgx-page-content .ia-auth-top h1 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px,4vw,42px);
  line-height: 1.08; letter-spacing: -0.02em; color: #1E1C19; margin: 14px 0 0; }
#imgx-page-content .ia-auth-top h1 em { font-style: normal; color: #C8A24B; }
#imgx-page-content .ia-auth-lede { font-size: 15px; color: rgba(30,28,25,0.55); line-height: 1.6; margin-top: 12px; max-width: 420px; }

/* Kaart */
#imgx-page-content .ia-auth-card { position: relative; background: #FFFFFF; border: 1px solid #E8E3DB; border-radius: 12px;
  padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 12px 40px rgba(0,0,0,0.04); }
#imgx-page-content .ia-auth-card::before, #imgx-page-content .ia-auth-card::after { content:''; position: absolute; width: 16px; height: 16px; pointer-events: none; }
#imgx-page-content .ia-auth-card::before { top:-1px; left:-1px; border-top: 2.5px solid #C8A24B; border-left: 2.5px solid #C8A24B; border-radius: 12px 0 0 0; }
#imgx-page-content .ia-auth-card::after { bottom:-1px; right:-1px; border-bottom: 2.5px solid #C8A24B; border-right: 2.5px solid #C8A24B; border-radius: 0 0 12px 0; }

#imgx-page-content .ia-auth-err { display: none; background: rgba(181,55,55,0.08); border: 1px solid rgba(181,55,55,0.25);
  color: #9B2C2C; font-size: 13px; padding: 10px 12px; border-radius: 8px; }
#imgx-page-content .ia-auth-err.is-on { display: block; }

#imgx-page-content .ia-auth-row { display: flex; flex-direction: column; gap: 7px; }
#imgx-page-content .ia-auth-lbl { font-size: 13px; font-weight: 600; color: #1E1C19; }
#imgx-page-content .ia-auth-lbl-row { display: flex; align-items: baseline; justify-content: space-between; }
#imgx-page-content .ia-auth-opt { font-weight: 400; color: rgba(30,28,25,0.4); }
#imgx-page-content .ia-auth-tiny { font-size: 12px; color: #B49A3E; }
#imgx-page-content .ia-auth-input { width: 100%; background: #FAFAF7; border: 1px solid #DDD8D0; border-radius: 8px;
  padding: 11px 13px; font-size: 14px; font-family: 'Manrope', sans-serif; color: #1E1C19; transition: border-color .18s, box-shadow .18s; }
#imgx-page-content .ia-auth-input::placeholder { color: rgba(30,28,25,0.32); }
#imgx-page-content .ia-auth-input:focus { outline: none; border-color: #C8A24B; box-shadow: 0 0 0 3px rgba(200,162,75,0.12); background: #FFFFFF; }
#imgx-page-content .ia-auth-input-wrap { position: relative; }
#imgx-page-content .ia-auth-input-wrap .ia-auth-input { padding-right: 42px; }
#imgx-page-content .ia-auth-reveal { position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: rgba(30,28,25,0.4); }
#imgx-page-content .ia-auth-reveal:hover { color: #C8A24B; }
#imgx-page-content .ia-auth-reveal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
#imgx-page-content .ia-auth-hint { font-size: 12px; color: rgba(30,28,25,0.4); }
#imgx-page-content .ia-auth-hint-ok { color: #5B8C5A; }
#imgx-page-content .ia-auth-hint-err { color: #B53737; }

/* Checkbox */
#imgx-page-content .ia-auth-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(30,28,25,0.6); line-height: 1.5; cursor: pointer; }
#imgx-page-content .ia-auth-check input { position: absolute; opacity: 0; width: 0; height: 0; }
#imgx-page-content .ia-auth-check-box { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #DDD8D0; border-radius: 6px; background: #FAFAF7; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; margin-top: 1px; }
#imgx-page-content .ia-auth-check-box svg { width: 12px; height: 12px; fill: none; stroke: #FAFAF7; stroke-width: 2; opacity: 0; }
#imgx-page-content .ia-auth-check.is-checked .ia-auth-check-box { background: #C8A24B; border-color: #C8A24B; }
#imgx-page-content .ia-auth-check.is-checked .ia-auth-check-box svg { opacity: 1; }
#imgx-page-content .ia-auth-check a { color: #B49A3E; }

/* Wachtwoordmeter */
#imgx-page-content .ia-auth-meter { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
#imgx-page-content .ia-auth-meter-bar { flex: 1; height: 5px; background: #ECE8E0; border-radius: 3px; overflow: hidden; }
#imgx-page-content .ia-auth-meter-fill { height: 100%; width: 0; background: #C8A24B; border-radius: 3px; transition: width .3s, background .3s; }
#imgx-page-content .ia-auth-meter-lbl { font-family: 'Space Mono', monospace; font-size: 11px; color: rgba(30,28,25,0.4); white-space: nowrap; }

/* Knop */
#imgx-page-content .ia-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #1E1C19; color: #FAFAF7; border: none; border-radius: 8px; padding: 13px 20px; font-size: 15px; font-weight: 600;
  font-family: 'Manrope', sans-serif; cursor: pointer; transition: background .2s, transform .2s; margin-top: 2px; }
#imgx-page-content .ia-auth-btn:hover { background: #3a3632; }
#imgx-page-content .ia-auth-btn:disabled { opacity: 0.6; cursor: default; }
#imgx-page-content .ia-auth-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#imgx-page-content .ia-auth-foot { font-size: 13px; color: rgba(30,28,25,0.5); text-align: center; }
#imgx-page-content .ia-auth-foot a { color: #B49A3E; font-weight: 600; }

/* Showcase-paneel */
#imgx-page-content .ia-auth-showcase { position: relative; background: linear-gradient(155deg, #F5F3EF 0%, #F0EBDF 100%);
  border: 1px solid #E8E3DB; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
#imgx-page-content .ia-auth-showcase::before, #imgx-page-content .ia-auth-showcase::after { content:''; position: absolute; width: 24px; height: 24px; pointer-events: none; z-index: 2; }
#imgx-page-content .ia-auth-showcase::before { top:-1px; left:-1px; border-top: 2.5px solid #C8A24B; border-left: 2.5px solid #C8A24B; border-radius: 14px 0 0 0; }
#imgx-page-content .ia-auth-showcase::after { bottom:-1px; right:-1px; border-bottom: 2.5px solid #C8A24B; border-right: 2.5px solid #C8A24B; border-radius: 0 0 14px 0; }
#imgx-page-content .ia-auth-sc-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #E8E3DB; background: rgba(255,255,255,0.4); }
#imgx-page-content .ia-auth-dot { width: 10px; height: 10px; border-radius: 50%; }
#imgx-page-content .ia-auth-dot.r { background: #E0A0A0; } #imgx-page-content .ia-auth-dot.y { background: #E6C87A; } #imgx-page-content .ia-auth-dot.g { background: #A6C6A6; }
#imgx-page-content .ia-auth-title { font-family: 'Space Mono', monospace; font-size: 12px; color: rgba(30,28,25,0.5); margin-left: 6px; }
#imgx-page-content .ia-auth-title .ml { color: #B49A3E; margin-left: 4px; }
#imgx-page-content .ia-auth-sc-body { padding: clamp(24px,3vw,36px); }
#imgx-page-content .ia-auth-sc-tag { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #B49A3E; }
#imgx-page-content .ia-auth-sc-quote { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(22px,2.6vw,30px); line-height: 1.15; color: #1E1C19; margin: 12px 0 24px; }
#imgx-page-content .ia-auth-sc-quote em { font-style: normal; color: #C8A24B; }
#imgx-page-content .ia-auth-sc-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
#imgx-page-content .ia-auth-stat { display: flex; flex-direction: column; }
#imgx-page-content .ia-auth-num { font-family: 'Space Mono', monospace; font-size: 26px; font-weight: 700; color: #B49A3E; }
#imgx-page-content .ia-auth-stat-lbl { font-size: 12px; color: rgba(30,28,25,0.45); margin-top: 2px; }
#imgx-page-content .ia-auth-sc-feed, #imgx-page-content .ia-auth-sc-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
#imgx-page-content .ia-auth-feed-label { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(30,28,25,0.35); margin-bottom: 4px; }
#imgx-page-content .ia-auth-feed-row, #imgx-page-content .ia-auth-sc-steps li { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid #E8E3DB; border-radius: 8px; padding: 12px 14px; }
#imgx-page-content .ia-auth-feed-mark, #imgx-page-content .ia-auth-step-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; color: #FAFAF7; }
#imgx-page-content .ia-auth-feed-mark.amber { background: #C8A24B; } #imgx-page-content .ia-auth-feed-mark.slate { background: #7FB0C4; } #imgx-page-content .ia-auth-feed-mark.olive { background: #A6A66A; }
#imgx-page-content .ia-auth-step-num { background: #FAF6EC; color: #B49A3E; border: 1px solid rgba(200,162,75,0.25); }
#imgx-page-content .ia-auth-feed-info, #imgx-page-content .ia-auth-step-info { flex: 1; min-width: 0; }
#imgx-page-content .ia-auth-feed-info .t, #imgx-page-content .ia-auth-step-t { font-size: 13px; font-weight: 600; color: #1E1C19; }
#imgx-page-content .ia-auth-feed-info .m, #imgx-page-content .ia-auth-step-m { font-size: 12px; color: rgba(30,28,25,0.45); margin-top: 2px; }
#imgx-page-content .ia-auth-feed-pill { font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #5B8C5A; background: rgba(91,140,90,0.1); padding: 4px 8px; border-radius: 20px; }
#imgx-page-content .ia-auth-step-time { font-family: 'Space Mono', monospace; font-size: 11px; color: rgba(30,28,25,0.4); }
#imgx-page-content .ia-auth-sc-credit { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #E8E3DB; font-family: 'Space Mono', monospace; font-size: 11px; color: rgba(30,28,25,0.4); flex-wrap: wrap; }
#imgx-page-content .ia-auth-dot-live { width: 7px; height: 7px; border-radius: 50%; background: #5B8C5A; }
#imgx-page-content .ia-auth-sc-credit .ver { margin-left: auto; color: rgba(30,28,25,0.3); }