/*
 * WayzAway R1C R2
 */


/* ==========================================================
   GALLERY CLOSE — SAME POSITION ALL PLATFORMS

   There is deliberately NO responsive breakpoint around
   these rules.
========================================================== */

.wz-media-viewer-image-controls
  .wz-cr12-gallery-close.wz-r1c-gallery-close {
  position:
    static
    !important;

  inset:
    auto
    !important;

  top:
    auto
    !important;

  right:
    auto
    !important;

  bottom:
    auto
    !important;

  left:
    auto
    !important;

  transform:
    none
    !important;

  margin:
    0
    !important;

  flex:
    0 0 auto
    !important;

  display:
    inline-flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  box-shadow:
    none
    !important;

  cursor:
    pointer
    !important;
}


.wz-media-viewer-image-controls
  .wz-cr12-gallery-close.wz-r1c-gallery-close::before,
.wz-media-viewer-image-controls
  .wz-cr12-gallery-close.wz-r1c-gallery-close::after {
  display:
    none
    !important;

  content:
    none
    !important;
}


/*
 * Video gallery:
 * keep the same control-row geometry so X does not shift.
 */
.wz-media-viewer-image-controls[
  data-wz-r1c-video-mode="1"
] {
  display:
    flex
    !important;
}


.wz-media-viewer-image-controls[
  data-wz-r1c-video-mode="1"
] > :not(
  .wz-r1c-gallery-close
) {
  visibility:
    hidden
    !important;

  pointer-events:
    none
    !important;
}


/* ==========================================================
   MOBILE + TABLET HEADER

   Active from first CSS paint.
   No html.wz-native-app dependency.
   Desktop >1024px is untouched.
========================================================== */

@media (max-width: 1024px) {

  :root {
    --wz-r1c-top-inset:
      max(
        22px,
        env(
          safe-area-inset-top,
          0px
        )
      );
  }


  html body
    .v-app-bar {
    height:
      calc(
        58px +
        var(
          --wz-r1c-top-inset
        )
      )
      !important;

    min-height:
      calc(
        58px +
        var(
          --wz-r1c-top-inset
        )
      )
      !important;
  }


  html body
    .v-app-bar
    .v-toolbar__content {
    height:
      calc(
        58px +
        var(
          --wz-r1c-top-inset
        )
      )
      !important;

    min-height:
      calc(
        58px +
        var(
          --wz-r1c-top-inset
        )
      )
      !important;

    padding-top:
      var(
        --wz-r1c-top-inset
      )
      !important;

    box-sizing:
      border-box
      !important;
  }


  /*
   * Existing app layout used 64px content clearance for a
   * 58px header. Preserve that 6px relationship.
   */
  html body
    .v-main {
    padding-top:
      calc(
        64px +
        var(
          --wz-r1c-top-inset
        )
      )
      !important;
  }
}


/* ==========================================================
   R1D HEADER SPECIFICITY FIX

   Outranks:
     .v-app-bar.v-toolbar
     .v-app-bar.v-toolbar .v-toolbar__content

   from wayzaway-public-polish.css.
========================================================== */

@media (max-width: 1024px) {

  html body
    .v-app-bar.v-toolbar {
    height:
      calc(
        58px +
        var(--wz-r1c-top-inset)
      )
      !important;

    min-height:
      calc(
        58px +
        var(--wz-r1c-top-inset)
      )
      !important;
  }

  html body
    .v-app-bar.v-toolbar
    .v-toolbar__content {
    height:
      calc(
        58px +
        var(--wz-r1c-top-inset)
      )
      !important;

    min-height:
      calc(
        58px +
        var(--wz-r1c-top-inset)
      )
      !important;
  }
}