/* ============================================================
   Musta Sauna — SimplyBook Custom CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@400;500;600&display=swap');

/* ── Hide hero banner / cover image ─────────────────────────*/
.cover-image, .company-cover, .banner-wrap,
.company-profile-image, .hero-image, .company-profile,
[class*="cover-img"], [class*="company-banner"],
.sb2-company-cover, .profile-image-wrap {
  display: none !important;
}

/* ── Base ────────────────────────────────────────────────── */
body, html {
  background: #080808 !important;
  color: #F0EBE0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.page-wrap, .container, .content-wrap, #app,
main, .main-content, .inner-content,
.sb2-page, .sb2-content, .sb2-wrap {
  background: #080808 !important;
  color: #F0EBE0 !important;
}

/* ── Header ──────────────────────────────────────────────── */
.header, .top-bar, .navbar, .page-header,
.sb2-header, .sb2-top-bar {
  background: #0f0f0f !important;
  border-bottom: 1px solid #232323 !important;
  color: #F0EBE0 !important;
}

/* ── Headings ────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #F0EBE0 !important;
}

/* ── Cards / panels ──────────────────────────────────────── */
.card, .panel, .box, .service-card,
.service-item, .category-item, .provider-item,
.sb2-card, .sb2-panel, .sb2-box {
  background: #0f0f0f !important;
  border: 1px solid #232323 !important;
  color: #F0EBE0 !important;
  border-radius: 4px !important;
}

.card:hover, .service-item:hover {
  border-color: #C8A46E !important;
}

/* ── Buttons — dark base, gold border, NO animation ─────── */
.btn, .button, button, button[type="submit"],
.btn-primary, .btn-success, .btn-default,
.sb2-button, .sb2-btn {
  background: #0f0f0f !important;
  border: 1px solid #C8A46E !important;
  color: #C8A46E !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  border-radius: 2px !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
}

.btn:hover, .button:hover, .btn-primary:hover, .sb2-button:hover {
  background: #C8A46E !important;
  color: #080808 !important;
  box-shadow: none !important;
}

.btn-outline, .btn-secondary, .btn-back {
  background: transparent !important;
  border: 1px solid #232323 !important;
  color: #F0EBE0 !important;
  transition: none !important;
  animation: none !important;
}

.btn-outline:hover, .btn-secondary:hover, .btn-back:hover {
  border-color: #C8A46E !important;
  color: #C8A46E !important;
}

/* ── Inputs ──────────────────────────────────────────────── */
input, select, textarea,
.form-control, .sb2-input, .sb2-select {
  background: #0f0f0f !important;
  border: 1px solid #232323 !important;
  color: #F0EBE0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  border-radius: 2px !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: #C8A46E !important;
  outline: none !important;
  box-shadow: none !important;
}

input::placeholder, textarea::placeholder { color: #7A6E60 !important; }

label {
  color: #7A6E60 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ── Calendar ────────────────────────────────────────────── */
.datepicker, .calendar, .sb2-calendar,
.dp-table, .datepicker-wrapper {
  background: #0f0f0f !important;
  border: 1px solid #232323 !important;
  color: #F0EBE0 !important;
}

.datepicker th, .calendar th { color: #7A6E60 !important; background: #0f0f0f !important; }
.datepicker td, .calendar td { color: #F0EBE0 !important; }

.datepicker td.active, .dp-cell.selected, td.selected, td.today {
  background: #C8A46E !important;
  color: #080808 !important;
  border-radius: 2px !important;
}

.datepicker td:hover, .dp-cell:hover { background: #1e1e1e !important; }
.datepicker td.disabled, .dp-cell.disabled { color: #504540 !important; }

/* ── Time slots ──────────────────────────────────────────── */
.time-slot, .timeline-item, .slot, .slot-item {
  background: #0f0f0f !important;
  border: 1px solid #232323 !important;
  color: #F0EBE0 !important;
  border-radius: 2px !important;
  transition: none !important;
}

.time-slot:hover, .slot:hover { border-color: #C8A46E !important; color: #C8A46E !important; }
.time-slot.selected, .slot.selected { background: #C8A46E !important; border-color: #C8A46E !important; color: #080808 !important; }
.time-slot.disabled, .slot.disabled { opacity: 0.3 !important; }

/* ── Progress steps ──────────────────────────────────────── */
.steps, .wizard-steps, .step-bar, .sb2-steps {
  background: #0f0f0f !important;
  border-bottom: 1px solid #232323 !important;
}

.step, .step-item { color: #7A6E60 !important; }
.step.active, .step.current { color: #C8A46E !important; border-bottom-color: #C8A46E !important; }
.step.completed { color: #C8A46E !important; }

/* ── Price / links / dividers ────────────────────────────── */
.price, .amount, .total { color: #C8A46E !important; font-weight: 600 !important; }
a { color: #C8A46E !important; }
a:hover { color: #D4B47E !important; }
hr, .divider, .separator { border-color: #232323 !important; }

/* ── Footer ──────────────────────────────────────────────── */
.page-footer, .footer, .booking-footer {
  background: #0f0f0f !important;
  border-top: 1px solid #232323 !important;
  color: #7A6E60 !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #080808; }
::-webkit-scrollbar-thumb { background: #232323; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #C8A46E; }