@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

#sabeel-schedule-root{
  --sb-primary:#3E576F;
  --sb-primary-deep:#2A3D4F;
  --sb-accent:#8FAECF;
  --sb-ink:#17332E;
  --sb-ink-soft:#4A625C;
  --sb-line:#E1DDD1;
  --sb-card:#FFFFFF;
  --sb-cancel:#B5443A;

  --sb-tag-kids:#2E7D9A;         --sb-tag-kids-bg:#E3F1F6;
  --sb-tag-women:#A6417B;        --sb-tag-women-bg:#F7E7F0;
  --sb-tag-men:#3B6E52;          --sb-tag-men-bg:#E5F0E9;
  --sb-tag-family:#8A5B25;       --sb-tag-family-bg:#F3E6D3;
  --sb-tag-adults:#54586B;       --sb-tag-adults-bg:#E7E7EE;
  --sb-tag-general:#6B6552;      --sb-tag-general-bg:#EFEBDD;

  font-family:'Inter',sans-serif;
  color:var(--sb-ink);
  width:100%;
  max-width:720px;
  margin:0 auto;
}
#sabeel-schedule-root *{box-sizing:border-box;}
#sabeel-schedule-root .sabeel-loading{padding:40px; text-align:center; color:var(--sb-ink-soft);}

/* ===== Simple header, no box or dark background or logo — blends into the page ===== */
#sabeel-schedule-root .sb-top{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--sb-line);
}
#sabeel-schedule-root .sb-top-label{font-size:14px; color:var(--sb-ink-soft);}
#sabeel-schedule-root .sb-top-date{font-size:22px; font-weight:900; color:var(--sb-primary);}

/* ===== Tab bar: Today / This Week ===== */
#sabeel-schedule-root .sb-tab-bar{
  display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--sb-line);
}
#sabeel-schedule-root .sb-tab{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--sb-ink-soft);
  background:none; border:none; border-bottom:2px solid transparent;
  padding:8px 4px; margin-bottom:-1px; cursor:pointer;
}
#sabeel-schedule-root .sb-tab + .sb-tab{margin-left:20px;}
#sabeel-schedule-root .sb-tab.active{color:var(--sb-primary); border-bottom-color:var(--sb-primary);}

/* ===== Week view day-group headings ===== */
#sabeel-schedule-root .sb-week-day-label{
  font-size:13px; font-weight:700; color:var(--sb-ink); margin:20px 0 10px;
}
#sabeel-schedule-root .sb-week-group{margin-bottom:0;}

/* ===== Day strip: horizontal scroll on phone, spreads full-width on wider screens ===== */
#sabeel-schedule-root .sb-day-strip{
  display:flex; gap:8px; margin:0 0 20px; overflow-x:auto; padding-bottom:4px;
}
#sabeel-schedule-root .sb-day-pill{
  flex:0 0 auto; background:var(--sb-card); border:1px solid var(--sb-line);
  border-radius:14px; padding:10px 14px; text-align:center; cursor:pointer;
  min-width:58px; transition:transform .15s ease, background .15s ease;
}
#sabeel-schedule-root .sb-day-pill:hover{transform:translateY(-2px);}
#sabeel-schedule-root .sb-day-pill .sb-dname{font-size:12px; color:var(--sb-ink-soft); display:block;}
#sabeel-schedule-root .sb-day-pill .sb-dnum{font-size:18px; font-weight:700; display:block; margin-top:2px;}
#sabeel-schedule-root .sb-day-pill.active{background:var(--sb-primary); border-color:var(--sb-primary);}
#sabeel-schedule-root .sb-day-pill.active .sb-dname{color:#CFE3DD;}
#sabeel-schedule-root .sb-day-pill.active .sb-dnum{color:#fff;}
#sabeel-schedule-root .sb-day-pill.today-marker{position:relative;}
#sabeel-schedule-root .sb-day-pill.today-marker::after{
  content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--sb-accent);
}

#sabeel-schedule-root .sb-section-label{font-size:13px; color:var(--sb-ink-soft); margin:0 0 14px;}
#sabeel-schedule-root .sb-empty{
  text-align:center; padding:50px 20px; color:var(--sb-ink-soft);
  background:var(--sb-card); border-radius:16px; border:1px solid var(--sb-line);
}

