/* Assyafaah Prayer Bar — widget styles
   Namespaced under .apb so it cannot collide with theme CSS.               */

.apb{
  --apb-navy:#123C8C;
  --apb-ink:#0E1A32;
  --apb-text:#fff;              /* text colour; bar itself is transparent */
  --apb-pill-bg:#fff;           /* active prayer pill */
  --apb-pill-text:#123C8C;
  --apb-divider:currentColor;
  --apb-divider-opacity:.28;
  --apb-divider-height:70%;
  --apb-radius:10px;
  /* ---- spacing + type. Override any of these to resize the bar. ---- */
  --apb-pad-y:8px;          /* cell padding, top and bottom  */
  --apb-pad-x:14px;
  --apb-gap:11px;           /* icon-to-text gap              */
  --apb-icon:19px;
  --apb-name:9.5px;
  --apb-time:15px;
  --apb-date-pad:11px;      /* date panel padding, top/bottom*/
  --apb-hijri:12.5px;
  --apb-count:10.5px;
  --apb-font:'Plus Jakarta Sans','Jakarta',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:transparent;       /* inherits whatever section it sits in */
  color:var(--apb-text);
  font-family:var(--apb-font);
  position:relative;
  -webkit-font-smoothing:antialiased;
  container-type:inline-size;
}
.apb *,.apb *::before,.apb *::after{box-sizing:border-box}
/* Kill browser-default margins that would otherwise inflate the bar. */
.apb p,.apb h1,.apb h2,.apb h3,.apb h4,.apb h5,.apb h6,.apb ul,.apb ol,.apb figure{margin:0;padding:0}
.apb__sr,
.apb .screen-reader-text{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;border:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;
}

/* geometric texture */
/* Background texture is OFF by default now that the bar is transparent.
   Add the apb--pattern class to bring it back. */
.apb__pat{display:none}
.apb--pattern .apb__pat{
  display:block;
  position:absolute;inset:0;pointer-events:none;opacity:.85;background-size:72px 72px;
  filter:invert(1) brightness(2);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23123C8C' stroke-width='1' opacity='0.10'%3E%3Cpath d='M36 6 L48 18 L48 34 L36 46 L24 34 L24 18 Z'/%3E%3Cpath d='M36 14 L42 20 L42 30 L36 36 L30 30 L30 20 Z'/%3E%3Cpath d='M0 42 L12 54 L12 70 L0 82'/%3E%3Cpath d='M72 42 L60 54 L60 70 L72 82'/%3E%3Cpath d='M24 34 L12 46 M48 34 L60 46 M36 46 L36 58'/%3E%3C/g%3E%3C/svg%3E");
}

.apb__in{
  max-width:1400px;margin:0 auto;padding:0 24px;
  display:flex;align-items:stretch;min-height:72px;position:relative;z-index:1;
}

/* ---------------------------------------------------------- prayer cells */
.apb__track{display:flex;flex:1;min-width:0}
.apb__cell{
  position:relative;
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:11px;
  padding:var(--apb-pad-y) var(--apb-pad-x);gap:var(--apb-gap);
  border-radius:var(--apb-radius);transition:background .35s ease,color .35s ease;
}

