/*
============================================================
WayzAway Member Theme - Production Candidate

Approved Browse design:
  V11 visual state

Canonicalised from preview development versions.

Contains:
  - V1 route/theme foundation
  - scoped V2 compact EventCard rules
  - V7 View event behaviour styling
  - V8 inline metadata/action styling
  - V9 exact corner menu styling
  - V10 category image positioning
  - V11 premium category styling

Removed as obsolete:
  - V3
  - V4
  - V5
  - V6

IMPORTANT:
  EventCard compact rules are restricted to:
    body.wz-member-browse
    body.wz-member-wall
============================================================
*/

/* ==========================================================
   WayzAway Member Theme V1
   Browse + member Wall + Event View

   Preview candidate.
   Route scoped: no public/shared/admin page styling.
   ========================================================== */

body.wz-member-theme {
  --wz-member-accent: #ec0052;
  --wz-member-accent-soft: rgba(236, 0, 82, 0.075);
  --wz-member-accent-border: rgba(236, 0, 82, 0.17);
  --wz-member-text: rgb(var(--v-theme-on-background));
  --wz-member-muted: rgba(var(--v-theme-on-surface), 0.66);
  --wz-member-border: rgba(var(--v-border-color), 0.13);
  --wz-member-surface: rgb(var(--v-theme-surface));
  --wz-member-bg: rgb(var(--v-theme-background));
  --wz-member-radius: 20px;
  --wz-member-radius-sm: 14px;
  --wz-member-shadow:
    0 10px 28px rgba(20, 24, 32, 0.065);
  --wz-member-shadow-hover:
    0 14px 34px rgba(20, 24, 32, 0.11);
}


/* ==========================================================
   SHARED MEMBER SHELL
   ========================================================== */

body.wz-member-theme .v-main {
  background:
    radial-gradient(
      circle at 10% 0%,
      var(--wz-member-accent-soft),
      transparent 26rem
    ),
    var(--wz-member-bg);
}

body.wz-member-theme .v-main > .v-container {
  max-width: 1240px;
}

body.wz-member-theme .v-divider {
  opacity: 0.56;
}

body.wz-member-theme .v-btn {
  letter-spacing: 0;
  text-transform: none;
}

body.wz-member-theme .v-btn.v-btn--variant-flat {
  box-shadow: none;
}

body.wz-member-theme .v-btn.bg-primary,
body.wz-member-theme .v-btn.text-primary {
  --v-theme-primary: 236, 0, 82;
}

body.wz-member-theme .v-field {
  border-radius: 13px;
}

body.wz-member-theme .v-field__outline {
  --v-field-border-opacity: 0.16;
}

body.wz-member-theme .v-field--focused .v-field__outline {
  --v-field-border-opacity: 0.7;
}

body.wz-member-theme .v-menu > .v-overlay__content > .v-list {
  border: 1px solid var(--wz-member-border);
  border-radius: 15px !important;
  box-shadow:
    0 16px 40px rgba(20, 24, 32, 0.14) !important;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
}

body.wz-member-browse .load-more-btn,
body.wz-member-wall .load-more-btn {
  min-height: 42px;

  padding-inline: 19px;

  border-radius: 999px !important;

  background:
    var(--wz-member-accent-soft) !important;

  border:
    1px solid var(--wz-member-accent-border) !important;

  color:
    var(--wz-member-accent) !important;
}


/* ==========================================================
   BROWSE
   Discovery-led, cleaner filters and content rhythm
   ========================================================== */

body.wz-member-browse .v-main > .v-container {
  padding-top: 22px;
}

body.wz-member-browse .v-expansion-panels {
  gap: 10px;
}

body.wz-member-browse .v-expansion-panel {
  overflow: hidden;

  border: 1px solid var(--wz-member-border);

  border-radius: 16px !important;

  background: var(--wz-member-surface);

  box-shadow: none !important;
}

body.wz-member-browse .v-expansion-panel-title {
  min-height: 52px;

  font-weight: 700;
}

body.wz-member-browse .v-expansion-panel-text__wrapper {
  padding:
    4px 14px 15px;
}

body.wz-member-browse
  .v-main
  > .v-container
  > .v-row
  > .v-col-lg-9 {
  padding-right: 18px;
}

body.wz-member-browse
  .v-main
  > .v-container
  > .v-row
  > .v-col-lg-3 {
  padding-left: 18px;
}

body.wz-member-browse
  .v-main
  > .v-container
  > .v-row
  > .v-col-lg-3
  > div {
  border-radius: 18px;
}

body.wz-member-browse .v-infinite-scroll {
  gap: 3px;
}