/* ===== Tag filter bar — "All" plus one pill per audience tag, multi-select ===== */
#sabeel-schedule-root .sb-filter-bar{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;
}
#sabeel-schedule-root .sb-filter-pill{
  font-size:12px; font-weight:600; padding:6px 14px; border-radius:20px;
  border:1px solid var(--sb-line); background:var(--sb-card); color:var(--sb-ink-soft);
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
#sabeel-schedule-root .sb-filter-pill:hover{border-color:var(--sb-primary);}
#sabeel-schedule-root .sb-filter-pill.active{
  background:var(--sb-primary); border-color:var(--sb-primary); color:#fff;
}

/* ===== Holiday banner — replaces the program list entirely for that date ===== */
#sabeel-schedule-root .sb-holiday-banner{
  text-align:center; padding:44px 24px; border-radius:16px;
  background:#F3E6D3; border:1px solid #E4CDA0; color:#6B4A1E;
}
#sabeel-schedule-root .sb-holiday-banner .sb-holiday-icon{font-size:28px; display:block; margin-bottom:8px;}
#sabeel-schedule-root .sb-holiday-banner .sb-holiday-text{font-size:16px; font-weight:700;}

/* ===== Card list: ALWAYS single column, regardless of screen size, as requested ===== */
#sabeel-schedule-root .sb-list{
  display:grid; grid-template-columns:1fr; gap:12px;
}
#sabeel-schedule-root .sb-program-card{
  background:var(--sb-card); border:1px solid var(--sb-line); border-radius:16px;
  display:flex; align-items:stretch; overflow:hidden;
}
#sabeel-schedule-root .sb-program-card.cancelled{opacity:.55;}
#sabeel-schedule-root .sb-program-card.special{border-color:var(--sb-accent);}
#sabeel-schedule-root .sb-thumb{
  width:92px; object-fit:cover; flex-shrink:0; align-self:stretch;
}
#sabeel-schedule-root .sb-card-content{
  flex:1; min-width:0; display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
}
#sabeel-schedule-root .sb-time-col{min-width:96px; text-align:center; padding-top:2px;}
#sabeel-schedule-root .sb-time-col .sb-t{font-size:14px; font-weight:700; color:var(--sb-ink);}
#sabeel-schedule-root .sb-time-col .sb-t.cancelled{text-decoration:line-through; color:var(--sb-cancel);}
#sabeel-schedule-root .sb-body-col{flex:1; min-width:0;}
#sabeel-schedule-root .sb-title-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#sabeel-schedule-root .sb-p-title{font-size:16px; font-weight:700; margin:0;}
#sabeel-schedule-root .sb-p-title.cancelled{text-decoration:line-through; color:var(--sb-ink-soft);}#sabeel-schedule-root .sb-status-badge{font-size:11px; padding:2px 8px; border-radius:10px; font-weight:500;}
#sabeel-schedule-root .sb-status-badge.cancel{background:#F4E1DE; color:var(--sb-cancel);}
#sabeel-schedule-root .sb-status-badge.special{background:#EAF1F8; color:var(--sb-primary);}
#sabeel-schedule-root .sb-status-badge.new{
  background:linear-gradient(135deg, #FF6B4A, #FFA93E);
  color:#fff; font-weight:800; letter-spacing:.03em;
  box-shadow:0 0 0 0 rgba(255,107,74,.5);
  animation:sb-new-pulse 2.2s ease-in-out infinite;
}
@keyframes sb-new-pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,107,74,.45); }
  70%  { box-shadow:0 0 0 6px rgba(255,107,74,0); }
  100% { box-shadow:0 0 0 0 rgba(255,107,74,0); }
}
@media (prefers-reduced-motion: reduce){
  #sabeel-schedule-root .sb-status-badge.new{ animation:none; }
}

