/* ================================================================
   Drive2Balkan Plugin CSS
   Ride cards, search forms, contact unlock, status badges
   ================================================================ */

/* ----- CSS Custom Properties / Variablen ----- */
:root {
  --dwm-primary:    #1a6bb5;
  --dwm-primary-dark: #145490;
  --dwm-secondary:  #27ae60;
  --dwm-accent:     #f39c12;
  --dwm-dark:       #2c3e50;
  --dwm-gray:       #6c757d;
  --dwm-light:      #f8f9fa;
  --dwm-white:      #ffffff;
  --dwm-border:     #dee2e6;
  --dwm-shadow:     0 2px 12px rgba(0,0,0,0.10);
  --dwm-radius:     10px;
  --dwm-radius-sm:  6px;
  --dwm-transition: 0.2s ease;
}

/* ----- Ride Cards / Fahrt-Karten ----- */
.dwm-rides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.dwm-card {
  background: var(--dwm-white);
  border-radius: var(--dwm-radius);
  box-shadow: var(--dwm-shadow);
  padding: 20px;
  transition: transform var(--dwm-transition), box-shadow var(--dwm-transition);
  border: 1px solid var(--dwm-border);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dwm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
}

.dwm-card--featured {
  border-color: var(--dwm-primary);
  border-width: 2px;
}

.dwm-card__status {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* Route display */
.dwm-card__route {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 60px;
}

.dwm-card__city {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--dwm-dark);
}

.dwm-card__city-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dwm-card__city-dot--start {
  background: var(--dwm-primary);
}

.dwm-card__city-dot--end {
  background: var(--dwm-secondary);
}

.dwm-card__route-line {
  text-align: center;
  color: var(--dwm-gray);
  font-size: 1.2em;
  padding: 2px 0 2px 18px;
}

.dwm-card__stops {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 2px 5px;
}

.dwm-card__stops-label {
  font-size: 0.82em;
  color: var(--dwm-gray);
  font-style: italic;
}

/* Meta info row */
.dwm-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9em;
  color: var(--dwm-gray);
  border-top: 1px solid var(--dwm-border);
  padding-top: 10px;
}

.dwm-card__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dwm-card__meta-icon {
  font-size: 1em;
}

.dwm-card__price {
  font-weight: 700;
  color: var(--dwm-dark);
  font-size: 1.05em;
}

.dwm-card__price small {
  font-weight: 400;
  font-size: 0.8em;
  color: var(--dwm-gray);
}

/* Feature icons */
.dwm-card__features {
  display: flex;
  gap: 8px;
}

.dwm-feature {
  font-size: 1.1em;
  cursor: default;
}

/* Driver info */
.dwm-card__driver {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  color: var(--dwm-gray);
  border-top: 1px solid var(--dwm-border);
  padding-top: 10px;
}

.dwm-card__driver img {
  border-radius: 50%;
  width: 28px;
  height: 28px;
}

.dwm-card__footer {
  margin-top: auto;
}

/* ----- Search Form / Suchformular ----- */
.dwm-search-form {
  background: var(--dwm-white);
  border-radius: var(--dwm-radius);
  padding: 24px;
  box-shadow: var(--dwm-shadow);
}

.dwm-search-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 120px auto;
  gap: 12px;
  align-items: end;
}

.dwm-search-form__field label,
.dwm-form__field label {
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--dwm-dark);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dwm-input,
.dwm-select,
.dwm-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--dwm-border);
  border-radius: var(--dwm-radius-sm);
  font-size: 0.95em;
  color: var(--dwm-dark);
  background: var(--dwm-white);
  transition: border-color var(--dwm-transition), box-shadow var(--dwm-transition);
  box-sizing: border-box;
  font-family: inherit;
}

.dwm-input:focus,
.dwm-select:focus,
.dwm-textarea:focus {
  outline: none;
  border-color: var(--dwm-primary);
  box-shadow: 0 0 0 3px rgba(26, 107, 181, 0.15);
}

.dwm-textarea {
  resize: vertical;
  min-height: 100px;
}

/* ----- Filter Panel ----- */
.dwm-filter-panel {
  background: var(--dwm-light);
  border-radius: var(--dwm-radius-sm);
  padding: 18px;
  margin: 12px 0;
  border: 1px solid var(--dwm-border);
}

.dwm-filter-form__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.dwm-filter-form__field {
  flex: 1;
  min-width: 160px;
}

/* ----- Buttons / Schaltflächen ----- */
.dwm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--dwm-radius-sm);
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dwm-transition), color var(--dwm-transition), border-color var(--dwm-transition), transform var(--dwm-transition);
  text-decoration: none;
  line-height: 1;
  font-family: inherit;
}

