/* com_kahnbooking – front end. Scoped under .kb.
   Every colour, font and size is a custom property; the component options (Design tab) override them
   through an inline <style> emitted by the view. The values here are the fallbacks. */
.kb {
  --kb-accent: #00377b;
  --kb-accent-contrast: #fff;
  --kb-border: #d5dbe3;
  --kb-bg: #fff;              /* cards, chips */
  --kb-field-bg: #fff;        /* inputs */
  --kb-bg-soft: var(--kb-bg);
  --kb-tint: #cdd1de;         /* form background */
  --kb-text: #1c2430;
  --kb-muted: #5b6676;
  --kb-danger: #b3261e;
  --kb-radius: 10px;
  --kb-fs: 16px;
  --kb-fs-h: 18px;
  --kb-fs-s: 14px;
  --kb-maxw: 760px;
  --kb-pad: 24px;
  --kb-card-pad: 14px;
  --kb-card-minh: 0px;
  --kb-date-w: 64px;
  --kb-time-w: 76px;
  --kb-input-pad: 10px;
  max-width: var(--kb-maxw);
  margin: 0 auto;
  color: var(--kb-text);
  font-family: var(--kb-font, inherit);
  font-size: var(--kb-fs);
  direction: rtl;
  text-align: right;
  padding: var(--kb-pad);
  border-radius: calc(var(--kb-radius) + 4px);
  background: var(--kb-tint);
}
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
.kb [hidden] { display: none !important; }

.kb-step, .kb-result { margin: 0 0 28px; }
.kb-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: var(--kb-fs-h); }
.kb-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--kb-accent); color: var(--kb-accent-contrast); font-size: .9rem; flex: none;
}
.kb-note, .kb-summary, .kb-status { color: var(--kb-muted); margin: 8px 0; font-size: var(--kb-fs-s); }
.kb-summary { color: var(--kb-text); font-weight: 600; }

/* Meeting type cards */
.kb-types { display: grid; gap: 10px; grid-auto-rows: 1fr; }
.kb-type { display: flex; cursor: pointer; }
.kb-type input { position: absolute; opacity: 0; pointer-events: none; }
.kb-type-body {
  display: flex; flex-direction: column; gap: 2px; flex: 1; width: 100%; min-height: var(--kb-card-minh); padding: var(--kb-card-pad) calc(var(--kb-card-pad) + 2px);
  border: 2px solid var(--kb-border); border-radius: var(--kb-radius); background: var(--kb-bg);
  transition: border-color .15s, background-color .15s;
}
.kb-type-body small { color: var(--kb-muted); font-size: var(--kb-fs-s); }
.kb-dur { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--kb-accent); }
.kb-type:hover .kb-type-body { border-color: var(--kb-accent); }
.kb-type input:checked + .kb-type-body { border-color: var(--kb-accent); background: var(--kb-bg-soft); }
.kb-type input:focus-visible + .kb-type-body { outline: 3px solid var(--kb-accent); outline-offset: 2px; }

/* Date / time chips */
.kb-dates, .kb-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.kb-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: var(--kb-date-w); padding: 8px 12px; border: 1px solid var(--kb-border); border-radius: var(--kb-radius);
  background: var(--kb-bg); color: var(--kb-text); font: inherit; cursor: pointer;
}
.kb-chip:hover { border-color: var(--kb-accent); }
.kb-chip.is-active { background: var(--kb-accent); border-color: var(--kb-accent); color: var(--kb-accent-contrast); }
.kb-chip:focus-visible { outline: 3px solid var(--kb-accent); outline-offset: 2px; }
.kb-chip-top { font-size: calc(var(--kb-fs-s) - 2px); opacity: .8; }
.kb-chip-bottom { font-weight: 600; }
.kb-time { min-width: var(--kb-time-w); font-weight: 600; }
.kb-dates.is-collapsed .kb-date:not(.is-active) { display: none; }
.kb-dates.is-collapsed { align-items: center; }
.kb-change-day {
  min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--kb-accent);
  font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.kb-change-day:focus-visible { outline: 3px solid var(--kb-accent); outline-offset: 2px; }

/* Form */
.kb-form { display: grid; gap: 14px; }
.kb-field label { display: block; margin-bottom: 4px; font-weight: 600; }
.kb-field input[type="text"], .kb-field input[type="email"], .kb-field input[type="tel"], .kb-field textarea {
  width: 100%; padding: var(--kb-input-pad) 12px; border: 1px solid var(--kb-border); border-radius: calc(var(--kb-radius) - 2px);
  background: var(--kb-field-bg); color: var(--kb-text); font: inherit;
}
.kb-field input[dir="ltr"] { text-align: left; }
.kb-field input:focus, .kb-field textarea:focus { outline: 3px solid var(--kb-accent); outline-offset: 1px; }
.kb-consent label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.kb-consent input { margin-top: 5px; }
.kb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kb-error, .kb-alert { color: var(--kb-danger); margin: 0; font-weight: 600; }

.kb-btn {
  display: inline-block; padding: 12px 26px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--kb-accent); color: var(--kb-accent-contrast); font: inherit; font-weight: 700; text-decoration: none; text-align: center;
}
.kb-btn:hover { filter: brightness(1.12); color: var(--kb-accent-contrast); }
.kb-btn:disabled { opacity: .6; cursor: wait; }
.kb-btn-secondary { background: transparent; color: var(--kb-accent); border: 2px solid var(--kb-accent); }
.kb-btn-secondary:hover { color: var(--kb-accent); }

/* Result / message pages */
.kb-result { padding: 18px 20px; border: 2px solid var(--kb-accent); border-radius: var(--kb-radius); background: var(--kb-bg-soft); }
.kb-message .kb-title { margin: 0 0 12px; }
.kb-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0; padding: 14px 16px; background: var(--kb-bg-soft); border-radius: var(--kb-radius); }
.kb-details dt { font-weight: 700; margin: 0; }
.kb-details dd { margin: 0; }
.kb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media (max-width: 639px) {
  .kb { padding: min(var(--kb-pad), 16px); }
}
@media (min-width: 640px) {
  .kb-types { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .kb * { transition: none !important; }
}