/* ============================================================================
   BOOK THE STUDIO — controls specific to the booking request.
   The page frame, steps, fields, summary panel and mobile bar are shared with
   the print quote and live in form.css, so the two pages stay identical in
   rhythm and spacing.
   ============================================================================ */

/* ---------------------------------------------------------- shoot types -- */
.shoots {
  display: grid;
  gap: 8px;
}

@media (min-width: 640px) {
  .shoots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.shoot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 15px 16px 14px;
  border: 1px solid var(--stock-line);
  border-radius: var(--r-control);
  background: var(--stock);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.shoot:hover {
  border-color: #e0c8bc;
  background: #fffaf7;
}

.shoot.is-on {
  border-color: var(--flame);
  background: var(--flame-wash);
}

.shoot__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-right: 26px;
}

.shoot__price {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--flame-deep);
  font-variant-numeric: tabular-nums;
}

.shoot__unit {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-stock-soft);
  letter-spacing: 0;
  margin-left: 4px;
}

.shoot__blurb {
  font-size: 0.85rem;
  color: var(--on-stock-soft);
  line-height: 1.45;
  margin-top: 4px;
}

.shoot__tick {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 17px;
  height: 17px;
  border: 1.5px solid #dfc8bc;
  border-radius: 999px;
  background: var(--stock);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.shoot.is-on .shoot__tick {
  border-color: var(--flame);
  background: var(--flame);
}

.shoot.is-on .shoot__tick::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* ------------------------------------------------------------- calendar -- */
.cal {
  border: 1px solid var(--stock-line);
  border-radius: var(--r-control);
  background: #fffcfa;
  padding: 12px;
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cal__month {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cal__nav {
  display: flex;
  gap: 6px;
}

.cal__nav button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--stock-line);
  border-radius: 10px;
  background: var(--stock);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.cal__nav button:hover:not(:disabled) {
  border-color: var(--flame);
  background: var(--flame-wash);
}

.cal__nav button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cal__nav svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal__dow {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-stock-soft);
  padding-bottom: 4px;
}

/* Transparent by default. Filled white tiles on the card's warm ground left
   little diamond gaps at every four corners, which read as noise. */
.cal__day {
  aspect-ratio: 1;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--on-stock);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.cal__day:hover:not(:disabled) {
  border-color: var(--flame);
  background: var(--flame-wash);
  color: var(--flame-deep);
}

.cal__day:disabled {
  color: #c2ab9e; /* deliberately low — these are not choices */
  cursor: not-allowed;
}

.cal__day.is-blank {
  visibility: hidden;
}

.cal__day.is-today {
  border-color: #e0c8bc;
}

.cal__day.is-on {
  background: var(--flame);
  border-color: var(--flame);
  color: #fff;
}

.cal__day.is-on:hover {
  background: var(--flame-deep);
  color: #fff;
}

/* ---------------------------------------------------------------- times -- */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 8px;
}

.slot {
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--stock-line);
  border-radius: var(--r-control);
  background: var(--stock);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.slot:hover:not(:disabled) {
  border-color: #e0c8bc;
  background: #fffaf7;
}

.slot.is-on {
  border-color: var(--flame);
  background: var(--flame);
  color: #fff;
}

.slot:disabled {
  color: #a8917f; /* 4.5:1 on white */
  background: #fbf6f3;
  cursor: not-allowed;
}

.slots-hint {
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--on-stock-soft);
  line-height: 1.5;
}

.slots-hint b {
  color: var(--on-stock);
  font-weight: 600;
}

/* ---------------------------------------------------------------- aside -- */
.book__aside {
  display: grid;
  gap: 16px;
}

.card-stock {
  background: var(--stock);
  border-radius: var(--r-sheet);
  padding: clamp(20px, 2.6vw, 26px);
  box-shadow: var(--lift-2);
}

.card-stock h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.card-stock ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--on-stock-soft);
  line-height: 1.5;
}

.card-stock ol b {
  color: var(--on-stock);
  font-weight: 600;
}

.card-stock dl {
  margin: 0;
  display: grid;
  gap: 13px;
}

.card-stock dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-stock-soft);
  margin-bottom: 3px;
}

.card-stock dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.card-stock dd a {
  text-decoration: none;
  color: var(--flame-deep);
}

.card-stock dd a:hover {
  text-decoration: underline;
}