/* Divider: a hairline centred vertically at 70% of the bar height. */
.apb__cell::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:var(--apb-divider-height);
  background:var(--apb-divider);opacity:var(--apb-divider-opacity);
  transition:opacity .25s ease;
}
.apb__cell:last-child::after{opacity:0}
/* Suppress the rules touching the active pill so it reads as one clean shape. */
.apb__cell.is-now::after{opacity:0}
.apb__cell:has(+ .apb__cell.is-now)::after{opacity:0}
.apb__icon{width:var(--apb-icon);height:var(--apb-icon);stroke:currentColor;fill:none;stroke-width:1.6;opacity:.85;flex:none}
.apb__name{font-size:var(--apb-name);font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.72;line-height:1}
.apb__time{font-size:var(--apb-time);font-weight:700;margin-top:4px;white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
.apb__time small{font-size:10px;font-weight:600;opacity:.75;margin-left:2px}

.apb__cell.is-now{
  background:var(--apb-pill-bg);color:var(--apb-pill-text);
  margin:8px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.apb__cell.is-now .apb__icon{opacity:1}
.apb__cell.is-now .apb__name{opacity:1;color:#2657B8}

/* ------------------------------------------------------------ date panel */
.apb__date{
  position:relative;
  width:330px;flex:none;display:flex;flex-direction:column;justify-content:center;
  padding:var(--apb-date-pad) 0 var(--apb-date-pad) 26px;gap:3px;
}
.apb__date::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:var(--apb-divider-height);
  background:var(--apb-divider);opacity:var(--apb-divider-opacity);
}
.apb__hijri{font-size:var(--apb-hijri);font-weight:700;line-height:1.2}
.apb__ayah{font-size:10.5px;line-height:1.45;opacity:.72;font-style:normal}
.apb__count{font-size:var(--apb-count);font-weight:700;opacity:.95;margin-top:2px;letter-spacing:.01em}
.apb__count b{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- states */
.apb__warn{
  background:#8A5A00;color:#fff;font-size:11px;font-weight:600;line-height:1.35;
  text-align:center;padding:5px 14px;position:relative;z-index:2;margin:0;
}
.apb.is-loading .apb__cell{opacity:.45}
.apb__skeleton{
  display:inline-block;background:rgba(255,255,255,.22);border-radius:4px;
  animation:apb-pulse 1.4s ease-in-out infinite;
}
.apb__skeleton--name{width:38px;height:8px}
.apb__skeleton--time{width:56px;height:13px;margin-top:5px}
.apb__skeleton--date{width:150px;height:11px}
@keyframes apb-pulse{0%,100%{opacity:.35}50%{opacity:.8}}
@media (prefers-reduced-motion:reduce){
  .apb__skeleton{animation:none}
  .apb__cell{transition:none}
}
.apb__error{padding:16px 24px;font-size:12.5px;text-align:center;opacity:.9}
.apb__error a{color:#fff;text-decoration:underline}

/* --------------------------------------------------------- responsive
   Uses container queries where supported so the widget adapts to the slot
   it is dropped into, not just the viewport. Falls back to media queries. */
@container (max-width: 900px){
  .apb__in{flex-direction:column;padding:0;min-height:0}

  /* carousel */
  .apb__scroller{position:relative;width:100%}
  .apb__track{
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:0 10px;
    scroll-snap-type:x proximity;
    scroll-padding-inline:10px;
    scroll-behavior:smooth;
  }
  .apb__track::-webkit-scrollbar{display:none}
  .apb__cell{
    flex:0 0 auto;min-width:var(--apb-cell-min,104px);
    scroll-snap-align:center;
  }
  .apb__cell.is-now{margin:4px 0}
  .apb__time{margin-top:3px}

  /* compact date panel */
  .apb__date{width:100%;padding:var(--apb-date-pad) 18px;text-align:center;align-items:center;gap:2px}
  .apb__date::before{left:50%;top:0;transform:translateX(-50%);width:64%;height:1px}
  .apb__count{margin-top:1px}

  /* A Quranic verse is shown in full or not at all — never truncated with an
     ellipsis. It costs two lines, so it is hidden on narrow screens unless
     apb--ayah-mobile is set. */
  .apb__ayah{display:none}
  .apb--ayah-mobile .apb__ayah{display:block;font-size:10px;line-height:1.4}
}
@media (max-width:900px){
  .apb__in{flex-direction:column;padding:0;min-height:0}

  /* carousel */
  .apb__scroller{position:relative;width:100%}
  .apb__track{
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:0 10px;
    scroll-snap-type:x proximity;
    scroll-padding-inline:10px;
    scroll-behavior:smooth;
  }
  .apb__track::-webkit-scrollbar{display:none}
  .apb__cell{
    flex:0 0 auto;min-width:var(--apb-cell-min,104px);
    scroll-snap-align:center;
  }
  .apb__cell.is-now{margin:4px 0}
  .apb__time{margin-top:3px}

  /* compact date panel */
  .apb__date{width:100%;padding:var(--apb-date-pad) 18px;text-align:center;align-items:center;gap:2px}
  .apb__date::before{left:50%;top:0;transform:translateX(-50%);width:64%;height:1px}
  .apb__count{margin-top:1px}

  /* A Quranic verse is shown in full or not at all — never truncated with an
     ellipsis. It costs two lines, so it is hidden on narrow screens unless
     apb--ayah-mobile is set. */
  .apb__ayah{display:none}
  .apb--ayah-mobile .apb__ayah{display:block;font-size:10px;line-height:1.4}
}


/* ===================================================================== */
/*  Carousel affordances (mobile). Buttons are injected by JS only when   */
/*  the track actually overflows, so nothing renders when it all fits.    */
/* ===================================================================== */
.apb__scroller{position:relative}
.apb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;border:0;padding:0;
  display:none;align-items:center;justify-content:center;
  background:var(--apb-pill-bg);color:var(--apb-pill-text);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  cursor:pointer;z-index:4;opacity:.94;
  transition:opacity .2s ease,transform .2s ease;
}
.apb__nav:hover{opacity:1;transform:translateY(-50%) scale(1.06)}
.apb__nav svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none}
.apb__nav--prev{left:4px}
.apb__nav--next{right:4px}
.apb__scroller.can-left  .apb__nav--prev{display:flex}
.apb__scroller.can-right .apb__nav--next{display:flex}

/* Fade the edge that still has content behind it. */
.apb__scroller.can-left  .apb__track{mask-image:linear-gradient(90deg,transparent 0,#000 34px)}
.apb__scroller.can-right .apb__track{mask-image:linear-gradient(270deg,transparent 0,#000 34px)}
.apb__scroller.can-left.can-right .apb__track{
  mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
}

/* Scroll position dots. Opt-in via apb--dots: they cost ~12px of height and
   the arrows plus edge fade already signal that the track scrolls. */
.apb__dots{display:none;justify-content:center;gap:5px;padding:0 0 7px}
.apb--dots .apb__scroller.can-scroll + .apb__dots{display:flex}
.apb__dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .25s,width .25s}
.apb__dot.on{opacity:.95;width:14px;border-radius:3px}

@media (min-width:901px){
  .apb__nav,.apb__dots{display:none !important}
  .apb__scroller .apb__track{mask-image:none !important}
}
@media (prefers-reduced-motion:reduce){
  .apb__track{scroll-behavior:auto}
}


/* =====================================================================
   DENSITY — mobile height control.
   Applies below 900px only; desktop is unaffected.
   comfortable ~101px | compact ~74px | tight ~58px
   ===================================================================== */
@media (max-width:900px){
  .apb{
    --apb-pad-y:9px;  --apb-pad-x:12px; --apb-gap:9px;  --apb-icon:17px;
    --apb-time:14px;  --apb-date-pad:9px; --apb-hijri:12px; --apb-count:10px;
  }
  .apb--d-compact{
    --apb-pad-y:6px;  --apb-pad-x:11px; --apb-gap:7px;  --apb-icon:15px;
    --apb-time:13.5px;--apb-name:9px;   --apb-date-pad:6px;
    --apb-hijri:11.5px;--apb-count:9.5px;--apb-cell-min:96px;
  }
  .apb--d-tight{
    --apb-pad-y:4px;  --apb-pad-x:9px;  --apb-gap:0;    --apb-icon:0;
    --apb-time:13px;  --apb-name:8.5px; --apb-date-pad:4px;
    --apb-hijri:11px; --apb-count:9px;  --apb-cell-min:84px;
  }
  .apb--d-tight .apb__icon{display:none}

  /* Put the Hijri date and countdown on one line instead of two. */
  .apb--d-compact .apb__date,
  .apb--d-tight   .apb__date,
  .apb--dateline  .apb__date{
    flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 10px;
  }
  .apb--d-compact .apb__count,
  .apb--d-tight   .apb__count,
  .apb--dateline  .apb__count{margin-top:0}

  /* Drop the date row entirely — prayer times only. */
  .apb--nodate .apb__date{display:none}
}


/* ===================================================================== */
/*  Countdown visibility                                                  */
/* ===================================================================== */
.apb--count-none .apb__count{display:none}
@media (min-width:901px){ .apb--count-mobile  .apb__count{display:none} }
@media (max-width:900px){ .apb--count-desktop .apb__count{display:none} }

/* ===================================================================== */
/*  Rotating ayah                                                         */
/* ===================================================================== */
.apb__ayah{transition:opacity .45s ease}
.apb__ayah.is-swapping{opacity:0}
.apb__ayah-r{opacity:.8}
@media (prefers-reduced-motion:reduce){
  .apb__ayah{transition:none}
}

/* ----------------------------------------------------- compact variant */
.apb--compact .apb__in{min-height:56px}
.apb--compact .apb__time{font-size:13.5px}
.apb--compact .apb__icon{display:none}
.apb--compact .apb__date{width:250px}

/* ------------------------------------------------------------- theming */
/* For placing the bar on a light header: dark text, navy pill. */
.apb--light,.apb--ink{
  --apb-text:var(--apb-ink);
  --apb-pill-bg:var(--apb-navy);
  --apb-pill-text:#fff;
  --apb-divider-opacity:.20;
}
.apb--light .apb__pat,.apb--ink .apb__pat{filter:none;opacity:.5}
.apb--light .apb__cell.is-now,.apb--ink .apb__cell.is-now{box-shadow:0 6px 18px rgba(18,60,140,.24)}
.apb--light .apb__cell.is-now .apb__name,.apb--ink .apb__cell.is-now .apb__name{color:#9FBCF0}

@media print{.apb__count,.apb__pat{display:none}}