/* Aflamicose V12: horizontal cards and safe page transitions. Requires V11 CSS. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark}
/* Keep the requested Arabic typography */
body,button,input,select,textarea{font-family:'Cairo',Tahoma,Arial,sans-serif!important}
/* Restore the WIDE original media appearance on all catalogue pages */
.media-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.media-cover{aspect-ratio:16/9!important;height:auto!important;min-height:0!important;max-height:none!important;display:block!important}
.media-cover img{display:block;width:100%!important;height:100%!important;position:absolute;inset:0;object-fit:cover!important;object-position:center!important}
.media-card{min-width:0!important}
.media-title{padding-top:10px!important}
/* Trending series should also be landscape, not round or portrait */
.trend-scroller{gap:15px!important}
.trend-item{flex:0 0 clamp(185px,19vw,270px)!important;text-align:right!important}
.trend-image{width:100%!important;height:auto!important;aspect-ratio:16/9!important;border-radius:9px!important;border:1px solid #383a46!important;display:block!important}
.trend-image img{display:block;width:100%!important;height:100%!important;object-fit:cover!important}
.trend-item strong{padding-inline:3px}
/* Episode thumbnails remain widescreen */
.episode-poster{aspect-ratio:16/9!important}
.episode-poster img{width:100%!important;height:100%!important;object-fit:cover!important}
/* Navigation: visual only; native links, browser Back and forms continue to work */
.main-nav a,.footer-cats a,.category-tile,.light-btn,.dark-btn,.episode-watch,.season-tab{
 transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
}
.main-nav a:hover,.footer-cats a:hover{transform:translateY(-2px)}
.main-nav a:focus-visible,.media-card:focus-visible,.episode-watch:focus-visible,.season-tab:focus-visible{outline:2px solid #ff5572;outline-offset:3px}
/* Browser-supported cross-page View Transitions without hijacking links */
@view-transition{navigation:auto}
::view-transition-old(root){animation:160ms ease-in both afl-fade-out}
::view-transition-new(root){animation:240ms ease-out both afl-fade-in}
@keyframes afl-fade-out{from{opacity:1}to{opacity:0}}
@keyframes afl-fade-in{from{opacity:0}to{opacity:1}}
@media(max-width:1050px){.media-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:700px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.trend-item{flex-basis:205px!important}}
@media(max-width:420px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.trend-item{flex-basis:180px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}