/*
 * WayzAway R1H Candidate R1
 * Privacy / Basic image entitlement / pricing / gallery
 */


/* ==========================================================
   VIP-ONLY EVENT PRIVACY
   ========================================================== */

body.wz-member-event-form
  .wz-r1h-vip-friends-section {
  margin-top: -4px !important;
}

body.wz-member-event-form
  .wz-r1h-vip-toggle:disabled {
  cursor: default;
  opacity: .62;
}


/* ==========================================================
   BASIC IMAGE LIMIT + MATCHED UPGRADE LINKS
   ========================================================== */

.wz-r1h-image-limit-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35em;
  margin-top: 7px;
  color: #72767d;
  font-family: inherit;
  font-size: .82rem;
  line-height: 1.35;
}

.wz-r1h-image-upgrade-link,
.wz-video-upgrade-link,
.wz-video-subtitle a[href="/pricing"] {
  color: #e40046 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.wz-r1h-image-upgrade-link:hover,
.wz-r1h-image-upgrade-link:focus-visible,
.wz-video-upgrade-link:hover,
.wz-video-upgrade-link:focus-visible,
.wz-video-subtitle a[href="/pricing"]:hover,
.wz-video-subtitle a[href="/pricing"]:focus-visible {
  color: #bd003a !important;
}


/* ==========================================================
   GALLERY TOOLBAR — DARKER, STABLE FIRST PAINT
   ========================================================== */

/*
 * Hide obsolete duplicate close-button generations before
 * they can paint. CR12 remains the canonical close.
 */
.wz-media-viewer
  .wz-cr10-gallery-close,
.wz-media-viewer
  .wz-cr11-gallery-close {
  display: none !important;
  visibility: hidden !important;
}

/*
 * If an older runtime temporarily moves the canonical CR12
 * close back to the viewer root during a media transition,
 * never paint it in that incorrect position.
 */
.wz-media-viewer
  > .wz-cr12-gallery-close {
  visibility: hidden !important;
}

.wz-media-viewer-image-controls
  > .wz-cr12-gallery-close {
  visibility: visible !important;
}

/*
 * X, Zoom Out, Zoom In and Reset use one darker neutral
 * control treatment. R1E may still copy Zoom Out's
 * computed appearance to X; because the source already has
 * this R1H treatment, the result remains identical.
 */
.wz-media-viewer-v2
  .wz-media-viewer-image-controls
  button,
.wz-media-viewer-image-controls
  > .wz-cr12-gallery-close {
  border: 1px solid #aeb3ba !important;
  border-radius: 10px !important;
  background: #c6c9ce !important;
  color: #25252b !important;
  box-shadow: none !important;
}

.wz-media-viewer-v2
  .wz-media-viewer-image-controls
  button:hover,
.wz-media-viewer-v2
  .wz-media-viewer-image-controls
  button:focus-visible,
.wz-media-viewer-image-controls
  > .wz-cr12-gallery-close:hover,
.wz-media-viewer-image-controls
  > .wz-cr12-gallery-close:focus-visible {
  border-color: #9da3ab !important;
  background: #b6bbc2 !important;
  color: #25252b !important;
}

/*
 * Permanent box for X from first CSS paint rather than
 * waiting for computed-style copying.
 */
.wz-media-viewer-image-controls
  > .wz-cr12-gallery-close {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 7px 11px !important;
  transform: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

@media (max-width: 640px) {
  .wz-media-viewer-image-controls
    > .wz-cr12-gallery-close {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
  }
}


/* ==========================================================
   R1I R3 — IMAGE + VIDEO UPGRADE LINKS
   ========================================================== */

a.wz-r1h-image-upgrade-link:link,
a.wz-r1h-image-upgrade-link:visited,
a.wz-video-upgrade-link:link,
a.wz-video-upgrade-link:visited,
.wz-video-subtitle a[href="/pricing"]:link,
.wz-video-subtitle a[href="/pricing"]:visited {
  color: #e40046 !important;
  -webkit-text-fill-color: #e40046 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

a.wz-r1h-image-upgrade-link:hover,
a.wz-r1h-image-upgrade-link:focus-visible,
a.wz-video-upgrade-link:hover,
a.wz-video-upgrade-link:focus-visible,
.wz-video-subtitle a[href="/pricing"]:hover,
.wz-video-subtitle a[href="/pricing"]:focus-visible {
  color: #bd003a !important;
  -webkit-text-fill-color: #bd003a !important;
}


/* ==========================================================
   R1I R3 — PRICING ASSEMBLY LOADER
   ========================================================== */

html.wz-r1i-pricing-loading::before {
  content: "";
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483645;
  background: #f7f7f9;
}

html.wz-r1i-pricing-loading::after {
  content: "";
  position: fixed;
  z-index: 2147483646;
  top: calc(50vh + 15px);
  left: calc(50% - 17px);
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border:
    3px solid
    rgba(233, 30, 99, .20);
  border-top-color:
    #e91e63;
  background:
    transparent;
  animation:
    wzR1iPricingSpin
    .75s
    linear
    infinite;
}

@keyframes wzR1iPricingSpin {
  to {
    transform:
      rotate(360deg);
  }
}

@media (
  prefers-reduced-motion: reduce
) {
  html.wz-r1i-pricing-loading::after {
    animation:
      none !important;
  }
}


/* ==========================================================
   R1J — EXACT MATCHED UPGRADE LINKS
   ========================================================== */

/*
 * The video Upgrade lives inside .wz-video-subtitle.
 * Its ancestor opacity was compositing the correct
 * #e40046 into a visibly paler pink.
 */
body.wz-member-event-form
  .wz-video-subtitle {
  opacity: 1 !important;
}

body.wz-member-event-form
  .wz-r1h-image-upgrade-link:link,
body.wz-member-event-form
  .wz-r1h-image-upgrade-link:visited,
body.wz-member-event-form
  .wz-video-upgrade-link:link,
body.wz-member-event-form
  .wz-video-upgrade-link:visited,
body.wz-member-event-form
  .wz-video-subtitle
  a[href="/pricing"]:link,
body.wz-member-event-form
  .wz-video-subtitle
  a[href="/pricing"]:visited {
  color: #e40046 !important;
  -webkit-text-fill-color: #e40046 !important;
  opacity: 1 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

body.wz-member-event-form
  .wz-r1h-image-upgrade-link:hover,
body.wz-member-event-form
  .wz-r1h-image-upgrade-link:focus-visible,
body.wz-member-event-form
  .wz-video-upgrade-link:hover,
body.wz-member-event-form
  .wz-video-upgrade-link:focus-visible,
body.wz-member-event-form
  .wz-video-subtitle
  a[href="/pricing"]:hover,
body.wz-member-event-form
  .wz-video-subtitle
  a[href="/pricing"]:focus-visible {
  color: #bd003a !important;
  -webkit-text-fill-color: #bd003a !important;
}


/* ==========================================================
   R1J — CLEAR NOTIFICATIONS
   ========================================================== */

.wz-notification-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.wz-r1j-clear-notifications {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid #e40046;
  border-radius: 7px;
  background: #fff;
  color: #e40046;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 9px 13px;
  cursor: pointer;
}

.wz-r1j-clear-notifications:hover,
.wz-r1j-clear-notifications:focus-visible {
  background: rgba(228, 0, 70, .07);
}

.wz-r1j-clear-notifications:focus-visible {
  outline: 2px solid rgba(228, 0, 70, .28);
  outline-offset: 2px;
}

.wz-r1j-clear-notifications:disabled {
  cursor: default;
  opacity: .55;
}

@media (max-width: 600px) {
  .wz-notification-header {
    gap: 10px !important;
  }

  .wz-r1j-clear-notifications {
    font-size: .78rem;
    padding: 8px 10px;
  }
}


/* ============================================================
   WAYZAWAY R1K
   Force both event-form Upgrade links to identical rendering.
   ============================================================ */

.wz-r1h-image-upgrade-link,
.wz-r1h-image-upgrade-link:link,
.wz-r1h-image-upgrade-link:visited,
.wz-video-upgrade-link,
.wz-video-upgrade-link:link,
.wz-video-upgrade-link:visited,
.wz-video-subtitle a[href="/pricing"],
.wz-video-subtitle a[href="/pricing"]:link,
.wz-video-subtitle a[href="/pricing"]:visited {
  color: #e40046 !important;
  -webkit-text-fill-color: #e40046 !important;
  text-decoration-color: #e40046 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.wz-r1h-image-upgrade-link:hover,
.wz-r1h-image-upgrade-link:focus,
.wz-video-upgrade-link:hover,
.wz-video-upgrade-link:focus,
.wz-video-subtitle a[href="/pricing"]:hover,
.wz-video-subtitle a[href="/pricing"]:focus {
  color: #bd003a !important;
  -webkit-text-fill-color: #bd003a !important;
  text-decoration-color: #bd003a !important;
  opacity: 1 !important;
  filter: none !important;
}

.wz-video-subtitle {
  opacity: 1 !important;
  filter: none !important;
}

