/* ==========================================================================
   VOLTOO AUTH & CLAIM
   Styling voor /inloggen, /auth/verify-magic-link, /claim/{slug}, /claim/verify
   Col-6 gecentreerd (kolom 4–9). Alleen tokens uit tokens.css.
   ========================================================================== */

/* ===== Kleur-extensies (alleen binnen auth/claim/dashboard scope) ===== */
.auth-page,
.claim-page,
.dashboard-page {
  --color-border-light:   #E8E6E1;
  --color-success:        #1D9E75;
  --color-success-bg:     #E1F5EE;
  --color-success-text:   #085041;
  --color-error:          #E24B4A;
  --color-error-bg:       #FCEBEB;
  --color-error-text:     #791F1F;
  --color-info:           #378ADD;
  --color-info-bg:        #E6F1FB;
  --color-info-text:      #0C447C;
  --color-warning-bg:     #FAEEDA;
  --color-warning-text:   #854F0B;
}

/* ===== Pagina-layout ===== */
.auth-standalone .auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-bottom: 12vh;
  background: var(--color-bg-medium);
}
.auth-standalone .auth-page > .container { width: 100%; }
.auth-standalone .auth-col { grid-column: 1 / -1; display: flex; justify-content: center; }
.auth-standalone .auth-card { width: 410px; max-width: 100%; }
.auth-page,
.claim-page {
  min-height: calc(100vh - 120px);
  padding: 64px 0 96px;
}

/* Navbar stuck op claim — zelfde behandeling als aanmelden */
.site-header:has(+ .claim-page) {
  padding-top: 0;
  top: 0;
}
.site-header:has(+ .claim-page) .navbar::before {
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.auth-col,
.claim-col {
  grid-column: 4 / span 6; /* kolom 4 t/m 9 = 6 kolommen gecentreerd */
}

.claim-col {
  background: var(--color-surface);
  padding: 50px;
  border-radius: 15px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.04);
}

@media (max-width: 1024px) {
  .auth-col,
  .claim-col { grid-column: 2 / span 6; } /* 8-kolom grid → kolom 2-7 */
}
@media (max-width: 768px) {
  .auth-col,
  .claim-col { grid-column: span 4; }
  .auth-page,
  .claim-page { padding: 32px 0 48px; }
}

/* ===== Auth card ===== */
@keyframes auth-card-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.auth-card {
  background: var(--color-surface);
  border-radius: 15px;
  padding: 35px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.04);
  animation: auth-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ===== Mobiel: login-venster fullscreen ===== */
@media (max-width: 768px) {
  .auth-standalone .auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    background: var(--color-surface);
    align-items: stretch;
  }
  .auth-standalone .auth-page > .container {
    max-width: none;
    padding: 0;
    width: 100%;
  }
  .auth-standalone .auth-page .grid { gap: 0; }
  .auth-standalone .auth-col { display: block; }
  .auth-standalone .auth-card {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    padding: 56px 20px 40px;
    animation: none;
    box-sizing: border-box;
  }
  .auth-standalone .dot-grid-bg { display: none; }
}


/* ===== Auth logo ===== */
.auth-logo {
  display: block;
  margin: 20px auto 22px;
  width: 107px;
  position: relative;
  left: -8px;
  color: var(--color-text);
}
.auth-logo--sent {
  margin-bottom: 42px;
}

/* ===== Typografie ===== */
.auth-page .h1,
.claim-page .h1 {
  font: 600 39px/1.2 var(--font-body);
  color: var(--color-text);
  margin: 0 0 36px;
}
.auth-page .h2,
.claim-page .h2 {
  font: 600 28px/1.3 var(--font-body);
  color: var(--color-text);
  margin: 0 0 32px;
}
@media (max-width: 768px) {
  .claim-page .h1 { font-size: 36px; }
  .claim-page .h2 { font-size: 24px; }
}
.auth-page .subtitle,
.claim-page .subtitle {
  font: 400 16px/1.5 var(--font-body);
  color: var(--color-text);
  margin: 0 0 40px;
}
.auth-page .center,
.claim-page .center { text-align: center; }
.auth-page .center .subtitle,
.claim-page .center .subtitle { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ===== Velden ===== */
.auth-field { margin-bottom: 24px; }
.auth-field-label {
  display: block;
  font: 400 16px/1.5 var(--font-body);
  color: var(--color-text);
  margin-bottom: 8px;
}
.auth-input {
  width: 100%;
  height: 48px;
  padding: 12px 18px;
  background: var(--color-bg);
  border: 1px solid #D4D2CC;
  border-radius: var(--radius);
  font: 400 16px/1.5 var(--font-body);
  color: var(--color-text);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input::placeholder { color: var(--color-muted); }
.auth-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(255, 51, 0, 0.15);
}
.auth-card > form > .auth-input { margin-bottom: 24px; }
.auth-field-hint {
  font: 400 14px/1.5 var(--font-body);
  color: #7D7D7D;
  margin-top: 24px;
  text-align: center;
}
.auth-field-hint a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.auth-field-hint a:hover { color: var(--color-accent); }

/* ===== Knoppen ===== */
.auth-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 32px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  font: 500 16px/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.35s ease;
}
.auth-btn-primary:hover { background: #000; }
.auth-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn-primary--inline {
  width: auto;
  padding: 0 48px;
}

.auth-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  background: var(--color-surface);
  border: 1px solid #D4D2CC;
  border-radius: var(--radius);
  font: 500 16px/1 var(--font-body);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.auth-btn-google:hover { border-color: var(--color-text); }
.auth-btn-google svg { width: 20px; height: 20px; flex-shrink: 0; }

.auth-or-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  color: #000;
  font-size: 14px;
}
.auth-or-divider::before,
.auth-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #D4D2CC;
}

