/* ============================================================
   calendar.css — Custom date picker
   ============================================================ */

/* ---------- Anchor / trigger button ---------- */
.cal-anchor {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  width:           100%;
  background:      var(--surface);
  border:          1px solid var(--border-strong);
  color:           var(--text-primary);
  padding:         14px 16px;
  font-family:     var(--font-sans);
  font-size:       15px;
  cursor:          pointer;
  transition:      border-color 0.2s;
  border-radius:   var(--radius-sm);
  text-align:      left;
}
.cal-anchor:hover        { border-color: var(--accent); }
.cal-anchor.input-error  { border-color: #C58F8F !important; }

.cal-anchor-value { flex: 1; }

.cal-anchor-icon {
  color:      var(--accent);
  opacity:    0.7;
  flex-shrink: 0;
}

/* ---------- Floating popup ---------- */
.cal-popup {
  background:    var(--surface);
  border:        1px solid var(--border-strong);
  border-top:    2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding:       20px;
  width:         300px;
  box-shadow:    0 16px 48px rgba(0,0,0,0.6);
  opacity:       0;
  transform:     translateY(6px);
  transition:    opacity 0.22s ease, transform 0.22s ease;
  user-select:   none;
}
.cal-popup.cal--visible {
  opacity:   1;
  transform: translateY(0);
}

/* ---------- Header ---------- */
.cal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
}

.cal-title {
  font-family:    var(--font-serif);
  font-size:      18px;
  color:          var(--text-primary);
  font-weight:    500;
  letter-spacing: 0.02em;
}

.cal-nav {
  background:    none;
  border:        1px solid var(--border-strong);
  color:         var(--text-secondary);
  width:         30px;
  height:        30px;
  border-radius: var(--radius-sm);
  font-size:     18px;
  line-height:   1;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all 0.18s;
  padding:       0 0 2px 0;
}
.cal-nav:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Day grid ---------- */
.cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   4px;
}

.cal-day-hdr {
  text-align:     center;
  font-size:      10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-tertiary);
  padding:        4px 0 8px;
  font-weight:    500;
}

.cal-cell {
  aspect-ratio:    1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  border-radius:   var(--radius-sm);
  transition:      all 0.15s;
  position:        relative;
}

.cal-cell--empty    { background: none; }

.cal-cell--disabled {
  color:   var(--text-tertiary);
  opacity: 0.35;
  cursor:  not-allowed;
}

.cal-cell--available {
  color:  var(--text-secondary);
  cursor: pointer;
}
.cal-cell--available:hover {
  background: rgba(201, 168, 118, 0.12);
  color:      var(--text-primary);
}

.cal-cell--today {
  color:       var(--accent);
  font-weight: 600;
}
.cal-cell--today::after {
  content:       '';
  position:      absolute;
  bottom:        3px;
  left:          50%;
  transform:     translateX(-50%);
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--accent);
  opacity:       0.5;
}

.cal-cell--selected {
  background: var(--accent) !important;
  color:      var(--bg) !important;
  font-weight: 600;
}