/**
 * Sleep base kit — schematic + legend + tip + area comparison as one block.
 * Brand: sky blue / soft ice / place gold for place names only.
 */

.sst-stays-sleep-kit {
  --sst-sleep-kit-sky: #0770e3;
  --sst-sleep-kit-sky-dark: #0557b0;
  --sst-sleep-kit-soft: #f8fbff;
  --sst-sleep-kit-line: #dbe7f3;
  --sst-sleep-kit-ink: #102033;
  --sst-sleep-kit-muted: #64748b;
  --sst-sleep-kit-place: var(--sst-place-gold, #e6a800);

  margin: 0 0 1.35rem;
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid var(--sst-sleep-kit-line);
  background:
    linear-gradient(180deg, #fff 0%, var(--sst-sleep-kit-soft) 100%);
  box-shadow: 0 10px 28px rgba(15, 43, 70, 0.05);
}

.sst-stays-sleep-kit > .sst-stays-schematic {
  margin: 0 0 12px;
  max-width: none;
}

.sst-stays-sleep-kit .sst-stays-schematic__caption {
  margin: 0 0 10px;
  color: var(--sst-sleep-kit-sky-dark);
}

.sst-stays-sleep-kit .sst-stays-schematic__svg {
  max-width: none;
  border-radius: 16px;
  border: 1px solid var(--sst-sleep-kit-line);
  background: var(--sst-sleep-kit-soft);
  cursor: default;
}

/* Interactive sleep-base chips inside the SVG */
.sst-stays-sleep-kit .sst-stays-sleep-kit__chip {
  cursor: pointer;
  outline: none;
}

.sst-stays-sleep-kit .sst-stays-sleep-kit__chip rect {
  transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
}

.sst-stays-sleep-kit .sst-stays-sleep-kit__chip:hover rect,
.sst-stays-sleep-kit .sst-stays-sleep-kit__chip:focus-visible rect,
.sst-stays-sleep-kit .sst-stays-sleep-kit__chip.is-active rect,
.sst-stays-sleep-kit.is-linked .sst-stays-sleep-kit__chip.is-lit rect {
  fill: #eef6ff;
  stroke: var(--sst-sleep-kit-sky-dark);
  filter: drop-shadow(0 4px 10px rgba(7, 112, 227, 0.18));
}

.sst-stays-sleep-kit .sst-stays-sleep-kit__chip:focus-visible rect {
  stroke-width: 2.25;
}

.sst-stays-sleep-kit__legend {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.sst-stays-sleep-kit__legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sst-sleep-kit-muted);
  line-height: 1.2;
}

.sst-stays-sleep-kit__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: 0 0 14px;
  box-sizing: border-box;
}

.sst-stays-sleep-kit__swatch--base {
  background: #fff;
  border: 1.5px solid var(--sst-sleep-kit-sky);
}

.sst-stays-sleep-kit__swatch--loop {
  background: transparent;
  border: 2px dashed #4ade80;
  border-radius: 999px;
}

.sst-stays-sleep-kit__swatch--water {
  background: linear-gradient(90deg, #93c5fd, #bfdbfe);
  border-radius: 999px;
}

.sst-stays-sleep-kit__swatch--note {
  background: #e2e8f0;
  border-radius: 999px;
}

.sst-stays-sleep-kit > .sst-krabi-tip {
  margin: 0 0 12px;
  border-radius: 14px;
}

.sst-stays-sleep-kit > .sst-krabi-table-wrap {
  margin: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--sst-sleep-kit-line);
  background: #fff;
}

.sst-stays-sleep-kit .sst-krabi-areas-table {
  margin: 0;
}

.sst-stays-sleep-kit .sst-krabi-areas-table tbody tr {
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.sst-stays-sleep-kit .sst-krabi-areas-table tbody tr.is-lit,
.sst-stays-sleep-kit .sst-krabi-areas-table tbody tr:hover {
  background: #eef6ff;
}

.sst-stays-sleep-kit .sst-krabi-areas-table tbody tr.is-lit th[scope="row"],
.sst-stays-sleep-kit .sst-krabi-areas-table tbody tr:hover th[scope="row"] {
  color: var(--sst-sleep-kit-sky-dark);
}

.sst-stays-sleep-kit .sst-krabi-areas-table th[scope="row"] {
  color: var(--sst-sleep-kit-place);
}

@media (max-width: 640px) {
  .sst-stays-sleep-kit {
    padding: 14px 12px 12px;
    border-radius: 18px;
  }

  .sst-stays-sleep-kit > .sst-krabi-table-wrap {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .sst-stays-sleep-kit .sst-krabi-table-wrap--stack .sst-krabi-areas-table tbody tr {
    margin: 0 0 10px;
    border: 1px solid var(--sst-sleep-kit-line);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 43, 70, 0.04);
  }

  .sst-stays-sleep-kit .sst-krabi-table-wrap--stack .sst-krabi-areas-table tbody tr.is-lit {
    border-color: #93c5fd;
    box-shadow: 0 6px 18px rgba(7, 112, 227, 0.12);
  }

  .sst-stays-sleep-kit .sst-krabi-table-wrap--stack .sst-krabi-areas-table tbody tr:last-child {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sst-stays-sleep-kit .sst-stays-sleep-kit__chip rect,
  .sst-stays-sleep-kit .sst-krabi-areas-table tbody tr {
    transition: none;
  }
}