/**
 * BoxOfficeWala Publisher Connect - Front-end & Admin Styles
 * Clean, modern typography and dark/light responsive themes
 */

:root {
  --boi-gold: #ffd700;
  --boi-gold-hover: #ffb800;
  --boi-dark-bg: #0e111a;
  --boi-dark-card: #161a29;
  --boi-dark-border: rgba(255, 215, 0, 0.25);
  --boi-text-light: #f5f6f8;
  --boi-text-muted: #9aa0a6;
  --boi-green: #2ecc71;
  --boi-red: #e74c3c;
  --boi-radius: 12px;
}

/* ==========================================================================
   1. Smart Field Inline Display
   ========================================================================== */
.boi-smart-field-value {
  font-weight: 700;
  color: inherit;
  display: inline;
  transition: opacity 0.2s ease;
}

.boi-smart-field-value.boi-gold {
  color: var(--boi-gold);
}

.boi-smart-field-placeholder {
  color: var(--boi-text-muted);
  font-style: italic;
}

/* ==========================================================================
   2. Infobox Widget Card
   ========================================================================== */
.boi-infobox-container {
  max-width: 680px;
  margin: 24px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  border-radius: var(--boi-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boi-infobox-container:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

/* Dark Theme (Default) */
.boi-infobox-container.boi-theme-dark {
  background: var(--boi-dark-bg);
  border: 1px solid var(--boi-dark-border);
  color: var(--boi-text-light);
}

.boi-infobox-container.boi-theme-dark .boi-infobox-card {
  background: linear-gradient(180deg, rgba(22, 26, 41, 0.95) 0%, rgba(14, 17, 26, 0.98) 100%);
}

.boi-infobox-container.boi-theme-dark .boi-stat-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.boi-infobox-container.boi-theme-dark .boi-footer {
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Light Theme */
.boi-infobox-container.boi-theme-light {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1a202c;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.boi-infobox-container.boi-theme-light .boi-infobox-card {
  background: #ffffff;
}

.boi-infobox-container.boi-theme-light .boi-stat-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.boi-infobox-container.boi-theme-light .boi-footer {
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
}

/* Infobox Header */
.boi-infobox-header {
  display: flex;
  gap: 20px;
  padding: 20px;
  align-items: center;
}

.boi-poster-wrap {
  flex-shrink: 0;
  width: 100px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.boi-poster-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.boi-header-details {
  flex-grow: 1;
}

.boi-movie-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 6px 0;
  line-height: 1.25;
  color: inherit;
}

.boi-movie-meta {
  font-size: 0.85rem;
  color: var(--boi-text-muted);
  margin-bottom: 8px;
}

.boi-verdict-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--boi-gold);
  color: #000;
}

.boi-verdict-tag.verdict-blockbuster { background: #27ae60; color: #fff; }
.boi-verdict-tag.verdict-hit { background: #2ecc71; color: #fff; }
.boi-verdict-tag.verdict-flop { background: #e74c3c; color: #fff; }
.boi-verdict-tag.verdict-average { background: #f39c12; color: #fff; }

/* Grid of Stats */
.boi-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 20px 20px 20px;
}

.boi-stat-box {
  padding: 12px 14px;
  border-radius: 8px;
  text-align: center;
}

.boi-stat-box.highlight {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.08);
}

.boi-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--boi-text-muted);
  margin-bottom: 4px;
  display: block;
}

.boi-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: inherit;
  display: block;
}

.boi-stat-box.highlight .boi-stat-value {
  color: var(--boi-gold);
}

/* Footer & Watermark */
.boi-footer {
  padding: 10px 20px;
  font-size: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--boi-text-muted);
}

.boi-footer a {
  color: var(--boi-gold);
  text-decoration: none;
  font-weight: 600;
}

.boi-theme-light .boi-footer a {
  color: #b45309;
}

.boi-footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   3. Daily Pacing Chart
   ========================================================================== */
.boi-chart-container {
  max-width: 680px;
  margin: 24px auto;
  border-radius: var(--boi-radius);
  overflow: hidden;
  padding: 20px;
  font-family: inherit;
}

.boi-chart-container.boi-theme-dark {
  background: var(--boi-dark-bg);
  border: 1px solid var(--boi-dark-border);
  color: var(--boi-text-light);
}

