/* Times page. Loaded AFTER style.css and responsive.css, so the header, hero,
   buttons, footer and colour variables all come from the main site styles.
   Everything below is only for the times table, filters and blocks. */

/* hero: reuses .sp-hero, just a little shorter + the date pill */
.tb-hero {
  min-height: 320px
}

.tb-hero .sp-hero-content {
  padding: 44px 0
}

.tb-hero p {
  margin-bottom: 18px
}

.tb-date {
  display: inline-block;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 40px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff
}

.tb-date:empty {
  display: none
}

/* page body: same soft gradient as the provinces page */
.tb-main {
  background: linear-gradient(180deg, #f9fcfe 0%, #eef5fb 100%);
  padding: 40px 0 56px;
  --card: #fff;
  --hit: #fff3d6
}

.tb-main .container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 24px
}


.tb-wrap {
  max-width: 1100px
}

/* dark mode only restyles the content area (header/footer stay as on the main site) */
[data-theme=dark] .tb-main {
  --bg: #0b1722;
  --card: #12253a;
  --text: #e6eef6;
  --muted: #93a4b6;
  --line: #21374f;
  --hit: #3a3114;
  background: #0b1722;
  color: var(--text)
}

/* buttons (match .btn) */
.tb-btn {
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--navy);
  border-radius: 8px;
  padding: 10px 18px;
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
  transition: background .2s, color .2s
}

.tb-btn:hover {
  background: var(--bg)
}

.tb-clear {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff
}

.tb-clear:hover {
  background: #0862ab;
  border-color: #0862ab
}

[data-theme=dark] .tb-btn {
  color: var(--text)
}

/* filter card */
.tb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  background: var(--card);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(20, 60, 110, .12)
}

.tb-controls label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  gap: 5px
}

.tb-controls select,
.tb-controls input[type=search] {
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: 500 15px Inter, sans-serif;
  min-width: 160px;
  outline: 0
}

.tb-controls select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background: var(--card) no-repeat right 14px center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a74c9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}

.tb-controls select:focus,
.tb-controls input[type=search]:focus {
  border-color: var(--sky)
}

.tb-grow {
  flex: 1;
  min-width: 200px
}

.tb-check {
  flex-direction: row !important;
  align-items: center;
  padding-bottom: 11px;
  color: var(--navy) !important
}

.tb-check input {
  accent-color: var(--blue);
  margin-right: 6px
}

[data-theme=dark] .tb-check {
  color: var(--text) !important
}

.tb-demo {
  background: #ffe3e0;
  color: #8a1c12;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  margin-top: 16px
}

/* today's time blocks: same card look as the country cards */
.tb-blocks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 22px
}

.tb-block {
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(20, 50, 90, .1)
}

.tb-block b {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600
}

.tb-block span {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue)
}

/* info messages under the blocks: small cards with an icon */
.tb-note,
.tb-updated {
  position: relative;
  margin-top: 14px;
  padding: 12px 16px 12px 46px;
  background: var(--card);
  border-radius: 10px;
  border-left: 4px solid var(--sky);
  box-shadow: 0 2px 8px rgba(20, 50, 90, .08);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text)
}

.tb-note:empty,
.tb-updated:empty {
  display: none
}

.tb-note::before,
.tb-updated::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  background: no-repeat center/contain
}

/* info icon */
.tb-note::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a74c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.500v.01'/%3E%3C/svg%3E")
}

/* clock icon */
.tb-updated::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a74c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")
}

.tb-updated {
  border-left-color: var(--gold)
}

/* shown for a few seconds when new times arrive while the page is open */
.tb-updated.just {
  border-left-color: #1e9e57;
  background: #e8f7ee;
  animation: tb-flash 1.6s ease-out 2
}

[data-theme=dark] .tb-updated.just {
  background: #12301f
}

@keyframes tb-flash {
  0% { box-shadow: 0 0 0 0 rgba(30, 158, 87, .55) }
  100% { box-shadow: 0 0 0 14px rgba(30, 158, 87, 0) }
}

