.wsi-container { font-family: inherit; }
.wsi-title { margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; }

/* Header */
.wsi-header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wsi-now { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.wsi-hijri { opacity:.95; }

/* City picker */
.wsi-city-picker { display:flex; gap:8px; align-items:center; }
.wsi-city-picker label { white-space: nowrap; }
.wsi-city-input-wrap { position:relative; display:flex; gap:8px; align-items:center; }
#wsi-city { padding:6px 10px; min-width:240px; font-family: inherit; }
#wsi-city-search, #wsi-use-gps { padding:6px 10px; cursor:pointer; }
.wsi-city-list { position:absolute; top:110%; left:0; right:0; max-height:320px; overflow:auto; background:#fff; border:1px solid #e5e5e5; border-radius:10px; z-index:20; box-shadow: 0 8px 24px rgba(0,0,0,.08); font-family: inherit; }
.wsi-city-ul { list-style:none; margin:0; padding:6px; }
.wsi-city-ul li { padding:8px 10px; border-radius:8px; font-size:13px; }
.wsi-city-ul li:hover, .wsi-city-ul li:focus { background:#FFF1E6; outline:none; }

/* Small note inside city box */
.wsi-city-note {
  padding: 8px 10px 10px;
  font-size: 12px;
  color: #6b7280;
  border-top: 1px dashed #eee;
  background: #fafafa;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Orange theme */
:root{ --wsi-orange: #FF8A00; --wsi-orange-weak: #FFE2C2; }
.wsi-bg-orange-solid { background: var(--wsi-orange); color:#fff; border:1px solid var(--wsi-orange); }
.wsi-next-box { padding:14px 16px; border-radius:10px; margin:10px 0 16px; }
.wsi-next-title { font-weight:700; margin-bottom:6px; }
.wsi-next-body { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.wsi-next-name { font-size:1.1rem; font-weight:700; }
.wsi-next-time { font-size:1.4rem; font-weight:800; }
#wsi-countdown { font-variant-numeric: tabular-nums; font-size:1.2rem; font-weight:800; }

/* Today: Carousel */
.wsi-today h3 { margin:10px 0; }
.wsi-carousel { position:relative; display:flex; align-items:center; gap:8px; }
.wsi-cards { flex:1; display:flex; gap:12px; overflow-x:auto; scroll-snap-type: x mandatory; padding: 6px 4px; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; }
.wsi-cards::-webkit-scrollbar { height: 0; display: none; }
.wsi-card { scroll-snap-align: start; min-width: 200px; padding:12px; border:1px solid #eee; border-radius:12px; background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.wsi-card, .wsi-card * { overflow-wrap: anywhere; word-break: break-word; }
.wsi-card-active { background: var(--wsi-orange); color:#fff; border-color: var(--wsi-orange); }
.wsi-card-label { font-weight:700; margin-bottom:6px; }
.wsi-card-time { font-size:1.25rem; font-weight:800; }

/* Arrow buttons; visible black, hover blue */
.wsi-car-btn { 
  min-width: 32px; height: 32px; padding: 0; line-height: 32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid #e6e6e6; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06);
  color:#000;
}
.wsi-car-btn:hover { color: #0B5FFF; border-color: #cfe0ff; background: #f6f9ff; }
.wsi-car-btn:active { transform: scale(0.96); }

/* spacing between sections */
.wsi-month { margin-top: 22px; }

/* Month header & controls */
.wsi-month-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom: 10px; }
.wsi-month-controls { display:flex; gap:8px; align-items:center; }
.wsi-month-controls select, .wsi-month-controls button { padding:6px 10px; }
#wsi-month-select { min-width: 170px; } /* slightly narrower than 1.7.8 */
#wsi-year-select { min-width: 120px; }
.wsi-nav { cursor:pointer; color:#000; }
.wsi-month .wsi-nav:hover { color: #0B5FFF; border-color: #cfe0ff; background: #f6f9ff; }

/* Month nav (simple style) */
.wsi-month .wsi-nav {
  border-radius: 6px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: none;
}

/* Monthly table wrapper with radius; enable horizontal scroll */
.wsi-month-table-wrap { width:100%; overflow:auto; border:1px solid #eee; border-radius:12px; margin-top:6px; -webkit-overflow-scrolling: touch; }
.wsi-month-table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0; font-size:14px; }
.wsi-month-table th, .wsi-month-table td { border-bottom:1px solid #eee; padding:8px 10px; text-align:center; white-space:nowrap; border-right:none; border-left:none; }
.wsi-month-table thead th { position:sticky; top:0; background:#fff; z-index:1; }
.wsi-month-table tr:last-child td { border-bottom:none; }
.wsi-today-row { background:#FFE7CC; box-shadow: inset 0 0 0 9999px rgba(255,138,0,0.12); }

.wsi-td-date .wsi-date-wrap { display:flex; flex-direction:column; line-height:1.1; }
.wsi-td-date .tgl { font-weight:700; font-size:13px; }
.wsi-td-date .hari { font-size:12px; opacity:.9; }

/* Mobile: 3 cards visible; smaller label font */
@media (max-width: 640px) {
  .wsi-title { font-size: 18px; }
  .wsi-now { flex-wrap: nowrap; gap:6px; }
  .wsi-now span { font-size: 12px; }

  .wsi-car-btn { min-width: 28px; height: 28px; line-height: 28px; }
  .wsi-card { 
    min-width: calc((100% - 2 * 12px) / 3);
    padding:12px;
  }
  .wsi-card-label { font-size: 0.78rem; line-height: 1.05; }
  .wsi-card-time { font-size: 1.2rem; }
  #wsi-city { min-width: 180px; }

  #wsi-month-select { min-width: 150px; }
  #wsi-year-select { min-width: 110px; }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .wsi-card { min-width: 220px; }
}

/* Desktop */
@media (min-width: 1025px) {
  .wsi-card { min-width: 220px; }
}

/* Download button orange */
.wsi-download { margin-top:10px; text-align:right; }
#wsi-download-pdf { padding:8px 12px; border-radius:8px; border:1px solid var(--wsi-orange); background: var(--wsi-orange); color:#fff; cursor:pointer; font-weight:700; }
#wsi-download-pdf:hover { filter:brightness(0.96); }