/* === base style === */
html {
  height: 100dvh;
}

html[device="ua-mo"],
html[device="tp-mo"] {
  max-height: calc(100dvh - env(safe-area-inset-bottom));
}

@media screen and (min-width: 481px) {

  html[device="ua-mo"],
  html[device="tp-mo"] {
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
  }
}

html[open="auth"] body {
  grid-template-columns: 1fr !important;
}

@media screen and (max-width: 480px) {
  html body {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 481px) {

  html body {
    grid-template-columns: max-content 1fr;
  }
}

html body #app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}

@media screen and (min-width: 481px) {

  html body #app {
    order: 2;
  }
}

[ui-type="root-views"],
[ui-type="page"] {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  min-height: 0;
  background: var(--bg-primary);
}

[ui-type="root-views"] [ui-type="root-view"],
[ui-type="page"] {
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}



/* === mobile === */
html[device="ua-mo"] body #app [ui-type="root-views"],
html[device="tp-mo"] body #app [ui-type="root-views"] {
  display: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
}

html[selecting="download"] body #app [ui-type="root-views"] {
  /* overflow-x: hidden; */
}

html[device="ua-mo"][open="home"] body #app [ui-type="root-views"],
html[device="ua-mo"][open="download"] body #app [ui-type="root-views"],
html[device="ua-mo"][open="market"] body #app [ui-type="root-views"],
html[device="ua-mo"][open="live"] body #app [ui-type="root-views"],
html[device="ua-mo"][open="settings"] body #app [ui-type="root-views"],
html[device="tp-mo"][open="home"] body #app [ui-type="root-views"],
html[device="tp-mo"][open="download"] body #app [ui-type="root-views"],
html[device="tp-mo"][open="market"] body #app [ui-type="root-views"],
html[device="tp-mo"][open="live"] body #app [ui-type="root-views"],
html[device="tp-mo"][open="settings"] body #app [ui-type="root-views"] {
  display: flex;
}

html[device="ua-mo"][nav="2"] body #app [ui-type="root-views"],
html[device="tp-mo"][nav="2"] body #app [ui-type="root-views"] {
  overflow-x: hidden;
}

html[device="ua-mo"] body #app [ui-type="root-views"] [ui-type="root-view"],
html[device="tp-mo"] body #app [ui-type="root-views"] [ui-type="root-view"] {
  height: auto;
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media screen and (max-width: 481px) {

  html body #app [ui-type="root-views"],
  html body #app [ui-type="root-views"] {
    overflow-x: hidden;
  }
}



/* === not a mobile === */
html:not([device="ua-mo"]):not([device="tp-mo"]) body #app [ui-type="root-views"] {
  display: none;
  overflow-x: hidden;
  grid-template-rows: 1fr;
  grid-column: 1fr;
}

html:is([open="home"], [open="download"], [open="market"], [open="live"], [open="settings"]):not([device="ua-mo"]):not([device="tp-mo"]) body #app [ui-type="root-views"] {
  display: grid;
}

html:not([device="ua-mo"]):not([device="tp-mo"]) body #app [ui-type="root-views"] [ui-type="root-view"] {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

html:not([device="ua-mo"]):not([device="tp-mo"]):not([open="home"]) body #app [ui-type="root-views"] [routeName="home"],
html:not([device="ua-mo"]):not([device="tp-mo"]):not([open="download"]) body #app [ui-type="root-views"] [routeName="download"],
html:not([device="ua-mo"]):not([device="tp-mo"]):not([open="market"]) body #app [ui-type="root-views"] [routeName="market"],
html:not([device="ua-mo"]):not([device="tp-mo"]):not([open="live"]) body #app [ui-type="root-views"] [routeName="live"],
html:not([device="ua-mo"]):not([device="tp-mo"]):not([open="settings"]) body #app [ui-type="root-views"] [routeName="settings"] {
  display: none;
}



/* === ui-type="page" === */
html:not([open="auth"]) body #app #auth-page,
html:not([open="tvMedia"]) body #app #tvMedia-page,
html:not([open="forgotPassword"]) body #app #forgotPassword-page,
html:not([open="movieMedia"]) body #app #movieMedia-page,
html:not([open="mediaDisplayer"]) body #app #mediaDisplayer-page,
html:not([open="account"]) body #app #account-page,
html:not([open="search"]) body #app #search-page,
html:not([open="categories"]) body #app #categories-page,
html:not([open="continueWatching"]) body #app #continueWatching-page,
html:not([open="mylist"]) body #app #mylist-page,
html:not([open="codeQr"]) body #app #codeQr-page,
html:not([open="modifyAccount"]) body #app #modifyAccount-page,
html:not([open="ticket"]) body #app #ticket-page,
html:not([open="iframeLive"]) body #app #iframeLive-page,
html:not([open="comingsoon"]) body #app #comingsoon-page,
html:not([open="guichet"]) body #app #guichet-page {
  display: none;
}



/* === SAFE AREA === */
#header.safeArea {
  transition: all var(--transition-fast);
  z-index: var(--z-sticky);
  min-height: var(--height-header);
}

@media screen and (max-width: 480px) {
  #header.safeArea {
    position: sticky;
    top: 0;
    padding-top: calc(env(safe-area-inset-top) + var(--gap-2xs));
  }
}

#header.safeArea:not(.change) {
  background: var(--color-scrim-top);
}

#header.change {
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
}