/* ============================================================
   Cabana Moților — stil pentru formularul de rezervare 5starDesk
   Potrivit cu identitatea vizuală a site-ului cabanamotilor.ro
   Fonturi: Cinzel (titluri) + Ubuntu (text)
   Culori:  auriu #CF9D6C, text #6B6460, închis #3F4448

   CUM SE FOLOSEȘTE:
   1. Urcă acest fișier pe domeniul tău, ex: https://cabanamotilor.ro/booking-stil.css
   2. În 5starDesk → Channel Manager → Booking Engine →
      câmpul „URL fișier CSS pentru personalizare booking engine"
      pune adresa completă a fișierului.
   3. Salvează și reîncarcă https://www.5stardesk.com/b/cabana-motilor
   ============================================================ */

/* Fonturile trebuie importate — formularul e găzduit pe 5stardesk.com */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Ubuntu:wght@300;400;500;700&display=swap');

:root{
  --cm-gold:#CF9D6C;
  --cm-gold-dark:#B9885A;
  --cm-text:#6B6460;
  --cm-dark:#3F4448;
  --cm-cream:#FAF7F3;
  --cm-border:#ECE4DA;
}

/* ---------- Tipografie ---------- */
body,
.btn, .form-control, input, select, textarea,
p, span, li, td, label, a{
  font-family:'Ubuntu', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body{ color:var(--cm-text); }

h1, h2, h3, h4,
.section-heading{
  font-family:'Cinzel', Georgia, "Times New Roman", serif !important;
  color:var(--cm-dark);
}
h1{ color:var(--cm-gold) !important; }               /* „Verifica disponibilitatea" */
.section-heading{ color:var(--cm-dark) !important; }
.section-subheading{
  color:var(--cm-text) !important;
  font-family:'Ubuntu', sans-serif !important;
}

a{ color:var(--cm-gold); }
a:hover{ color:var(--cm-gold-dark); }

/* ---------- Buton principal: „Verifica disponibilitatea" ---------- */
.btn-success{
  background-color:var(--cm-gold) !important;
  border-color:var(--cm-gold) !important;
  color:#fff !important;
  border-radius:5px !important;
  font-weight:500;
  letter-spacing:.3px;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active{
  background-color:var(--cm-gold-dark) !important;
  border-color:var(--cm-gold-dark) !important;
  color:#fff !important;
}

/* ---------- Butoane secundare + calendar (Apply) ---------- */
.btn-primary,
.applyBtn{
  background-color:var(--cm-dark) !important;
  border-color:var(--cm-dark) !important;
  color:#fff !important;
  border-radius:5px !important;
}
.btn-primary:hover,
.applyBtn:hover{
  background-color:#2C2F32 !important;
  border-color:#2C2F32 !important;
}
.btn{ border-radius:5px; }

/* ---------- Câmpuri formular ---------- */
.form-control{
  border:1px solid var(--cm-border);
  border-radius:5px;
  color:var(--cm-dark);
  box-shadow:none;
}
.form-control:focus{
  border-color:var(--cm-gold);
  box-shadow:0 0 0 .15rem rgba(207,157,108,.25);
}

/* ---------- Containerul formularului de disponibilitate ---------- */
.custom_formular_disponibilitate{
  background:var(--cm-cream);
  border:1px solid var(--cm-border);
  border-radius:8px;
  padding:18px;
}

/* ---------- Bara de pași (progress bar) ---------- */
.custom_progress_bar .stepper-item.active .step-counter,
.custom_progress_bar .stepper-item.completed .step-counter{
  background-color:var(--cm-gold) !important;
  border-color:var(--cm-gold) !important;
  color:#fff !important;
}
.custom_progress_bar .stepper-item.active .step-name,
.custom_progress_bar .stepper-item.completed .step-name{
  color:var(--cm-gold-dark) !important;
  font-weight:500;
}
/* linia care leagă pașii, când sunt parcurși */
.custom_progress_bar .stepper-item.completed::before,
.custom_progress_bar .stepper-item.completed::after{
  background-color:var(--cm-gold) !important;
}

/* ---------- Calendar (daterangepicker) ---------- */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date{
  background-color:var(--cm-gold) !important;
  border-color:var(--cm-gold) !important;
  color:#fff !important;
}
.daterangepicker td.in-range{
  background-color:#F0E3D5 !important;
  color:var(--cm-dark) !important;
}

/* ---------- Accente diverse ---------- */
.text-muted{ color:#9A938C !important; }
.badge, .label{ background-color:var(--cm-gold); }