#datetime-timezone {
  --timezone-border: #d9e2ef;
  --timezone-muted: #60728d;
  --timezone-blue: #1765ff;
}

.timezone-alert {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  color: #9b2c2c;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: .75rem;
}

.timezone-display {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  color: #142640;
  background: linear-gradient(135deg, #fff 0%, #f7f9fc 100%);
  border: 1px solid var(--timezone-border);
  border-radius: 1.2rem;
  box-shadow: 0 .75rem 2rem rgba(32, 55, 88, .08);
}

.timezone-display h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.75rem);
}

#current-time {
  position: relative;
  z-index: 1;
  margin-top: .5rem;
  text-align: center;
}

#current-time .clock {
  font-size: clamp(3.5rem, 11vw, 8rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.06em;
  line-height: 1;
}

#current-date {
  position: relative;
  z-index: 1;
  margin-top: .5rem;
  text-align: center;
}

#current-date .date {
  font-size: clamp(1rem, 3vw, 1.7rem);
  font-weight: 700;
}

#timezone-offset {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: 1rem auto 0;
  padding: .35rem .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #eef4ff;
  border: 1px solid #cbdcff;
  border-radius: 99rem;
}

.timezone-difference,
.timezone-hour-section,
.timezone-list-section {
  margin-top: 1.25rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--timezone-border);
  border-radius: 1rem;
}

.timezone-difference > h2,
.timezone-section-heading h2 {
  margin: 0;
  color: #142640;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.timezone-difference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}

.timezone-difference-grid article {
  padding: 1rem;
  background: #f5f8fd;
  border-radius: .8rem;
}

.timezone-difference-grid h3 {
  margin: 0;
  color: var(--timezone-muted);
  font-size: .9rem;
}

.timezone-difference-grid p {
  margin: .25rem 0 0;
  color: #142640;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.timezone-section-heading p {
  margin: 0 0 .15rem;
  color: var(--timezone-blue);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
}

.timezone-hour-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.timezone-table-wrap {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--timezone-border);
  border-radius: .75rem;
}

.timezone-hour-tables table,
.timezone-list-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.timezone-hour-tables th,
.timezone-hour-tables td,
.timezone-list-wrap th,
.timezone-list-wrap td {
  padding: .6rem .7rem;
  text-align: left;
  border-bottom: 1px solid #e9eef5;
}

.timezone-hour-tables thead th,
.timezone-list-wrap thead th {
  color: #435571;
  font-size: .78rem;
  background: #f3f6fb;
}

.timezone-hour-tables tbody th,
.timezone-hour-tables tbody td {
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.timezone-hour-tables tbody tr:last-child > * {
  border-bottom: 0;
}

.timezone-list-note {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin: .8rem 0;
  color: var(--timezone-muted);
  font-size: .85rem;
}

.timezone-list-note .material-icons {
  color: var(--timezone-blue);
  font-size: 1.15rem;
}

.timezone-list-wrap {
  overflow-x: auto;
  border: 1px solid var(--timezone-border);
  border-radius: .75rem;
}

.timezone-list-wrap table {
  table-layout: fixed;
}

.timezone-list-wrap th:first-child {
  width: 44%;
}

.timezone-list-wrap th:nth-child(2) {
  width: 16%;
}

.timezone-list-wrap th:nth-child(3),
.timezone-list-wrap th:nth-child(4) {
  width: 20%;
}

.timezone-list-wrap tbody th,
.timezone-list-wrap tbody td {
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}

.timezone-list-wrap tbody tr:last-child > * {
  border-bottom: 0;
}

.timezone-list-wrap .timezone-cell {
  overflow-wrap: anywhere;
}

.timezone-list-wrap a {
  color: #164fba;
  text-decoration: none;
}

.timezone-list-wrap a:hover {
  text-decoration: underline;
}

.timezone-list-wrap tr.is-selected > * {
  background: #eef4ff;
}

@media (max-width: 700px) {
  .timezone-display {
    border-radius: .9rem;
  }

  #current-time .clock {
    font-size: clamp(3.25rem, 18vw, 5.5rem);
  }

  .timezone-hour-tables {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .timezone-list-wrap table {
    min-width: 620px;
  }
}

@media (max-width: 480px) {
  .timezone-difference-grid {
    grid-template-columns: 1fr;
  }

  .timezone-difference-grid article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    padding: .75rem;
  }

  .timezone-difference-grid p {
    margin: 0;
    font-size: 1.45rem;
  }

  .timezone-hour-tables th,
  .timezone-hour-tables td {
    padding: .5rem;
  }
}