/* =========================================================================
   KATI wedding halls: the month of free dates (halls/_month), the booking
   fields (halls/_booking-fields), the public list and hall pages (halls/*)
   and the hall dashboard's extras (body.k-hd, on top of kati-barber.css).
   Colors are palette tokens only (App\Support\Kati\Palette). After editing,
   run `npm run rtl` for kati-hall.rtl.css.
   ========================================================================= */

/* ---------- The month: one event a day ---------- */
.k-month { --k-day: 64px; }
.k-month__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.k-month__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--kati-ink); text-transform: capitalize; }
.k-month__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--kati-line-strong); background: var(--kati-surface); color: var(--kati-ink); text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.k-month__arrow:hover { background: var(--kati-tint-soft); border-color: var(--kati-primary); color: var(--kati-ink); }
.k-month__arrow:focus-visible { outline: none; box-shadow: var(--kati-ring); }
.k-month__arrow.is-off { opacity: .35; pointer-events: none; }
.k-month__grid { display: flex; flex-direction: column; gap: 6px; }
.k-month__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.k-month__name { padding: 4px 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--kati-ink-3); text-transform: uppercase; letter-spacing: .02em; }
.k-month__day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--k-day); padding: 6px 2px; border-radius: 12px; border: 1px solid transparent; text-align: center;
  text-decoration: none; color: var(--kati-ink); line-height: 1.15; transition: background-color .2s, border-color .2s, transform .2s;
}
.k-month__day strong { font-size: 16px; font-weight: 600; }
.k-month__day small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; }
.k-month__day.is-pad { visibility: hidden; }
.k-month__day.is-free { background: color-mix(in srgb, var(--kati-success) 9%, var(--kati-surface)); border-color: color-mix(in srgb, var(--kati-success) 28%, transparent); }
.k-month__day.is-free small { color: color-mix(in srgb, var(--kati-success) 80%, var(--kati-ink)); }
a.k-month__day.is-free:hover { background: color-mix(in srgb, var(--kati-success) 18%, var(--kati-surface)); border-color: var(--kati-success); transform: translateY(-1px); color: var(--kati-ink); }
.k-month__day.is-taken { background: color-mix(in srgb, var(--kati-danger) 10%, var(--kati-surface)); border-color: color-mix(in srgb, var(--kati-danger) 30%, transparent); }
.k-month__day.is-taken small { color: color-mix(in srgb, var(--kati-danger) 85%, var(--kati-ink)); }
.k-month__day.is-pending { background: color-mix(in srgb, var(--kati-warning) 16%, var(--kati-surface)); border-color: color-mix(in srgb, var(--kati-warning) 45%, transparent); }
.k-month__day.is-pending small { color: color-mix(in srgb, var(--kati-warning) 55%, var(--kati-ink)); }
.k-month__day.is-closed { background: repeating-linear-gradient(135deg, var(--kati-surface-alt) 0 6px, var(--kati-surface) 6px 12px); border-color: var(--kati-line-strong); border-style: dashed; }
.k-month__day.is-closed small { color: var(--kati-ink-2); }
.k-month__day.is-past { color: var(--kati-ink-3); background: transparent; }
.k-month__day.is-today strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.k-month__day.is-picked { border-color: var(--kati-primary); box-shadow: 0 0 0 2px var(--kati-primary); }
a.k-month__day:focus-visible { outline: none; box-shadow: var(--kati-ring); }
/* the hall's own calendar links every day */
a.k-month__day.is-taken:hover, a.k-month__day.is-pending:hover, a.k-month__day.is-closed:hover, a.k-month__day.is-past:hover { border-color: var(--kati-primary); color: var(--kati-ink); }
.k-month__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--kati-ink-2); }
.k-month__legend li { display: inline-flex; align-items: center; gap: 8px; }
.k-month__key { display: inline-block; width: 16px; height: 16px; border-radius: 5px; border: 1px solid transparent; }
.k-month__key.is-free { background: color-mix(in srgb, var(--kati-success) 22%, var(--kati-surface)); border-color: var(--kati-success); }
.k-month__key.is-taken { background: color-mix(in srgb, var(--kati-danger) 22%, var(--kati-surface)); border-color: var(--kati-danger); }
.k-month__key.is-pending { background: color-mix(in srgb, var(--kati-warning) 30%, var(--kati-surface)); border-color: var(--kati-warning); }
.k-month__key.is-closed { background: var(--kati-surface-alt); border: 1px dashed var(--kati-line-strong); }
@media (max-width: 575.98px) {
  .k-month { --k-day: 48px; }
  .k-month__row, .k-month__grid { gap: 4px; }
  .k-month__day { border-radius: 9px; padding: 4px 1px; }
  .k-month__day strong { font-size: 14px; }
  .k-month__day small { font-size: 9.5px; }
  /* green already says free; the words stay for booked and closed days */
  .k-month__day.is-free small { display: none; }
}