@media (prefers-reduced-motion: reduce) {
  .tb-updated.just { animation: none }
}

/* hint becomes a small section heading above the picker */
.tb-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px;
  font-size: 17px;
  font-weight: 800;
  color: red
}

.tb-hint::before {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eaf0f6 no-repeat center/25px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff0000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V5a2 2 0 0 1 4 0v5l4 1a2 2 0 0 1 2 2v3a5 5 0 0 1-5 5h-3a5 5 0 0 1-4-2l-3-4a2 2 0 0 1 3-2l2 2'/%3E%3C/svg%3E")
}

[data-theme=dark] .tb-hint {
  color: var(--text)
}

[data-theme=dark] .tb-hint::before {
  background-color: #17304a
}

/* time picker */
.tb-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start
}

.tb-col {
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 50, 90, .1)
}

.tb-pt {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .2s
}

.tb-pt:hover {
  background: var(--hit)
}

.tb-pt em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px
}

.tb-pt .tb-v {
  display: block;
  padding: 10px 6px
}

.tb-pt.sel {
  background: var(--gold);
  color: #4a3200
}

.tb-banner {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #8a7433;
  background: #5c4d22;
  color: #fff3d6
}

/* result bar + chips */
.tb-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 18px 0 12px;
  font-weight: 600;
  color: var(--navy)
}

[data-theme=dark] .tb-filterbar {
  color: var(--text)
}

.tb-chip {
  background: var(--gold);
  color: #4a3200;
  border-radius: 999px;
  padding: 4px 12px;
  font: 600 13px Inter, sans-serif;
  border: 0;
  cursor: pointer
}

/* table card */
.tb-tablewrap {
  overflow-x: auto;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(20, 60, 110, .12)
}

.tb-table {
  width: 100%;
  border-collapse: collapse
}

.tb-table th,
.tb-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line)
}

.tb-table tbody tr:last-child td {
  border-bottom: 0
}

.tb-table th {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: #eaf0f6
}

[data-theme=dark] .tb-table th {
  color: var(--text);
  background: #17304a
}

.tb-table th.on::after {
  content: " \2195"
}

.tb-name a {
  color: var(--navy);
  font-weight: 600
}

.tb-name a:hover {
  color: var(--blue)
}

[data-theme=dark] .tb-name a {
  color: var(--sky)
}

.tb-area {
  display: block;
  font-size: 12px;
  color: var(--blue)
}

.tb-addr {
  color: var(--muted);
  font-size: 14px
}

.tb-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap
}

.tb-time:hover {
  background: var(--hit)
}

.tb-time.sel {
  background: var(--gold);
  color: #4a3200
}

.tb-time.none {
  color: var(--muted);
  cursor: default;
  font-weight: 400
}

.tb-time.warn {
  color: #b8860b
}

.tb-time.old {
  color: #d93025
}

.tb-star {
  background: none;
  border: 0;
  font-size: 19px;
  cursor: pointer;
  color: var(--muted)
}

.tb-star.on {
  color: #e0a100
}

.tb-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px
}

.tb-about {
  margin-top: 34px;
  font-size: 14px;
  color: var(--muted)
}

.tb-about h2 {
  color: var(--navy);
  font-size: 20px;
  margin-bottom: 8px
}

.tb-about p+p {
  margin-top: 8px
}

[data-theme=dark] .tb-about h2 {
  color: var(--text)
}

@media(max-width:860px) {
  .tb-blocks {
    grid-template-columns: repeat(3, 1fr)
  }

  .tb-hero {
    min-height: 0
  }
}

