/* ──────────────────────────────────────────────────────────
   FictionX – moi-1  Oman TV channels page (fx-tv)
   Modern hero + responsive framed live player + channel cards.
   RTL-first using logical properties. No box-shadow on buttons
   per template UI rule (depth via borders + media overlays).
   ────────────────────────────────────────────────────────── */

.fx-tv{
    background:
        radial-gradient(900px 480px at 100% 0%, rgba(165,19,19,.05), transparent 60%),
        #f4f5f7;
    padding-top:6px;
    padding-bottom:64px;
}

/* ===== Hero band ===== */
.fx-tv__hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    text-align:center;
    padding:46px 0 40px;
    margin-bottom:40px;
    color:#fff;
    background:
        radial-gradient(700px 300px at 80% -10%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(135deg, #7d0f0f 0%, #a51313 55%, #c2302f 100%);
}
.fx-tv__hero::after{
    content:"";
    position:absolute;
    inset-block-end:-60px;inset-inline-end:-40px;
    width:240px;height:240px;border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
    z-index:-1;
}
.fx-tv__hero-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:62px;height:62px;
    margin-bottom:14px;
    border-radius:4px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.25);
    font-size:26px;color:#fff;
}
.fx-tv__hero-title{
    margin:0;
    font-size:30px;font-weight:800;letter-spacing:.3px;color:#fff;
}
.fx-tv__hero-sub{
    margin:10px auto 0;
    max-width:560px;
    font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.88);
}

/* ===== Player ===== */
.fx-tv__player-wrap{
    max-width:920px;
    margin:0 auto 8px;
}
.fx-tv__player-head{
    display:flex;align-items:center;gap:12px;
    margin-bottom:14px;
}
.fx-tv__player-title{
    margin:0;
    font-size:20px;font-weight:700;color:#15202b;
}
.fx-tv__live{
    display:inline-flex;align-items:center;gap:7px;
    padding:5px 12px;
    border-radius:4px;
    background:rgba(165,19,19,.10);
    color:#a51313;
    font-size:12.5px;font-weight:700;
    letter-spacing:.3px;
}
.fx-tv__live-dot{
    width:8px;height:8px;border-radius:50%;
    background:#a51313;
    animation:fxTvPulse 1.6s ease-in-out infinite;
}
@keyframes fxTvPulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:.35;transform:scale(.8);}
}
.fx-tv__player{
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.25%;          /* 16:9 ratio, reliable everywhere */
    border-radius:4px;
    overflow:hidden;
    background:#0b0e13;
    border:1px solid rgba(15,23,42,.10);
}
.fx-tv__player iframe,
.fx-tv__player video,
.fx-tv__player .flowplayer{
    position:absolute;
    top:0;inset-inline-start:0;
    width:100% !important;height:100% !important;
    border:none;
}
/* Radio embeds are short; let them keep an auto height */
.fx-tv__player--audio{
    height:auto;
    padding-bottom:0;
    background:#fff;
    padding:10px;
}
.fx-tv__player--audio iframe{
    position:relative;
    height:120px !important;
}

/* ===== Section label divider ===== */
.fx-tv__section-head{
    display:flex;align-items:center;justify-content:center;gap:16px;
    margin:48px auto 26px;
    max-width:520px;
}
.fx-tv__section-line{
    flex:1;height:1px;
    background:linear-gradient(90deg, transparent, rgba(15,23,42,.18), transparent);
}
.fx-tv__section-label{
    font-size:14px;font-weight:700;color:#3a4451;letter-spacing:.4px;
}

/* ===== Channels grid ===== */
.fx-tv__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.fx-tv-channel{
    position:relative;
    display:flex;
    align-items:stretch;
    gap:0;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:4px;
    overflow:hidden;
    text-decoration:none !important;
    color:inherit !important;
    isolation:isolate;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),
               border-color .35s ease;
}
.fx-tv-channel:hover{
    transform:translateY(-5px);
    border-color:rgba(165,19,19,.40);
}
.fx-tv-channel::before{
    content:"";
    position:absolute;
    top:0;inset-inline-start:0;
    width:3px;height:100%;
    background:linear-gradient(180deg,#a51313,#7d0f0f);
    transform:scaleY(0);transform-origin:top;
    transition:transform .35s ease;
    z-index:3;
}
.fx-tv-channel:hover::before{transform:scaleY(1);}

.fx-tv-channel__media{
    position:relative;
    flex:0 0 150px;
    align-self:stretch;
    min-height:120px;
    background-color:#f1f2f4;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    border-inline-end:1px solid rgba(15,23,42,.06);
}
.fx-tv-channel__play{
    position:absolute;
    inset-block-end:10px;inset-inline-start:10px;
    width:38px;height:38px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:rgba(165,19,19,.94);
    color:#fff;font-size:13px;
    border:2px solid rgba(255,255,255,.85);
    transition:transform .35s cubic-bezier(.22,.61,.36,1),background .25s ease;
}
.fx-tv-channel__play i{margin-inline-start:2px;}
.fx-tv-channel:hover .fx-tv-channel__play{
    transform:scale(1.1);
    background:#a51313;
}

.fx-tv-channel__body{
    flex:1;min-width:0;
    display:flex;flex-direction:column;justify-content:center;
    gap:6px;
    padding:18px 20px;
}
.fx-tv-channel__title{
    font-size:16px;font-weight:700;color:#15202b;
    transition:color .25s ease;
}
.fx-tv-channel:hover .fx-tv-channel__title{color:#a51313;}
.fx-tv-channel__desc{
    font-size:13px;line-height:1.7;color:#7a8590;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
}

/* ===== Responsive ===== */
@media (max-width:991px){
    .fx-tv__hero-title{font-size:25px;}
    .fx-tv__grid{gap:16px;}
}
@media (max-width:680px){
    .fx-tv__grid{grid-template-columns:1fr;}
    .fx-tv-channel__media{flex-basis:120px;}
}
@media (max-width:420px){
    .fx-tv-channel{flex-direction:column;}
    .fx-tv-channel__media{flex-basis:auto;height:140px;border-inline-end:0;border-block-end:1px solid rgba(15,23,42,.06);}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-tv-channel,
    .fx-tv-channel::before,
    .fx-tv-channel__play,
    .fx-tv-channel__title,
    .fx-tv__live-dot{
        transition:none !important;animation:none !important;
    }
    .fx-tv-channel:hover{transform:none !important;}
}