.auth-resend {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

/* ===== Icon circle (check mail, bevestig) ===== */
.auth-icon-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: var(--color-bg-medium);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-icon-circle svg { width: 28px; height: 28px; }

/* ===== Sent-state ===== */
.auth-email-box {
  font: 700 16px/1.5 var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  border-radius: 5px;
  padding: 12px 20px;
  margin: 0 0 25px;
  text-align: center;
  word-break: break-all;
}
.auth-sent-note {
  font: 400 14px/1.5 var(--font-body);
  color: #7D7D7D;
  text-align: center;
  margin-top: 25px;
}
.auth-resend-link {
  color: #7D7D7D;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: 400 14px/1.5 var(--font-body);
}
.auth-resend-link:hover { color: var(--color-accent); }

/* ===== Foutmelding ===== */
.auth-error {
  background: #FCEBEB;
  color: #791F1F;
  padding: 14px 20px;
  border-radius: var(--radius);
  font: 400 14px/1.5 var(--font-body);
  margin-bottom: 24px;
}

/* ===== Claim-specifiek ===== */
.claim-progress {
  height: 6px;
  background: #D4D2CC;
  border-radius: 3px;
  margin-bottom: 32px;
  overflow: hidden;
}
.claim-progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 250ms ease;
}

.claim-intro {
  font: 400 16px/1.5 var(--font-body);
  color: var(--color-text);
  margin: 0 0 32px;
}
.claim-list {
  margin: 0 0 24px 20px;
  padding: 0;
  font: 400 16px/1.7 var(--font-body);
  color: var(--color-text);
}

.claim-flash-ok {
  background: #E1F5EE;
  color: #085041;
  padding: 14px 20px;
  border-radius: var(--radius);
  font: 400 14px/1.5 var(--font-body);
  margin-bottom: 24px;
}

/* Business card op claim-pagina — zelfde look als .bedrijf-card op /zoeken */
.claim-biz-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid #000;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.claim-biz-foto {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.claim-biz-body {
  flex: 1;
  min-width: 0;
  padding-top: 10px;
}
.claim-biz-name {
  font: 500 24px/28px 'Inter', sans-serif;
  color: var(--color-text);
  margin-bottom: 4px;
}
.claim-biz-address {
  font: 400 16px/1.5 'Inter', sans-serif;
  color: var(--color-text);
  margin-top: 6px;
  margin-bottom: 10px;
}
.claim-biz-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 7px;
  font: 400 16px/1.5 'Inter', sans-serif;
  color: var(--color-text);
}
.claim-biz-rating { color: var(--color-text); font-weight: 500; }
.claim-biz-score { display: inline-flex; align-items: center; gap: 2px; color: var(--color-text); }
.claim-biz-score > span { margin-left: 6px; font-weight: 500; color: var(--color-text); }
.claim-biz-score img { display: inline-block; }
.claim-biz-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.claim-biz-cat {
  font: 400 13px/1 'Inter', sans-serif;
  padding: 7px 12px;
  background: #D4D2CC;
  border-radius: var(--radius);
  color: var(--color-text);
}

/* Mail-to card op claim-pagina */
.claim-mail-card {
  background: var(--color-bg);
  border: 1px solid #E8E6E1;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.claim-mail-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--color-surface);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
}
.claim-mail-icon img { display: block; width: 20px; height: 20px; }
.claim-mail-address { font: 600 16px/1.3 var(--font-body); color: var(--color-text); }
.claim-mail-sub     { font: 400 13px/1.5 var(--font-body); color: var(--color-muted); }

.auth-icon-circle--success { background: #E1F5EE; }

/* ===== Claim-status op bedrijf.php ===== */
.bedrijf-claim-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 var(--font-body);
  padding: 6px 12px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.bedrijf-claim-status--verified { background: #E1F5EE; color: #085041; }
.bedrijf-claim-status--pending  { background: #FAEEDA; color: #854F0B; }
.bedrijf-claim-status--verified svg,
.bedrijf-claim-status--pending svg { width: 14px; height: 14px; }

.bedrijf-claim-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  font: 500 14px/1 var(--font-body);
  text-decoration: none;
  margin-bottom: 12px;
  transition: background-color 150ms ease;
}
.bedrijf-claim-btn:hover { background: #000; }