#sabeel-schedule-root .sb-expand-btn{
  margin-left:auto; background:none; border:none; padding:4px; cursor:pointer;
  color:var(--sb-ink-soft); display:flex; align-items:center; flex-shrink:0;
}
#sabeel-schedule-root .sb-expand-btn svg{width:16px; height:16px; transition:transform .2s ease;}
#sabeel-schedule-root .sb-expand-btn:hover{color:var(--sb-primary);}
#sabeel-schedule-root .sb-expand-btn.open svg{transform:rotate(180deg);}

#sabeel-schedule-root .sb-expand-panel{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
#sabeel-schedule-root .sb-expand-panel.open{margin-top:12px;}
#sabeel-schedule-root .sb-expand-desc{
  font-size:14px; line-height:1.6; color:var(--sb-ink-soft); margin:0;
}
#sabeel-schedule-root .sb-p-speaker{margin:4px 0 0; font-size:13px; color:var(--sb-ink-soft);}

#sabeel-schedule-root .sb-location-row{
  display:flex; align-items:center; gap:5px; margin-top:6px;
  font-size:13px; color:var(--sb-ink-soft);
}
#sabeel-schedule-root .sb-location-row svg{width:14px; height:14px; flex-shrink:0;}
#sabeel-schedule-root .sb-location-link{
  color:var(--sb-primary); text-decoration:none; cursor:pointer;
}
#sabeel-schedule-root .sb-location-link span{text-decoration:underline;}
#sabeel-schedule-root .sb-location-link svg:last-child{width:12px; height:12px; opacity:.7;}

#sabeel-schedule-root .sb-tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
#sabeel-schedule-root .sb-tag{font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;}
#sabeel-schedule-root .sb-tag.kids{background:var(--sb-tag-kids-bg); color:var(--sb-tag-kids);}
#sabeel-schedule-root .sb-tag.women{background:var(--sb-tag-women-bg); color:var(--sb-tag-women);}
#sabeel-schedule-root .sb-tag.men{background:var(--sb-tag-men-bg); color:var(--sb-tag-men);}
#sabeel-schedule-root .sb-tag.family{background:var(--sb-tag-family-bg); color:var(--sb-tag-family);}
#sabeel-schedule-root .sb-tag.adults{background:var(--sb-tag-adults-bg); color:var(--sb-tag-adults);}
#sabeel-schedule-root .sb-tag.general{background:var(--sb-tag-general-bg); color:var(--sb-tag-general);}

#sabeel-schedule-root .sb-details-link{
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-weight:700; color:var(--sb-primary); text-decoration:none;
}
#sabeel-schedule-root .sb-details-link:hover{text-decoration:underline;}
#sabeel-schedule-root .sb-details-link svg{width:13px; height:13px;}

#sabeel-schedule-root .sb-actions-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:10px;
}
#sabeel-schedule-root .sb-share-btn{
  display:inline-flex; align-items:center; gap:4px;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--sb-ink-soft);
  background:none; border:none; padding:0; cursor:pointer;
}
#sabeel-schedule-root .sb-share-btn:hover{color:var(--sb-primary);}
#sabeel-schedule-root .sb-share-btn svg{width:13px; height:13px;}
#sabeel-schedule-root .sb-share-btn:disabled{color:var(--sb-primary); cursor:default;}

/* ===== Highlight for a card opened via a shared link ===== */
#sabeel-schedule-root .sb-program-card.sb-shared-highlight{
  border-color:var(--sb-primary);
  box-shadow:0 0 0 3px rgba(62,87,111,.18);
  transition:box-shadow .3s ease, border-color .3s ease;
}

/* ===== Tablet (iPad) and up: full day row (no scroll) — card list stays single column ===== */
@media (min-width:700px){
  #sabeel-schedule-root .sb-day-strip{overflow-x:visible; flex-wrap:wrap;}
  #sabeel-schedule-root .sb-day-pill{flex:1 1 0; min-width:0;}
  #sabeel-schedule-root .sb-top-date{font-size:26px;}
}

/* ===== Wide desktop: a little extra breathing room on each card ===== */
@media (min-width:1000px){
  #sabeel-schedule-root .sb-program-card{padding:18px 20px;}
}

@media (max-width:380px){
  #sabeel-schedule-root .sb-top-date{font-size:19px;}
}