.boi-chart-container.boi-theme-light {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1a202c;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.boi-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  margin: 20px 0 10px 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.boi-theme-light .boi-chart-bars {
  border-bottom-color: #e2e8f0;
}

.boi-chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.boi-chart-bar {
  width: 100%;
  max-width: 28px;
  background: linear-gradient(180deg, var(--boi-gold) 0%, rgba(255, 215, 0, 0.4) 100%);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
}

.boi-chart-bar-val {
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.boi-chart-bar-day {
  font-size: 0.7rem;
  color: var(--boi-text-muted);
  margin-top: 6px;
}

/* ==========================================================================
   4. Showcase All-in-One Component [boi_showcase]
   ========================================================================== */
.boi-showcase-container {
  max-width: 760px;
  margin: 28px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.boi-showcase-container.boi-theme-dark {
  background: #090b12;
  border: 1px solid var(--boi-dark-border);
  color: var(--boi-text-light);
}

.boi-showcase-container.boi-theme-light {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1a202c;
}

.boi-showcase-hero {
  display: flex;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(22, 26, 41, 0.95) 0%, rgba(14, 17, 26, 0.9) 100%);
  align-items: center;
}

.boi-theme-light .boi-showcase-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
}

.boi-showcase-poster {
  width: 120px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.boi-showcase-poster img {
  width: 100%;
  height: auto;
  display: block;
}

.boi-showcase-header-info {
  flex-grow: 1;
}

.boi-showcase-title {
  font-size: 1.7rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.2;
}

.boi-showcase-submeta {
  font-size: 0.88rem;
  color: var(--boi-text-muted);
  margin-bottom: 12px;
}

.boi-showcase-metrics-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0;
}

.boi-theme-light .boi-showcase-metrics-banner {
  background: #e2e8f0;
}

.boi-showcase-metric-cell {
  background: #0e111a;
  padding: 16px 10px;
  text-align: center;
}

.boi-theme-light .boi-showcase-metric-cell {
  background: #ffffff;
}

.boi-showcase-metric-lbl {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--boi-text-muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.boi-showcase-metric-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: inherit;
}

.boi-showcase-metric-cell.highlight .boi-showcase-metric-num {
  color: var(--boi-gold);
}

.boi-theme-light .boi-showcase-metric-cell.highlight .boi-showcase-metric-num {
  color: #b45309;
}

.boi-showcase-attribution {
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.boi-theme-light .boi-showcase-attribution {
  background: #f1f5f9;
  border-top-color: #e2e8f0;
  color: #475569;
}

.boi-showcase-attribution a {
  color: var(--boi-gold);
  font-weight: 700;
  text-decoration: none;
}

.boi-theme-light .boi-showcase-attribution a {
  color: #b45309;
}

.boi-showcase-attribution a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   5. Post Editor Meta Box (Writer Movie Finder)
   ========================================================================== */
.boi-finder-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.boi-finder-search-row {
  position: relative;
  margin-bottom: 12px;
}

.boi-finder-search-row input[type="text"] {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #ccd0d4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.boi-finder-search-row .boi-spinner {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 14px;
}

.boi-results-scroll {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px;
}

.boi-movie-card-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: border-color 0.15s ease;
}

.boi-movie-card-row:hover {
  border-color: #b45309;
}

.boi-card-thumb {
  width: 44px;
  height: 60px;
  border-radius: 4px;
  background: #e2e8f0;
  object-fit: cover;
  flex-shrink: 0;
}

.boi-card-details {
  flex-grow: 1;
  min-width: 0;
}

.boi-card-title {
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boi-card-tags {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 6px;
}

.boi-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.boi-btn-insert {
  background: #0f172a;
  color: #ffffff !important;
  border: none;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.boi-btn-insert:hover {
  background: #334155;
}

.boi-btn-copy {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.boi-btn-copy:hover {
  background: #e2e8f0;
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */
@media (max-width: 640px) {
  .boi-showcase-hero {
    flex-direction: column;
    text-align: center;
  }
  .boi-showcase-poster {
    width: 90px;
  }
  .boi-showcase-metrics-banner {
    grid-template-columns: repeat(2, 1fr);
  }
  .boi-infobox-header {
    flex-direction: column;
    text-align: center;
  }
  .boi-poster-wrap {
    width: 80px;
  }
  .boi-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7. BOWBites Slider & Cards
   ========================================================================== */
.boi-bites-widget-wrapper {
  margin: 28px 0;
  border-radius: var(--boi-radius);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.boi-bites-theme-dark {
  background: var(--boi-dark-bg);
  border: 1px solid var(--boi-dark-border);
  color: var(--boi-text-light);
}

.boi-bites-theme-light {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.boi-bites-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.boi-bites-theme-light .boi-bites-widget-header {
  border-bottom: 1px solid #e2e8f0;
}

.boi-bites-title {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.boi-bites-nav-arrows {
  display: flex;
  gap: 6px;
}

.boi-bites-prev-btn,
.boi-bites-next-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s;
}

.boi-bites-prev-btn:hover,
.boi-bites-next-btn:hover {
  background: var(--boi-gold);
  color: #000;
}

.boi-bites-slider-container {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.boi-bites-slider-container::-webkit-scrollbar {
  height: 6px;
}

.boi-bites-slider-container::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 3px;
}

.boi-bites-track {
  display: flex;
  gap: 16px;
}

.boi-bites-card {
  flex: 0 0 260px;
  background: var(--boi-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.boi-bites-theme-light .boi-bites-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.boi-bites-card-media {
  height: 150px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #1e293b;
}

.boi-bites-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 17, 26, 0.95) 100%);
}

.boi-bites-badge-brand {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--boi-gold);
  color: var(--boi-gold);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.boi-bites-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.boi-bites-movie-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.boi-bites-meta-line {
  font-size: 11px;
  color: var(--boi-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.boi-bites-cast-line {
  font-size: 11px;
  color: var(--boi-text-muted);
  margin-bottom: 12px;
}

.boi-bites-metrics-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.boi-bites-theme-light .boi-bites-metrics-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.boi-bites-metric-item .lbl {
  display: block;
  font-size: 10px;
  color: var(--boi-text-muted);
  text-transform: uppercase;
}

.boi-bites-metric-item .val {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--boi-gold);
}

.boi-bites-card-footer {
  margin-top: auto;
  display: flex;
  gap: 6px;
}

.boi-bites-action-btn {
  flex: 1;
  background: var(--boi-gold);
  color: #0e111a !important;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
}

.boi-bites-share-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   8. Read More Expandable Overlay
   ========================================================================== */
.boi-readmore-wrapper {
  position: relative;
  margin-bottom: 24px;
}

.boi-readmore-curtain {
  position: relative;
  margin-top: -120px;
  padding-top: 60px;
  text-align: center;
  z-index: 5;
}

.boi-readmore-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 45%, #ffffff 100%);
  z-index: 1;
  pointer-events: none;
}

/* Dark mode fallback for fade */
@media (prefers-color-scheme: dark) {
  .boi-readmore-fade {
    background: linear-gradient(180deg, rgba(14, 17, 26, 0) 0%, rgba(14, 17, 26, 0.95) 45%, #0e111a 100%);
  }
}

.boi-readmore-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.boi-readmore-expand-btn {
  background: linear-gradient(135deg, #ffd700 0%, #ff9900 100%);
  color: #0e111a;
  border: none;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 184, 0, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.boi-readmore-expand-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 184, 0, 0.45);
}

.boi-readmore-card {
  max-width: 480px;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.boi-rmc-poster {
  width: 42px;
  height: 58px;
  object-fit: cover;
  border-radius: 4px;
}

.boi-rmc-poster-ph {
  width: 42px;
  height: 58px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 18px;
}

.boi-rmc-center {
  flex: 1;
}

.boi-rmc-badge {
  font-size: 10px;
  font-weight: 700;
  color: #d97706;
  text-transform: uppercase;
}

.boi-rmc-title {
  margin: 2px 0 4px 0;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

.boi-rmc-numbers {
  font-size: 11px;
  color: #64748b;
  display: flex;
  gap: 10px;
}

.boi-rmc-numbers strong {
  color: #0f172a;
}

.boi-rmc-link {
  background: #0f172a;
  color: #fff !important;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
/* ==========================================================================
   Interactive Movie Tooltip (BOW-M-DB)
   ========================================================================== */
.boi-movie-tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px dotted var(--boi-gold);
  color: inherit;
  font-weight: 700;
  transition: color 0.2s ease;
}
.boi-movie-tooltip-trigger:hover,
.boi-movie-tooltip-trigger:focus {
  color: var(--boi-gold);
  outline: none;
}
.boi-bo-badge {
  font-size: 9px;
  font-weight: 900;
  background: linear-gradient(135deg, #ffd700 0%, #ff9900 100%);
  color: #000;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  line-height: 1.2;
  display: inline-block;
  vertical-align: middle;
}
.boi-movie-tooltip-card {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 260px;
  background: #0f111a;
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 15px rgba(255, 215, 0, 0.2);
  padding: 12px;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: left;
}
.boi-movie-tooltip-card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #0f111a transparent transparent transparent;
}
.boi-movie-tooltip-trigger:hover .boi-movie-tooltip-card,
.boi-movie-tooltip-trigger:focus .boi-movie-tooltip-card {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.boi-tooltip-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}
.boi-tooltip-img {
  width: 42px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.boi-tooltip-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.boi-tooltip-title {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boi-tooltip-verdict {
  color: var(--boi-gold);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 3px;
}
.boi-tooltip-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 10px;
}
.boi-tooltip-stats strong {
  display: block;
  color: #fff;
  font-size: 12px;
}
.boi-tooltip-link {
  display: block;
  text-align: center;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: var(--boi-gold);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.boi-tooltip-link:hover {
  background: var(--boi-gold);
  color: #000;
}

/* ==========================================================================
   Related Flick Reels Horizontal Carousel (End of Articles)
   ========================================================================== */
.boi-related-flick-wrap {
  margin: 36px 0 24px;
  padding: 20px 18px 22px;
  background: #0f111a;
  border-radius: 16px;
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.boi-related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.boi-related-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.boi-related-icon {
  background: var(--boi-gold);
  color: #000;
  font-size: 12px;
  font-weight: 900;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.boi-related-view-all {
  color: var(--boi-gold);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s;
}
.boi-related-view-all:hover {
  transform: translateX(3px);
}
.boi-related-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.boi-related-strip::-webkit-scrollbar {
  display: none;
}
.boi-related-card {
  flex: 0 0 130px;
  height: 205px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #161a29;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.boi-related-card:hover {
  transform: translateY(-4px);
  border-color: var(--boi-gold);
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.25);
}
.boi-related-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.boi-related-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(to top, rgba(10, 12, 20, 0.95) 0%, rgba(10, 12, 20, 0.3) 60%, transparent 100%);
}
.boi-related-card-content {
  position: relative;
  z-index: 3;
}
.boi-related-badge {
  display: inline-block;
  background: rgba(255, 215, 0, 0.2);
  color: var(--boi-gold);
  border: 1px solid rgba(255, 215, 0, 0.4);
  font-size: 8px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: 0.4px;
}
.boi-related-card-title {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.boi-related-tap-watch {
  font-size: 9px;
  font-weight: 700;
  color: var(--boi-gold);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}


                                                                        /* Style Moved from Bowbites.php */


/* Ensure the last line of content is always fully visible above the action bar */
.bb-content {
    padding-bottom: 50px !important;
}
.bb-content-end-spacer {
    height: 3.2em !important;
    display: block;
    pointer-events: none;
}
/* Content Paragraph Spacing & Line Height Enhancement */
.bb-text p {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15.5px;
}

.bb-text p:last-child {
    margin-bottom: 0 !important;
}

.bb-text strong, .bb-text b {
    color: #FFFFFF;
    font-weight: 700;
}
    /* Story Rings Avatar Bar */
        .bb-story-rings-wrap {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            z-index: 150;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 8px 16px;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
            pointer-events: auto;
        }
        .bb-story-rings-wrap::-webkit-scrollbar { display: none; }
        .bb-ring-item {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            text-decoration: none;
            flex-shrink: 0;
            transition: transform 0.2s;
        }
        .bb-ring-item:active { transform: scale(0.92); }
        .bb-ring-circle {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            padding: 2px;
            background: linear-gradient(135deg, #FFD700, #FF5900);
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bb-ring-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid #000;
        }
        .bb-ring-label {
            font-size: 10px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 4px rgba(0,0,0,0.8);
            max-width: 56px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Non-Skippable Ad Badge */
        .bb-ad-lock-badge {
            position: absolute;
            top: 130px;
            right: 20px;
            z-index: 50;
            background: rgba(0, 0, 0, 0.88);
            border: 1px solid rgba(255, 215, 0, 0.5);
            color: #FFD700;
            font-size: 11px;
            font-weight: 800;
            padding: 6px 14px;
            border-radius: 20px;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.6);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }
        .bb-ad-lock-badge.unlocked {
            background: #16a34a;
            border-color: #22c55e;
            color: #fff;
            cursor: pointer;
        }
        :root{--bo-gold:#FFD700;--bo-red:#E50914;--bo-bg:#0F111A;--bo-text-main:#FFFFFF;--bo-text-sub:#C4C4C4;--bo-green:#27ae60;--bo-blue:#2980b9;--bo-border:#FFD700;--bo-inst-bg:linear-gradient(135deg, #0F111A 0%, #1a1c29 100%)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden}body{background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}.bb-header{position:fixed;top:0;left:0;right:0;z-index:200;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.9) 0,rgba(0,0,0,.5) 60%,transparent 100%);pointer-events:none}.bb-text iframe{max-width:100%;border-radius:12px}.bb-text a{color:gold;text-decoration:underline}.bb-header>*{pointer-events:auto}.bb-logo{font-size:20px;font-weight:900;color:gold;text-shadow:0 2px 8px rgba(255,215,0,.3);letter-spacing:-.5px;display:flex;align-items:center;gap:6px}.bb-logo img{height:28px;width:auto;filter:drop-shadow(0 0 6px rgba(255,215,0,.5))}.bb-counter{font-size:12px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.1);padding:4px 10px;border-radius:12px}.bb-scroller{height:100vh;width:100vw;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.bb-scroller::-webkit-scrollbar{display:none}.bb-slide{height:100vh;width:100vw;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.bb-slide.bb-hidden{visibility:hidden}.bb-slide.bb-hidden *{pointer-events:none}.bb-slide-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:1;filter:brightness(.5);pointer-events:none !important;will-change:transform,opacity;transform:translateZ(0);transition:opacity .3s}
/* Smooth, Cinematic Ken Burns Background Sliding (Triggers only when slide is active) */
@keyframes bbBgPanLeft {
    0%   { transform: scale(1.12) translate3d(24px, 0, 0); }
    100% { transform: scale(1.02) translate3d(-18px, 0, 0); }
}
@keyframes bbBgPanRight {
    0%   { transform: scale(1.12) translate3d(-24px, 0, 0); }
    100% { transform: scale(1.02) translate3d(18px, 0, 0); }
}
@keyframes bbBgPanZoom {
    0%   { transform: scale(1.0) translate3d(0, 10px, 0); }
    100% { transform: scale(1.14) translate3d(0, -10px, 0); }
}

.bb-slide .bb-slide-bg {
    transition: transform 0.8s ease-out, opacity 0.5s ease-in;
    will-change: transform;
}

/* Activated by IntersectionObserver when slide is in viewport */
.bb-slide.bb-active-slide .bb-slide-bg.anim-left {
    animation: bbBgPanLeft 7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.bb-slide.bb-active-slide .bb-slide-bg.anim-right {
    animation: bbBgPanRight 7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.bb-slide.bb-active-slide .bb-slide-bg.anim-spin,
.bb-slide.bb-active-slide .bb-slide-bg.anim-zoom {
    animation: bbBgPanZoom 7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Non-Skippable Ad Badge */
.bb-ad-lock-badge {
    position: absolute;
    top: 70px;
    right: 20px;
    z-index: 50;
    background: rgba(0, 0, 0, 0.88);
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: #FFD700;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}
.bb-ad-lock-badge.unlocked {
    background: #16a34a;
    border-color: #22c55e;
    color: #fff;
    cursor: pointer;
}

/* Floating CTA Button (Above Action Bar, Right-Aligned) */
        .bb-floating-cta {
            position: fixed;
            bottom: 74px;
            right: 16px;
            z-index: 250;
            display: none;
            align-items: center;
            gap: 6px;
            padding: 9px 18px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 800;
            text-decoration: none;
            box-shadow: 0 4px 18px rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            transition: transform 0.2s, box-shadow 0.2s;
            animation: bbFadeSlideIn 0.3s ease;
        }
        .bb-floating-cta:active { transform: scale(0.94); }
        @keyframes bbFadeSlideIn {
            from { opacity:0; transform:translateY(10px); }
            to { opacity:1; transform:translateY(0); }
        }

        /* Floating Like Button */
        .bb-floating-like {
            position: fixed;
            bottom: 128px;
            right: 16px;
            z-index: 250;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(15, 17, 26, 0.85);
            border: 1px solid rgba(255, 215, 0, 0.35);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.6);
            transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
        }
        .bb-floating-like:active { transform: scale(0.88); }
        .bb-floating-like.is-liked {
            border-color: #FFD700;
            background: rgba(255, 215, 0, 0.15);
            box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
        }

        /* Golden Heart Burst Animation */
        .bb-heart-burst {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            font-size: 90px;
            pointer-events: none;
            z-index: 999;
            animation: bbHeartBurst 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.95));
        }
        @keyframes bbHeartBurst {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            45% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
            70% { transform: translate(-50%, -55%) scale(1.2); opacity: 0.9; }
            100% { transform: translate(-50%, -70%) scale(0.9); opacity: 0; }
        }

        /* Similar Tags Slide-Up Sheet Overlay */
        .bb-tags-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(5px);
            z-index: 600;
            display: none;
            align-items: flex-end;
            justify-content: center;
        }
        .bb-tags-overlay.active { display: flex; }
        .bb-tags-panel {
            background: #141724;
            border-top: 2px solid rgba(255, 215, 0, 0.3);
            border-radius: 24px 24px 0 0;
            padding: 24px 20px 38px;
            width: 100%;
            max-width: 480px;
            animation: bbSlideUp 0.3s ease;
            box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
        }
        .bb-tags-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .bb-tags-header h4 {
            color: #FFD700;
            font-size: 17px;
            font-weight: 800;
            letter-spacing: -0.3px;
        }
        .bb-tags-close {
            color: #aaa;
            font-size: 20px;
            cursor: pointer;
            padding: 4px;
        }
        .bb-tags-sub {
            font-size: 12px;
            color: #8e9bb0;
            margin-bottom: 16px;
        }
        .bb-tags-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            max-height: 240px;
            overflow-y: auto;
            padding-right: 4px;
        }
        .bb-tag-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 215, 0, 0.25);
            border-radius: 20px;
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            transition: all 0.2s;
        }
        .bb-tag-pill:hover, .bb-tag-pill:active {
            background: linear-gradient(135deg, #FFD700, #FF5900);
            color: #000;
            border-color: #FFD700;
            transform: scale(1.04);
        }
        
        /* Crystal Glassmorphism Buttons: Like, Share, Similar */
        .bb-btn-like,
        .bb-btn-share,
        .bb-btn-similar {
            background: rgba(255, 255, 255, 0.12) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.25) !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            padding: 8px 14px !important;
            border-radius: 20px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            cursor: pointer !important;
            text-decoration: none !important;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .bb-btn-like:hover, .bb-btn-share:hover, .bb-btn-similar:hover,
        .bb-btn-like:active, .bb-btn-share:active, .bb-btn-similar:active {
            background: rgba(255, 255, 255, 0.22) !important;
            border-color: rgba(255, 215, 0, 0.5) !important;
            transform: scale(1.05);
        }
        .bb-btn-like.is-liked {
            background: rgba(255, 215, 0, 0.25) !important;
            border-color: #FFD700 !important;
            color: #FFD700 !important;
        }
        /* Next-Gen Inline Reaction Bar & Date Alignment */
        .bb-date-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
        }
        .bb-date-row .bb-date {
            margin-bottom: 0 !important;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        .bb-inline-reactions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(0, 0, 0, 0.35);
            padding: 3px 6px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .bb-react-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            line-height: 1;
            padding: 0;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .bb-react-btn:hover {
            transform: scale(1.18);
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 215, 0, 0.5);
        }
        .bb-react-btn:active {
            transform: scale(0.88);
        }
        .bb-react-btn.is-active {
            background: rgba(255, 215, 0, 0.25) !important;
            border-color: #FFD700 !important;
            box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
            transform: scale(1.15);
        }
        /* Golden Sparkle Explosion Container */
        .bb-sparkle-particle {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            font-size: 20px;
            animation: bbParticleExplosion 0.8s ease-out forwards;
        }
        @keyframes bbParticleExplosion {
            0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
            100% { transform: translate(var(--dx), var(--dy)) scale(0) rotate(var(--rot)); opacity: 0; }
        }

        /* Social YouTube Video Reel Slide */
        .bb-video-container {
            width: 100%;
            max-width: 560px;
            aspect-ratio: 16/9;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.9);
            margin: 16px 0;
            border: 1px solid rgba(255, 215, 0, 0.3);
            background: #000;
        }
        .bb-video-container iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Next Button with Down Arrow */
        .bb-btn-next {
            background: linear-gradient(135deg, #FFD700 0%, #FF9900 100%);
            color: #a57171ff !important;
            font-weight: 900;
            border: 1px solid rgba(255, 215, 0, 0.6);
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
            transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

        /* Hover Colour to Crisp White with High Contrast Dark Text */
        .bb-btn-next:hover {
            background: #FFFFFF !important;
            color: #000000 !important;
            border-color: #FFFFFF !important;
            box-shadow: 0 4px 18px rgba(255, 255, 255, 0.6) !important;
            transform: translateY(-1px);
        }

        /* Prevent Click / Active / Focus from Going Black */
        .bb-btn-next:active,
        .bb-btn-next:focus,
        .bb-btn-next:focus-visible {
            background: #FFFFFF !important;
            color: #000000 !important;
            border-color: #FFFFFF !important;
            box-shadow: 0 2px 10px rgba(255, 255, 255, 0.5) !important;
            outline: none !important;
            transform: scale(0.96);
        }
/* Uniform Mobile Action Bar & Button Fix */
.bb-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Keeps the whole group centered */
    gap: 4px !important; /* This sets the small tight gap for the first 3 buttons */
    padding: 10px 12px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.6) 70%, transparent 100%) !important;
    box-sizing: border-box;
}

/* Creates a slightly larger gap strictly for the 4th button */
.bb-actions .bb-btn:last-child {
    margin-left: 8px !important; /* Increase or decrease this number to change the 4th button's gap */
}

/* Strict Inline Row, Equal Height, Prevent Emoji/Text Break */
.bb-btn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    gap: 5px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.bb-btn span, .bb-btn svg {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* Compact Adjustments for Small Mobile Displays (<= 420px) */
@media (max-width: 420px) {
    .bb-actions {
        gap: 4px !important;
        padding: 8px 6px !important;
        justify-content: center !important; /* Changed from space-evenly to prevent them from spreading to the edges */
    }
    
    .bb-actions .bb-btn:last-child {
        margin-left: 6px !important; /* Slightly smaller extra gap for very small screens */
    }

    .bb-btn {
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
        gap: 4px !important;
        letter-spacing: -0.2px !important;
    }
    .bb-btn-next {
        padding: 0 11px !important;
    }
}
.bb-slide-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,.95) 0,rgba(0,0,0,.6) 35%,rgba(0,0,0,0) 65%);z-index:2}.bb-content{position:relative;z-index:3;padding:0 20px 90px;max-height:60vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.bb-post-type{display:inline-block;background:rgba(255,215,0,.15);color:gold;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;padding:3px 10px;border-radius:4px;margin-bottom:10px}.bb-title{font-size:24px;font-weight:800;line-height:1.25;margin-bottom:12px;text-shadow:0 2px 8px rgba(0,0,0,.8)}.bb-text{font-size:15px;line-height:1.65;color:rgba(255,255,255,.85);margin-bottom:16px}.bb-date{font-size:11px;color:rgba(255,255,255,.4);margin-bottom:16px}@keyframes bbTrendPulse{0%,100%{opacity:1}50%{opacity:.6}}.bb-trending-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(229,9,20,.15);color:#e50914;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;padding:3px 10px;border-radius:4px;margin-bottom:10px;margin-left:8px;animation:2s ease-in-out infinite bbTrendPulse}.bb-discovery-slide{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,#0f111a 0,#1a1c29 60%,#0f111a 100%)}.bb-actions{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;background:linear-gradient(to top,rgba(0,0,0,.95) 0,transparent 100%)}.bb-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:25px;text-decoration:none;font-weight:700;font-size:13px;border:none;cursor:pointer;transition:transform .2s}.bb-btn:active{transform:scale(.95)}.bb-btn-share{background:rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;border:1px solid rgba(255,255,255,.2)}.bb-btn-next{background:rgba(255,255,255,.08);color:gold;border:1px solid rgba(255,215,0,.3);padding:10px 16px;font-size:12px}.bb-btn-next:hover{background:rgba(255,215,0,.15)}.bb-btn-read{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2)}.bb-ad-slide{display:flex;align-items:center;justify-content:center;background:#0a0a0a}.bb-landing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}@keyframes bbPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,215,0,.4)}50%{transform:scale(1.03);box-shadow:0 0 0 12px rgba(255,215,0,0)}}.bb-logo-lightning{transition:background .3s,box-shadow .3s,transform .2s}.bb-logo-lightning:active,.bb-logo-lightning:hover{background:#fff!important;box-shadow:0 0 12px rgba(255,255,255,.8);transform:scale(1.2)}@keyframes bbBounceUp{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-12px);opacity:.5}}@keyframes bbShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}.bb-skeleton{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:0 20px 100px;pointer-events:none}.bb-skeleton-line{height:14px;border-radius:6px;margin-bottom:10px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:400px;animation:1.5s linear infinite bbShimmer}.bb-end-slide{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#0a0a0a 0,#0f111a 100%)}@media(max-width:767px){.bb-slide-bg{width:120%;left:-10%;height:75%;object-position:center top}}@media(min-width:768px){.bb-content{max-width:680px;margin:0 auto;padding-bottom:100px}.bb-title{font-size:32px}.bb-text{font-size:17px}.bb-slide-bg{object-position:center center}}.bb-share-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:500;display:none;align-items:flex-end;justify-content:center}.bb-share-overlay.active{display:flex}.bb-share-panel{background:rgba(10,11,16,.88);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.14);border-bottom:none;border-top:1px solid rgba(255,215,0,.35);box-shadow:0 -12px 40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18);border-radius:24px 24px 0 0;padding:24px 20px 40px;width:100%;max-width:420px;animation:.3s bbSlideUp}@keyframes bbSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}.bb-share-panel h4{color:#fff;font-size:14px;text-align:center;margin-bottom:16px;letter-spacing:1px;text-transform:uppercase}.bb-share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.bb-share-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;text-decoration:none;transition:all .2s ease}.bb-share-item:hover,.bb-share-item:active{background:rgba(255,215,0,.18);border-color:rgba(255,215,0,.5);transform:translateY(-2px)}.bb-share-item span{font-size:24px}.bb-share-item small{font-size:10px;color:#ccc;text-align:center}.bb-share-close{display:block;text-align:center;color:#fff;font-size:13px;font-weight:700;margin-top:16px;cursor:pointer;padding:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:20px;transition:background .2s}.bb-share-close:hover{background:rgba(255,255,255,.16)}.bo-infobox-container,.bo-news-card{background:#1a1c29;border:1px solid rgba(255,215,0,.2);border-radius:12px;overflow:hidden;margin:12px 0;cursor:pointer;transition:transform .3s,box-shadow .3s}.bo-news-card:active{transform:scale(.98)}.bo-infobox-body{display:flex;gap:12px;padding:12px}.bo-poster-area{flex:0 0 100px}.bo-poster-area img.bo-poster-img{width:100%;height:auto;max-height:160px;object-fit:cover;border-radius:8px}.bo-content-area{flex:1;min-width:0}.bo-movie-title{font-size:16px;font-weight:800;color:#fff;margin:0 0 6px;line-height:1.3}.bo-header-row{padding:0}.bo-meta-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.bo-budget-pill{font-size:11px;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:4px;color:#ccc}.bo-verdict-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase}.bo-verdict-tag.wait{background:#666;color:#fff}.bo-verdict-tag.flop{background:#d63638;color:#fff}.bo-verdict-tag.hit{background:#27ae60;color:#fff}.bo-verdict-tag.blockbuster{background:linear-gradient(45deg,gold,orange);color:#000;box-shadow:0 0 10px rgba(255,215,0,.5)}.bo-milestone-wrap{margin-top:8px}.bo-milestone-bar{background:#333;height:8px;border-radius:4px;overflow:hidden}.bo-milestone-fill{background:#4caf50;height:100%;transition:width .5s}.bo-milestone-text{font-size:10px;color:#999;text-align:right;margin-top:2px}.bo-full-row{padding:0 12px 12px}.bo-tools-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px}.bo-curr-btn{flex:1 1 auto;min-width:60px;max-width:100px;font-size:11px;padding:6px 4px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:.2s}.bo-curr-btn.active,.bo-curr-btn:hover{background:gold;color:#000;font-weight:700;border-color:gold}.bo-inf-btn{font-size:11px;padding:6px 8px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.bo-stats-container{background:rgba(0,0,0,.3);border-radius:10px;padding:12px}.bo-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.bo-stats-row.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}.bo-stats-row:last-child{margin-bottom:0}.bo-stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.05);padding:8px 4px;border-radius:6px;text-align:center;min-width:0}.bo-stat-item.highlight{background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.2)}.bo-label{font-size:10px;color:#aaa;margin-bottom:3px;text-transform:uppercase}.bo-value{font-weight:700;color:#fff;white-space:nowrap;font-size:13px}.bo-value.small{font-size:12px}.bo-fun-copy-area{background:rgba(255,255,255,.05);border:1px dashed rgba(255,215,0,.3);border-radius:8px;padding:12px;margin-top:10px;text-align:center;color:#fff}
.bo-copy-btn{background:#27ae60;color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:11px;font-weight:700;cursor:pointer}@keyframes boPulse{0%,100%{opacity:1}50%{opacity:.5}}.bo-pulse-text{animation:1.5s infinite boPulse;color:#e50914}