/* === Trainerfinder: Mein-Konto Frontend-Form === */

.trf-account-form {
  --trf-gap: 16px;
  --trf-radius: 14px;
  --trf-border: 1px solid rgba(0,0,0,.08);
  --trf-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --trf-bg: #fff;
  --trf-muted: #6b7280; /* Grauton für Hinweise */
}

.trf-account-form .trf-grid {
  display: grid;
  gap: var(--trf-gap);
  grid-template-columns: 1fr; /* Mobile: 1 Spalte */
}

@media (min-width: 768px) {
  .trf-account-form .trf-grid {
    grid-template-columns: 1fr 1fr; /* Tablet+: 2 Spalten */
  }
}

.trf-account-form .trf-card {
  background: var(--trf-bg);
  border: var(--trf-border);
  border-radius: var(--trf-radius);
  box-shadow: var(--trf-shadow);
  padding: 16px;
}

.trf-account-form .trf-card h4 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

/* Form Elemente */

.trf-account-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.trf-account-form input[type="text"],
.trf-account-form input[type="email"],
.trf-account-form input[type="url"],
.trf-account-form input[type="number"],
.trf-account-form textarea,
.trf-account-form input[type="file"],
.trf-account-form select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}

.trf-account-form textarea {
  min-height: 140px;
  resize: vertical;
}

.trf-account-form .trf-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trf-account-form .trf-inline input[type="checkbox"] {
  width: auto;
}

/* Adress-Grid: passt sich dynamisch an, niemals zu schmal */
.trf-account-form .trf-cols {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr; /* Mobile */
}

@media (min-width: 640px) {
  .trf-account-form .trf-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .trf-account-form .trf-cols {
    /* Auto-fit sorgt dafür, dass Felder schön umbrechen und gleichmäßig Platz erhalten */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Rücksicht auf Themes/Flex: verhindert schräge Schrumpf-Effekte */
.trf-account-form .trf-cols > * {
  min-width: 0;
}

/* Medien/Bilder */

.trf-account-form .trf-media-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr; /* Mobile */
}

@media (min-width: 768px) {
  .trf-account-form .trf-media-row {
    grid-template-columns: 1fr 1fr; /* 2 Spalten ab Tablet */
  }
}

.trf-account-form .trf-media {
  display: grid;
  gap: 8px;
}

.trf-account-form .trf-media-preview {
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  /* Einheitliche Höhe für Preview; wächst mit Breite */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trf-account-form .trf-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trf-account-form .trf-media-empty {
  color: var(--trf-muted);
  font-size: 24px;
  line-height: 1;
}

.trf-account-form .trf-file span {
  display: block;
  font-size: 12px;
  color: var(--trf-muted);
  margin-bottom: 6px;
}

/* Hinweise/Description */
.trf-account-form .description {
  color: var(--trf-muted);
  font-size: 12px;
  margin: 6px 0 0;
}

/* Button breiter und gut klickbar */
.trf-account-form .button.button-primary.button-large {
  padding: 10px 16px;
  border-radius: 10px;
}

/* Optional: Kompaktere Woo-Hinweise im Account-Bereich */
.woocommerce .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce .woocommerce-MyAccount-content .woocommerce-error,
.woocommerce .woocommerce-MyAccount-content .woocommerce-info {
  border-radius: 10px;
}

/* Falls ein Theme noch enge max-widths setzt */
.trf-account-form input,
.trf-account-form select,
.trf-account-form textarea {
  max-width: 100% !important;
}