/* Booking page specific styles */
.hero-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

.package-card .price { font-size: var(--fs-600); color: var(--color-white); margin-bottom: var(--space-12); }
.package-card ul { margin-top: var(--space-12); }

.filters-form .muted { color: var(--color-text-muted); margin-top: 6px; }

/* Range input styling */
input[type="range"] { width: 100%; appearance: none; height: 4px; border-radius: var(--radius-round); background: color-mix(in oklab, var(--color-primary) 30%, var(--color-border)); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); box-shadow: var(--shadow-sm); border: 2px solid #0b1422; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); box-shadow: var(--shadow-sm); border: 2px solid #0b1422; }

.process-steps { counter-reset: step; display: grid; gap: var(--space-12); list-style: none;}
.process-steps li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; position: relative; padding-left: 48px; }
.process-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(30,167,255,0.15); color: var(--color-primary); font-weight: 700; }

.security-media img, .deals-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* Booking form */
.boek-form .field--full { grid-column: 1 / -1; }
.estimate-wrap { margin-top: var(--space-12); }
#estimate { font-weight: 700; color: var(--color-white); }
.form-status { margin-top: var(--space-16); }
.form-status.success { color: var(--color-success); }
.form-status.error { color: var(--color-danger); }

/* Deals */
.deals-card ul { margin-top: var(--space-12); }

/* Helper */
.muted { color: var(--color-text-muted); }

@media (max-width: 900px) {
  .process-steps li { padding-left: 44px; }
}