/* ── Cinema Widget Styles ── */

/* ── Showtime chips ── */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: 5px;
  font-size: 0.8rem; font-weight: 500; cursor: pointer;
  transition: filter 0.1s, transform 0.1s;
  white-space: nowrap; border: none; line-height: 1.5;
  color: white; text-decoration: none;
}
.chip:hover { filter: brightness(0.88); transform: translateY(-1px); }
.chip.sold-out { opacity: 0.4; text-decoration: line-through; cursor: default; }
.chip.sold-out:hover { filter: none; transform: none; }

/* ── Tooltip ── */
.tip-wrap { position: relative; display: inline-block; }
.tip-wrap .tip-text {
  visibility: hidden; opacity: 0;
  background: #00272b; color: #f9fafb;
  border-radius: 5px; padding: 4px 10px;
  font-size: 0.72rem; white-space: nowrap;
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.15s;
  pointer-events: none; z-index: 50;
}
.tip-wrap .tip-text::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #00272b;
}
.tip-wrap:hover .tip-text { visibility: visible; opacity: 1; }

/* ── Cinema accordion ── */
.cinema-section summary { list-style: none; }
.cinema-section summary::-webkit-details-marker { display: none; }
.cinema-section[open] .chevron { transform: rotate(180deg); }
.chevron { transition: transform 0.2s; }

/* ── View toggle ── */
.vtog {
  padding: 6px 16px; font-size: 0.875rem; font-weight: 600;
  border-radius: 6px; cursor: pointer;
  transition: background 0.15s, color 0.15s; border: none;
}
.vtog.active { background: #068d9d; color: white; }
.vtog:not(.active) { background: transparent; color: rgba(255,255,255,0.6); }
.vtog:not(.active):hover { background: #e8e0d4; color: #00272b; }

/* ── Date pills ── */
.date-pill {
  padding: 5px 14px; border-radius: 20px;
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.35);
  transition: all 0.15s; white-space: nowrap;
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.95);
}
.date-pill.active { background: #068d9d; border-color: #068d9d; color: white; }
.date-pill:not(.active):hover { border-color: #068d9d; color: #068d9d; }

/* ── Rating badge ── */
.rbadge {
  display: inline-flex; align-items: center;
  padding: 1px 5px; border-radius: 3px;
  font-size: 0.68rem; font-weight: 700;
  border: 1.5px solid currentColor; line-height: 1.4;
}

/* ── Language section header ── */
.lang-hdr {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #9ca3af;
  margin-bottom: 4px; margin-top: 8px;
}
.lang-hdr:first-child { margin-top: 0; }

/* ── Misc ── */
.pills-scroll::-webkit-scrollbar { display: none; }
.pills-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.movie-row { }

/* ── Expand / collapse detail panel ── */
.detail-panel {
  overflow: hidden; max-height: 0;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.detail-panel.open { max-height: 500px; }

/* ── Skeleton shimmer ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #ede8df 25%, #dfd8cc 50%, #ede8df 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 4px;
}

/* ── Cinema widget body font override ── */
.cnx-cinema-wrap {
  font-family: 'PT Sans Narrow', system-ui, sans-serif;
}

/* ── Hover states ── */
#pop-directions-btn { background: #068d9d; transition: background 0.15s; }
#pop-directions-btn:hover { background: #055f6b; }

/* ── Mobile compact header (hidden on desktop) ── */
.movie-compact-header { display: none; }

/* ── Theater view: timeline indented past poster on desktop ── */
.theater-movie-times { padding-left: 60px; }

@media (max-width: 640px) {
  /* Header controls: compact sizing */
  .vtog { padding: 4px 10px; font-size: 0.78rem; border-radius: 5px; }
  .date-pill { padding: 3px 10px; font-size: 0.78rem; border-radius: 16px; }
  .cnx-cinema-wrap header .max-w-5xl { padding-left: 0.75rem; padding-right: 0.75rem; }
  #date-pills-row { gap: 0.35rem; padding-bottom: 0.5rem; }

  /* Movie view: stack vertically, swap large poster for compact header */
  .movie-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .movie-row .poster-expand-trigger { display: none; }
  .movie-compact-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

  /* Theater view: smaller posters, full-width timeline */
  #view-theater .poster-col img {
    width: 40px !important;
    height: 60px !important;
  }
  #view-theater .poster-col > div {
    width: 40px !important;
    height: 60px !important;
  }
  .theater-movie-times { padding-left: 0; }

  /* Detail panel poster: keep but smaller */
  .detail-panel .poster-col img {
    width: 64px !important;
    height: 96px !important;
  }

  /* Reduce content padding on mobile */
  .movie-row { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

  /* Timeline → flex-wrap: ditch absolute positioning, chips flow naturally */
  .tl-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }
  .tl-label {
    width: auto !important;
    text-align: left !important;
    font-size: 0.65rem !important;
  }
  .tl-track {
    position: static !important;
    height: auto !important;
    background: transparent !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    overflow: visible;
  }
  .tl-chip {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* ── Share button ── */
.share-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent;
  color: #9ca3af; cursor: pointer;
  opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.movie-row-wrap:hover .share-btn { opacity: 1; }
.share-btn:hover { background: rgba(6,141,157,0.12); color: #068d9d; }
@media (hover: none) { .share-btn { opacity: 1; } }

/* ── Share toast ── */
.share-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: #00272b; color: white;
  padding: 8px 18px; border-radius: 8px;
  font-size: 0.875rem; font-weight: 500;
  z-index: 10000; opacity: 0;
  transition: opacity 0.2s; pointer-events: none;
}
.share-toast.visible { opacity: 1; }

/* ── Highlight flash ── */
@keyframes highlight-flash {
  0%   { background-color: rgba(232, 170, 20, 0.30); }
  60%  { background-color: rgba(232, 170, 20, 0.15); }
  100% { background-color: transparent; }
}
.highlight-flash { animation: highlight-flash 1.8s ease-out forwards; }

/* === SEO Content === */
.cinema-seo-content {
    background: #f8f9fa;
    padding: 3rem 0;
    border-top: 1px solid #eee;
}

.cinema-seo-article {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}

.cinema-seo-article h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #1a1a1a;
}

.cinema-seo-article h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.cinema-seo-article img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}