/* ==========================================================
   MEMBER WALL
   Personal-history presentation
   ========================================================== */

body.wz-member-wall .v-main > .v-container {
  padding-top: 22px;
}

body.wz-member-wall .featured-event {
  overflow: hidden;

  border:
    1px solid var(--wz-member-border);

  border-radius:
    var(--wz-member-radius) !important;

  box-shadow:
    var(--wz-member-shadow) !important;
}

body.wz-member-wall
  .featured-event
  .v-img {
  border-radius:
    var(--wz-member-radius) !important;
}

body.wz-member-wall .v-expansion-panels {
  gap: 10px;
}

body.wz-member-wall .v-expansion-panel {
  overflow: hidden;

  border:
    1px solid var(--wz-member-border);

  border-radius:
    16px !important;

  box-shadow:
    none !important;
}

body.wz-member-wall .v-expansion-panel-title {
  min-height: 50px;

  font-weight: 700;
}

body.wz-member-wall .find-events {
  margin-top: 2px;
}

body.wz-member-wall
  .v-main
  > .v-container
  > .v-divider.my-3 {
  margin-top: 19px !important;
  margin-bottom: 22px !important;
}


/* ==========================================================
   UPCOMING EVENTS
   Browse + Wall side rail
   ========================================================== */

body.wz-member-browse
  .v-col-lg-3
  h4,
body.wz-member-wall
  .v-col-lg-3
  h4 {
  padding-left: 2px;

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.07em;
  text-transform: uppercase;

  color:
    var(--wz-member-muted);
}

body.wz-member-browse
  .v-col-lg-3
  .v-alert,
body.wz-member-wall
  .v-col-lg-3
  .v-alert {
  border-radius: 14px;
}

body.wz-member-browse
  .v-col-lg-3
  small,
body.wz-member-wall
  .v-col-lg-3
  small {
  color:
    var(--wz-member-muted);
}


/* ==========================================================
   EVENT VIEW
   Premium event-detail presentation
   ========================================================== */

body.wz-member-event .v-main > .v-container {
  max-width: 1080px;

  padding-top: 20px;
}

body.wz-member-event
  .v-main
  > .v-container
  > .v-row:first-child {
  margin-bottom: 9px;
}

body.wz-member-event
  .v-main
  > .v-container
  > .v-row:first-child
  h4 {
  font-size: 0.98rem;
  font-weight: 750;
}

body.wz-member-event
  .v-main
  > .v-container
  > .v-row:first-child
  small {
  color:
    var(--wz-member-muted);
}

body.wz-member-event .wz-event-detail-image {
  overflow: hidden;

  border:
    1px solid var(--wz-member-border);

  border-radius:
    22px !important;

  background:
    var(--wz-member-surface);

  box-shadow:
    var(--wz-member-shadow);
}

body.wz-member-event .wz-event-detail-video {
  border:
    1px solid var(--wz-member-border) !important;

  border-radius:
    18px !important;

  box-shadow:
    var(--wz-member-shadow);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body.wz-member-event
    .wz-event-detail-video:hover {
    transform: translateY(-2px);

    box-shadow:
      var(--wz-member-shadow-hover);
  }
}

body.wz-member-event
  .v-main
  > .v-container
  > .v-row:nth-of-type(2)
  .v-col-md-8
  > .v-card {
  overflow: hidden;

  border:
    1px solid var(--wz-member-border);

  border-radius:
    18px !important;

  box-shadow:
    none !important;
}

body.wz-member-event .rich-text-content {
  color:
    var(--wz-member-text);

  font-size: 0.96rem;
  line-height: 1.67;
}

body.wz-member-event .rich-text-content p {
  margin-bottom: 0.85em;
}

body.wz-member-event .rich-text-content p:last-child {
  margin-bottom: 0;
}


/* Reactions */

body.wz-member-event
  .v-main
  > .v-container
  .v-card
  .v-btn {
  border-radius: 12px;
}


/* Comments */

body.wz-member-event
  .v-main
  > .v-container
  h3 {
  margin-bottom: 4px;

  font-size: 1.22rem;
  font-weight: 800;
}

body.wz-member-event
  .v-main
  > .v-container
  .v-textarea
  .v-field {
  border:
    1px solid var(--wz-member-border);

  border-radius:
    16px !important;

  box-shadow: none;
}

body.wz-member-event
  .v-main
  > .v-container
  .v-list
  .v-card {
  border:
    1px solid var(--wz-member-border);

  border-radius:
    15px !important;

  background:
    rgba(var(--v-theme-surface), 0.78);

  box-shadow:
    none !important;
}

