/* Modern UI skin for Onderhoudsland
   Scope everything under body.modern-ui to avoid breaking existing layouts. */

/* Variable tweaks (apply to all descendants) */
body.modern-ui {
  --border-radius: 14px;
  --container-padding: 32px;
  --light-gray: #f3f4f6; /* neutral-100 */
}

/* Base look & feel */
body.modern-ui {
  background-color: var(--light-gray);
}

/* Containers */
body.modern-ui .section-padding {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Generic card treatment for common components */
body.modern-ui .planner-step,
body.modern-ui .sidebar-card,
body.modern-ui .pakket-card,
body.modern-ui .service-card,
body.modern-ui .package-option,
body.modern-ui .date-option,
body.modern-ui .time-slot,
body.modern-ui .search-result-card,
body.modern-ui .faq-item,
body.modern-ui .other-services-card .services-list a {
  border-radius: 16px !important;
  border: 1px solid #e5e7eb; /* gray-200 */
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Elevation on hover */
body.modern-ui .pakket-card:hover,
body.modern-ui .service-card:hover,
body.modern-ui .package-option:hover,
body.modern-ui .other-services-card .services-list a:hover {
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08), 0 2px 8px rgba(16, 24, 40, 0.06);
}

/* Cleaner headings */
body.modern-ui h1,
body.modern-ui h2,
body.modern-ui h3 {
  letter-spacing: -0.02em;
}

/* Buttons */
body.modern-ui .btn,
body.modern-ui .modern-btn,
body.modern-ui .step-nav-btn {
  border-radius: 999px !important; /* pill */
  font-weight: 600;
}

/* Primary button theme */
body.modern-ui .btn-primary,
body.modern-ui .modern-btn.modern-btn-primary,
body.modern-ui .cta-primary,
body.modern-ui .step-nav-btn:not(:disabled):hover {
  filter: saturate(1.02);
}

/* Inputs & selects */
body.modern-ui .form-group input,
body.modern-ui .form-group select,
body.modern-ui .form-group textarea,
body.modern-ui .sidebar-contact-form input,
body.modern-ui .sidebar-contact-form textarea {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02) inset;
}

body.modern-ui .form-group input:focus,
body.modern-ui .form-group select:focus,
body.modern-ui .form-group textarea:focus {
  outline: none;
  border-color: #c7d2fe; /* indigo-200 */
  box-shadow: 0 0 0 4px rgba(52, 127, 194, 0.12);
}

/* Online Planner: progress & steps */
body.modern-ui .planner-progress-bar .progress-bar-container {
  background: #eef2f7;
  border-radius: 999px;
}

body.modern-ui .planner-step {
  background: #ffffff;
  border: 1px solid #eef2f7;
}

/* Date grid cards */
body.modern-ui .date-grid { gap: 14px; }

body.modern-ui .date-option {
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

body.modern-ui .date-option:hover { transform: translateY(-2px); }

body.modern-ui .date-option.selected {
  background: #f0f9ff;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(52, 127, 194, 0.08);
}

body.modern-ui .date-option.disabled { opacity: .55; }

/* Time slots */
body.modern-ui .time-slots { gap: 10px; }

body.modern-ui .time-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

body.modern-ui .time-slot:hover { transform: translateY(-1px); }

body.modern-ui .time-slot.selected {
  background: #ecfdf5; /* green-50 */
  border-color: #86efac; /* green-300 */
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

body.modern-ui .time-slot.disabled { opacity: .55; cursor: not-allowed; }

/* Helper info above time slots */
body.modern-ui .time-slot-info {
  background: #f8fafc;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
}

/* Legacy Afspraak page panels */
body.modern-ui .afspraak-section .car-info-card,
body.modern-ui .afspraak-section .appointment-form-card,
body.modern-ui .afspraak-section .service-packages .package-option {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

/* Sidebar cards */
body.modern-ui .sidebar-card {
  background: #fff;
  border: 1px solid #e5e7eb;
}

/* Clean divider style */
body.modern-ui .divider,
body.modern-ui hr {
  border: none;
  border-top: 1px solid #eef2f7;
}

/* Breadcrumbs / minor text */
body.modern-ui .breadcrumb { color: #6b7280; }
body.modern-ui .breadcrumb a { color: var(--primary-blue); }

/* Pricing badges */
body.modern-ui .pakket-label,
body.modern-ui .badge { border-radius: 12px; }

/* Pagination, list items subtle hover */
body.modern-ui .pagination .page-numbers {
  border-radius: 10px;
  border-color: #e5e7eb;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  body.modern-ui .planner-step { padding: 1.5rem; }
  body.modern-ui .time-slot { min-width: 140px; }
}