
*,*::before,*::after{box-sizing:border-box}
html,body{background:#0d0d0d;color:#e7edf3;font-family:Arial,Helvetica,sans-serif!important;min-width:0!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:#bcd7ff;text-decoration:none}
a:hover{color:#e7f0ff}
button{font-family:inherit}

/* ===== Layout ===== */
.modern-page{max-width:980px;margin:0 auto;padding:0px}
.titlebar{background:#1f2227;border:1px solid #2b3038;border-radius:12px;padding:12px 16px;margin:12px 0;font-size:18px;font-weight:800;line-height:1.3;text-align:center}
.card{background:#1f2227;border:1px solid #2b3038;border-radius:12px;padding:14px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.card + .card{margin-top:6px}

.movie-wrapper{display:flex;flex-wrap:wrap;gap:20px;align-items:start}
.poster{flex:0 0 120px;max-width:120px}
.poster img{width:100%;height:auto;border:1px solid #fff;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.details{flex:1;min-width:200px}
.details .detail-row{display:flex;margin:4px 0;font-size:12px;line-height:1.55}
.details .label{color:#aeb2ba;font-weight:700;min-width:80px;margin-right:10px}
.details .value{color:#e7edf3}

/* Synopsis */
.synopsis{background:#1f2227;border:1px solid #2b3038;border-radius:12px;padding:14px}
.synopsis-title{position:relative;display:inline-block;font-size:18px;font-weight:700;margin:0 0 8px}
.synopsis-title::after{content:"";display:block;width:120px;height:3px;background:#2F77D1;border-radius:2px;margin-top:6px}
.synopsis p{font-size:12px;line-height:1.55;margin:0}

/* CTAs */
.cta-row{display:flex;gap:18px;justify-content:center;margin:14px 0}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 28px;border-radius:10px;background:#2a2a2a;border:1px solid #5e5e5e;color:#fff;font-weight:700;letter-spacing:.3px;min-width:240px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .15s ease,filter .15s ease}
.cta-btn span{margin-right:6px;font-size:14px}
.cta-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}

/* Big poster frame */
.poster-wrap{background:#1a1d22;border:1px solid #2b3038;border-radius:12px;padding:12px;text-align:center;margin:6px auto 18px;max-width:740px}
.poster-wrap img{display:block;margin:0 auto;max-width:100%;height:auto;border:1px solid #fff;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.55)}

/* External buttons under big poster */
.external-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:10px 0 6px;
}
.ext-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  border-radius:7px;
  background:#141414;
  border:1px solid #4a4a4a;
  color:#f5f5f5;
  font-size:13px;
  font-weight:600;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
  text-decoration:none;
  transition:background .15s ease,transform .15s ease,color .15s ease;
}
.ext-btn .play-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid currentColor;
  font-size:10px;
  line-height:1;
}
.ext-btn:hover{
  background:#a37a02;
  color:#fff;
  transform:translateY(-1px);
}

/* ===== Responsive (mobile) ===== */
@media (max-width:768px){

  /* CRITICAL: remove top gap under header */
  .modern-page{
    padding:0;
  }

  .movie-wrapper{
    flex-direction:column;
    align-items:center;
    gap:15px;
  }

  .poster{
    flex:none;
    max-width:150px;
  }

  .details{
    width:100%;
    max-width:100%;
  }

  .cta-row{
    flex-direction:column;
    align-items:stretch;
  }

  .cta-btn{
    width:100%;
  }

  .external-buttons{
    justify-content:center;
  }

  .ext-btn{
    flex:1 1 calc(50% - 8px);
    justify-content:center;
  }

  .orig-links .linkbar{
    width:100%;
  }

  .media-actions{
    flex-direction:column;
    align-items:stretch;
  }

  #reportBtn{
    width:100%;
  }
}

/* ===== Share + Report row (site bar look) ===== */
.media-actions{
  position:relative;           /* create stacking context so nothing overlays */
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:14px 0 12px;
  padding:10px 12px;
  background:#1f2227;
  border:1px solid #2b3038;
  border-radius:10px
}
.media-actions .left{display:flex;align-items:center;gap:8px;flex:1 1 auto}
.media-actions .right-holder{flex:0 0 auto}
.a2a_kit{position:relative;z-index:2}   /* keep share above poster */

/* Report button */
#reportBtn{
  position:relative;            /* own stacking context */
  z-index:10001;                /* above neighbors */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  min-width:260px;
  padding:0 18px;
  line-height:1;
  border-radius:8px;
  background:#2F77D1;
  border:1px solid #2b3038;
  color:#fff;
  font-weight:700;
  letter-spacing:.3px;
  cursor:pointer
}
#reportBtn:hover{filter:brightness(1.06)}
#reportBtn.reported{background:#2ecc71;border-color:#1f8a45;color:#fff;pointer-events:none;cursor:default}
#reportBtn.already-reported{background:#f39c12;border-color:#c87f0a;color:#fff;pointer-events:none;cursor:default}

/* Force amber even if other rules try to override */
#reportBtn.already-reported,
.media-actions #reportBtn.already-reported,
.cta-row #reportBtn.already-reported{
  background:#f39c12 !important;
  border-color:#c87f0a !important;
  color:#fff !important;
  pointer-events:none;
  cursor:default;
}


/* ===== Report modal (supports BOTH old and new markup) ===== */
/* container overlay */
#reportModal,
.report-modal,
.report-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:100000;
  justify-content:center;
  align-items:center;
}
/* inner content box */
.report-modal-content,         /* new pages */
.report-modal .box,            /* legacy pages */
.report-modal-overlay .box{    /* if overlay class used with .box */
  background:#333;
  border:1px solid #555;
  color:#fff;
  width:90%;
  max-width:420px;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,.5);
  padding:18px;
  position:relative;
  font-size:13px
}
/* headings & close */
.report-modal-content h3,
.report-modal h3{margin:0 0 12px;text-align:center;font-weight:700}
.report-modal-content .close-btn,
#repClose{position:absolute;right:12px;top:8px;font-size:26px;cursor:pointer;color:#aaa;background:transparent;border:0}
.report-modal-content .close-btn:hover,
#repClose:hover{color:#fff}
/* form items */
.report-modal-content label,
.report-modal label{display:block;margin:8px 0;cursor:pointer;font-size:12px}
.report-modal-content textarea,
.report-modal textarea{width:100%;min-height:90px;background:#444;border:1px solid #555;border-radius:6px;color:#eee;padding:10px;resize:vertical;font-size:12px}
/* submit */
.report-modal-content button[type="submit"],
.report-modal .btn.primary{
  display:block;margin:16px auto 0;background:#2F77D1;border:1px solid #2b3038;color:#fff;font-weight:700;border-radius:8px;padding:10px 16px;cursor:pointer
}

/* === Fix: Report modal header styling === */
.report-modal-content h3 {
  color: #fff;                   /* keep title white */
  margin: 0 0 12px;
  text-align: center;
  font-weight: 700;
}

/* The "IMPORTANT" note box inside the modal */
.report-modal-content .note-box {
  background: #2a2e36;           /* dark card */
  border: 1px solid #3a3f47;
  color: #e7edf3;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 8px 0 12px;
}
.report-modal-content .note-box strong {
  color: #fff;                   /* ensure "IMPORTANT:" is white, not orange */
}

/* === Fix: toolbar 'Report broken link' success state === */
/* Make sure nothing can override the green */
#reportBtn.reported,
.media-actions #reportBtn.reported,
.cta-row #reportBtn.reported {
  background: #2ecc71 !important;    /* green */
  border-color: #1f8a45 !important;
  color: #fff !important;
  pointer-events: none;
  cursor: default;
}

/* Keep the default (non-reported) button styling explicit */
#reportBtn {
  background: #2F77D1;
  border: 1px solid #2b3038;
  color: #fff;
}

/* (Optional) ensure modal submit button stays blue */
.report-modal-content button[type="submit"] {
  background: #2F77D1;
  border: 1px solid #2b3038;
  color: #fff;
}

/* ===== Limit reached (5 fixes every 24 hours) ===== */
#reportBtn.limit-reached,
.media-actions #reportBtn.limit-reached,
.cta-row #reportBtn.limit-reached{
  background: #c0392b !important;   /* deep red */
  border-color: #922b21 !important;
  color: #fff !important;
  pointer-events: none;
  cursor: default;
}

