/* Farida IPTV for Android: the phone held upright. pc.js adds .portrait to <html> and sets --ph, the height of
   a 1080 px wide screen with the phone's shape (the TV screen is 1920×1080). Films and channels still play
   with the phone turned sideways: MainActivity turns it when the player opens. Colours: theme.js. */
.portrait, .portrait body, .portrait #app { width: 1080px; height: var(--ph); }

/* top bar: logo, prayer, clock; the sections move to a tab bar at the bottom */
.portrait #top { height: 130px; padding: 0 34px; }
.portrait .brand { font-size: 34px; }
.portrait .brand-mark { width: 62px; height: 62px; line-height: 62px; border-radius: 18px; }
.portrait #title { font-size: 24px; }
.portrait #salahChip { height: 62px; font-size: 26px; padding: 0 22px; border-radius: 31px; }
.portrait #salahChip small { display: none; }
.portrait #clock { font-size: 36px; }
.portrait #date { font-size: 20px; }
.portrait #nav { position: absolute; left: 0; right: 0; top: calc(var(--ph) - 156px); height: 156px; margin: 0; padding: 0 6px 10px; box-sizing: border-box; border-top: 2px solid; z-index: 30; }
.portrait .nv { flex: 1; flex-direction: column; justify-content: center; height: 136px; padding: 0; margin: 0; border-radius: 26px; font-size: 21px; }
.portrait .nv .ico { display: block; width: 50px; height: 50px; margin: 0 0 8px; }
.portrait .nv:after { display: none; }
.portrait .nv span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.portrait #hints { display: none; }

/* the category is one button at the top that opens the list of them; the channels or posters fill the rest */
.portrait #cats { display: none !important; }
.portrait #catPick { display: flex; position: absolute; top: 146px; left: 30px; right: 30px; height: 104px; box-sizing: border-box; padding: 0 40px;
  align-items: center; justify-content: space-between; border: 2px solid; border-radius: 52px; font-size: 36px; font-weight: 500; z-index: 5; }
.portrait #catPick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portrait #catPick .ico { flex: none; width: 46px; height: 46px; margin: 0 0 0 20px; }
.portrait [dir="ltr"] #catPick .ico { margin: 0 0 0 20px; }
.portrait #content, .portrait [dir="rtl"] #content,
.portrait .tab-live #content, .portrait [dir="rtl"] .tab-live #content { top: 276px; bottom: 176px; left: 30px; right: 30px; }
.portrait #top { -webkit-transition: background-color .2s; transition: background-color .2s; }
.portrait #side { display: none !important; }
.portrait .tab-home #content, .portrait [dir="rtl"] .tab-home #content { top: 0; left: 0; right: 0; bottom: 156px; }
.portrait .tab-settings #content, .portrait [dir="rtl"] .tab-settings #content,
.portrait .tab-prayer #content, .portrait [dir="rtl"] .tab-prayer #content { top: 150px; left: 30px; right: 30px; bottom: 176px; }

/* search: the keyboard centred on top, results below */
.portrait #kbd, .portrait [dir="rtl"] #kbd { top: 150px; bottom: auto; left: 330px; right: auto; width: 420px; height: 680px; }
.portrait .tab-search #content, .portrait [dir="rtl"] .tab-search #content { top: 850px; }

/* home: the picture on top with its poster, the text under it; the rows follow and the whole page scrolls */
.portrait #hero { height: 1320px; will-change: transform; }
.portrait .hero-poster, .portrait [dir="ltr"] .hero-poster { top: 170px; left: 50%; right: auto; margin-left: -210px; width: 420px; height: 630px; -webkit-transform: none; transform: none; }
.portrait .hero-fade { display: none; }
.portrait .hero-body, .portrait [dir="ltr"] .hero-body { top: 850px; left: 44px; right: 44px; width: auto; }
.portrait .hero-title { font-size: 66px; }
.portrait .hero-meta { font-size: 28px; white-space: normal; }
.portrait .hero-plot { font-size: 30px; max-height: 140px; }
.portrait .hero-btns { white-space: normal; }
.portrait .hbtn { height: 92px; padding: 0 44px; font-size: 34px; border-radius: 46px; margin-bottom: 14px; }
.portrait #homeRows { top: 0; }
.portrait .hrow-title { font-size: 34px; }
.portrait .k-wide .hrow { height: 316px; }
.portrait .wide { width: 500px; height: 282px; }
.portrait .wtitle { font-size: 32px; bottom: 52px; }
.portrait .wsub { font-size: 25px; bottom: 18px; }
.portrait .wplay { top: 64px; width: 76px; height: 76px; margin-left: -38px; border-radius: 38px; line-height: 76px; font-size: 38px; }
.portrait .k-poster .hrow { height: 420px; }
.portrait .k-poster .poster { width: 230px; height: 345px; }
.portrait .k-poster .ptitle { width: 230px; font-size: 24px; }
.portrait .k-browse .hrow { height: 196px; }

