/* ── JLEX Responsive Overrides ──────────────────────────────
   Fills gaps the StreamIT template leaves on mobile/tablet.
   ─────────────────────────────────────────────────────────── */

/* ── Header height safety net ────────────────────────────── */
/* CSS fallback — overridden by JS on DOMContentLoaded.
   Must be >= actual navbar height to prevent flash.          */
:root { --header-height: 90px; }

/* Enforce padding so content never hides under fixed header  */
.main-content { padding-top: var(--header-height, 90px) !important; }

/* s-margin: inner page top breathing room (undefined in template) */
.s-margin { padding-top: 40px !important; }

/* Pages with standalone layout (no main-content wrapper)     */
.e404-wrap   { padding-top: calc(var(--header-height, 90px) + 40px); }
.pf-wrap     { padding-top: calc(var(--header-height, 90px) + 20px); }

/* ── Safe area (iPhone X+, PWA standalone) ────────────────── */
body {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.jp-controls { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* ── Navbar ───────────────────────────────────────────────── */
.iq-navbar { padding: 0 12px; }
.navbar-brand img { max-height: 32px !important; }

/* Mobile offcanvas nav */
@media (max-width: 1199px) {
  .mobile-offcanvas { width: min(280px, 85vw) !important; }
  .mobile-offcanvas .navbar-nav .nav-link { padding: 10px 16px; font-size: .9rem; }
  .right-panel { gap: 4px; }
  .navbar-toggler-btn { display: flex !important; }
}

/* ── Hero / Sliders ───────────────────────────────────────── */
@media (max-width: 767px) {
  .iq-main-slider { min-height: 240px; }
  .slider-inner .slider-main { padding: 24px 16px; }
  .slider-inner h1, .slider-inner h2 { font-size: 1.4rem !important; }
  .slider-inner p  { font-size: .85rem; -webkit-line-clamp: 3; }
  .trending-info .d-flex.gap-3 { gap: 8px !important; }
  .btn-sm, .btn { font-size: .78rem; padding: 7px 14px; }
}

/* ── Content cards ────────────────────────────────────────── */
@media (max-width: 575px) {
  /* 2 cards per row on small phones */
  .row-cols-md-3 > *, .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50%; }
  .epi-name { font-size: .75rem !important; }
}

/* ── Movie / Show detail pages ────────────────────────────── */
@media (max-width: 767px) {
  .trending-info { padding: 16px !important; }
  .trending-info h4 { font-size: 1.2rem !important; }
  .iq-detail-cast { gap: 8px !important; }
  .cast-img { width: 52px !important; height: 52px !important; }
  .rating-box { flex-direction: column; gap: 6px; }
}

/* ── Watch page ───────────────────────────────────────────── */
.watch-wrap { padding: 0 !important; }
@media (min-width: 768px) {
  .watch-wrap { padding: 24px 24px 60px !important; }
}
@media (max-width: 767px) {
  .watch-meta, .watch-ep-list { padding: 14px 12px !important; }
  .watch-meta h4 { font-size: 1rem !important; }
}

/* ── JPlayer mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --jp-btn: 34px; }
  .jp-time { display: none; }
  .jp-skip-btn span { display: none !important; }
  .jp-next-ep span  { display: none !important; }
  .jp-topbar { padding: 10px 12px 20px; }
  .jp-controls { padding: 0 10px 10px; }
  .jp-resume { flex-direction: column; gap: 8px; padding: 12px 16px; bottom: 70px; }
}

/* ── All/Keşfet gallery ───────────────────────────────────── */
@media (max-width: 480px) {
  /* Defined in all.php inline CSS but these strengthen it */
  .all-filters { flex-wrap: wrap; gap: 6px !important; }
  .all-filters select { font-size: .75rem; padding: 6px 10px; }
}

/* ── Swiper ───────────────────────────────────────────────── */
@media (max-width: 575px) {
  .swiper-button-next, .swiper-button-prev { display: none !important; }
}

/* ── Footer ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer .row > div { margin-bottom: 28px !important; }
  .footer-bottom .d-flex { justify-content: center; flex-wrap: wrap; gap: 6px; }
  .footer .col-xl-3 .contact { font-size: .95rem; }
  .widget_social_media { gap: 6px !important; }
}

/* ── Auth pages ───────────────────────────────────────────── */
@media (max-width: 575px) {
  .sign-in-page { padding: 20px 0; }
  .sign-in-detail { padding: 24px !important; }
}

/* ── Tables / overflows ───────────────────────────────────── */
@media (max-width: 767px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Typography scale ─────────────────────────────────────── */
@media (max-width: 575px) {
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }
  .display-1 { font-size: 3.5rem !important; }
}

/* ── PWA standalone mode tweaks ───────────────────────────── */
@media (display-mode: standalone) {
  /* Add top padding for iOS status bar in standalone */
  .iq-navbar { padding-top: env(safe-area-inset-top, 0px); }
  /* Hide browser-level back button hint */
  .e404-back-hint { display: none; }
}

/* ── Touch targets ─────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Ensure tap targets are at least 44×44px */
  .nav-link { min-height: 44px; display: flex; align-items: center; }
  .btn { min-height: 42px; }
  a.iq-sub-card { min-height: 44px; }
  .jp-btn { min-width: 44px; min-height: 44px; }
}

/* ── Scrollbar (webkit) ────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }