/* WAYZAWAY_UI_FIXES_R6H5 */

@media (max-width:680px) {
  body.wz-public-seo-page .wz-public-header { z-index:2147483001!important; }
  body.wz-public-seo-page .wz-public-header-inner { position:relative!important; z-index:2!important; }
  body.wz-public-seo-page .wz-public-mobile-menu,
  body.wz-public-seo-page .wz-legacy-public-menu {
    position:fixed!important; top:76px!important; left:0!important; right:0!important;
    max-height:calc(100dvh - 76px)!important; overflow-y:auto!important; z-index:2147483000!important;
  }
  html.wz-native-app body.wz-public-seo-page .wz-public-mobile-menu,
  html.wz-native-app body.wz-public-seo-page .wz-legacy-public-menu {
    top:calc(76px + var(--wz-public-status-clearance,22px))!important;
    max-height:calc(100dvh - 76px - var(--wz-public-status-clearance,22px))!important;
  }

  body.wz-public-seo-page .wz-public-mobile-menu a.wz-public-primary-button,
  body.wz-public-seo-page .wz-legacy-public-menu a.wz-public-primary-button,
  body.wz-public-pricing-modern .wz-public-mobile-menu a.wz-public-primary-button,
  body.wz-public-pricing-modern .wz-legacy-public-menu a.wz-public-primary-button {
    display:flex!important; align-items:center!important; justify-content:center!important;
    box-sizing:border-box!important; width:100%!important; min-height:46px!important;
    padding:.7rem 1.1rem!important; background:#ec0052!important; color:#fff!important;
    border:2px solid #ec0052!important; border-radius:12px!important;
    text-decoration:none!important; font-weight:700!important;
  }
  body.wz-public-seo-page .wz-public-mobile-menu a.wz-public-primary-button:visited,
  body.wz-public-seo-page .wz-public-mobile-menu a.wz-public-primary-button:hover,
  body.wz-public-seo-page .wz-public-mobile-menu a.wz-public-primary-button:focus,
  body.wz-public-seo-page .wz-legacy-public-menu a.wz-public-primary-button:visited,
  body.wz-public-seo-page .wz-legacy-public-menu a.wz-public-primary-button:hover,
  body.wz-public-seo-page .wz-legacy-public-menu a.wz-public-primary-button:focus,
  body.wz-public-pricing-modern .wz-public-mobile-menu a.wz-public-primary-button:visited,
  body.wz-public-pricing-modern .wz-public-mobile-menu a.wz-public-primary-button:hover,
  body.wz-public-pricing-modern .wz-public-mobile-menu a.wz-public-primary-button:focus,
  body.wz-public-pricing-modern .wz-legacy-public-menu a.wz-public-primary-button:visited,
  body.wz-public-pricing-modern .wz-legacy-public-menu a.wz-public-primary-button:hover,
  body.wz-public-pricing-modern .wz-legacy-public-menu a.wz-public-primary-button:focus {
    color:#fff!important; text-decoration:none!important;
  }

  body.wz-public-pricing-modern header { z-index:1004!important; }
  body.wz-public-pricing-modern .wz-public-mobile-menu,
  body.wz-public-pricing-modern .wz-legacy-public-menu {
    position:fixed!important;
    top:var(--wz-r5-pricing-menu-top,80px)!important;
    left:0!important;
    right:0!important;
    max-height:calc(100dvh - var(--wz-r5-pricing-menu-top,80px))!important;
    overflow-y:auto!important;
    z-index:1003!important;
  }
}

@media (max-width:700px) {
  .wzue-head {
    display:flex!important; flex-direction:row!important; align-items:flex-start!important;
    justify-content:space-between!important; gap:12px!important;
  }
  .wzue-heading,
  .wzue-heading.wz-event-meta-row-r4b {
    display:block!important; flex:1 1 auto!important; min-width:0!important; width:auto!important;
  }
  .wzue-category,.wzue-title { display:block!important; }
  .wzue-posted,
  .wzue-posted.wz-event-meta-text-r4b {
    display:flex!important; flex-flow:row nowrap!important; align-items:center!important;
    min-width:0!important; width:auto!important; margin-top:7px!important;
    font-size:.86rem!important; line-height:1.4!important; white-space:nowrap!important;
  }
  .wzue-posted *, .wzue-posted.wz-event-meta-text-r4b * {
    white-space:nowrap!important; font-size:inherit!important;
  }
  .wzue-posted .wz-b1-fav-star,
  .wzue-posted .wz-b1-fav-star-inline,
  .wzue-posted .wz-event-star-r4b {
    position:static!important; flex:0 0 22px!important; align-self:center!important;
    width:22px!important; height:22px!important; margin:0 0 0 6px!important;
    padding:0!important; transform:none!important;
  }

  body .wz-settings-row-r5 {
    position:relative!important; box-sizing:border-box!important; padding-right:112px!important;
  }
  body .wz-settings-main-icon-r5 {
    position:absolute!important; right:62px!important; top:50%!important;
    width:28px!important; height:28px!important; margin:0!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    transform:translateY(-50%)!important;
  }
  body .wz-settings-arrow-r5,
  body .wz-settings-row-r5 > .v-expansion-panel-title__icon {
    position:absolute!important; right:20px!important; top:50%!important;
    width:28px!important; height:28px!important; margin:0!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    transform:translateY(-50%)!important;
  }
  body .wz-settings-row-r5[aria-expanded="true"] .wz-settings-arrow-r5,
  body .wz-settings-row-r5[aria-expanded="true"] > .v-expansion-panel-title__icon {
    transform:translateY(-50%) rotate(180deg)!important;
  }
  body .wz-settings-arrow-r5.mdi-chevron-down { font-size:24px!important; line-height:1!important; }
}