.dwm-btn--primary {
  background: var(--dwm-primary);
  color: var(--dwm-white);
  border-color: var(--dwm-primary);
}

.dwm-btn--primary:hover {
  background: var(--dwm-primary-dark);
  border-color: var(--dwm-primary-dark);
  color: var(--dwm-white);
  transform: translateY(-1px);
}

.dwm-btn--secondary {
  background: var(--dwm-secondary);
  color: var(--dwm-white);
  border-color: var(--dwm-secondary);
}

.dwm-btn--secondary:hover {
  background: #219a52;
  border-color: #219a52;
  color: var(--dwm-white);
}

.dwm-btn--outline {
  background: transparent;
  color: var(--dwm-primary);
  border-color: var(--dwm-primary);
}

.dwm-btn--outline:hover {
  background: var(--dwm-primary);
  color: var(--dwm-white);
}

.dwm-btn--danger {
  background: #dc3545;
  color: var(--dwm-white);
  border-color: #dc3545;
}

.dwm-btn--danger:hover {
  background: #c82333;
  border-color: #c82333;
  color: var(--dwm-white);
}

.dwm-btn--large {
  padding: 13px 28px;
  font-size: 1.05em;
}

.dwm-btn--small {
  padding: 7px 14px;
  font-size: 0.85em;
}

.dwm-btn--xs {
  padding: 4px 10px;
  font-size: 0.78em;
}

/* ----- Status Badges / Status-Abzeichen ----- */
.dwm-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.dwm-badge--available {
  background: #d4edda;
  color: #155724;
}

.dwm-badge--full {
  background: #fff3cd;
  color: #856404;
}

.dwm-badge--cancelled {
  background: #f8d7da;
  color: #721c24;
}

.dwm-badge--pending {
  background: #fff3cd;
  color: #856404;
}

.dwm-badge--approved {
  background: #d4edda;
  color: #155724;
}

.dwm-badge--rejected {
  background: #f8d7da;
  color: #721c24;
}

.dwm-badge--driver {
  background: #cce5ff;
  color: #004085;
}

.dwm-badge--passenger {
  background: #e2e3e5;
  color: #383d41;
}

/* ----- Contact Unlock / Kontakt freischalten ----- */
.dwm-contact-section {
  background: var(--dwm-light);
  border-radius: var(--dwm-radius);
  padding: 24px;
  border: 1px solid var(--dwm-border);
  margin: 24px 0;
}

.dwm-contact-section__locked {
  text-align: center;
  padding: 20px;
}

.dwm-contact-section__locked .dwm-lock-icon {
  font-size: 2.5em;
  margin-bottom: 12px;
}

.dwm-contact-section__locked h3 {
  color: var(--dwm-dark);
  margin-bottom: 8px;
}

.dwm-contact-section__locked p {
  color: var(--dwm-gray);
  margin-bottom: 16px;
  font-size: 0.9em;
}

.dwm-contact-section__revealed {
  display: none;
}

.dwm-contact-section__revealed.is-visible {
  display: block;
}

.dwm-contact-info {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--dwm-white);
  border-radius: var(--dwm-radius-sm);
  padding: 16px;
  border: 2px solid var(--dwm-secondary);
}

.dwm-contact-info__icon {
  font-size: 1.8em;
}

.dwm-contact-info__label {
  font-size: 0.8em;
  color: var(--dwm-gray);
  text-transform: uppercase;
}

.dwm-contact-info__value {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--dwm-dark);
}

/* ----- Notices / Hinweise ----- */
.dwm-notice {
  border-radius: var(--dwm-radius-sm);
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.95em;
}

.dwm-notice--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.dwm-notice--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.dwm-notice--warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.dwm-notice--info {
  background: #cce5ff;
  color: #004085;
  border: 1px solid #b8daff;
}

/* ----- Forms / Formulare ----- */
.dwm-form {
  max-width: 700px;
}

.dwm-form__section-title {
  font-size: 1em;
  font-weight: 700;
  color: var(--dwm-primary);
  border-bottom: 2px solid var(--dwm-primary);
  padding-bottom: 6px;
  margin: 24px 0 16px;
}

.dwm-form__grid {
  display: grid;
  gap: 16px;
  margin-bottom: 8px;
}

.dwm-form__grid--2 { grid-template-columns: 1fr 1fr; }
.dwm-form__grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.dwm-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dwm-form__field--required label::after {
  content: ' *';
  color: #dc3545;
}

.dwm-form__field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.dwm-form__field--checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95em;
}