/* ===== TMDb poster frame (big poster, 629x358 black bg, poster 230x352 centered) ===== */
.poster-wrap{background:#000;border:1px solid #2b3038;border-radius:12px;padding:0;text-align:center;margin:12px auto 18px;max-width:629px;height:358px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.poster-wrap a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none}
.tmdb-poster-frame{position:relative;display:inline-flex;align-items:center;justify-content:center;width:230px;height:352px;flex-shrink:0;cursor:pointer}
.tmdb-poster-img{width:230px;height:352px;object-fit:cover;border:1px solid #fff;border-radius:4px;display:block;transition:filter .25s ease}
.tmdb-poster-frame:hover .tmdb-poster-img{filter:brightness(0.7)}
.tmdb-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.tmdb-play-icon{width:72px;height:72px;opacity:.88;transition:opacity .25s ease,transform .25s ease;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.tmdb-poster-frame:hover .tmdb-play-icon{opacity:1;transform:scale(1.12)}

/* Fallback play button when no TMDb poster found (new-style Watch Player pages) */
.watch-player-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;text-decoration:none;transition:transform .2s ease}
.watch-player-fallback:hover{transform:scale(1.08)}
.watch-player-fallback:hover svg circle{fill:rgba(47,119,209,1)}
.watch-player-label{color:#fff;font-size:15px;font-weight:700;letter-spacing:.5px;text-shadow:0 1px 4px rgba(0,0,0,.8)}




/* ===================================================================
   INLINE PLAYER  —  patch_player.py v6
   =================================================================== */

/* Outer wrapper */
.player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 400px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1e2535;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
  margin: 14px 0 0;
}

/* Poster placeholder */
.player-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; overflow: hidden;
}
.player-placeholder .pp-bg {
  position: absolute; inset: -20px;
  background-size: cover; background-position: center;
  filter: blur(12px) brightness(.45);
  transform: scale(1.05);
}
.player-placeholder .pp-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 50px;
  background: #f5c518; color: #111;
  font-size: 17px; font-weight: 800;
  border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 24px rgba(0,0,0,.6);
  transition: transform .15s, background .15s; user-select: none;
}
.player-placeholder .pp-btn:hover  { background: #ffd740; transform: scale(1.04); }
.player-placeholder .pp-btn:active { transform: scale(.98); }
.player-placeholder .pp-btn svg    { flex-shrink: 0; }

/* Iframe */
#playerFrame {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  border: none !important; display: none; background: #000; z-index: 1;
}

