/* ═══════════════════════════════════════════════════════════════
   Zahnarzt Eintragsformular – Frontend-Styles
   Version: 2.0.0 (z24 Brand-Design Konsolidierung)
   
   Nutzt z24-design-tokens.css (muss vorher geladen werden)
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE OVERRIDES (falls tokens nicht geladen) ── */
.zf-wrap {
  --zf-primary:          var(--z24-primary, #1D5ADB);
  --zf-primary-hover:    var(--z24-primary-hover, #1D4ED8);
  --zf-primary-light:    var(--z24-primary-light, rgba(29,90,219,0.15));
  --zf-bg:               var(--z24-bg, #F4F7F9);
  --zf-surface:          var(--z24-surface, #ffffff);
  --zf-border:           var(--z24-border, #E5E7EB);
  --zf-text:             var(--z24-text, #111827);
  --zf-text-muted:       var(--z24-text-muted, #6B7280);
  --zf-error:            var(--z24-danger, #DC2626);
  --zf-success:          var(--z24-accent, #22C55E);
  --zf-radius-sm:        var(--z24-radius-sm, 8px);
  --zf-radius-md:        var(--z24-radius-md, 12px);
  --zf-radius-lg:        var(--z24-radius-lg, 16px);
  --zf-radius-pill:      var(--z24-radius-pill, 9999px);
  --zf-border-width:     1.5px;
  --zf-shadow:           var(--z24-shadow-sm, 0 1px 4px rgba(0,0,0,0.05));
  --zf-shadow-hover:     var(--z24-shadow, 0 4px 20px rgba(0,0,0,0.08));
  --zf-transition:       var(--z24-transition, 180ms cubic-bezier(0.16,1,0.3,1));

  font-family:           var(--z24-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size:             var(--z24-font-size-base, 1rem);
  color:                 var(--z24-text, #111827);
  max-width:             var(--z24-container-md, 720px);
  margin:                0 auto;
  padding:               0 var(--z24-space-4, 1rem);
}

/* ── SECTIONS ── */
.zf-section {
  border:                1px solid var(--zf-border, #E5E7EB);
  border-radius:        var(--zf-radius-lg, 16px);
  background:           var(--zf-surface, #fff);
  padding:              var(--z24-space-6, 1.5rem);
  margin-bottom:        var(--z24-space-6, 1.5rem);
  box-shadow:           var(--zf-shadow, 0 1px 4px rgba(0,0,0,0.05));
  transition:           box-shadow var(--zf-transition);
}

.zf-section:hover {
  box-shadow:           var(--zf-shadow-hover, 0 4px 20px rgba(0,0,0,0.08));
}

.zf-legend {
  font-size:            var(--z24-font-size-lg, 1.125rem);
  font-weight:          var(--z24-font-weight-semibold, 600);
  color:                var(--zf-primary, #1D5ADB);
  padding:              0 var(--z24-space-2, 0.5rem);
  letter-spacing:       -0.01em;
}

/* ── GRID ── */
.zf-grid {
  display:              grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap:                  var(--z24-space-4, 1rem) var(--z24-space-5, 1.25rem);
  margin-top:           var(--z24-space-4, 1rem);
}

.zf-grid-images {
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
}

/* ── FIELDS ── */
.zf-field {
  display:              flex;
  flex-direction:       column;
  gap:                  var(--z24-space-2, 0.35rem);
}

.zf-field label {
  font-size:            var(--z24-font-size-sm, 0.875rem);
  font-weight:          var(--z24-font-weight-semibold, 600);
  color:                var(--zf-text-muted, #6B7280);
}

.zf-required {
  color:                var(--zf-error, #DC2626);
  margin-left:          2px;
}

.zf-field input[type="text"],
.zf-field input[type="tel"],
.zf-field input[type="email"],
.zf-field input[type="url"] {
  border:               var(--zf-border-width, 1.5px) solid var(--zf-border, #E5E7EB);
  border-radius:        var(--z24-radius-sm, 8px);
  padding:              0.6rem 0.85rem;
  font-size:            var(--z24-font-size-base, 1rem);
  font-family:          inherit;
  color:                var(--zf-text, #111827);
  background:          var(--z24-bg, #F4F7F9);
  transition:           border-color var(--zf-transition), box-shadow var(--zf-transition);
  outline:              none;
  width:                100%;
  box-sizing:           border-box;
}

.zf-field input:focus {
  border-color:         var(--zf-primary, #1D5ADB);
  box-shadow:           0 0 0 3px var(--zf-primary-light, rgba(29,90,219,0.15));
  background:          var(--zf-surface, #fff);
}

.zf-field input:invalid:not(:placeholder-shown) {
  border-color:         var(--zf-error, #DC2626);
}

/* ── LEISTUNGEN ── */
.zf-leistung-row {
  display:              flex;
  align-items:          flex-start;
  gap:                  var(--z24-space-3, 0.75rem);
  margin-top:           var(--z24-space-4, 1rem);
}

.zf-leistung-nr {
  display:              flex;
  align-items:          center;
  justify-content:      center;
  width:                2rem;
  height:               2rem;
  min-width:            2rem;
  border-radius:        var(--z24-radius-pill, 9999px);
  background:          var(--zf-primary-light, rgba(29,90,219,0.10));
  color:                var(--zf-primary, #1D5ADB);
  font-size:            var(--z24-font-size-sm, 0.875rem);
  font-weight:          var(--z24-font-weight-bold, 700);
  margin-top:           1.6rem;
}

.zf-leistung-fields {
  flex:                  1;
  margin-top:            0 !important;
}

/* ── BILD-UPLOAD ── */
.zf-image-field {
  align-items:          center;
}

.zf-image-preview {
  width:                100%;
  aspect-ratio:         1;
  border:               2px dashed var(--zf-border, #E5E7EB);
  border-radius:        var(--z24-radius-md, 12px);
  display:             flex;
  align-items:          center;
  justify-content:      center;
  cursor:               pointer;
  overflow:             hidden;
  background:          var(--z24-bg, #F4F7F9);
  transition:           border-color var(--zf-transition), background var(--zf-transition);
}

.zf-image-preview:hover {
  border-color:         var(--zf-primary, #1D5ADB);
  background:          var(--zf-primary-light, rgba(29,90,219,0.04));
}

.zf-image-preview img {
  width:                100%;
  height:               100%;
  object-fit:           cover;
}

.zf-image-placeholder {
  font-size:            2rem;
  color:                var(--zf-border, #E5E7EB);
  line-height:          1;
}

.zf-file-input {
  display:              none;
}

/* ── SUBMIT BUTTON (Pill-Shape z24 Brand) ── */
.zf-submit-wrap {
  text-align:           center;
  margin-top:           var(--z24-space-6, 1.5rem);
}

.zf-btn-submit {
  display:              inline-flex;
  align-items:          center;
  justify-content:      center;
  gap:                  var(--z24-space-2, 0.5rem);
  background:           var(--zf-primary, #1D5ADB);
  color:                var(--z24-text-inverse, #ffffff);
  border:               none;
  border-radius:        var(--z24-radius-pill, 9999px);
  padding:              0.85rem 2.5rem;
  font-size:            var(--z24-font-size-base, 1rem);
  font-weight:          var(--z24-font-weight-semibold, 600);
  font-family:          inherit;
  cursor:               pointer;
  transition:           background var(--zf-transition), transform var(--zf-transition), box-shadow var(--zf-transition);
  box-shadow:           0 2px 12px rgba(29,90,219,0.25);
  min-width:            220px;
}

.zf-btn-submit:hover {
  background:          var(--zf-primary-hover, #1D4ED8);
  box-shadow:          0 4px 20px rgba(29,90,219,0.35);
  transform:           translateY(-1px);
}

.zf-btn-submit:active {
  transform:           translateY(0);
  box-shadow:          0 2px 8px rgba(29,90,219,0.20);
}

.zf-btn-submit:disabled {
  opacity:             0.65;
  cursor:              not-allowed;
  transform:           none;
}

/* Spinner */
.zf-btn-spinner {
  display:              none;
  width:                1rem;
  height:               1rem;
  border:               2px solid rgba(255,255,255,0.4);
  border-top-color:     #fff;
  border-radius:        50%;
  animation:            zf-spin 0.7s linear infinite;
}

.zf-btn-submit.zf-loading .zf-btn-spinner { display: inline-block; }
.zf-btn-submit.zf-loading .zf-btn-text   { display: none; }

@keyframes zf-spin { to { transform: rotate(360deg); } }

/* ── MESSAGE ── */
.zf-message {
  margin-top:           var(--z24-space-5, 1.25rem);
  border-radius:       var(--z24-radius-md, 12px);
  padding:             0.9rem 1.25rem;
  font-size:           var(--z24-font-size-sm, 0.9rem);
  font-weight:         var(--z24-font-weight-semibold, 600);
  display:             none;
}

.zf-message.zf-success {
  display:             block;
  background:          color-mix(in srgb, var(--z24-accent, #22C55E) 10%, transparent);
  border:              1.5px solid var(--z24-accent, #22C55E);
  color:               #15803d;
}

.zf-message.zf-error {
  display:             block;
  background:          color-mix(in srgb, var(--z24-danger, #DC2626) 8%, transparent);
  border:              1.5px solid var(--z24-danger, #DC2626);
  color:               #991B1B;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .zf-section { padding: var(--z24-space-4, 1rem); }
  .zf-leistung-row { flex-direction: column; }
  .zf-leistung-nr { margin-top: 0; }
  .zf-btn-submit {
    width:              100%;
    min-width:          unset;
  }
}