/* === MDL MOBILE HEADER NATIVE V1 === */

/*
 * Native-first mobile navigation.
 *
 * No JavaScript is required to construct or open this header.
 * Existing site JS may still handle Pre-Register and languages.
 */

.mdl-mobile-native-header {
  display: none;
}


@media (max-width: 620px) {

  /*
   * Desktop header is hidden only on phone width.
   */

  #site-shell > header {
    display: none !important;
  }


  #site-shell
  > .mdl-mobile-native-header {
    display: block !important;
  }


  .mdl-mobile-native-header {
    position: sticky;
    top: 0;
    z-index: 10000;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;

    padding-top:
      env(safe-area-inset-top, 0px);

    background:
      rgba(2, 13, 27, .98);

    border-bottom:
      1px solid rgba(75, 184, 255, .18);

    box-sizing:
      border-box;
  }


  .mdl-mobile-native-row {
    display: grid;

    grid-template-columns:
      minmax(72px, 1fr)
      minmax(96px, 120px)
      44px;

    align-items: center;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    gap: 8px;

    padding: 9px 12px;

    box-sizing:
      border-box;
  }


  .mdl-mobile-native-brand {
    display: flex;

    align-items: center;

    min-width: 0;

    overflow: hidden;
  }


  .mdl-mobile-native-brand
  > a {
    display: flex !important;

    align-items: center !important;

    width: 78px !important;
    max-width: 78px !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;

    box-sizing:
      border-box !important;
  }


  .mdl-mobile-native-brand
  img,

  .mdl-mobile-native-brand
  svg {
    display: block !important;

    width: 76px !important;
    max-width: 76px !important;

    height: auto !important;

    margin: 0 !important;

    object-fit: contain !important;
  }


  .mdl-mobile-native-cta {
    display: flex;

    justify-content: center;

    min-width: 0;
  }


  .mdl-mobile-native-cta
  .js-open-registration {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 120px !important;
    min-width: 0 !important;
    min-height: 43px !important;

    margin: 0 !important;

    padding: 7px 9px !important;

    border: 0 !important;

    border-radius:
      10px !important;

    background:
      linear-gradient(
        135deg,
        #ff9f18,
        #ff7900
      ) !important;

    color:
      #ffffff !important;

    font: inherit !important;
    font-weight: 800 !important;

    line-height: 1.08 !important;

    text-align: center !important;

    white-space: normal !important;

    box-sizing:
      border-box !important;
  }


  .mdl-mobile-native-details {
    position: static;

    width: 44px;
    max-width: 44px;

    margin: 0;
    padding: 0;
  }


  .mdl-mobile-native-details
  > summary {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 0;

    border:
      1px solid rgba(73, 184, 255, .34);

    border-radius: 10px;

    background:
      rgba(10, 32, 57, .9);

    color:
      #ffffff;

    font-size: 24px;

    line-height: 1;

    list-style: none;

    cursor: pointer;

    box-sizing:
      border-box;
  }


  .mdl-mobile-native-details
  > summary::-webkit-details-marker {
    display: none;
  }


  .mdl-mobile-native-details
  > summary::marker {
    content: "";
  }


  .mdl-mobile-native-details[open]
  > summary {
    border-color:
      rgba(65, 196, 255, .68);

    background:
      rgba(17, 56, 94, .96);
  }


  .mdl-mobile-native-menu {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    width: 100vw;
    max-width: 100vw;
    min-width: 0;

    max-height:
      calc(100vh - 72px);

    overflow-y: auto;
    overflow-x: hidden;

    padding:
      8px 14px 20px;

    background:
      #061527;

    border-top:
      1px solid rgba(88, 185, 255, .13);

    box-shadow:
      0 18px 40px rgba(0, 0, 0, .35);

    box-sizing:
      border-box;
  }


  .mdl-mobile-native-menu
  nav {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
  }


  .mdl-mobile-native-menu
  nav
  a {
    display: block !important;

    position: static !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding:
      11px 8px !important;

    border-bottom:
      1px solid rgba(255, 255, 255, .06) !important;

    color:
      #e8f4ff !important;

    text-decoration:
      none !important;

    text-align: start !important;

    white-space:
      normal !important;

    box-sizing:
      border-box !important;
  }


  .mdl-mobile-native-menu
  nav
  a:hover,

  .mdl-mobile-native-menu
  nav
  a:focus-visible {
    color:
      #53d8ff !important;
  }


  .mdl-mobile-native-languages {
    display: flex;

    flex-wrap: wrap;

    width: 100%;
    max-width: 100%;

    gap: 8px;

    padding:
      14px 0 10px;
  }


  .mdl-mobile-native-languages
  [data-mdl-language] {
    position: static !important;

    min-width: 48px !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
      8px 11px !important;

    border:
      1px solid rgba(87, 185, 255, .26) !important;

    border-radius:
      999px !important;

    background:
      rgba(10, 34, 61, .74) !important;

    color:
      #dcecff !important;

    font: inherit !important;

    cursor:
      pointer !important;

    box-sizing:
      border-box !important;
  }


  .mdl-mobile-native-languages
  [data-mdl-language][aria-pressed="true"],

  .mdl-mobile-native-languages
  [data-mdl-language].is-active {
    border-color:
      #42bfff !important;

    background:
      rgba(29, 112, 171, .48) !important;

    color:
      #ffffff !important;
  }


  .mdl-mobile-native-dashboard {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-top: 8px;
  }


  .mdl-mobile-native-dashboard
  .mdl-dashboard-button {
    display: flex !important;

    position: static !important;

    align-items: center !important;

    justify-content:
      space-between !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 12px !important;

    border:
      1px dashed rgba(89, 168, 220, .28) !important;

    border-radius:
      10px !important;

    background:
      rgba(5, 20, 37, .76) !important;

    color:
      #aabed1 !important;

    pointer-events:
      none !important;

    white-space:
      normal !important;

    box-sizing:
      border-box !important;
  }


  .mdl-mobile-native-header,
  .mdl-mobile-native-header * {
    box-sizing:
      border-box;

    max-width:
      100%;
  }


  html[dir="rtl"]
  .mdl-mobile-native-header {
    direction: rtl;

    text-align: right;
  }


  html[dir="ltr"]
  .mdl-mobile-native-header {
    direction: ltr;

    text-align: left;
  }
}

/* === MDL MOBILE LANGUAGE STRIP V1 START === */

@media (max-width: 620px) {

  /*
   * Permanent second row:
   * EN | FR | ES | العربية
   */

  .mdl-mobile-native-header
  > .mdl-mobile-native-languages {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    gap: 6px !important;

    margin: 0 !important;

    padding: 0 12px 9px !important;

    border-top:
      1px solid rgba(87, 185, 255, .08);

    box-sizing:
      border-box !important;
  }


  .mdl-mobile-native-header
  > .mdl-mobile-native-languages
  [data-mdl-language] {
    flex:
      0 1 auto !important;

    min-width:
      45px !important;

    max-width:
      none !important;

    margin:
      0 !important;

    padding:
      7px 10px !important;

    white-space:
      nowrap !important;

    line-height:
      1.1 !important;
  }


  .mdl-mobile-native-header
  > .mdl-mobile-native-languages
  [data-mdl-language="ar"] {
    min-width:
      70px !important;
  }
}

/* === MDL MOBILE LANGUAGE STRIP V1 END === */