/* ---------- Booking fields: the menus as cards, and the estimate ---------- */
.k-menus { min-width: 0; margin: 0; padding: 0; border: 0; }
.k-menus legend { float: none; width: auto; margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 500; color: var(--kati-ink); }
.k-menus legend small { font-weight: 400; color: var(--kati-ink-3); }
.k-menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.k-menus legend, .k-menus .k-err { grid-column: 1 / -1; }
.k-menu { position: relative; margin: 0; cursor: pointer; }
.k-menu input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k-menu__face {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--kati-line-strong); background: var(--kati-surface); transition: border-color .2s, background-color .2s;
}
.k-menu__face strong { font-size: 15px; font-weight: 600; color: var(--kati-ink); }
.k-menu__face small { font-size: 13px; color: var(--kati-ink-2); }
.k-menu:hover .k-menu__face { background: var(--kati-tint-soft); }
.k-menu input:checked + .k-menu__face { border-color: var(--kati-primary); background: var(--kati-tint-soft); box-shadow: 0 0 0 1px var(--kati-primary); }
.k-menu input:focus-visible + .k-menu__face { box-shadow: var(--kati-ring); }
.k-estimate {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; margin: 0; padding: 14px 16px;
  border-radius: 14px; background: var(--kati-tint-soft); border: 1px solid var(--kati-tint-line); color: var(--kati-on-tint);
}
.k-estimate[hidden] { display: none; }
.k-estimate > i { grid-row: span 2; font-size: 22px; color: var(--kati-accent-text); }
.k-estimate span { font-size: 16px; font-weight: 600; color: var(--kati-ink); }
.k-estimate span:empty::before { content: "—"; }
.k-estimate small { font-size: 13px; color: var(--kati-ink-2); }

/* ---------- The list of halls (on top of kati-explore.css) ---------- */
.k-halls .k-explore__search { display: grid; max-width: 900px; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, .9fr) auto; }
.k-halls .k-halls__field {
  display: flex; align-items: center; gap: 10px; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border-radius: 16px;
  background: var(--kati-surface-alt); border: 1px solid transparent; color: var(--kati-icon);
}
.k-halls .k-halls__field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--kati-ink); font-size: 15px; outline: none; }
.k-halls .k-halls__field:focus-within { border-color: var(--kati-primary); box-shadow: var(--kati-ring); }
.k-halls .k-place__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--kati-ink-2); }
.k-halls .k-place__facts li { display: inline-flex; align-items: center; gap: 6px; }
.k-halls .k-place__badge--free { background: color-mix(in srgb, var(--kati-success) 88%, var(--kati-ink)); color: var(--kati-surface); }
@media (max-width: 991.98px) {
  .k-halls .k-explore__search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .k-halls .k-explore__search .k-halls__field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .k-halls .k-explore__search { grid-template-columns: minmax(0, 1fr); }
  .k-halls .k-explore__search .k-btn { flex: none; }
}

