/* ============== ChaNomad Booking – Mobile-first Calendar UI ============== */

:root{
  --brand: #4c7a66;         /* tweak to your brand green */
  --brand-600:#0a6847;
  --ink:   #0f172a;          /* dark text */
  --muted: #64748b;          /* gray text */
  --line:  #e5e7eb;          /* borders */
  --bg:    #ffffff;
  --pill:  #eef2ff;          /* time-slot bg hover */
  --focus: #2563eb;          /* focus ring */
  --radius:16px;
}

/* App container (you can let your theme handle spacing) */
#cnb-app{
  display:block;
  max-width: 480px;          /* keep it compact on mobile */
}

/* Shared */
.cnb-title{
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: 8px 0 16px;
}

/* Card-ish section look */
.cnb-step{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  display: none;
}
.cnb-step.active{ display:block; }

/* ---------- Month header ---------- */
.cnb-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 12px;
}

/* Month label centered properly */
.cnb-month {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: #111827;
}

/* Arrows — same size, visually balanced */
.cnb-nav {
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  width: 40px;
  height: 36px;
  color: #111827;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cnb-nav:hover {
  background: #e2e8f0;
}

/* ---------- Weekday row ---------- */
.cnb-weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 8px 0 6px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- Month grid ---------- */
.cnb-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

/* Day cell (div) */
.cnb-day{
  position: relative;
  height: 44px;              /* square feel on mobile */
  border:1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  user-select:none;
}
.cnb-day.available{ cursor:pointer; }
.cnb-day.available:hover{ background:#f8fafc; }
.cnb-day.disabled{
  color:#c0c7d1;
  background:#f8fafc;
}
.cnb-day.out{ visibility:hidden; }

/* Available dot */
.cnb-day .dot{
  position:absolute;
  bottom:6px; left:50%;
  width:6px; height:6px;
  border-radius:999px;
  transform:translateX(-50%);
  background: var(--brand-600);
}

/* Selected day */
.cnb-day.selected{
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(10,104,71,.15);
}

/* ---------- Step actions ---------- */
.cnb-actions{
  display:flex; gap:8px;
  justify-content:flex-end;
  margin-top: 8px;
}
.cnb-btn{
  appearance:none;
  border:1px solid var(--brand-600);
  background:var(--brand-600);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
.cnb-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.cnb-btn.secondary{
  background:#fff;
  color:var(--brand-600);
}

/* ---------- Time slots ---------- */
.cnb-times{
  display:flex; flex-wrap:wrap;
  gap:8px;
  margin-top: 8px;
}
.cnb-slot{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius: 999px;
  padding:8px 12px;
  font-size:14px;
  cursor:pointer;
}
.cnb-slot:hover{ background: var(--pill); }
.cnb-slot.selected{
  color:#fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
}

/* ---------- Form fields ---------- */
.cnb-field{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  margin:6px 0;
  font-size:15px;
}
.cnb-field:focus{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* Price line */
.cnb-price{
  margin:8px 0 0;
  color:var(--ink);
  font-weight:600;
  font-size:16px;
}

/* ======================================================================
   Desktop refinements
   ====================================================================== */
@media (min-width: 760px){
  #cnb-app{ max-width: 720px; }
  .cnb-step{ padding: 20px; }
  .cnb-title{ font-size: 24px; }
  .cnb-day{ height: 52px; font-size:16px; }

  /* header stays flex; just tweak size/spacing */
  .cnb-cal-header{
    max-width: 520px;   /* a bit wider on desktop */
    padding: 10px 16px;
  }
  .cnb-month{ font-size: 1.125rem; }
  .cnb-nav{
    width: 44px;
    height: 40px;
    border-radius: 10px;
  }
  .cnb-weekdays{ font-size:14px; }
}

/* ======================================================================
   Mobile refinements
   ====================================================================== */
@media (max-width: 480px) {
  .cnb-cal-header {
    max-width: 100%;
    padding: 8px;
  }
  .cnb-month { font-size: 1rem; }
  .cnb-nav { width: 36px; height: 32px; }
}