/* ============================================================
   Auth Pages (Login, Sender-Register, Courier-Register)
   Depends on tokens.css and components.css.
   ============================================================ */

body.auth-page {
  background: var(--c-bg);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* Centered card layout (login) */
body.auth-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}

/* Vertical scroll layout (registration) */
body.auth-scroll { padding: var(--s-5) var(--s-4); }
body.auth-scroll .auth-container {
  max-width: 460px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  body.auth-scroll { padding: var(--s-10) var(--s-6); }
  body.auth-scroll .auth-container { max-width: 540px; }
}
@media (min-width: 1200px) {
  body.auth-scroll .auth-container { max-width: 580px; }
}

/* Login card */
.auth-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-elevated);
  width: min(420px, 100%);
  overflow: hidden;
}
.auth-card-header {
  background: var(--c-brand);
  height: var(--login-header-height);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card-header img {
  max-height: calc(var(--login-header-height) * 0.85);
  max-width: 70%;
  object-fit: contain;
}
.auth-card-body { padding: var(--s-6) var(--s-10) var(--s-10); }

@media (max-width: 440px) {
  body.auth-center { padding: 0; align-items: flex-start; }
  .auth-card { border-radius: 0; width: 100%; min-height: 100vh; }
  .auth-card-header { border-radius: 0; }
  .auth-card-body { padding: var(--s-6) var(--s-6) var(--s-8); }
}
@media (min-width: 1024px) {
  .auth-card { width: min(440px, 100%); border-radius: var(--r-xl); }
  .auth-card-body { padding: 28px 44px 44px; }
}

/* Page logo (registration pages) */
.auth-logo {
  text-align: center;
  margin-bottom: var(--s-5);
}
.auth-logo img {
  width: min(260px, 76%);
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--r-xl);
}
@media (min-width: 768px) { .auth-logo { margin-bottom: var(--s-8); } }

/* Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: var(--s-6);
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: var(--s-3) var(--s-3);
  cursor: pointer;
  font-size: var(--fz-md);
  color: var(--c-text-subtle);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  min-height: 44px;
  background: none;
  font-family: inherit;
  transition: color var(--t-fast);
  outline: none;
}
.auth-tab:focus-visible {
  outline: 2px solid var(--c-brand-hover);
  outline-offset: -4px;
  border-radius: var(--r-sm);
}
.auth-tab.active {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
  font-weight: 600;
}

/* Stepper (registration) */
.steps {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-6);
  padding: 0 var(--s-1);
}
@media (min-width: 768px) {
  .steps { gap: var(--s-3); margin-bottom: var(--s-8); padding: 0 var(--s-6); }
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fz-xs);
  color: var(--c-text-placeholder);
  transition: color var(--t-normal);
  text-align: center;
  line-height: var(--lh-tight);
}
.step::before {
  content: attr(data-num);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-border);
  color: var(--c-text-placeholder);
  font-weight: 700;
  font-size: var(--fz-sm);
  transition: all var(--t-normal);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .step { font-size: var(--fz-sm); }
  .step::before { width: 36px; height: 36px; font-size: var(--fz-md); }
  .step + .step::after { top: 18px; }
}
.step.active { color: var(--c-brand); font-weight: 600; }
.step.active::before {
  background: var(--c-brand);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(26,58,92,0.15);
}
.step.done { color: var(--c-success); }
.step.done::before {
  content: '✓';
  background: var(--c-success);
  color: #fff;
}
.step + .step { position: relative; }
.step + .step::after {
  content: '';
  position: absolute;
  top: 14px; left: -50%; right: 50%;
  height: 2px;
  background: var(--c-border);
  z-index: -1;
}
.step.done + .step::after,
.step.active + .step::after { background: var(--c-success); }

/* Role / Type selector (cards with icon + label) */
.role-selector {
  display: flex;
  gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-5);
}
.role-option { flex: 1; }
.role-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.role-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border: 2px solid #ddd;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fz-sm);
  color: var(--c-text-muted);
  font-weight: 600;
  transition: all var(--t-fast);
  text-align: center;
  min-height: 96px;
  background: #fff;
}
.role-option label .icon-xl { color: var(--c-brand); }
.role-option input:checked + label {
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
  color: var(--c-brand);
}
.role-option input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(46,109,164,0.25);
}
@media (hover: hover) {
  .role-option label:hover { border-color: var(--c-brand-hover); }
}
.role-option small {
  font-weight: 400;
  color: var(--c-text-subtle);
  font-size: var(--fz-xs);
  line-height: 1.3;
  display: block;
  margin-top: 2px;
}

/* Reusable cards for registration sections */
.auth-section-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-elevated);
  padding: var(--s-5) var(--s-4);
  margin-bottom: var(--s-3);
}
.auth-section-card h2 {
  font-size: var(--fz-md);
  color: var(--c-brand);
  margin-bottom: var(--s-4);
}
@media (min-width: 768px) {
  .auth-section-card { padding: 28px 32px; }
  .auth-section-card h2 { font-size: var(--fz-lg); margin-bottom: var(--s-5); }
}