body.wz-member-event .mention-dropdown {
  overflow: hidden;

  border:
    1px solid var(--wz-member-border);

  border-radius:
    14px !important;

  box-shadow:
    0 14px 34px rgba(20, 24, 32, 0.13);
}

body.wz-member-event .mention-link {
  color:
    var(--wz-member-accent);

  font-weight: 700;

  cursor: pointer;
}


/* Collection / Group modals reached from Event View */

body.wz-member-event
  .v-dialog
  .v-card {
  overflow: hidden;

  border:
    1px solid var(--wz-member-border);

  border-radius:
    20px !important;

  box-shadow:
    0 20px 55px rgba(20, 24, 32, 0.2) !important;
}


/* ==========================================================
   MOBILE / APP
   ========================================================== */

@media (max-width: 959px) {

  body.wz-member-theme .v-main > .v-container {
    padding-top: 14px;
  }

  body.wz-member-browse
    .v-main
    > .v-container
    > .v-row
    > .v-col-lg-9,
  body.wz-member-browse
    .v-main
    > .v-container
    > .v-row
    > .v-col-lg-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.wz-member-wall
    .v-main
    > .v-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.wz-member-event
    .v-main
    > .v-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.wz-member-event
    .wz-event-detail-image {
    border-radius: 18px !important;
  }

}


@media (max-width: 640px) {

  body.wz-member-theme {
    --wz-member-radius: 17px;
    --wz-member-shadow:
      0 7px 22px rgba(20, 24, 32, 0.055);
  }

  body.wz-member-browse
    .v-expansion-panel,
  body.wz-member-wall
    .v-expansion-panel {
    border-radius:
      14px !important;
  }

  body.wz-member-wall
    .featured-event {
    border-radius:
      17px !important;
  }

  body.wz-member-event
    .wz-event-detail-image {
    margin-inline:
      2px;

    border-radius:
      17px !important;
  }

  body.wz-member-event
    .wz-event-detail-videos {
    gap:
      10px !important;
  }

  body.wz-member-event
    .wz-event-detail-video {
    border-radius:
      15px !important;
  }

  body.wz-member-event
    .v-main
    > .v-container
    h3 {
    font-size:
      1.12rem;
  }

  body.wz-member-event
    .v-main
    > .v-container
    .v-list
    .v-card {
    border-radius:
      14px !important;
  }

}


/* ==========================================================
   MOTION / ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  body.wz-member-theme *,
  body.wz-member-theme *::before,
  body.wz-member-theme *::after {
    scroll-behavior: auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}

/* ---------- MOBILE / APP ---------- */

@media (max-width: 640px) {
}

/*
=========================================================
WayzAway Account UI Polish 2026-08
Profile trigger + authenticated account drawer
=========================================================
*/


/* ------------------------------------------------------
   Closed profile control
   ------------------------------------------------------ */

.wz-account-trigger {
  min-width: 0 !important;

  border:
    1px solid rgba(236, 0, 82, 0.12) !important;

  background:
    #ffffff !important;

  color:
    #ec0052 !important;

  box-shadow:
    0 4px 14px rgba(28, 24, 32, 0.12) !important;

  padding-inline:
    11px 12px !important;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease !important;
}


.wz-account-trigger:hover {
  border-color:
    rgba(236, 0, 82, 0.24) !important;

  box-shadow:
    0 6px 18px rgba(28, 24, 32, 0.15) !important;
}


.wz-account-trigger:focus-visible {
  outline:
    3px solid rgba(236, 0, 82, 0.20) !important;

  outline-offset:
    2px !important;
}


.wz-account-trigger
  .v-btn__prepend {
  margin-inline-end:
    9px !important;
}


.wz-account-trigger
  .v-btn__append {
  margin-inline-start:
    9px !important;
}


.wz-account-trigger
  .v-btn__content
  .text-capitalize {
  font-size:
    0.92rem !important;

  font-weight:
    600 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    0 !important;
}


.wz-account-trigger
  .v-btn__append
  .v-icon {
  font-size:
    20px !important;
}


.wz-account-trigger-avatar {
  position:
    relative !important;

  width:
    30px !important;

  height:
    30px !important;

  min-width:
    30px !important;

  overflow:
    hidden !important;

  border-radius:
    50% !important;
}


.wz-account-trigger-img {
  position:
    absolute !important;

  inset:
    0 !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

  border-radius:
    inherit !important;
}


.wz-account-trigger-avatar.wz-has-account-image
  > :not(.wz-account-trigger-img) {
  visibility:
    hidden !important;
}



/* ------------------------------------------------------
   Account drawer
   ------------------------------------------------------ */

