/* CHECK AVAILABILITY — a believable demo desk.
   Nothing is sent anywhere: the form validates, then says so in plain words.
   The markup keeps real field names so a backend can be dropped in later. */

.desk {
  position: relative;
  z-index: 1;
  padding-block: var(--chapter);
  background: var(--deep);
  color: var(--offwhite);
}
.desk::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(25,184,216,.34), transparent 60%),
    radial-gradient(60% 50% at 92% 100%, rgba(255,200,61,.22), transparent 62%);
  pointer-events: none;
}
.desk .wrap { position: relative; }

.desk__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(1.6rem, 5vh, 2.8rem);
  max-width: 46ch;
}
.desk__head h2 { font-size: var(--t-lg); }
.desk__head h2 em { font-style: normal; color: var(--sun); }
.desk__head p { color: rgba(205, 239, 255, .8); }

.desk__form {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}

.field { display: grid; gap: .4rem; min-width: 0; }
.field > span {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(205, 239, 255, .72);
}
.field input, .field select {
  width: 100%;
  padding: .88rem .9rem;
  border-radius: 10px;
  border: 0;
  background: rgba(250, 248, 242, .95);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .25s linear, background-color .25s linear;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--deep) 50%),
                    linear-gradient(135deg, var(--deep) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
/* A touched date field is a real date field (see booking.js), and while it is
   still empty Chrome and Safari print their own mask in the visitor's OS
   language — "дд.мм.гггг" behind the open picker. Until a date is chosen the
   field is :invalid (it is required), and the mask stays invisible. */
.field input[data-date][type="date"]:invalid::-webkit-datetime-edit { color: transparent; }

.field input:focus, .field select:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--sun);
}
.field[data-bad='true'] input, .field[data-bad='true'] select {
  box-shadow: inset 0 0 0 2px var(--coral);
}
.field small {
  min-height: 1em;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--coral);
}

.desk__extras {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.chk {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .95rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(205, 239, 255, .3);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .25s linear, background-color .25s linear, color .25s linear;
}
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk i {
  width: 16px; height: 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(205, 239, 255, .55);
  transition: background-color .2s linear, box-shadow .2s linear;
}
.chk:has(input:checked) { background: var(--sun); color: var(--ink); box-shadow: none; }
.chk:has(input:checked) i { background: var(--ink); box-shadow: none; }
.chk:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 3px; }

.desk__go {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: .4rem;
}
.desk__go .demo-note { color: rgba(205, 239, 255, .6); max-width: 42ch; }

.desk__said {
  grid-column: 1 / -1;
  display: none;
  gap: .6rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  background: rgba(250, 248, 242, .1);
  box-shadow: inset 0 0 0 2px rgba(255, 200, 61, .5);
}
.desk__said.is-on { display: flex; }
.desk__said b { color: var(--sun); }

@media (prefers-reduced-motion: reduce) {
  .field input, .field select { transition: none; }
}