.dwm-form__field--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.dwm-form__submit {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--dwm-border);
}

/* ----- User Dashboard ----- */
.dwm-dashboard {
  max-width: 900px;
}

.dwm-dashboard__welcome {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--dwm-primary), #2980b9);
  color: var(--dwm-white);
  border-radius: var(--dwm-radius);
  padding: 24px;
  margin-bottom: 24px;
}

.dwm-dashboard__welcome h2,
.dwm-dashboard__welcome p {
  color: var(--dwm-white);
  margin: 0 0 4px;
}

.dwm-dashboard__welcome p { opacity: 0.85; font-size: 0.9em; }

.dwm-dashboard__avatar img {
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.5);
}

.dwm-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.dwm-stat-card {
  background: var(--dwm-white);
  border-radius: var(--dwm-radius);
  padding: 20px;
  text-align: center;
  box-shadow: var(--dwm-shadow);
}

.dwm-stat-card__number {
  font-size: 2.2em;
  font-weight: 700;
  color: var(--dwm-primary);
  line-height: 1;
}

.dwm-stat-card__label {
  font-size: 0.85em;
  color: var(--dwm-gray);
  margin-top: 4px;
}

.dwm-dashboard__actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.dwm-dashboard__action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  background: var(--dwm-white);
  border-radius: var(--dwm-radius);
  box-shadow: var(--dwm-shadow);
  text-decoration: none;
  color: var(--dwm-dark);
  border: 2px solid transparent;
  transition: border-color var(--dwm-transition), transform var(--dwm-transition);
  gap: 8px;
}

.dwm-dashboard__action-card:hover {
  border-color: var(--dwm-primary);
  transform: translateY(-2px);
  color: var(--dwm-dark);
}

.dwm-dashboard__action-card--logout { color: #dc3545; }
.dwm-dashboard__action-card--logout:hover { border-color: #dc3545; }

.dwm-dashboard__action-icon { font-size: 2em; }
.dwm-dashboard__action-title { font-weight: 600; font-size: 0.95em; }

.dwm-dashboard__section { margin-top: 28px; }
.dwm-dashboard__section h3 { margin-bottom: 12px; }

/* ----- Tables / Tabellen ----- */
.dwm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.dwm-table th {
  background: var(--dwm-light);
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: var(--dwm-dark);
  border-bottom: 2px solid var(--dwm-border);
}

.dwm-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--dwm-border);
  vertical-align: middle;
}

.dwm-table tr:hover td { background: #f9f9f9; }
.dwm-table__actions { display: flex; gap: 6px; }

/* ----- Pagination ----- */
.dwm-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 32px 0;
  flex-wrap: wrap;
}

.dwm-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--dwm-radius-sm);
  background: var(--dwm-white);
  color: var(--dwm-primary);
  border: 1.5px solid var(--dwm-border);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--dwm-transition);
}

.dwm-pagination__link:hover,
.dwm-pagination__link--active {
  background: var(--dwm-primary);
  color: var(--dwm-white);
  border-color: var(--dwm-primary);
}

/* ----- Results Header ----- */
.dwm-results__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dwm-results__count {
  font-size: 0.95em;
  color: var(--dwm-gray);
}

/* ----- Empty State ----- */
.dwm-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--dwm-gray);
  grid-column: 1 / -1;
}

.dwm-empty-state__icon {
  font-size: 4em;
  margin-bottom: 16px;
}

.dwm-empty-state h3 {
  font-size: 1.3em;
  color: var(--dwm-dark);
  margin-bottom: 8px;
}

.dwm-empty-state p { margin-bottom: 16px; }

/* ----- User Rides ----- */
.dwm-user-rides__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.dwm-user-rides__header h3 { margin: 0; }

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .dwm-search-form__grid {
    grid-template-columns: 1fr 1fr;
  }

  .dwm-search-form__submit {
    grid-column: 1 / -1;
  }

  .dwm-rides-grid {
    grid-template-columns: 1fr;
  }

  .dwm-form__grid--2,
  .dwm-form__grid--3 {
    grid-template-columns: 1fr;
  }

  .dwm-dashboard__welcome {
    flex-direction: column;
    text-align: center;
  }

  .dwm-results__header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .dwm-filter-form__grid {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .dwm-search-form__grid {
    grid-template-columns: 1fr;
  }

  .dwm-dashboard__stats {
    grid-template-columns: 1fr 1fr;
  }

  .dwm-card {
    padding: 15px;
  }

  .dwm-table {
    font-size: 0.8em;
  }

  .dwm-table th,
  .dwm-table td {
    padding: 7px 8px;
  }
}