/* Auth utility links */
.auth-link {
  background: none;
  border: none;
  color: var(--c-brand-hover);
  font-size: var(--fz-sm);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.auth-link:hover { text-decoration: underline; }

.auth-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* Reg intro text */
.reg-intro {
  font-size: var(--fz-base);
  color: var(--c-text-muted);
  margin-bottom: var(--s-4);
  line-height: var(--lh-base);
}

.auth-error {
  color: var(--c-danger);
  font-size: var(--fz-sm);
  margin-top: var(--s-3);
  text-align: center;
  min-height: 18px;
}

/* Language switcher (page-corner variant) */
.lang-switcher-corner {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: var(--z-dropdown);
}
.lang-btn-light {
  background: #fff;
  border: 1px solid var(--c-border);
  cursor: pointer;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  box-shadow: var(--sh-subtle);
  font-family: inherit;
}
.lang-btn-light .lang-name {
  font-size: var(--fz-sm);
  color: var(--c-text-muted);
}
.lang-btn-light .lang-code {
  font-size: var(--fz-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
}
@media (hover: hover) {
  .lang-btn-light:hover { background: var(--c-bg); }
}
.lang-caret { color: var(--c-text-subtle); font-size: var(--fz-xs); }

.lang-menu-light {
  display: none;
  position: absolute;
  top: 100%; right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-elevated);
  overflow: hidden;
}
.lang-menu-light.open { display: block; }
.lang-menu-light .lang-option {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fz-sm);
  color: var(--c-text);
  line-height: 1.2;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  text-align: left;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 500;
}
.lang-menu-light .lang-option.active { background: var(--c-brand-soft); }
@media (hover: hover) {
  .lang-menu-light .lang-option:hover { background: var(--c-bg); }
}
.lang-menu-light .lang-option:focus-visible {
  outline: 2px solid var(--c-brand-hover); outline-offset: -2px;
}

/* ════════════════════════════════════════════════════════════
   Gemeinsame Registrierungs-Styles (Sender- & Kurier-Register)
════════════════════════════════════════════════════════════ */
.auth-logo p {
  font-size: var(--fz-xs);
  color: var(--c-text-subtle);
  margin-top: 4px;
  text-align: center;
}
@media (min-width: 768px) {
  .auth-logo p { font-size: var(--fz-base); margin-top: 6px; }
}

/* Typ-Auswahl (Privatperson / Unternehmen) */
.type-selector { display: flex; gap: var(--s-3); margin-top: 4px; justify-content: center; }
.type-option { flex: 1 1 0; max-width: 240px; }
.type-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.type-option label {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: 14px 10px; border: 2px solid #ddd; border-radius: var(--r-md);
  cursor: pointer; font-size: var(--fz-sm); color: var(--c-text-muted); font-weight: 600;
  transition: all var(--t-fast); text-align: center; min-height: 88px;
  background: #fff;
}
.type-option label .icon { font-size: 26px; width: auto; height: auto; }
.type-option input:checked + label {
  border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand);
}
.type-option input:focus-visible + label { box-shadow: 0 0 0 3px rgba(46,109,164,0.25); }
@media (hover: hover) {
  .type-option label:hover { border-color: var(--c-brand-hover); }
}

/* Mehrspaltige Formularzeilen */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* PLZ + Stadt + Land: mobil zweizeilig (Land volle Breite), ab 560px einzeilig */
.addr-row { display: grid; grid-template-columns: 0.6fr 1fr; gap: var(--s-2); }
.addr-row .form-group:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .addr-row { grid-template-columns: 0.6fr 1fr 1fr; }
  .addr-row .form-group:nth-child(3) { grid-column: auto; }
}

/* Kleines Unterlabel innerhalb einer form-group (z.B. Von/Bis, Höhe/Breite/Tiefe) */
.form-group .sub-label {
  display: block;
  font-size: var(--fz-xs);
  font-weight: 500;
  color: var(--c-text-subtle);
  margin-bottom: 4px;
}

/* Adress-Autocomplete */
.autocomplete-wrapper { position: relative; }
.suggestions {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  background: #fff; border: 1px solid var(--c-border-strong); border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md); max-height: 220px; overflow-y: auto;
  box-shadow: var(--sh-elevated);
}
.suggestion-item {
  padding: var(--s-3); font-size: var(--fz-base); cursor: pointer;
  border-bottom: 1px solid var(--c-border); min-height: 44px;
}
@media (hover: hover) { .suggestion-item:hover { background: var(--c-brand-soft); } }
.suggestion-item:last-child { border-bottom: none; }

/* Abschnitts-Trenner */
.section-divider { border: none; border-top: 1px solid var(--c-border); margin: var(--s-5) 0; }
.section-label {
  font-size: var(--fz-xs); font-weight: 700; color: var(--c-brand);
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px;
}

/* AGB-Checkbox */
.agb-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px; background: var(--c-surface-alt);
  border-radius: var(--r-md); border: 1px solid var(--c-border);
  margin-top: var(--s-5);
}
.agb-row input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.agb-row label { font-size: var(--fz-sm); color: var(--c-text-muted); cursor: pointer; line-height: 1.5; }
.agb-row a { color: var(--c-brand-hover); }

/* Schritt-Navigation */
.nav-buttons { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.nav-buttons .btn { flex: 1; }
.nav-buttons .btn-ghost { flex: 0 0 auto; }

/* Fehlerbox */
.error {
  color: var(--c-danger); font-size: var(--fz-sm); margin-top: var(--s-3);
  padding: 10px 12px; background: var(--c-danger-soft);
  border-left: 3px solid var(--c-danger); border-radius: var(--r-sm);
  display: none; line-height: 1.4;
}
.error.visible { display: block; }

/* Erfolgs-Karte */
.success-card { text-align: center; padding: 44px 24px; display: none; }
.success-card.visible { display: block; }
.success-icon { font-size: 56px; margin-bottom: var(--s-4); }
.success-card h2 { color: var(--c-success); margin-bottom: 10px; font-size: var(--fz-lg); }
.success-card p { color: var(--c-text-muted); font-size: var(--fz-base); line-height: 1.6; }
.success-card .btn { max-width: 220px; margin: 0 auto; }