.qips-timings {
  --qips-navy: #071f57;
  --qips-blue: #174e87;
  --qips-gold: #c8922f;
  --qips-ink: #14233f;
  --qips-muted: #667085;
  --qips-surface: #f6f8fc;
  padding: 80px 0 95px;
  background:
    radial-gradient(circle at 8% 8%, rgba(200, 146, 47, .12), transparent 26rem),
    linear-gradient(180deg, #fff 0%, var(--qips-surface) 100%);
}

.qips-timings__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 34px;
  align-items: stretch;
  margin-bottom: 32px;
}

.qips-timings__eyebrow,
.qips-timings__status-label {
  display: block;
  color: var(--qips-gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.qips-timings h2 {
  color: var(--qips-navy);
  margin: 8px 0 12px;
  font-size: clamp(32px, 4vw, 48px);
}

.qips-timings__lead {
  max-width: 720px;
  color: var(--qips-muted);
  font-size: 18px;
  line-height: 1.75;
  margin: 0;
}

.qips-timings__status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 190px;
  padding: 26px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--qips-navy), var(--qips-blue));
  box-shadow: 0 18px 42px rgba(7, 31, 87, .18);
}

.qips-timings__clock {
  display: block;
  margin: 8px 0 2px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .02em;
}

.qips-timings__current {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 16px;
}

.qips-timings__progress {
  height: 5px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
}

.qips-timings__progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--qips-gold);
  transition: width .35s ease;
}

.qips-timings__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.qips-timings__filter {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid #d9dfeb;
  border-radius: 999px;
  color: var(--qips-navy);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.qips-timings__filter:hover,
.qips-timings__filter:focus-visible,
.qips-timings__filter.is-active {
  color: #fff;
  border-color: var(--qips-navy);
  background: var(--qips-navy);
}

.qips-timings__filter:hover { transform: translateY(-1px); }

.qips-timings__table-wrap {
  overflow-x: auto;
  border: 1px solid #e0e5ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(18, 39, 77, .08);
}

.qips-timings__table {
  width: 100%;
  min-width: 660px;
  margin: 0;
  border-collapse: collapse;
}

.qips-timings__table th,
.qips-timings__table td {
  padding: 17px 20px;
  text-align: start;
  border-bottom: 1px solid #e8ecf3;
}

.qips-timings__table thead th {
  color: #fff;
  background: var(--qips-navy);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.qips-timings__table tbody tr:last-child td { border-bottom: 0; }
.qips-timings__table tbody tr { transition: background-color .2s ease; }
.qips-timings__table tbody tr:hover { background: #f8faff; }
.qips-timings__table tbody tr.is-current { background: #fff7e8; }
.qips-timings__table tbody tr.is-current td:first-child { box-shadow: inset 5px 0 0 var(--qips-gold); }
[dir="rtl"] .qips-timings__table tbody tr.is-current td:first-child { box-shadow: inset -5px 0 0 var(--qips-gold); }
.qips-timings__table tbody tr[hidden] { display: none; }

.qips-timings__period {
  color: var(--qips-navy);
  font-weight: 800;
}

.qips-timings__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--qips-blue);
  font-size: 12px;
  font-weight: 800;
}

.qips-timings__badge--break { background: #8a6421; }
.qips-timings__note {
  margin: 18px 0 0;
  color: var(--qips-muted);
  font-size: 14px;
}

@media (max-width: 767px) {
  .qips-timings { padding: 58px 0 70px; }
  .qips-timings__intro { grid-template-columns: 1fr; gap: 22px; }
  .qips-timings__status { min-height: 160px; }
  .qips-timings__clock { font-size: 34px; }
  .qips-timings__filter { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .qips-timings__progress span,
  .qips-timings__filter,
  .qips-timings__table tbody tr { transition: none; }
}