/* ---------- One hall's page ---------- */
.k-hall__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--kati-ink-2); font-size: 15px; }
.k-hall__meta li { display: inline-flex; align-items: center; gap: 8px; }
.k-hall__meta i { color: var(--kati-accent-text); }
.k-hall__title { margin: 10px 0 0; font-family: var(--kati-display); font-size: clamp(36px, 5vw, 58px); font-weight: 500; line-height: 1.02; letter-spacing: -.015em; color: var(--kati-ink); }
.k-hall__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 48px); align-items: start; padding-top: clamp(24px, 4vw, 40px); padding-bottom: clamp(56px, 7vw, 96px); }
.k-hall__main { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); min-width: 0; }
.k-hall__section h2 { margin: 0 0 14px; font-size: 22px; font-weight: 600; color: var(--kati-ink); }
.k-hall__section > p { margin: 0; color: var(--kati-ink-2); font-size: 15.5px; line-height: 1.65; white-space: pre-line; }
.k-hall__pics { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: 16 / 8; border-radius: var(--k-radius-lg, 20px); overflow: hidden; background: var(--kati-sand); }
.k-hall__pics a { display: block; min-height: 0; overflow: hidden; background: var(--kati-sand); }
.k-hall__pics a:first-child { grid-row: span 2; }
.k-hall__pics img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--k-ease, ease); }
.k-hall__pics a:hover img { transform: scale(1.04); }
.k-hall__pics a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--kati-primary); }
.k-hall__pics--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.k-hall__pics--2 { grid-template-columns: 2fr 1fr; }
.k-hall__pics--2 a:last-child { grid-row: span 2; }
.k-hall__pics--3 { grid-template-columns: 2fr 1fr; }
.k-hall__pics--4 a:nth-child(4) { grid-column: span 2; }
.k-hall__nopics { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; border-radius: var(--k-radius-lg, 20px); font-size: 56px; color: color-mix(in srgb, var(--kati-icon) 70%, transparent); background: radial-gradient(120% 90% at 20% 10%, var(--kati-tint-soft), var(--kati-sand)); }
.k-hall__more { margin-top: 10px; font-size: 14px; color: var(--kati-ink-2); }
.k-hall__amenities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.k-hall__amenities li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--kati-surface); border: 1px solid var(--kati-card-line); font-size: 14px; color: var(--kati-ink); }
.k-hall__amenities i { color: var(--kati-success); }
.k-hall__menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.k-hall__menu { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: var(--kati-surface); border: 1px solid var(--kati-card-line); }
.k-hall__menu h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--kati-ink); }
.k-hall__menu strong { font-size: 18px; font-weight: 600; color: var(--kati-accent-text); }
.k-hall__menu p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--kati-ink-2); white-space: pre-line; }
.k-hall__menu small { font-size: 13px; color: var(--kati-ink-3); }
.k-hall__dates { padding: clamp(16px, 2.5vw, 24px); border-radius: var(--k-radius-lg, 20px); background: var(--kati-surface); border: 1px solid var(--kati-card-line); }
.k-hall__dates-note { margin: 0 0 16px; font-size: 14.5px; color: var(--kati-ink-2); }
.k-hall__place { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: var(--kati-surface); border: 1px solid var(--kati-card-line); }
.k-hall__place p { margin: 0; color: var(--kati-ink); font-size: 15px; }
.k-hall__place iframe { width: 100%; height: 280px; border: 0; border-radius: 12px; background: var(--kati-surface-alt); }
.k-hall__place .k-hall__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.k-hall__aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--k-radius-lg, 20px); background: var(--kati-surface); border: 1px solid var(--kati-card-line); box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--kati-shadow-tint) 40%, transparent); }
.k-hall__price { margin: 0; font-size: 14px; color: var(--kati-ink-2); }
.k-hall__price strong { display: block; font-size: 26px; font-weight: 600; color: var(--kati-ink); }
.k-hall__facts { display: grid; gap: 10px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--kati-line); list-style: none; font-size: 14.5px; color: var(--kati-ink); }
.k-hall__facts li { display: flex; align-items: center; gap: 10px; }
.k-hall__facts i { width: 20px; color: var(--kati-accent-text); }
.k-hall .k-hall__aside .k-btn { width: 100%; justify-content: center; }
.k-hall__fine { margin: 0; font-size: 13px; color: var(--kati-ink-3); }
/* phones: the side card moves up under the photos and a "Pick a date" bar stays at the bottom */
.k-hall__bar { display: none; }
@media (max-width: 991.98px) {
  .k-hall__layout { grid-template-columns: minmax(0, 1fr); }
  .k-hall__aside { position: static; order: -1; }
  .k-hall__pics { aspect-ratio: 4 / 3; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }
  .k-hall__pics a:first-child { grid-column: 1 / -1; grid-row: auto; }
  .k-hall__pics a:nth-child(n+4) { display: none; }
  .k-hall__pics--1, .k-hall__pics--2 { grid-template-rows: 1fr; }
  .k-hall__pics--2 a:first-child { grid-column: auto; }
  .k-hall__pics--2 a:last-child { grid-row: auto; }
  .k-hall__bar {
    position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px var(--k-gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--kati-surface); border-top: 1px solid var(--kati-line);
    box-shadow: 0 -12px 28px -20px color-mix(in srgb, var(--kati-shadow-tint) 45%, transparent);
  }
  .k-hall__bar p { margin: 0; font-size: 13px; color: var(--kati-ink-2); }
  .k-hall__bar strong { display: block; font-size: 16px; color: var(--kati-ink); }
  .k-hall { padding-bottom: 76px; }
}

