/* alishahitv.css
   Professional, RTL-friendly, responsive stylesheet for alishahitv plugin
   - Designed for modern and older browsers (graceful fallbacks)
   - Includes player layout, overlays, logo, subtitle, EPG, admin preview modal, controls and accessibility
   - Place this file next to alishahitv.php and alishahitv.js
*/

/* -------------------------
   Variables (simple fallback)
   ------------------------- */
:root {
  --tv-bg: #000000;
  --tv-foreground: #ffffff;
  --overlay-bg: rgba(0,0,0,0.6);
  --accent: #ff6b00;
  --muted: rgba(255,255,255,0.12);
  --radius: 8px;
  --max-width: 1200px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "IRANSans", sans-serif;
}

/* -------------------------
   Base / Reset
   ------------------------- */
.alishahitv-player,
.alishahitv-player * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-sans);
}

/* -------------------------
   Player container
   ------------------------- */
.alishahitv-player {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--tv-bg);
  color: var(--tv-foreground);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* Video element */
.alishahitv-player video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  outline: none;
}

/* Make sure native controls don't overlap overlays in some browsers */
.alishahitv-player video::-webkit-media-controls {
  z-index: 0;
}

/* -------------------------
   Logo (top-right)
   ------------------------- */
.alishahitv-logo {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1200;
  max-width: 110px;
  height: auto;
  padding: 4px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  opacity: 0.98;
}

/* If logo is an <img> inside wrapper */
.alishahitv-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

/* -------------------------
   Subtitle / Title overlay (top-right, left of logo)
   ------------------------- */
.alishahitv-subtitle {
  position: absolute;
  top: 12px;
  right: 140px;
  z-index: 1100;
  max-width: calc(100% - 180px);
  color: var(--tv-foreground);
  background: var(--overlay-bg);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.2;
  text-align: right;
  direction: rtl;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .18s ease, transform .18s ease;
}

/* If no logo present, move subtitle to edge */
.alishahitv-player:not(:has(.alishahitv-logo)) .alishahitv-subtitle {
  right: 12px;
  max-width: calc(100% - 24px);
}

/* Small subtitle variant for mobile */
@media (max-width: 600px) {
  .alishahitv-subtitle { display: none; } /* hide on very small screens to avoid overlap */
}

/* -------------------------
   Bottom overlay (info bar)
   ------------------------- */
.alishahitv-player .tv-overlay-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Left and right sections (RTL-aware) */
.alishahitv-player .tv-overlay-bottom .left,
.alishahitv-player .tv-overlay-bottom .right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Badge */
.alishahitv-badge {
  background: rgba(255,255,255,0.06);
  color: var(--tv-foreground);
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.04);
}

/* -------------------------
   EPG (frontend)
   ------------------------- */
.alishahitv-epg-frontend {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  color: #222;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}
.alishahitv-epg-frontend thead { background: #f7f7f7; }
.alishahitv-epg-frontend th,
.alishahitv-epg-frontend td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid #eee;
}
.alishahitv-epg-frontend tr:last-child td { border-bottom: none; }

/* Compact EPG for small screens */
@media (max-width: 700px) {
  .alishahitv-epg-frontend th, .alishahitv-epg-frontend td { padding: 8px; font-size: 13px; }
}

/* -------------------------
   Admin playlist & preview modal
   ------------------------- */
.alishahitv-playlist {
  background: #fafafa;
  border: 1px solid #eaeaea;
  padding: 10px;
  border-radius: 6px;
}
.alishahitv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid #eee;
}
.alishahitv-item .left { flex: 1; padding-right: 10px; text-align: right; }
.alishahitv-item .actions { min-width: 220px; text-align: left; }

/* Modal preview */
.alishahitv-preview-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.alishahitv-preview-box {
  width: 900px;
  max-width: 95%;
  background: #111;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* -------------------------
   Buttons & inputs
   ------------------------- */
.alishahitv-btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg,#fff,#f5f5f5);
  color: #222;
  cursor: pointer;
  font-size: 13px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.alishahitv-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.alishahitv-input {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* Small utility */
.alishahitv-hidden { display: none !important; }
.alishahitv-muted { opacity: 0.6; }

/* -------------------------
   Loading / skeleton
   ------------------------- */
.alishahitv-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 2000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.12);
  border-top-color: var(--tv-foreground);
  animation: alishahitv-spin 1s linear infinite;
}
@keyframes alishahitv-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* -------------------------
   Accessibility
   ------------------------- */
.alishahitv-btn:focus,
.alishahitv-item:focus,
.alishahitv-player video:focus {
  outline: 3px solid rgba(255,255,255,0.12);
  outline-offset: 2px;
}

/* High-contrast mode support */
@media (prefers-contrast: more) {
  .alishahitv-subtitle { background: rgba(0,0,0,0.85); }
  .alishahitv-logo { box-shadow: none; }
}

/* -------------------------
   Responsive tweaks
   ------------------------- */
@media (max-width: 900px) {
  .alishahitv-subtitle { font-size: 14px; right: 120px; max-width: calc(100% - 140px); top: 10px; padding: 6px 10px; }
  .alishahitv-logo { max-width: 90px; top: 10px; right: 10px; }
  .alishahitv-player .tv-overlay-bottom { padding: 8px; }
}

@media (max-width: 600px) {
  .alishahitv-subtitle { display: none; }
  .alishahitv-logo { top: 8px; right: 8px; max-width: 72px; }
  .alishahitv-player .tv-overlay-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* -------------------------
   Print-friendly
   ------------------------- */
@media print {
  .alishahitv-player, .alishahitv-epg-frontend { page-break-inside: avoid; }
  .alishahitv-btn, .alishahitv-preview-modal { display: none !important; }
}

/* -------------------------
   Backwards compatibility helpers
   ------------------------- */
/* :has() is not supported in older browsers; provide a simple fallback by hiding subtitle if logo missing via JS if needed. */

/* -------------------------
   Notes for integrators
   ------------------------- */
/*
 - This CSS assumes the HTML structure produced by alishahitv.php and alishahitv.js:
   .alishahitv-shortcode-wrap > .alishahitv-player
   .alishahitv-logo (img or wrapper)
   .alishahitv-subtitle
   .tv-overlay-bottom (with .left and .right)
   EPG container: .alishahitv-epg-frontend
 - For older browsers that don't support :has(), the plugin JS can toggle classes like .has-logo on .alishahitv-player to adjust subtitle position.
 - To change colors or fonts, override the :root variables at the top of this file or in your theme.
*/