@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600;700&display=swap');

#kh-wrap {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}
.kh-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 1.25rem; color: inherit; }
.kh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 1.25rem; }
.kh-field { display: flex; flex-direction: column; gap: 5px; }
.kh-field label { font-size: 0.78rem; font-weight: 700; color: #555; }
.kh-field input, .kh-field select {
  width: 100%; padding: 11px 12px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 0.9rem; font-family: 'Josefin Sans', sans-serif; font-weight: 700;
  text-transform: uppercase; background: #fff; color: #222; box-sizing: border-box;
}
.kh-field input:focus, .kh-field select:focus { outline: 2px solid #6b46c1; outline-offset: 1px; border-color: transparent; }
.kh-field select:disabled { background: #f5f5f5; color: #999; }
.kh-field-hint { font-size: 0.72rem; color: #888; margin-top: 2px; text-transform: none; letter-spacing: normal; }
.kh-warning { font-size: 0.78rem; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 9px 13px; margin-bottom: 12px; }

/* Price bar */
.kh-price-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: #f5f5f5; border-radius: 8px; padding: 12px 16px;
  margin-bottom: 1.25rem; font-size: 0.85rem; width: 100%; box-sizing: border-box;
}
.kh-price-label { color: #555; margin-right: 4px; }
.kh-price-val   { font-weight: 700; color: #222; }
.kh-price-sep   { color: #aaa; font-size: 0.75rem; }
.kh-price-total { font-size: 0.85rem !important; font-weight: 700; color: #6b46c1; margin-left: 2px; line-height: 1.5; }
.kh-price-rate  { font-size: 0.85rem; font-weight: 700; color: #6b46c1; }
.kh-badge { font-size: 0.68rem; padding: 3px 10px; border-radius: 99px; font-weight: 700; }
.kh-badge-peak { background: #fff0e0; color: #b94a00; }
.kh-badge-off  { background: #edf7f1; color: #1a6640; }

/* Messages */
.kh-msg { font-size: 0.82rem; border-radius: 6px; padding: 10px 14px; margin-top: 12px; background: #f0f0f0; color: #333; }
.kh-msg-error { background: #fef2f2; color: #991b1b; }

/* Buttons */
.kh-btn-primary {
  display: block; width: 100%; padding: 15px 28px; background: #6b46c1;
  color: #fff; border: none; border-radius: 8px; font-size: 1rem;
  font-weight: 700; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase;
  letter-spacing: 0.06em; cursor: pointer; transition: background 0.15s;
}
.kh-btn-primary:hover    { background: #553c9a; }
.kh-btn-primary:disabled { background: #bbb; cursor: default; }
.kh-btn-back {
  background: none; border: none; color: #6b46c1; font-size: 0.85rem;
  font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 1.25rem;
  display: block; letter-spacing: 0.08em; font-family: 'Josefin Sans', sans-serif;
}
.kh-results-summary { font-size: 0.85rem; color: #555; line-height: 1.6; margin-bottom: 0.75rem; }

/* Preferred venue unavailable notice */
.kh-preferred-unavailable {
  background: rgba(224,64,251,0.08);
  border: 1px solid rgba(224,64,251,0.35);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255,255,255,0.95);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.55;
}

/* No results */
.kh-no-results { background: #fef2f2; color: #991b1b; border-radius: 8px; padding: 1rem 1.25rem; font-size: 0.85rem; }
.kh-no-results-alt { text-align: center; margin-top: 8px; }

/* Results step background */
#kh-step-2 {
  background: #0f1a33;
  border-radius: 10px;
  padding: 16px;
  margin-top: 8px;
}
.kh-results-summary { color: rgba(255,255,255,0.7); }
.kh-btn-back { color: #e040fb; }
.kh-preferred-unavailable { font-size: 0.85rem; }

/* ── Venue card ─────────────────────────────────────────────────────────── */
.kh-venue-card { width: 100%; box-sizing: border-box; margin-bottom: 16px; }
.kh-vc-header  { padding: 0 0 6px 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; text-align: center; }
.kh-vc-name    { font-size: 0.85rem; font-weight: 700; color: #fff; letter-spacing: 0.05em; text-align: center; }
.kh-vc-people  { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); border-radius: 99px; padding: 2px 8px; }

/* ── Slots row ──────────────────────────────────────────────────────────── */
.kh-slots-row { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; }

.kh-arrow {
  background: #e040fb; border: none; color: #fff; font-size: 0.85rem;
  cursor: pointer; padding: 0; border-radius: 50%; flex-shrink: 0;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; box-shadow: 0 1px 4px rgba(224,64,251,0.4);
}
.kh-arrow:hover:not([disabled]) { background: #c020db; }
.kh-arrow[disabled] { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.2); box-shadow: none; cursor: default; }
.kh-arrow-symbol { display: block; }
.kh-arrow[disabled] .kh-arrow-symbol { color: rgba(255,255,255,0.2); }
.kh-arrow-label { display: none; }

.kh-slots { display: flex; flex: 1; gap: 6px; }

/* Individual slot — compact */
.kh-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  background: #1a2744; border: 1.5px solid #2a3a5c; border-radius: 8px;
  padding: 7px 3px 5px; min-width: 0; box-sizing: border-box; transition: border-color 0.15s;
}
.kh-slot:hover { border-color: rgba(224,64,251,0.4); }
.kh-slot-sel   { border-color: #e040fb; }

.kh-slot-time {
  font-size: 0.75rem; font-weight: 700; color: #fff;
  white-space: nowrap; text-align: center; margin-bottom: 5px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

.kh-slot-dur-row { display: flex; flex-direction: column; gap: 3px; width: 100%; }

.kh-dur-btn {
  display: block; width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75); font-family: 'Josefin Sans', sans-serif;
  font-weight: 700; font-size: 0.55rem; letter-spacing: 0.02em;
  padding: 4px 2px; cursor: pointer; border-radius: 99px; text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  line-height: 1.3; white-space: normal; word-break: break-word;
}
.kh-dur-btn:hover { background: rgba(224,64,251,0.2); border-color: #e040fb; color: #fff; }
.kh-dur-btn-active { background: #e040fb; border-color: #e040fb; color: #fff; font-size: 1rem; padding: 4px 2px; display: flex; align-items: center; justify-content: center; min-height: 0; }
.kh-dur-btn-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* ── Results divider ─────────────────────────────────────────────────────── */
.kh-results-divider { font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-align: center; padding: 8px 0 10px; }

/* ── Unavailable venue notice ────────────────────────────────────────────── */
.kh-venue-unavailable { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; background: rgba(26,39,68,0.5); opacity: 0.75; }
.kh-venue-unavailable-name { font-size: 0.82rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.kh-venue-unavailable-msg  { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.6); line-height: 1.4; text-transform: none; letter-spacing: normal; }

/* Next slot button */
.kh-venue-unavailable-btns {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: nowrap;
}
.kh-next-slot-btn {
  flex: 1; display: block; padding: 6px 8px; text-align: center;
  background: #e040fb; border: none; border-radius: 6px; color: #fff;
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: background 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kh-next-slot-btn:hover { background: #c020db; }

/* ── Confirm overlay ─────────────────────────────────────────────────────── */
.kh-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.kh-confirm-box { background: #1a2744; border: 1px solid #2a3a5c; border-radius: 10px; padding: 1.75rem; max-width: 420px; width: 100%; font-family: 'Josefin Sans', sans-serif; }
.kh-confirm-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 1.25rem; text-align: center; letter-spacing: 0.05em; }
.kh-confirm-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid #2a3a5c; font-size: 0.85rem; }
.kh-confirm-row span   { color: rgba(255,255,255,0.55); font-weight: 600; flex-shrink: 0; }
.kh-confirm-row strong { color: #fff; font-weight: 700; text-align: right; }
.kh-confirm-actions { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 1.5rem; }
@media (min-width: 480px) { .kh-confirm-actions { flex-direction: row; } }
.kh-confirm-cancel { flex: 1; padding: 12px; background: transparent; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; color: rgba(255,255,255,0.7); font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.kh-confirm-cancel:hover { border-color: #fff; color: #fff; }
.kh-confirm-proceed { flex: 2; padding: 12px; background: #e040fb; border-radius: 6px; color: #fff !important; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-align: center; text-decoration: none !important; transition: background 0.15s; }
.kh-confirm-proceed:hover { background: #c020db; }

/* ── Loader — fixed overlay so always visible regardless of scroll ───────── */
.kh-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: fixed;
  inset: 0;
  background: rgba(15,26,51,0.85);
  z-index: 99999;
}
.kh-loader-logo { width: 72px; height: 72px; display: block; animation: kh-spin 1.4s linear infinite; filter: brightness(0) invert(1); }
.kh-loader-text { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; }
@keyframes kh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.kh-price-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #ddd; border-top-color: #6b46c1; border-radius: 50%; animation: kh-spin 0.7s linear infinite; vertical-align: middle; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) { .kh-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .kh-grid { grid-template-columns: 1fr; }
  .kh-price-bar { flex-direction: column; align-items: flex-start; }
  .kh-slots-row { flex-direction: column; gap: 8px; }
  .kh-arrow { order: 0; width: 100%; border-radius: 8px; min-height: 36px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; gap: 5px; }
  .kh-arrow.kh-next { order: 2; }
  .kh-slots { order: 1; gap: 5px; }
  .kh-slot { padding: 7px 3px 5px; border-radius: 7px; }
  .kh-slot-time { font-size: 0.72rem; margin-bottom: 5px; }
  .kh-dur-btn { font-size: 0.52rem; padding: 4px 2px; }
  .kh-arrow-symbol { display: inline; }
  .kh-arrow-label  { display: inline; }
}