.ssi-wrap {
  --ssi-accent: #7c3aed;
  --ssi-accent-2: #db2777;
  --ssi-title: #e50914;
  --ssi-title-hover: #ff3b46;
  --ssi-surface: #080808;
  --ssi-surface-2: #121212;
  --ssi-text: #f8fafc;
  --ssi-muted: #a7adba;
  --ssi-border: rgba(255, 255, 255, .1);
  color: var(--ssi-text);
  margin: 2rem 0;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background: #000;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42);
  font-family: inherit;
}

.ssi-wrap *, .ssi-wrap *::before, .ssi-wrap *::after { box-sizing: border-box; }

.ssi-topbar {
  display: block;
  margin-bottom: 1.1rem;
}
.ssi-brand { display: flex; align-items: center; gap: clamp(.85rem, 2vw, 1.35rem); min-width: 0; }
.ssi-logo { display: block; width: clamp(105px, 12vw, 150px); height: auto; flex: 0 0 auto; object-fit: contain; }
.ssi-heading { min-width: 0; }
.ssi-heading h2 { margin: 0; color: var(--ssi-title); font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.12; letter-spacing: -.03em; }
.ssi-heading p { margin: .45rem 0 0; color: var(--ssi-muted); }
.ssi-month-nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .45rem; width: 100%; margin: 0 0 1.25rem; padding-top: 0; }
.ssi-month-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  border: 1px solid var(--ssi-border);
  border-radius: 999px;
  background: var(--ssi-surface-2);
  color: var(--ssi-text) !important;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  padding: .62rem .7rem;
  text-decoration: none !important;
  text-transform: capitalize;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ssi-month-link:hover { transform: translateY(-1px); border-color: rgba(229, 9, 20, .72); background: rgba(229, 9, 20, .15); }
.ssi-month-link:focus-visible { outline: 3px solid rgba(229, 9, 20, .35); outline-offset: 2px; }

.ssi-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.2rem 0 .85rem; }
.ssi-filters + .ssi-month-nav { margin-top: 0; }
.ssi-filter {
  appearance: none;
  border: 1px solid var(--ssi-border);
  border-radius: 999px;
  background: var(--ssi-surface-2);
  color: var(--ssi-text);
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  padding: .7rem .95rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ssi-filter:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.28); }
.ssi-filter:focus-visible { outline: 3px solid rgba(124,58,237,.4); outline-offset: 2px; }
.ssi-filter.is-active { background: linear-gradient(135deg, var(--ssi-accent), var(--ssi-accent-2)); border-color: transparent; }

.ssi-grid { display: grid; grid-template-columns: repeat(var(--ssi-columns, 4), minmax(0, 1fr)); gap: 1.25rem; }
.ssi-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ssi-border);
  border-radius: 18px;
  background: var(--ssi-surface);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ssi-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.5); box-shadow: 0 22px 60px rgba(0,0,0,.34); }
.ssi-card[hidden] { display: none !important; }

