*,*::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:16px}
.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:12px}

.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:12px 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:6px;
  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 */
@media (max-width:768px){
  .modern-page{padding:12px}
  .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}
}
...
/* ===== 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}

/* ===== 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
}

/* ===== Responsive ===== */
@media (max-width:768px){
  .modern-page{padding:12px}
  .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%}
  .orig-links .linkbar{width:100%}
  .media-actions{flex-direction:column;align-items:stretch}
  #reportBtn{width:100%}
}
/* === 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;
}