/* ---------- phones ---------- */
@media(max-width:700px) {
  .tb-main {
    padding: 24px 0 40px
  }

  /* use the full screen width (the base rule had 24px each side) */
  .tb-main .container {
    padding: 0 10px
  }

  .tb-addr {
    display: none
  }

  .tb-controls {
    padding: 14px
  }

  .tb-controls select {
    min-width: 0;
    width: 100%
  }

  .tb-controls label:not(.tb-check) {
    flex: 1 1 140px
  }

  /* the table now fits the screen: no sideways scrolling, nothing cut off */
  .tb-tablewrap {
    overflow-x: hidden
  }

  .tb-table {
    table-layout: fixed
  }

  .tb-table th,
  .tb-table td {
    padding: 10px 4px;
    vertical-align: middle
  }

  .tb-table th:first-child,
  .tb-table td:first-child {
    padding-left: 10px
  }

  .tb-table th {
    font-size: 11px;
    letter-spacing: 0
  }

  .tb-table th[data-sort=name] {
    width: 36%
  }

  /* time columns: centred, smaller so "20:25" always fits */
  .tb-table th:not(.tb-addr):not([data-sort=name]),
  .tb-table td.tb-time {
    text-align: center
  }

  .tb-time {
    font-size: 14px;
    padding-left: 2px;
    padding-right: 2px
  }

  /* masjid cell: star on the right of the area line, smaller name */
  .tb-name {
    position: relative;
    line-height: 1.3
  }

  .tb-name a,
  .tb-name {
    font-size: 14px;
    overflow-wrap: anywhere
  }

  .tb-area {
    font-size: 11px;
    margin-bottom: 2px
  }

  .tb-star {
    float: right;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px 4px 6px;
    margin-top: -2px
  }

  .tb-picker {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px
  }

  .tb-blocks {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px
  }

  .tb-block {
    padding: 10px 12px
  }

  .tb-block span {
    font-size: 20px
  }

  .tb-note,
  .tb-updated {
    font-size: 13px
  }
}

@media(max-width:380px) {
  .tb-time {
    font-size: 13px
  }

  .tb-name a,
  .tb-name {
    font-size: 13px
  }
}

/* times table embedded on the home page (inside .boards) */
.tb-main.tb-embed {
  padding: 0;
  background: transparent
}

[data-theme=dark] .tb-main.tb-embed {
  padding: 16px;
  border-radius: 12px;
  background: #0b1722
}

.boards .section-head {
  flex-wrap: wrap;
  gap: 10px
}

.boards .section-head .tb-date {
  background: #fff;
  color: var(--navy);
  border-color: var(--line);
  white-space: nowrap;
  margin-left: auto
}
/* ---------- dark mode for the WHOLE times section (home page) ----------
   Dark now covers the section background, heading and date pill,
   not just the table card. Header, hero, country cards and footer stay light. */
.main-grid-wrap {
  transition: background .25s
}

[data-theme=dark] .main-grid-wrap {
  background: #0b1722
}

[data-theme=dark] .main-grid-wrap .section-head h3 {
  color: #e6eef6
}

[data-theme=dark] .boards .section-head .tb-date {
  background: #12253a;
  color: #e6eef6;
  border-color: #21374f
}

/* the table area no longer needs its own dark box: the section is dark */
[data-theme=dark] .tb-main.tb-embed {
  padding: 0;
  border-radius: 0;
  background: transparent
}

/* ---------- About / Disclaimer cards (between the times table and the CTA) ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 18px
}

.info-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid var(--sky);
  padding: 26px 28px 24px;
  box-shadow: 0 4px 16px rgba(20, 60, 110, .1);
  transition: background .25s, box-shadow .25s
}

.info-card-alt {
  border-top-color: var(--gold)
}

/* faint mosque silhouette, same as the masjid cards */
.info-card::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10px;
  width: 40%;
  height: 90px;
  pointer-events: none;
  opacity: .06;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90' fill='%230a74c9'><rect x='6' y='34' width='8' height='56'/><path d='M10 20l6 14h-12z'/><rect x='146' y='28' width='8' height='62'/><path d='M150 12l6 16h-12z'/><path d='M40 90V60a40 40 0 0 1 80 0v30z'/><path d='M80 12l4 10h-8z'/><rect x='24' y='62' width='16' height='28'/><rect x='120' y='62' width='16' height='28'/></svg>") right top / contain no-repeat
}

.info-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px
}