.ssi-poster-link { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: #20232d; }
.ssi-poster { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ssi-card:hover .ssi-poster { transform: scale(1.035); }
.ssi-poster--empty { display: grid; place-items: center; font-size: 3rem; background: radial-gradient(circle at 30% 20%, #3b225d, #15171e 70%); }
.ssi-date-badge { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(10,12,18,.84); color: #fff; font-size: .78rem; font-weight: 800; padding: .48rem .7rem; backdrop-filter: blur(8px); }

.ssi-card-body { display: flex; min-height: 255px; flex-direction: column; padding: 1rem; }
.ssi-genres { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.45rem; }
.ssi-genres span { color: #c4b5fd; font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.ssi-genres span:not(:last-child)::after { content: "•"; margin-left: .35rem; color: #657085; }
.ssi-card h3 { margin: .55rem 0 .55rem; color: var(--ssi-title); font-size: 1.08rem; line-height: 1.25; }
.ssi-card h3 a { color: inherit; text-decoration: none; }
.ssi-card h3 a:hover { color: var(--ssi-title-hover); }
.ssi-overview { margin: 0 0 .9rem; color: var(--ssi-muted); font-size: .88rem; line-height: 1.55; }
.ssi-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; }
.ssi-rating { display: inline-flex; align-items: baseline; gap: .22rem; border-radius: 8px; background: #252a36; color: #fbbf24; font-size: .88rem; font-weight: 900; padding: .42rem .55rem; }
.ssi-rating small { color: #cbd5e1; font-size: .64rem; font-weight: 700; }
.ssi-rating--imdb { background: #f5c518; color: #111; }
.ssi-rating--imdb small { color: #2a2a2a; }
.ssi-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .9rem; }
.ssi-button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; border: 1px solid var(--ssi-border); border-radius: 10px; background: #20242f; color: #fff !important; font-size: .82rem; font-weight: 800; line-height: 1; padding: .72rem .7rem; text-decoration: none !important; transition: filter .18s ease, transform .18s ease; }
.ssi-button:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ssi-button--primary { border-color: #f5c518; background: #f5c518; color: #111 !important; }


.ssi-months { display: grid; gap: 2.2rem; }
.ssi-month { scroll-margin-top: 2rem; }
.ssi-month-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--ssi-border); }
.ssi-month-heading h3 { margin: 0; color: var(--ssi-title); font-size: clamp(1.25rem, 2vw, 1.7rem); text-transform: capitalize; }
.ssi-month-heading span { color: var(--ssi-muted); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.ssi-month-empty { border: 1px dashed var(--ssi-border); border-radius: 14px; background: rgba(255,255,255,.025); color: var(--ssi-muted); padding: 1rem; }
.ssi-month-empty--filtered { margin-top: .75rem; }
.ssi-channel-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.ssi-channel { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px; font-size: .68rem; font-weight: 900; letter-spacing: .04em; line-height: 1; padding: .42rem .55rem; text-transform: uppercase; }
.ssi-channel--premiere { background: rgba(124,58,237,.18); border-color: rgba(167,139,250,.35); color: #ddd6fe; }
.ssi-channel--vod { background: rgba(219,39,119,.17); border-color: rgba(244,114,182,.35); color: #fbcfe8; }
.ssi-channel--streaming { background: rgba(14,165,233,.16); border-color: rgba(56,189,248,.35); color: #bae6fd; }
.ssi-channel--dvd { background: rgba(234,179,8,.16); border-color: rgba(250,204,21,.38); color: #fef08a; }
.ssi-channel--bluray { background: rgba(37,99,235,.2); border-color: rgba(96,165,250,.42); color: #bfdbfe; }
.ssi-scope { display: inline-flex; align-items: center; border: 1px dashed rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--ssi-muted); font-size: .64rem; font-weight: 800; letter-spacing: .03em; line-height: 1; padding: .42rem .55rem; text-transform: uppercase; }

.ssi-message { border: 1px solid rgba(124,58,237,.28); border-radius: 12px; background: rgba(124,58,237,.08); color: inherit; padding: 1rem; }
.ssi-message--warning { border-color: #d97706; background: rgba(217, 119, 6, .13); color: #fed7aa; }
.ssi-message--error { border-color: #dc2626; background: rgba(220, 38, 38, .13); color: #fecaca; }

@media (max-width: 1100px) { .ssi-grid { grid-template-columns: repeat(var(--ssi-columns-tablet, 3), minmax(0, 1fr)); } }
@media (max-width: 900px) { .ssi-month-nav { justify-content: flex-start; } }
@media (max-width: 760px) { .ssi-grid { grid-template-columns: repeat(var(--ssi-columns-mobile, 2), minmax(0, 1fr)); gap: .9rem; } .ssi-card-body { min-height: 235px; } }
@media (max-width: 560px) { .ssi-brand { align-items: flex-start; } .ssi-logo { width: 92px; } .ssi-month-nav { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 1rem; padding: .1rem 0 .45rem; scrollbar-width: thin; } .ssi-month-link { flex: 0 0 auto; } }
@media (max-width: 480px) { .ssi-grid { grid-template-columns: 1fr; } .ssi-card { display: grid; grid-template-columns: minmax(115px, 38%) 1fr; } .ssi-poster-link { height: 100%; aspect-ratio: auto; } .ssi-card-body { min-height: 0; padding: .85rem; } .ssi-overview { display: none; } .ssi-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ssi-card, .ssi-poster, .ssi-filter, .ssi-button, .ssi-month-link { transition: none; } }

.ssi-button--availability {
  grid-column: 1 / -1;
  border-color: rgba(56, 189, 248, .4);
  background: rgba(14, 165, 233, .14);
  color: #e0f2fe !important;
  cursor: pointer;
  font-family: inherit;
}
.ssi-button--availability[aria-expanded="true"] { background: rgba(14, 165, 233, .28); }
.ssi-button--availability:disabled { cursor: progress; opacity: .72; transform: none; }
.ssi-availability { margin-top: .75rem; }
.ssi-availability[hidden] { display: none !important; }
.ssi-availability-inner {
  border: 1px solid rgba(56, 189, 248, .24);
  border-radius: 12px;
  background: rgba(14, 165, 233, .07);
  padding: .8rem;
}
.ssi-availability-heading { display: flex; flex-direction: column; gap: .18rem; margin-bottom: .7rem; }
.ssi-availability-heading strong { color: #f8fafc; font-size: .86rem; }
.ssi-availability-heading span { color: var(--ssi-muted); font-size: .7rem; }
.ssi-provider-groups { display: grid; gap: .7rem; }
.ssi-provider-group h4 { margin: 0 0 .42rem; color: #bae6fd; font-size: .75rem; line-height: 1.2; }
.ssi-provider-list { display: flex; flex-wrap: wrap; gap: .42rem; margin: 0; padding: 0; list-style: none; }
.ssi-provider-list li {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  background: rgba(0, 0, 0, .24);
  color: #e2e8f0;
  font-size: .7rem;
  font-weight: 700;
  padding: .32rem .45rem;
}
.ssi-provider-list img { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px; object-fit: cover; }
.ssi-provider-list span { overflow-wrap: anywhere; }
.ssi-availability-footer { display: grid; gap: .55rem; margin-top: .75rem; }
.ssi-button--provider-link { width: 100%; }
.ssi-availability-footer small { color: var(--ssi-muted); font-size: .63rem; line-height: 1.4; }
.ssi-availability-empty,
.ssi-availability-loading,
.ssi-availability-error { margin: 0; color: var(--ssi-muted); font-size: .76rem; line-height: 1.45; }
.ssi-availability-error { color: #fecaca; }

.ssi-cinema-availability {
  display: grid;
  gap: .65rem;
  margin-bottom: .85rem;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 11px;
  background: rgba(124, 58, 237, .09);
  padding: .72rem;
}
.ssi-cinema-heading { display: flex; align-items: flex-start; gap: .55rem; }
.ssi-cinema-icon { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; }
.ssi-cinema-heading h4 { margin: 0; color: #ddd6fe; font-size: .8rem; }
.ssi-cinema-heading p { margin: .22rem 0 0; color: var(--ssi-muted); font-size: .68rem; line-height: 1.4; }
.ssi-cinema-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ssi-button--cinema { border-color: rgba(167, 139, 250, .48); background: rgba(124, 58, 237, .34); color: #f5f3ff !important; }
.ssi-button--cinema-map { border-color: rgba(244, 114, 182, .4); background: rgba(219, 39, 119, .18); color: #fce7f3 !important; }
.ssi-cinema-availability small { color: var(--ssi-muted); font-size: .61rem; line-height: 1.4; }
.ssi-digital-availability { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .75rem; }
.ssi-digital-title { margin: 0 0 .6rem; color: #bae6fd; font-size: .8rem; }

@media (max-width: 480px) { .ssi-cinema-actions { grid-template-columns: 1fr; } }

.ssi-button--cinema-nearby {
  grid-column: 1 / -1;
  border-color: rgba(167, 139, 250, .55);
  background: linear-gradient(135deg, rgba(124, 58, 237, .42), rgba(219, 39, 119, .25));
  color: #f5f3ff !important;
}
.ssi-button--cinema-nearby.is-locating {
  cursor: progress;
  opacity: .78;
  transform: none;
}


/* Catalogue sections added in 1.1.0. */
.ssi-channel--undated {
  background: rgba(234, 179, 8, .16);
  border-color: rgba(250, 204, 21, .38);
  color: #fef08a;
}
.ssi-date-badge--available {
  border-color: rgba(56, 189, 248, .48);
  background: rgba(3, 105, 161, .9);
  color: #f0f9ff;
}
.ssi-date-badge--undated {
  border-color: rgba(250, 204, 21, .5);
  background: rgba(113, 63, 18, .92);
  color: #fef9c3;
}
.ssi-month[data-ssi-month="available-now"] .ssi-month-heading,
.ssi-month[data-ssi-month="date-unconfirmed"] .ssi-month-heading {
  border-bottom-color: rgba(255, 255, 255, .18);
}
.ssi-month[data-ssi-month="available-now"] .ssi-month-heading h3 { color: #38bdf8; }
.ssi-month[data-ssi-month="date-unconfirmed"] .ssi-month-heading h3 { color: #facc15; }