/**
 * AffiliateWP-Formulare im Account-Card-Look
 *
 * Werte = Design-System der My-Account-Karten
 * (themes/vitalshop-production/sass/shop/my-account.scss):
 * Karte #f8f9fa / Border #e9ecef / Radius 12 · Inputs 2px-Border, Radius 8
 * Grün #548460 (Hover #467251) · Focus #67AC9F · Text #2c3e50
 * ACHTUNG Theme: html{font-size:10px} -> px statt rem.
 */

.affwp-form {
  --vs-aff-green: #548460;
  --vs-aff-green-hover: #467251;
  --vs-aff-focus: #67ac9f;
  --vs-aff-text: #2c3e50;
  --vs-aff-muted: #6c757d;
  --vs-aff-card: #f8f9fa;
  --vs-aff-border: #e9ecef;

  background: var(--vs-aff-card);
  border: 1px solid var(--vs-aff-border);
  border-radius: 12px;
  padding: 32px;
  box-sizing: border-box;
  font-size: 15px;
  color: var(--vs-aff-text);
}

@media (max-width: 768px) {
  .affwp-form {
    padding: 24px;
  }
}

/* Feld-Abstände (AffiliateWP nutzt <p>-Wrapper) */
.affwp-form p {
  margin: 0 0 20px;
}

.affwp-form label {
  display: block;
  font-weight: 600;
  color: var(--vs-aff-text);
  margin-bottom: 8px;
  font-size: 14px;
}

.affwp-form input[type="text"],
.affwp-form input[type="email"],
.affwp-form input[type="url"],
.affwp-form input[type="password"],
.affwp-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--vs-aff-border);
  border-radius: 8px;
  font-size: 16px;
  background: #ffffff;
  color: var(--vs-aff-text);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.affwp-form textarea {
  min-height: 110px;
  resize: vertical;
}

.affwp-form input:focus,
.affwp-form textarea:focus {
  outline: none;
  border-color: var(--vs-aff-focus);
  box-shadow: none;
}

.affwp-form input::placeholder,
.affwp-form textarea::placeholder {
  color: #9ca3af;
}

/* Checkboxen (AGB/Datenschutz, Angemeldet bleiben) */
.affwp-form .affwp-tos label,
.affwp-form .affwp-user-remember label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
  color: #495057;
}

.affwp-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--vs-aff-green);
  margin: 0;
  flex: 0 0 auto;
}

/* Submit-Button — wie der My-Account-Button */
.affwp-form input[type="submit"],
.affwp-form .button {
  width: 100%;
  padding: 14px 20px;
  background: var(--vs-aff-green);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.affwp-form input[type="submit"]:hover,
.affwp-form .button:hover {
  background: var(--vs-aff-green-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(84, 132, 96, 0.3);
}

.affwp-form input[type="submit"]:active,
.affwp-form .button:active {
  transform: translateY(0);
}

/* Passwort-vergessen-Link */
.affwp-form .affwp-lost-password {
  margin: 16px 0 0;
  text-align: center;
}

.affwp-form .affwp-lost-password a {
  color: #007cba;
  text-decoration: none;
  font-size: 14px;
}

.affwp-form .affwp-lost-password a:hover {
  text-decoration: underline;
}

/* Hinweis-Box (z. B. "You're unauthorized…") im sanften Privacy-Notice-Stil
   statt gelbem Balken */
.affwp-notice {
  padding: 12px 16px;
  background: #f8f9fa;
  border-left: 3px solid #67ac9f;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #495057;
  margin: 0 0 20px;
}

.affwp-notice a {
  color: #007cba;
  font-weight: 500;
}

/* Fehlermeldungen (auch unsere Spam-Schutz-Meldungen) im Privacy-Notice-Stil */
.affwp-errors {
  padding: 12px 16px;
  background: #fcf0f1;
  border-left: 3px solid #d65565;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #842029;
  margin: 0 0 20px;
}

.affwp-errors .affwp-error {
  margin: 0;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld.
   Bewusst NICHT display:none (manche Bots überspringen das). */
.vs-aff-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}