/*
 * WayzAway R1G R1
 *
 * 1. Android page pinch support
 * 2. Universal event-lightbox selected-video play icon
 */


/*
 * ============================================================
 * ANDROID PINCH
 * ============================================================
 *
 * Scope only to the document/app ancestors.
 *
 * Do NOT globally override descendant controls:
 * existing drag handles, media controls, menus and save-loader
 * interaction contracts remain untouched.
 */

html.wz-r1g-android-pinch,
html.wz-r1g-android-pinch body,
html.wz-r1g-android-pinch #app {
  touch-action:
    pan-x pan-y pinch-zoom
    !important;
}


/*
 * ============================================================
 * EVENT LIGHTBOX VIDEO COVER
 * ============================================================
 *
 * This applies to the event LIGHTBOX only.
 *
 * It deliberately does not target:
 * - event-card play icons
 * - media viewer controls
 * - native video controls
 *
 * Therefore:
 * - Apple event cards retain R1F styling
 * - Android event cards retain their previous styling
 * - every platform gets the same controlled lightbox icon
 */

.wzue-overlay
.wzue-cover-button.wz-r1g-lightbox-video-cover {
  position:
    relative
    !important;
}


.wzue-overlay
.wz-r1g-lightbox-play {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    44px;

  height:
    44px;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  background-color:
    #e40046;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E");

  background-repeat:
    no-repeat;

  background-position:
    54% 50%;

  background-size:
    38% 38%;

  box-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.20);

  pointer-events:
    none;

  z-index:
    4;
}


@media
(max-width: 600px) {

  .wzue-overlay
  .wz-r1g-lightbox-play {
    width:
      40px;

    height:
      40px;
  }

}