/* Loading spinner */
.player-loader {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.75); z-index: 3;
}
.player-loader.on { display: flex; }
.player-spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.12); border-top-color: #f5c518;
  border-radius: 50%; animation: _pspin .75s linear infinite;
}
@keyframes _pspin { to { transform: rotate(360deg); } }

/* ── Button row ──────────────────────────────────────────────────── */
/* flex-nowrap on desktop so all buttons stay on one line             */
.server-row {
  display: flex;
  flex-wrap: nowrap;        /* single line on desktop */
  gap: 6px;
  margin: 10px 0 4px;
  overflow-x: auto;         /* scroll if buttons overflow on narrow screens */
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;       /* prevent last button from being clipped       */
  scrollbar-width: none;    /* hide scrollbar — buttons fit on normal screens */
}
.server-row::-webkit-scrollbar { display: none; }

/* Player buttons */
.server-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 7px;
  background: #141820; border: 1px solid #252d3d;
  color: #cbd5e1; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  text-decoration: none; user-select: none; font-family: inherit;
  white-space: nowrap; flex-shrink: 0;
}
.server-btn .pc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid currentColor; font-size: 8px; flex-shrink: 0;
  padding-top: 3px;         /* shift triangle down for perfect visual centering */
}
.server-btn:hover  { background: #1d2436; border-color: #3b82f6; color: #93c5fd; transform: translateY(-1px); }
.server-btn.active { background: #1e3a5f; border-color: #3b82f6; color: #60a5fa; box-shadow: 0 0 0 1px #3b82f6 inset; }

/* Thin divider */
.server-sep { width: 1px; min-width: 1px; height: 30px; background: #1e2535; margin: 0 2px; flex-shrink: 0; align-self: center; }

/* Download buttons */
.dl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 7px;
  background: #141820; border: 1px solid #252d3d;
  color: #94a3b8; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all .15s;
  white-space: nowrap; flex-shrink: 0;
}
.dl-btn:hover { background: #1d2436; border-color: #22c55e; color: #86efac; transform: translateY(-1px); }
.dl-btn svg   { flex-shrink: 0; }

/* On small screens allow wrap */
@media (max-width: 600px) {
  .server-row { flex-wrap: wrap; overflow-x: visible; }
  .server-sep { display: none; }
  .server-btn, .dl-btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
}