/* prayer times: the six times in two rows */
.portrait .pr-cards { flex-wrap: wrap; }
.portrait .pr-card { width: 31.5%; margin-bottom: 22px; }
.portrait .pr-next { flex-wrap: wrap; font-size: 32px; }
.portrait .pr-btns { white-space: normal; }
.portrait .pr-btn { height: 84px; font-size: 30px; margin: 0 8px 16px; }

/* settings: bigger rows for a finger */
.portrait .srow { height: 96px; font-size: 32px; }
.portrait .acct div { width: 100%; }

/* sign-in */
.portrait .login-card { width: auto; margin: 260px 30px 0; padding: 50px 50px; }

/* film and series pages: poster on top, text below */
.portrait .dposter, .portrait [dir="rtl"] .dposter { top: 120px; left: 50%; right: auto; margin-left: -190px; width: 380px; height: 570px; }
.portrait .dinfo, .portrait [dir="rtl"] .dinfo { top: 730px; left: 40px; right: 40px; bottom: 70px; }
.portrait .dinfo h1 { font-size: 52px; }
.portrait .dplot { max-height: 380px; }
.portrait .dbtns { white-space: normal; }
.portrait .dbtn { margin-bottom: 16px; height: 92px; font-size: 34px; }
.portrait #seriesPage .dposter, .portrait [dir="rtl"] #seriesPage .dposter { margin-left: -130px; width: 260px; height: 390px; }
.portrait #sInfo, .portrait [dir="rtl"] #sInfo { top: 540px; }
.portrait #sSeasons { white-space: normal; }

/* player, until the phone has turned sideways */
.portrait #video, .portrait #video.ar-zoom { left: 0; top: 0; width: 1080px; height: var(--ph); }

/* phones and tablets (pc.js adds .touch): the hints about remote keys mean nothing there */
.touch #hints, .touch #sHints, .touch #zapHint, .touch .c-hint { display: none !important; }

/* touch screens: no text selection or callout on a long press (it opens a card's options instead) */
.touch body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch input { -webkit-user-select: text; user-select: text; }
.touch .wmore { display: block; width: 84px; height: 84px; border-radius: 42px; top: 8px; right: 8px; }
.touch [dir="rtl"] .wmore { right: auto; left: 8px; }
.touch .wmore .ico { width: 48px; height: 48px; margin-top: 18px; }
/* the options sheet rises from the bottom of a phone held upright */
.portrait #sheet .sheet-card { position: absolute; left: 0; right: 0; bottom: 0; width: auto; margin: 0; padding: 40px 40px 56px; border-radius: 40px 40px 0 0; border-width: 3px 0 0; }
.portrait .sheet-title { font-size: 42px; }
.portrait .sheet-sub { font-size: 30px; }
.portrait .sopt { height: 120px; font-size: 38px; }
.portrait .sheet-opts.long { max-height: 1200px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* pages taller than the phone scroll with the finger: search results, a film's text */
.portrait .tab-search #content, .portrait .dinfo { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* a phone on its side (pc.js adds .wide and --pw): the TV layout stretched to the phone's whole width */
.wide, .wide body, .wide #app { width: var(--pw); }
.wide #video { width: var(--pw); }
.wide #video.ar-zoom { left: 0; top: 0; width: var(--pw); height: 1080px; object-fit: cover; }
#video { -webkit-transition: -webkit-transform 0.12s; transition: transform 0.12s; }

/* the Plus purchase box rises from the bottom of a phone held upright */
.portrait .plus-card { position: absolute; left: 0; right: 0; bottom: 0; width: auto; margin: 0; padding: 50px 46px 60px; border-radius: 40px 40px 0 0; border-width: 3px 0 0; }
.portrait .plus-card p { font-size: 36px; }
.portrait .plus-card.code { width: auto; margin: 0; display: block; }
.portrait .plus-how { font-size: 32px; }
.portrait .plus-dev span { font-size: 30px; }
.portrait .plus-dev b { font-size: 60px; }
.portrait .plus-btns button { padding: 30px 24px; font-size: 38px; }
/* the Plus chip shows next to the logo */
.portrait .plus-chip { font-size: 24px; margin: 0 10px; }
.portrait #salahBanner { top: 150px; width: 1000px; margin-left: -500px; }