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

:root {
  --brand-1: #4e54c8;
  --brand-2: #8f94fb;
  --accent: #ff7a59;
  --bg-soft: #f6f7fb;
}

body {
  background-color: var(--bg-soft);
  font-family: 'Inter', sans-serif;
  color: #2b2d3d;
}
h1, h2, h3, h4, h5, .navbar-brand, .fw-bold {
  font-family: 'Poppins', sans-serif;
}

/* Navbar */
.navbar {
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2)) !important;
  box-shadow: 0 2px 12px rgba(78,84,200,.25);
}
.navbar .nav-link {
  font-weight: 500;
  border-radius: 20px;
  padding: .4rem 1rem !important;
  transition: background .15s ease;
}
.navbar .nav-link:hover { background: rgba(255,255,255,.15); }

/* Hero */
.hero {
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  border-radius: 1.25rem;
  color: #fff;
  padding: 2.75rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(78,84,200,.25);
}
.hero::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 240px; height: 240px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.hero h1 { font-weight: 800; font-size: 2rem; }
.hero p { opacity: .92; max-width: 560px; }

/* Room cards */
.card-room {
  transition: transform .18s ease, box-shadow .18s ease;
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(43,45,61,.08);
}
.card-room:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(43,45,61,.14);
}
.room-thumb {
  height: 150px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.75rem;
  position: relative;
}
.room-thumb.room-thumb-photo {
  background-size: cover;
  background-position: center;
}
.room-thumb .cap-badge {
  position: absolute;
  bottom: 10px; right: 12px;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: .75rem;
  padding: .2rem .6rem;
  border-radius: 999px;
}
.card-room .card-title { font-weight: 700; }

/* Buttons */
.btn-primary {
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  border: none;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(78,84,200,.3);
}
.btn-primary:hover {
  background: linear-gradient(120deg, #3f45b0, #7378e0);
}
.btn, .form-control, .form-select, .card {
  border-radius: .7rem;
}

/* Cards / forms */
.card { border: none; }
.form-check-input:checked {
  background-color: var(--brand-1);
  border-color: var(--brand-1);
}

.badge-status-pending  { background:#ffc107; color:#000; }
.badge-status-disetujui{ background:#20c997; }
.badge-status-ditolak  { background:#e5533d; }
.badge-status-selesai  { background:#6c757d; }
.badge-status-dibatalkan{ background:#adb5bd; color:#000; }

#calendar { max-width: 100%; }

footer { color: #9096a8 !important; }

/* Slot picker */
.slot-btn {
  width: 78px;
  padding: .4rem 0;
  font-size: .8rem;
  font-weight: 500;
  border: 1px solid #dfe3ef;
  border-radius: .6rem;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: all .12s ease;
}
.slot-btn:hover:not(.booked) {
  border-color: var(--brand-1);
  color: var(--brand-1);
}
.slot-btn.booked {
  background: #e9ecef;
  color: #adb5bd;
  border-color: #e9ecef;
  cursor: not-allowed;
  text-decoration: line-through;
}
.slot-btn.selected {
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(78,84,200,.35);
}