/* Sayed AB | Tilawat v267 - coverflow video reel + audio player */
.tilawat {
  --tw-brand: var(--brand, #0f4fb3);
  --tw-ink: #0d1b33;
  --tw-soft: #6b7a95;
  --tw-line: rgba(15, 79, 179, 0.13);
  display: grid;
  gap: 28px;
  margin: 26px auto 0;
  /* deliberately a narrow column - the old full-width player was far too big */
  max-width: 760px;
}

.tw-loading {
  align-items: center;
  color: var(--tw-soft);
  display: flex;
  font-size: 15px;
  gap: 10px;
  justify-content: center;
  padding: 40px 0;
}
.tw-loading span {
  animation: tw-spin 0.9s linear infinite;
  border: 2px solid var(--tw-line);
  border-radius: 50%;
  border-top-color: var(--tw-brand);
  height: 18px;
  width: 18px;
}
@keyframes tw-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------- section shell */
.tw-sec {
  background: #fff;
  border: 1px solid var(--tw-line);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(13, 27, 51, 0.07);
  padding: 18px;
}
.tw-sec-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 2px 4px 14px;
}
.tw-eyebrow {
  color: var(--tw-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tw-meter {
  color: var(--tw-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------------------------------------------------------------- video reel
   A compact coverflow. The middle card sits on top and is perfectly sharp,
   the two neighbours are scaled down and blurred. Card sizes are written by
   the script because they follow the shape of each video (16:9 or 9:16). */
.tw-stage {
  height: 300px; /* the script keeps this in step with the cards */
  overflow: hidden;
  position: relative;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tw-stage:focus-visible {
  border-radius: 18px;
  outline: 2px solid var(--tw-brand);
  outline-offset: 3px;
}
.tw-reel {
  height: 100%;
  position: relative;
}
.tw-slide {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease, filter 0.45s ease;
  will-change: transform;
}
/* the neighbours: smaller, softly blurred, and clickable to bring forward */
.tw-slide.is-side {
  cursor: pointer;
  filter: blur(2.6px) brightness(0.74) saturate(0.85);
  opacity: 0.9;
}
.tw-slide.is-far {
  filter: blur(5px) brightness(0.6);
  opacity: 0;
  pointer-events: none;
}
.tw-card {
  background: #0b1220;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(13, 27, 51, 0.16);
  overflow: hidden;
  position: relative;
}
.tw-slide.is-mid .tw-card {
  box-shadow: 0 18px 42px rgba(13, 27, 51, 0.26);
}
.tw-thumb {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.tw-thumb-blank {
  background: linear-gradient(135deg, #10203c, #0f4fb3);
}
.tw-card iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
/* while a video plays the thumbnail is removed, so only the video is visible */
.tw-card.is-live .tw-thumb,
.tw-card.is-live .tw-big {
  display: none;
}
.tw-big {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
  color: var(--tw-brand);
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  left: 50%;
  padding: 0 0 0 3px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.3s ease;
  width: 48px;
}
.tw-big svg {
  height: 22px;
  width: 22px;
}
.tw-big:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}
.tw-slide.is-side .tw-big {
  opacity: 0;
}
.tw-arrow {
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgba(11, 18, 32, 0.55);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transition: background 0.2s ease;
  width: 36px;
  z-index: 6;
}
.tw-arrow svg {
  height: 20px;
  width: 20px;
}
.tw-arrow:hover {
  background: rgba(11, 18, 32, 0.78);
}
.tw-prev {
  left: 8px;
}
.tw-next {
  right: 8px;
}
.tw-under {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 6px 2px;
}
.tw-vtitle {
  color: var(--tw-ink);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* small dots, with one dot sliding from dot to dot */
.tw-dots {
  align-items: center;
  background: rgba(15, 79, 179, 0.06);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 7px 11px;
  position: relative;
}
.tw-dot {
  background: rgba(15, 79, 179, 0.24);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 8px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  position: relative;
  transition: background 0.25s ease;
  width: 8px !important;
  z-index: 1;
}
/* the dot stays small, the finger target stays 44px */
.tw-dot::after {
  border-radius: 999px;
  content: "";
  inset: -18px -5px;
  position: absolute;
}
.tw-dot:hover {
  background: rgba(15, 79, 179, 0.45);
}
.tw-dot.on {
  background: transparent;
}
/* the one indicator that stretches into a pill and slides to the next dot */
.tw-dot-live {
  background: linear-gradient(90deg, #0f4fb3, #2272cf);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(15, 79, 179, 0.38);
  height: 8px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transition:
    transform 0.42s cubic-bezier(0.34, 0.01, 0.2, 1),
    width 0.42s cubic-bezier(0.34, 0.01, 0.2, 1);
  width: 22px;
}

/* -------------------------------------------------------------- audio player */
.tw-player {
  background: linear-gradient(180deg, rgba(15, 79, 179, 0.05), rgba(15, 79, 179, 0.02));
  border: 1px solid var(--tw-line);
  border-radius: 18px;
  padding: 18px;
}
.tw-badge {
  background: rgba(15, 79, 179, 0.1);
  border-radius: 999px;
  color: var(--tw-brand);
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 5px 11px;
  text-transform: uppercase;
}
.tw-title {
  color: var(--tw-ink);
  font-size: 22px;
  line-height: 1.25;
  margin: 10px 0 2px;
}
.tw-sub {
  color: var(--tw-soft);
  font-size: 14px;
  margin: 0;
  min-height: 18px;
}
.tw-embed {
  border-radius: 14px;
  margin-top: 14px;
  overflow: hidden;
}
.tw-embed iframe {
  border: 0;
  display: block;
  height: 152px;
  width: 100%;
}
.tw-seek {
  align-items: center;
  display: flex;
  gap: 12px;
  margin: 18px 2px 0;
}
.tw-seek.is-off {
  opacity: 0.45;
  pointer-events: none;
}
.tw-time {
  color: var(--tw-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 42px;
  text-align: center;
}
.tw-bar {
  background: rgba(15, 79, 179, 0.16);
  border-radius: 999px;
  cursor: pointer;
  flex: 1;
  height: 5px;
  position: relative;
  touch-action: none;
}
.tw-bar-fill {
  background: var(--tw-brand);
  border-radius: 999px;
  display: block;
  height: 100%;
  width: 0;
}
.tw-bar-knob {
  background: #fff;
  border: 2.5px solid var(--tw-brand);
  border-radius: 50%;
  height: 13px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
}
.tw-ctrls {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 16px;
}
.tw-ctrl {
  align-items: center;
  background: #fff;
  border: 1px solid var(--tw-line);
  border-radius: 50%;
  color: var(--tw-brand);
  cursor: pointer;
  display: flex;
  height: 42px;
  justify-content: center;
  padding: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  width: 42px;
}
.tw-ctrl svg {
  height: 19px;
  width: 19px;
}
.tw-ctrl:hover {
  box-shadow: 0 6px 16px rgba(15, 79, 179, 0.16);
  transform: translateY(-1px);
}
.tw-ctrl-main {
  background: var(--tw-brand);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(15, 79, 179, 0.28);
  color: #fff;
  height: 56px;
  width: 56px;
}
.tw-ctrl-main svg {
  height: 24px;
  width: 24px;
}

/* ------------------------------------------------------------------ playlist */
.tw-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.tw-row {
  align-items: center;
  border-radius: 14px;
  display: flex;
  gap: 14px;
  padding: 11px 14px;
  transition: background 0.18s ease;
}
.tw-row + .tw-row {
  margin-top: 4px;
}
.tw-row:hover {
  background: rgba(15, 79, 179, 0.05);
}
.tw-row.on {
  background: rgba(15, 79, 179, 0.09);
}
.tw-num {
  color: var(--tw-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 22px;
}
.tw-row-title {
  color: var(--tw-ink);
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-row.on .tw-row-title {
  color: var(--tw-brand);
}
.tw-row-play {
  align-items: center;
  background: #fff;
  border: 1px solid var(--tw-line);
  border-radius: 50%;
  color: var(--tw-brand);
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}
.tw-row-play svg {
  height: 15px;
  width: 15px;
}
.tw-row.on .tw-row-play {
  background: var(--tw-brand);
  border-color: transparent;
  color: #fff;
}

/* --------------------------------------------------------------------- empty */
.tw-empty {
  background: #fff;
  border: 1px dashed var(--tw-line);
  border-radius: 20px;
  color: var(--tw-soft);
  padding: 42px 20px;
  text-align: center;
}
.tw-empty b {
  color: var(--tw-ink);
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}
.tw-empty p {
  margin: 0;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .tw-sec {
    border-radius: 18px;
    padding: 14px;
  }
  .tw-under {
    flex-direction: column;
    gap: 10px;
  }
  .tw-vtitle {
    max-width: 100%;
    text-align: center;
  }
  .tw-title {
    font-size: 19px;
  }
  .tw-player {
    padding: 14px;
  }
  .tw-ctrl-main {
    height: 52px;
    width: 52px;
  }
  .tw-arrow {
    height: 32px;
    width: 32px;
  }
  .tw-big {
    height: 42px;
    width: 42px;
  }
  .tw-big svg {
    height: 19px;
    width: 19px;
  }
  .tw-slide.is-side {
    filter: blur(2px) brightness(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-stage,
  .tw-slide,
  .tw-dot-live,
  .tw-ctrl,
  .tw-big {
    transition: none;
  }
}