/* ==========================================================
   R6 — SETTINGS ALL VIEWPORTS
   R5 alignment existed only inside max-width:700px.
   ========================================================== */

body .wz-settings-row-r5 {
  position: relative !important;
  box-sizing: border-box !important;
  padding-right: 112px !important;
}

body .wz-settings-main-icon-r5 {
  position: absolute !important;
  right: 62px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-50%) !important;
}

body .wz-settings-arrow-r5,
body .wz-settings-row-r5 > .v-expansion-panel-title__icon {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-50%) !important;
}

body .wz-settings-row-r5[aria-expanded="true"]
  .wz-settings-arrow-r5,
body .wz-settings-row-r5[aria-expanded="true"]
  > .v-expansion-panel-title__icon {
  transform: translateY(-50%) rotate(180deg) !important;
}

body .wz-settings-arrow-r5.mdi-chevron-down {
  font-size: 24px !important;
  line-height: 1 !important;
}


/* ==========================================================
   R6 — PRICING FIRST-PAINT NATIVE HEADER
   The matching html classes are inserted synchronously in
   <head> before the body can paint.
   ========================================================== */

html.wz-r6-pricing-route {
  --wz-r6-pricing-status-clearance:
    max(22px, env(safe-area-inset-top, 0px));
}

@media (max-width: 1024px) {

  html.wz-r6-pricing-route
    body .v-app-bar {
    height:
      calc(
        58px +
        var(--wz-r6-pricing-status-clearance)
      )
      !important;

    min-height:
      calc(
        58px +
        var(--wz-r6-pricing-status-clearance)
      )
      !important;
  }

  html.wz-r6-pricing-route
    body .v-app-bar .v-toolbar__content {
    height:
      calc(
        58px +
        var(--wz-r6-pricing-status-clearance)
      )
      !important;

    min-height:
      calc(
        58px +
        var(--wz-r6-pricing-status-clearance)
      )
      !important;

    padding-top:
      var(--wz-r6-pricing-status-clearance)
      !important;

    box-sizing: border-box !important;
  }
}


/* ==========================================================
   WZ_PRICING_LOGO_FIRST_PAINT_R6H5

   Browser-tested treatment.

   On mobile Pricing the Vue logo <img> is created after the
   surrounding header has already painted.

   R6H2 preloads /img/logo.png early. R6H3 uses that same image
   as an immediate background on the existing 28px logo slot.

   Once Vue's real image is present it simply paints over the
   identical fallback, producing no visible transition.
   ========================================================== */

@media (max-width: 700px) {

  html.wz-r6-pricing-route
    body
    .v-app-bar
    .d-flex.align-center.clickable:has(
      > .pl-2 > :is(h1, h2)
    )
    > :first-child {

    background-image:
      url("/img/logo.png")
      !important;

    background-repeat:
      no-repeat
      !important;

    background-position:
      center
      !important;

    background-size:
      contain
      !important;

    width:
      28px
      !important;

    min-width:
      28px
      !important;

    height:
      28px
      !important;

    flex:
      0 0 28px
      !important;
  }
}


/* ==========================================================
   WZ_PRICING_LOADER_HEADER_BOUNDARY_R6H5

   Browser-reproduced root cause:
   the legacy Pricing assembly mask starts at 64px while the
   mobile Pricing header is 80px.

   Because the mask has an ultra-high z-index it covers the
   lower part of the header until Pricing assembly completes.

   Keep the mask below the complete mobile header.
   ========================================================== */

@media (max-width: 700px) {

  html.wz-r6-pricing-route.wz-r1i-pricing-loading::before {
    top:
      max(
        80px,
        var(
          --wz-r5-pricing-menu-top,
          80px
        )
      )
      !important;
  }
}

/* ==========================================================
   WAYZAWAY_R7A1_PRICING_MENU_LAYER

   Pricing assembly loader:
     mask    = 2147483645
     spinner = 2147483646

   R6H5 keeps the loader below the 80px mobile header.
   When the menu is opened during Pricing assembly, temporarily
   place the header/menu one layer above the loader so the menu
   remains visible and interactive.
   ========================================================== */

@media (max-width: 700px) {

  html.wz-r6-pricing-route.wz-r1i-pricing-loading
  body.wz-public-pricing-modern.wz-public-menu-open
  header,

  html.wz-r6-pricing-route.wz-r1i-pricing-loading
  body.wz-public-pricing-modern.wz-public-menu-open
  .v-app-bar {
    z-index: 2147483647 !important;
  }

  html.wz-r6-pricing-route.wz-r1i-pricing-loading
  body.wz-public-pricing-modern.wz-public-menu-open
  .wz-public-mobile-menu,

  html.wz-r6-pricing-route.wz-r1i-pricing-loading
  body.wz-public-pricing-modern.wz-public-menu-open
  .wz-legacy-public-menu {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }
}