/**
 * Drive2Balkan - Additional Theme CSS
 * Animations, extra utilities, overrides
 */

/* ================================================================
   ANIMATIONEN / ANIMATIONS
   ================================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

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

/* Hero-Elemente animieren */
.dwm-hero__badge    { animation: fadeInUp 0.5s ease both; }
.dwm-hero__title    { animation: fadeInUp 0.6s 0.1s ease both; }
.dwm-hero__subtitle { animation: fadeInUp 0.6s 0.2s ease both; }
.dwm-hero__actions  { animation: fadeInUp 0.6s 0.3s ease both; }
.dwm-hero__search   { animation: fadeInUp 0.7s 0.4s ease both; }

/* Schritt-Karten animieren (wenn in Viewport) */
.dwm-step {
  animation: fadeInUp 0.5s ease both;
}
.dwm-step:nth-child(1) { animation-delay: 0.1s; }
.dwm-step:nth-child(2) { animation-delay: 0.2s; }
.dwm-step:nth-child(3) { animation-delay: 0.3s; }

/* Feature-Karten */
.dwm-feature-card {
  animation: fadeInUp 0.5s ease both;
}
.dwm-feature-card:nth-child(1) { animation-delay: 0.05s; }
.dwm-feature-card:nth-child(2) { animation-delay: 0.10s; }
.dwm-feature-card:nth-child(3) { animation-delay: 0.15s; }
.dwm-feature-card:nth-child(4) { animation-delay: 0.20s; }

/* Loading spinner */
.dwm-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border, #dee2e6);
  border-top-color: var(--primary, #1a6bb5);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
}

/* Loading-Zustand für Grid */
.dwm-rides-grid.dwm-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ================================================================
   INPUT ERROR STATES
   ================================================================ */
.dwm-input--error,
.dwm-select--error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.dwm-input--error + .dwm-field-error,
.dwm-select--error + .dwm-field-error {
  color: #dc3545;
  font-size: 0.82em;
  margin-top: 4px;
  display: block;
}

/* ================================================================
   HERO BACKGROUND PATTERN
   ================================================================ */
.dwm-hero {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.07) 0%, transparent 40%),
    linear-gradient(135deg, var(--primary, #1a6bb5) 0%, #2980b9 50%, #1e8449 100%);
}

/* ================================================================
   FLOATING LABEL (optional enhancement)
   ================================================================ */
.dwm-field-wrap {
  position: relative;
}

/* ================================================================
   AUTOCOMPLETE DROPDOWN (for future city autocomplete)
   ================================================================ */
.dwm-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1.5px solid var(--primary, #1a6bb5);
  border-top: none;
  border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px);
  max-height: 200px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: var(--shadow, 0 3px 14px rgba(0,0,0,0.10));
}

.dwm-autocomplete__item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.9em;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
  transition: background 0.15s;
}

.dwm-autocomplete__item:hover,
.dwm-autocomplete__item.is-focused {
  background: var(--primary-light, #e8f0fb);
  color: var(--primary, #1a6bb5);
}

/* ================================================================
   PRINT STYLES
   ================================================================ */
@media print {
  .dwm-site-header,
  .dwm-footer,
  .dwm-hero__actions,
  .dwm-contact-section__locked,
  .dwm-btn:not(.dwm-print-btn) {
    display: none !important;
  }

  .dwm-ride-detail__header {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ================================================================
   HIGH CONTRAST (accessibility)
   ================================================================ */
@media (prefers-contrast: high) {
  .dwm-card {
    border-width: 2px;
  }

  .dwm-input:focus {
    border-width: 3px;
  }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   DARK MODE (basic support)
   ================================================================ */
@media (prefers-color-scheme: dark) {
  /* Nur leicht für den Plugin-Bereich, Hauptthema bleibt hell */
  .dwm-notice--info {
    background: #1a365d;
    color: #90cdf4;
    border-color: #2b6cb0;
  }
}

/* ================================================================
   SEARCH PAGE LAYOUT
   ================================================================ */
@media (max-width: 768px) {
  .dwm-ride-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   POST RIDE PAGE LAYOUT
   ================================================================ */
@media (max-width: 900px) {
  .dwm-post-ride-wrap + * {
    display: none;
  }
}

/* Ensure the sticky card on post-ride page looks right */
@media (max-width: 900px) {
  .dwm-page-content [style*="grid-template-columns: 2fr 1fr"] {
    display: block !important;
  }
}