/* ---------- Asking for a date (halls/book) ---------- */
.k-hallbook { padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 7vw, 96px); }
.k-hallbook__card { max-width: 820px; margin: 0 auto; padding: clamp(20px, 3.5vw, 40px); border-radius: var(--k-radius-lg, 20px); background: var(--kati-surface); border: 1px solid var(--kati-card-line); }
.k-hallbook__back { display: flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--kati-ink-2); font-size: 14px; text-decoration: none; }
.k-hallbook__back:hover { color: var(--kati-ink); }
.k-hallbook__title { margin: 6px 0 6px; font-size: clamp(26px, 3.5vw, 36px); font-weight: 600; color: var(--kati-ink); }
.k-hallbook__lead { margin: 0 0 22px; color: var(--kati-ink-2); font-size: 15.5px; }
.k-hallbook__date {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; padding: 14px 18px;
  border-radius: 14px; background: color-mix(in srgb, var(--kati-success) 9%, var(--kati-surface)); border: 1px solid color-mix(in srgb, var(--kati-success) 35%, transparent);
}
.k-hallbook__date strong { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--kati-ink); }
.k-hallbook__date strong i { color: var(--kati-success); }
.k-hallbook .k-form { display: grid; gap: 16px; }
.k-hallbook .k-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.k-hallbook .k-err { display: block; margin-top: 6px; font-size: 13px; color: var(--kati-danger); }
.k-hallbook .k-form > .k-btn { justify-self: start; }
.k-hallbook .k-note { margin-bottom: 18px; }
.k-hallbook__fine { margin: 0; font-size: 13.5px; color: var(--kati-ink-3); }
@media (max-width: 575.98px) {
  .k-hallbook .k-form__row { grid-template-columns: minmax(0, 1fr); }
  .k-hallbook__card { padding: 18px 14px; border-radius: 16px; }
}

/* ---------- Hall dashboard extras (body.k-hd) ---------- */
.k-hd .k-hd__back { display: inline-flex; margin-bottom: 10px; }
/* rows that open a page (Your hall, This month) */
.k-hd a.k-row { color: inherit; text-decoration: none; border-radius: 12px; transition: background-color .2s; }
.k-hd a.k-row * { text-decoration: none; }
.k-hd a.k-row:hover { background: var(--kati-tint-soft); }
.k-hd a.k-row:focus-visible { outline: none; box-shadow: var(--kati-ring); }
.k-hd .k-cols--cal { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.k-hd .k-hd__close { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--kati-line); }
.k-hd .k-hd__contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.k-hd .k-hd__share { margin-top: 18px; }
.k-hd .k-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.k-hd .k-facts > div { min-width: 0; }
.k-hd .k-facts__wide { grid-column: 1 / -1; }
.k-hd .k-facts dt { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--kati-ink-3); }
.k-hd .k-facts dd { margin: 0; font-size: 15px; color: var(--kati-ink); overflow-wrap: anywhere; }
.k-hd .k-facts__text { white-space: pre-line; line-height: 1.55; }
.k-hd .k-card .k-form + .k-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--kati-line); }
/* as in the shop's Settings (kati-vendor.css): tick boxes as pills, the page's link, the photo tiles */
.k-hd .k-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.k-hd .k-pick { position: relative; margin: 0; cursor: pointer; }
.k-hd .k-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k-hd .k-pick span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--kati-line-strong); background: var(--kati-surface); font-size: 14px; font-weight: 500; color: var(--kati-ink);
  transition: border-color .2s, background-color .2s;
}
.k-hd .k-pick:hover span { background: var(--kati-tint-soft); }
.k-hd .k-pick input:checked + span { border-color: var(--kati-primary); background: var(--kati-tint-soft); }
.k-hd .k-pick input:checked + span::before { content: "\2713"; font-weight: 700; color: var(--kati-accent-text); }
.k-hd .k-pick input:focus-visible + span { box-shadow: var(--kati-ring); }
.k-hd .k-copy { display: flex; gap: 8px; }
.k-hd .k-copy input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--kati-line-strong);
  background: var(--kati-surface-alt); color: var(--kati-ink-2); font-size: 14px; text-overflow: ellipsis;
}
.k-hd .k-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.k-hd .k-shot { position: relative; margin: 0; display: flex; flex-direction: column; border-radius: var(--k-radius-md); overflow: hidden; background: var(--kati-surface-alt); border: 1px solid var(--kati-card-line); }
.k-hd .k-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--kati-surface-alt); }
.k-hd .k-shot img[hidden] { display: block; visibility: hidden; }
.k-hd .k-shot.is-cover { border-color: var(--kati-primary); box-shadow: 0 0 0 1px var(--kati-primary); }
.k-hd .k-shot__badge { position: absolute; top: 10px; left: 10px; background: var(--kati-primary); color: var(--kati-on-primary); box-shadow: var(--kati-shadow); }
.k-hd .k-shot__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px; margin-top: auto; }
.k-hd .k-shot__actions form { margin: 0; }
.k-hd .k-shot__actions form:first-child:not(:last-child) { margin-right: auto; }
.k-hd .k-upload { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--kati-line); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 1199.98px) {
  .k-hd .k-cols--cal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .k-hd .k-facts { grid-template-columns: minmax(0, 1fr); }
  .k-hd .k-upload { grid-template-columns: minmax(0, 1fr); }
  .k-hd .k-upload .k-btn { justify-self: start; }
  .k-hd .k-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .k-hd .k-shot__actions { padding: 8px; }
}