/* Buy4IPTV carousel. All selectors are namespaced to avoid changing existing pages. */
.b4-showcase {
  padding: clamp(48px, 6vw, 84px) 24px 58px;
  color: #f8fbff;
  background:
    radial-gradient(ellipse 70% 55% at 85% 0%, rgba(38, 213, 202, .10), transparent),
    linear-gradient(180deg, #081526, #0b1b2c);
  border-block: 1px solid rgba(139, 196, 219, .13);
  overflow: hidden;
}
.b4-showcase * { box-sizing: border-box; }
.b4-showcase__inner { max-width: 1140px; margin: 0 auto; }
.b4-showcase__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin-bottom: 26px; }
.b4-showcase__eyebrow { margin: 0 0 10px; color: #39d0c6; font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.b4-showcase__title { margin: 0; color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.17; font-weight: 850; }
.b4-showcase__intro { margin: 12px 0 0; color: #a9bbd0; font-size: 1rem; line-height: 1.75; max-width: 68ch; }
.b4-showcase__controls { display: flex; gap: 9px; flex: 0 0 auto; }
.b4-showcase__arrow { appearance: none; width: 46px; height: 46px; display: inline-grid; place-items: center; border: 1px solid rgba(114, 203, 214, .32); border-radius: 50%; background: #10273c; color: #e5fbff; font: 700 26px/1 system-ui, sans-serif; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.b4-showcase__arrow:hover, .b4-showcase__arrow:focus-visible { background: #28cec6; border-color: #28cec6; color: #061624; transform: translateY(-2px); }
.b4-showcase__arrow:focus-visible { outline: 2px solid #f7c766; outline-offset: 3px; }
.b4-showcase__track { display: flex; gap: 17px; overflow-x: auto; padding: 4px 2px 18px; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(71, 205, 202, .45) transparent; }
.b4-showcase__card { flex: 0 0 clamp(170px, 19.2vw, 210px); min-width: 0; scroll-snap-align: start; }
.b4-showcase__poster { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: 14px; border: 1px solid rgba(165, 211, 228, .19); background: #132f45; box-shadow: 0 13px 25px rgba(0, 0, 0, .29); }
.b4-showcase__poster img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.b4-showcase__card:hover .b4-showcase__poster img { transform: scale(1.045); }
.b4-showcase__poster:after { content: ''; position: absolute; inset: 46% 0 0; background: linear-gradient(transparent, rgba(2, 10, 19, .58)); pointer-events: none; }
.b4-showcase__pill { display: inline-block; margin-top: 13px; padding: 5px 9px; border-radius: 999px; color: #062328; background: #40cec9; font-size: .73rem; font-weight: 800; }
.b4-showcase__name { margin: 8px 0 0; color: #f7fbff; font-size: 1rem; font-weight: 750; line-height: 1.45; }
.b4-showcase__caption { margin: 4px 0 0; color: #a7b9cf; font-size: .84rem; line-height: 1.45; }
.b4-showcase__note { margin: 24px 0 0; font-size: .8rem; color: #91a6bd; line-height: 1.6; }
[dir="rtl"] .b4-showcase__eyebrow { letter-spacing: normal; }
@media (max-width: 700px) {
  .b4-showcase { padding: 40px 16px 48px; }
  .b4-showcase__top { gap: 9px; align-items: flex-end; }
  .b4-showcase__title { font-size: 1.65rem; }
  .b4-showcase__intro { font-size: .91rem; }
  .b4-showcase__arrow { width: 38px; height: 38px; font-size: 22px; }
  .b4-showcase__track { gap: 12px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .b4-showcase__card { flex-basis: 154px; }
  .b4-showcase__poster { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .b4-showcase__arrow, .b4-showcase__poster img { transition: none; }
}