[data-wz-account-drawer="true"] {
  border-left:
    1px solid rgba(25, 29, 37, 0.09) !important;

  background:
    #ffffff !important;
}


[data-wz-account-drawer="true"]
  .v-list {
  padding:
    0 10px 10px !important;

  background:
    #ffffff !important;
}


.wz-account-drawer-profile {
  min-height:
    78px !important;

  margin:
    0 -10px 6px !important;

  padding:
    12px 20px 11px !important;

  border-bottom:
    0 !important;

  background:
    #ffffff !important;
}


.wz-account-drawer-profile
  .v-avatar {
  flex:
    0 0 auto !important;

  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 3px rgba(236, 0, 82, 0.16) !important;
}


.wz-account-drawer-profile
  small {
  display:
    block !important;

  margin-bottom:
    2px !important;

  color:
    #747881 !important;

  font-size:
    0.76rem !important;

  font-weight:
    400 !important;

  line-height:
    1.25 !important;
}


.wz-account-drawer-profile
  small + div {
  color:
    #24272d !important;

  font-size:
    1.02rem !important;

  font-weight:
    700 !important;

  line-height:
    1.3 !important;
}


.wz-account-drawer-nav-item {
  min-height:
    44px !important;

  margin:
    1px 0 !important;

  padding:
    0 14px !important;

  border-radius:
    11px !important;

  color:
    #51545b !important;

  transition:
    background-color 150ms ease,
    color 150ms ease !important;
}


.wz-account-drawer-nav-item
  .v-list-item-title {
  font-size:
    0.98rem !important;

  font-weight:
    500 !important;

  line-height:
    1.3 !important;
}


.wz-account-drawer-nav-item
  .v-list-item__overlay {
  opacity:
    0 !important;
}


.wz-account-drawer-nav-item:hover {
  background:
    #f7f7f9 !important;

  color:
    #25282e !important;
}


.wz-account-drawer-nav-item.v-list-item--active,
.wz-account-drawer-nav-item.wz-account-item-current {
  background:
    #fff0f5 !important;

  color:
    #ec0052 !important;
}


.wz-account-drawer-nav-item.v-list-item--active:hover,
.wz-account-drawer-nav-item.wz-account-item-current:hover {
  background:
    #ffe7ef !important;

  color:
    #d90049 !important;
}


.wz-account-drawer-nav-item:focus-visible {
  outline:
    2px solid rgba(236, 0, 82, 0.28) !important;

  outline-offset:
    -2px !important;
}


[data-wz-account-drawer="true"]
  .v-navigation-drawer__append {
  border-top:
    1px solid rgba(25, 29, 37, 0.08) !important;

  background:
    #ffffff !important;
}


[data-wz-account-drawer="true"]
  .v-navigation-drawer__append
  > div {
  margin:
    14px 16px 16px !important;
}


.wz-account-signout {
  min-height:
    44px !important;

  border-radius:
    11px !important;

  font-weight:
    600 !important;

  letter-spacing:
    0 !important;

  box-shadow:
    0 4px 10px rgba(236, 0, 82, 0.18) !important;
}



/* ------------------------------------------------------
   Mobile profile control
   ------------------------------------------------------ */

@media (max-width: 599px) {

  .wz-account-trigger {
    padding-inline:
      9px 10px !important;
  }


  .wz-account-trigger
    .v-btn__prepend {
    margin-inline-end:
      5px !important;
  }


  .wz-account-trigger
    .v-btn__append {
    margin-inline-start:
      5px !important;
  }


  .wz-account-trigger-avatar {
    width:
      29px !important;

    height:
      29px !important;

    min-width:
      29px !important;
  }


  .wz-account-drawer-profile {
    min-height:
      78px !important;
  }

}


@media (max-width: 640px) {

}


/* =========================================================
   WayzAway Stage 4 final hardening R1
   ========================================================= */

/*
 * Preserve the approved visible three-dot control dimensions,
 * while providing an approximately 44px pointer/touch target.
 */
.wz-stage4-touch-target {
  overflow: visible !important;
}

.wz-stage4-touch-target:not(.v-btn--absolute) {
  position: relative !important;
}

.wz-stage4-touch-target.v-btn--absolute {
  position: absolute !important;
}

.wz-stage4-touch-target::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 3;
  border-radius: inherit;
  background: transparent;
}

/* Clear keyboard focus without redesigning the control. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #e40046 !important;
  outline-offset: 2px !important;
}

/*
 * Respect reduced-motion preferences without changing the
 * normal approved visual treatment.
 */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   WayzAway Routing + Settings R1
   Wall-password panel alignment
   ============================================================ */

#wz-wall-password-settings.wz-settings-panel {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}