.info-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #34a4f0, #0a74c9);
  box-shadow: 0 4px 10px rgba(10, 116, 201, .35)
}

.info-card-alt .info-icon {
  background: linear-gradient(145deg, #f7cf86, #e0a100);
  box-shadow: 0 4px 10px rgba(224, 161, 0, .35)
}

.info-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

.info-card h3 {
  font-size: 22px;
  color: var(--navy)
}

.info-card p {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted)
}

.info-card p+p {
  margin-top: 10px
}

[data-theme=dark] .info-card {
  background: #12253a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35)
}

[data-theme=dark] .info-card h3 {
  color: #e6eef6
}

[data-theme=dark] .info-card p {
  color: #a9b9ca
}

@media(max-width:860px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }
}

@media(max-width:600px) {
  .info-card {
    padding: 22px 20px 20px
  }

  .info-card h3 {
    font-size: 20px
  }
}

/* "Calculated for your location..." note now sits between the heading and the filter box */
.tb-main > .tb-updated:first-child {
  margin: 0 0 16px
}

/* picker: the "Earliest / Latest ..." labels are now bigger than the time itself */
.tb-pt {
  font-size: 16px
}

@media(max-width:700px) {
  .tb-pt {
    font-size: 13px
  }

}

/* ---------- tidier heading, date pill and "updated" note ---------- */
.boards .section-head h3 {
  font-size: 24px;
  line-height: 1.2
}

.boards .section-head h3 svg {
  flex: none;
  width: 32px;
  height: 32px
}

.tb-updated {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.tb-updated .tb-up-main b {
  color: var(--navy)
}

.tb-updated .tb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12.5px;
  color: var(--muted)
}

.tb-updated .tb-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.tb-updated .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b8860b
}

.tb-updated .dot.old {
  background: #d93025
}

.tb-updated .tb-fri {
  font-size: 12.5px;
  color: var(--muted)
}

@media(max-width:700px) {
  .boards .section-head {
    gap: 12px;
    margin: 8px 0 14px
  }

  .boards .section-head h3 {
    font-size: 20px;
    gap: 10px
  }

  .boards .section-head h3 svg {
    width: 28px;
    height: 28px
  }

  .boards .section-head .tb-date {
    margin-left: 0;
    padding: 6px 14px;
    font-size: 13px
  }

  .tb-updated {
    padding: 12px 14px 12px 44px
  }
}


/* ---------- mobile: compact time picker (chips instead of one very long column) ---------- */
@media(max-width:700px) {
  .tb-picker {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .tb-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
  }

  .tb-col .tb-pt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--line);
    font-size: 13px;
    padding: 0
  }

  .tb-col .tb-pt .tb-v {
    padding: 10px 2px
  }

  .tb-col .tb-pt em {
    font-size: 10px;
    margin-left: 2px
  }

  /* blue Earliest / Latest bars span the full width of the grid */
  .tb-col .tb-lab {
    grid-column: 1 / -1
  }

  /* earliest and latest times each fill their own full-width box */
  .tb-col .tb-pt:first-of-type,
  .tb-col .tb-pt:last-of-type {
    grid-column: 1 / -1;
    border-right: 0
  }

  .tb-col .tb-pt:first-of-type .tb-v,
  .tb-col .tb-pt:last-of-type .tb-v {
    font-size: 16px;
    font-weight: 600
  }

  .tb-col .tb-pt.sel {
    background: var(--gold)
  }

  .tb-block:last-child:nth-child(odd) {
    grid-column: 1 / -1
  }
}


/* ---------- Earliest / Latest bars: label only (no time), times live in the grid ---------- */
.tb-lab {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  padding: 10px 6px;
  text-transform: uppercase;
  letter-spacing: .04em
}

.tb-col .tb-pt:last-of-type {
  border-bottom: 0
}

@media(max-width:700px) {
  .tb-lab {
    font-size: 16px;
    padding: 11px 6px
  }

  .tb-col .tb-pt {
    border-bottom: 1px solid var(--line)
  }
}