/**
 * Main container
 */

.bts-container {
  border: 1px solid #e6e7eb;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.bts-section-title {
  font-size: 1rem;
  font-weight: 400;
  color: #6d757d;
  margin-bottom: 0.5rem;
}

.bts-section-hint {
  font-size: 0.8125rem;
  color: #a6a6a6;
}

.bts-location-info {
  font-size: 0.875rem;
  color: #6d757d;
  margin-bottom: 1rem;
}

.bts-settings {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e6e7eb;
  margin-top: 1.5rem;
}

/**
 * Radio pill buttons (Email type / Industry) — same pattern as
 * assets/css/smtp-tester.css's provider picker.
 */

.radio-btn-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5rem;
}

@media screen and (min-width: 576px) {
  .radio-btn-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * Each pill is a plain <button> (not a radio input) so it can be toggled
 * back off by clicking it again — a native radio group can't represent
 * "nothing selected" once one option has been chosen, which is exactly the
 * state this tool needs to support. Selection state is a `.is-selected`
 * class binding + `aria-pressed`, matching the toggle-button ARIA pattern
 * rather than the radio-group pattern.
 */
.radio-btn-content {
  height: 2.75rem;
  border: 0.0625rem solid #e6e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.625rem #c3c3c367;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease-out;
  font-size: 0.9rem;
  text-align: center;
  padding: 0 0.5rem;
  background: #fff;
  color: inherit;
  font-family: inherit;
}

.radio-btn-content.is-selected {
  border: 0.09375rem solid #1a53ff;
  color: #1a53ff;
  font-weight: 600;
}

/**
 * Result headline
 */

.bts-result {
  margin-bottom: 1.5rem;
}

.bts-result__headline {
  font-size: 1.375rem;
  margin-bottom: 0.25rem;
}

.bts-result__headline strong {
  color: #1a53ff;
}

.bts-result__explanation {
  color: #6d757d;
  margin: 0;
}

/**
 * Heatmap grid
 */

.bts-heatmap-wrap {
  overflow-x: auto;
}

.bts-heatmap {
  display: grid;
  grid-template-columns: 3.25rem repeat(24, minmax(1.5rem, 1fr));
  gap: 2px;
  min-width: 40rem;
}

.bts-heatmap__corner {
  /* empty top-left cell */
}

.bts-heatmap__hour-label {
  font-size: 0.6875rem;
  color: #a6a6a6;
  text-align: center;
  align-self: end;
  padding-bottom: 0.125rem;
}

.bts-heatmap__day-label {
  font-size: 0.8125rem;
  color: #6d757d;
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
  position: sticky;
  left: 0;
  background: #fff;
}

.bts-heatmap__cell {
  aspect-ratio: 1;
  border-radius: 2px;
  position: relative;
  transition: filter 0.1s ease-out;
}

/*
 * A paint-only effect (filter), not `transform: scale`. Scaling a cell up
 * expands its rendered box past its grid track, and for cells on the last
 * row/column that expansion pushes past `.bts-heatmap-wrap`'s edge —
 * `overflow-x: auto` on that wrapper then reacts to the enlarged scrollable
 * area and shows a scrollbar for the hover's duration. `filter` never
 * affects layout or a scroll container's computed overflow, so it can't
 * trigger this regardless of which cell is hovered.
 */
.bts-heatmap__cell:hover {
  filter: brightness(1.12) saturate(1.15);
}

.bts-heatmap__cell.is-best {
  border: 1px solid #fec02e;
  box-shadow: 0 0 0 1px #fff inset;
  z-index: 1;
}

.bts-heatmap__cell.is-best .bts-heatmap__trophy {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bts-heatmap__legend {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: #a6a6a6;
}

.bts-heatmap__legend-swatch {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 2px;
  display: inline-block;
}

/**
 * Mobile: ranked top-slots list shown above the scrollable heatmap
 */

.bts-top-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.bts-top-slots__chip {
  background: #e8eeff;
  color: #1a53ff;
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.bts-top-slots__chip:first-child {
  background: #1a53ff;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .bts-top-slots {
    display: none;
  }
}