/*
=========================================================
WayzAway Member Event Form Preview V1

Routes:
  /event/add
  /event/:id/edit

Visual layer only.
=========================================================
*/

/* ------------------------------------------------------
   PAGE
------------------------------------------------------ */

body.wz-member-event-form {
  background:
    linear-gradient(
      180deg,
      #ffffff 0,
      #fffafb 230px,
      #ffffff 620px
    );
}

body.wz-member-event-form
  .page-title-container {
  width:
    min(100%, 960px);

  margin-right:
    auto;

  margin-left:
    auto;

  margin-bottom:
    12px !important;
}

body.wz-member-event-form
  .page-title-container
  h1,
body.wz-member-event-form
  .page-title-container
  .text-h4,
body.wz-member-event-form
  .page-title-container
  .text-h5 {
  color:
    #24262c;

  font-weight:
    760 !important;

  letter-spacing:
    -0.025em !important;
}

body.wz-member-event-form
  .page-title-container
  .text-medium-emphasis {
  color:
    #74777e !important;
}

body.wz-member-event-form
  .wz-event-form-page {
  width:
    min(100%, 1020px);

  margin:
    0 auto;

  padding-bottom:
    48px;
}

/* ------------------------------------------------------
   MAIN FORM CARD
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-form-card {
  position:
    relative;

  padding:
    23px 24px 25px;

  overflow:
    visible;

  border:
    1px solid rgba(30, 33, 39, 0.07);

  border-radius:
    21px;

  background:
    rgba(255, 255, 255, 0.985);

  box-shadow:
    0 15px 42px rgba(29, 23, 26, 0.075);
}

/* ------------------------------------------------------
   FORM FIELDS
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-form-card
  .v-input {
  margin-bottom:
    3px;
}

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

  border:
    1px solid rgba(27, 31, 37, 0.095) !important;

  border-radius:
    12px !important;

  background:
    #faf9fa !important;

  box-shadow:
    none !important;

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

body.wz-member-event-form
  .wz-event-form-card
  .v-field--focused {
  border-color:
    rgba(228, 0, 70, 0.45) !important;

  background:
    #fff !important;

  box-shadow:
    0 0 0 3px rgba(228, 0, 70, 0.075) !important;
}

body.wz-member-event-form
  .wz-event-form-card
  .v-field__overlay {
  opacity:
    0 !important;
}

body.wz-member-event-form
  .wz-event-form-card
  .v-field__outline {
  --v-field-border-opacity:
    0 !important;
}

body.wz-member-event-form
  .wz-event-form-card
  label,
body.wz-member-event-form
  .wz-event-form-card
  .text-body-2 {
  letter-spacing:
    0 !important;
}

body.wz-member-event-form
  .wz-event-form-card
  label.text-body-2 {
  margin-bottom:
    7px !important;

  color:
    #3d4046 !important;

  font-size:
    0.81rem !important;

  font-weight:
    670 !important;
}

body.wz-member-event-form
  .wz-event-form-card
  .v-messages {
  padding-inline:
    3px;
}

/* ------------------------------------------------------
   DESCRIPTION / RICH TEXT
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-description-block {
  margin-top:
    5px;

  margin-bottom:
    13px;
}

body.wz-member-event-form
  .wz-event-description-block
  [contenteditable="true"] {
  min-height:
    126px;

  border-radius:
    0 0 11px 11px;

  background:
    #fff;
}

body.wz-member-event-form
  .wz-event-description-block
  .ql-toolbar,
body.wz-member-event-form
  .wz-event-description-block
  [class*="toolbar"] {
  border-color:
    rgba(27, 31, 37, 0.085) !important;

  background:
    #faf9fa;
}

body.wz-member-event-form
  .wz-event-description-block
  .ql-container {
  border-color:
    rgba(27, 31, 37, 0.085) !important;
}

body.wz-member-event-form
  .wz-event-description-block
  + .text-caption,
body.wz-member-event-form
  .wz-event-form-card
  .text-caption {
  color:
    #85888e !important;

  font-size:
    0.72rem !important;
}

/* ------------------------------------------------------
   DATE + TIME CONTROLS
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-form-card
  .mdi-calendar {
  color:
    #d90045;
}

body.wz-member-event-form
  .wz-event-form-card
  input {
  font-size:
    0.89rem;
}

/* ------------------------------------------------------
   TEMPORARY POST
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-temporary-section {
  margin-top:
    17px !important;

  padding:
    15px 16px 14px;

  border:
    1px solid rgba(228, 0, 70, 0.08);

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      #fff8fa,
      #fff
    );
}

body.wz-member-event-form
  .wz-event-temporary-section
  .v-switch {
  margin:
    0;
}

body.wz-member-event-form
  .wz-event-temporary-section
  .v-label {
  color:
    #383b41 !important;

  font-size:
    0.86rem;

  font-weight:
    650;
}

body.wz-member-event-form
  .wz-event-temporary-section
  strong {
  color:
    #d90045;
}

/* ------------------------------------------------------
   POST LIMIT STATUS
------------------------------------------------------ */

body.wz-member-event-form
  .post-limit-status,
body.wz-member-event-form
  .wz-event-post-limit {
  margin-bottom:
    15px !important;

  overflow:
    hidden;

  border-radius:
    13px !important;
}

/* ------------------------------------------------------
   MEDIA / IMAGE UPLOAD
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-media-section {
  margin-top:
    18px;

  padding:
    15px;

  border:
    1px solid rgba(27, 31, 37, 0.07) !important;

  border-radius:
    15px !important;

  background:
    #fcfbfc;
}

body.wz-member-event-form
  .wz-event-media-section
  .v-alert {
  margin-bottom:
    10px;

  border:
    1px solid rgba(228, 0, 70, 0.075);

  border-radius:
    11px !important;

  background:
    #fff5f8 !important;

  color:
    #56595f !important;

  font-size:
    0.80rem;
}

body.wz-member-event-form
  .wz-event-media-section
  .v-file-upload,
body.wz-member-event-form
  .wz-event-media-section
  [class*="file-upload"] {
  border-radius:
    12px !important;
}

/* existing Edit Event gallery */

body.wz-member-event-form
  .wz-event-existing-images {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    10px !important;

  margin-top:
    18px;

  padding:
    12px !important;

  border:
    1px solid rgba(27, 31, 37, 0.07) !important;

  border-radius:
    15px !important;

  background:
    #f9f8f9;
}

body.wz-member-event-form
  .wz-event-existing-images
  .image-item {
  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  border-radius:
    12px;

  background:
    #fff;

  box-shadow:
    0 4px 13px rgba(24, 20, 22, 0.07);
}

body.wz-member-event-form
  .wz-event-existing-images
  img {
  display:
    block;

  width:
    100%;

  border-radius:
    12px;

  object-fit:
    cover;
}

body.wz-member-event-form
  .wz-event-existing-images
  .ghost {
  opacity:
    0.46;
}

/* ------------------------------------------------------
   WAYZAWAY VIDEO UPLOADS
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-form-card
  [class*="wz-video"] {
  border-radius:
    13px;
}

body.wz-member-event-form
  .wz-event-form-card
  [class*="video-upload"] {
  max-width:
    100%;
}

/* ------------------------------------------------------
   BUTTONS / ACTION AREA
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-form-card
  .wz-event-primary-action,
body.wz-member-event-form
  .wz-event-form-card
  .wz-event-secondary-action {
  min-height:
    42px !important;

  padding-inline:
    19px !important;

  border-radius:
    11px !important;

  font-size:
    0.85rem !important;

  font-weight:
    720 !important;

  letter-spacing:
    0 !important;

  text-transform:
    none !important;
}

body.wz-member-event-form
  .wz-event-form-card
  .wz-event-primary-action {
  box-shadow:
    0 6px 16px rgba(228, 0, 70, 0.18) !important;
}

body.wz-member-event-form
  .wz-event-form-card
  .wz-event-secondary-action {
  border-color:
    rgba(228, 0, 70, 0.22) !important;

  color:
    #d90045 !important;
}

/* ------------------------------------------------------
   PAGE TITLE ACTION / DRAFT MENU
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-page-menu
  .v-list {
  min-width:
    170px;

  padding:
    6px !important;

  border:
    1px solid rgba(24, 28, 34, 0.07);

  border-radius:
    14px !important;

  background:
    rgba(255, 255, 255, 0.985) !important;

  box-shadow:
    0 12px 34px rgba(24, 19, 22, 0.14) !important;
}

body.wz-member-event-form
  .wz-event-page-menu
  .v-list-item {
  min-height:
    40px !important;

  padding-inline:
    11px !important;

  border-radius:
    9px !important;
}

/* ------------------------------------------------------
   SAVED DRAFTS DIALOG
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-drafts-overlay {
  width:
    min(94vw, 610px) !important;

  max-width:
    610px !important;
}

body.wz-member-event-form
  .wz-event-drafts-dialog {
  overflow:
    hidden !important;

  border:
    1px solid rgba(24, 28, 34, 0.07) !important;

  border-radius:
    20px !important;

  background:
    #fff !important;

  box-shadow:
    0 22px 65px rgba(24, 18, 21, 0.22) !important;
}

body.wz-member-event-form
  .wz-event-drafts-dialog
  .v-card-title {
  padding:
    19px 20px 13px !important;

  font-size:
    1.15rem !important;

  font-weight:
    750 !important;

  letter-spacing:
    -0.018em !important;
}

body.wz-member-event-form
  .wz-event-drafts-dialog
  .v-list {
  padding:
    5px 8px !important;
}

body.wz-member-event-form
  .wz-event-drafts-dialog
  .v-list-item {
  min-height:
    58px !important;

  margin:
    3px 0;

  border-radius:
    11px !important;
}

body.wz-member-event-form
  .wz-event-drafts-dialog
  .v-list-item:hover {
  background:
    #fff5f8 !important;
}

/* ------------------------------------------------------
   DATE PICKER / FORM DIALOGS
------------------------------------------------------ */

body.wz-member-event-form
  .v-overlay__content
  .v-date-picker {
  overflow:
    hidden;

  border:
    1px solid rgba(24, 28, 34, 0.07);

  border-radius:
    18px !important;

  box-shadow:
    0 18px 52px rgba(24, 18, 21, 0.18);
}

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

@media (max-width: 640px) {

  body.wz-member-event-form
    .page-title-container {
    margin-bottom:
      8px !important;
  }

  body.wz-member-event-form
    .wz-event-form-page {
    padding-bottom:
      28px;
  }

  body.wz-member-event-form
    .wz-event-form-card {
    padding:
      17px 14px 19px;

    border-radius:
      17px;

    box-shadow:
      0 10px 28px rgba(29, 23, 26, 0.065);
  }

  body.wz-member-event-form
    .wz-event-form-card
    .v-field {
    border-radius:
      11px !important;
  }

  body.wz-member-event-form
    .wz-event-temporary-section {
    padding:
      13px;

    border-radius:
      13px;
  }

  body.wz-member-event-form
    .wz-event-media-section {
    padding:
      12px;

    border-radius:
      13px !important;
  }

  body.wz-member-event-form
    .wz-event-existing-images {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      8px !important;

    padding:
      9px !important;

    border-radius:
      13px !important;
  }

  body.wz-member-event-form
    .wz-event-primary-action,
  body.wz-member-event-form
    .wz-event-secondary-action {
    min-height:
      44px !important;
  }

  body.wz-member-event-form
    .wz-event-drafts-overlay {
    width:
      calc(100vw - 24px) !important;

    max-width:
      none !important;

    margin:
      12px;
  }

  body.wz-member-event-form
    .wz-event-drafts-dialog {
    max-height:
      calc(100vh - 28px);

    border-radius:
      17px !important;
  }
}


/*
=========================================================
WayzAway Member Event Form V2
Approved V1 + targeted polish
=========================================================
*/

/* ------------------------------------------------------
   FORM CARD
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-form-card {
  border-color:
    rgba(28, 31, 37, 0.085);

  box-shadow:
    0 16px 46px rgba(29, 23, 26, 0.09);
}

body.wz-event-form-edit
  .wz-event-form-card {
  padding-top:
    21px;

  border-color:
    rgba(28, 31, 37, 0.10);

  box-shadow:
    0 16px 48px rgba(29, 23, 26, 0.095);
}

/* ------------------------------------------------------
   DESCRIPTION EDITOR
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-description-block {
  overflow:
    hidden;

  border:
    1px solid rgba(27, 31, 37, 0.09);

  border-radius:
    12px;

  background:
    #fff;

  box-shadow:
    0 2px 7px rgba(25, 21, 23, 0.035);
}

body.wz-member-event-form
  .wz-event-description-block
  [class*="toolbar"],
body.wz-member-event-form
  .wz-event-description-block
  .ql-toolbar {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    55px;

  padding:
    8px 10px !important;

  border:
    0 !important;

  border-bottom:
    1px solid rgba(27, 31, 37, 0.075) !important;

  background:
    #faf9fa !important;
}

body.wz-member-event-form
  .wz-event-description-block
  button,
body.wz-member-event-form
  .wz-event-description-block
  select {
  min-width:
    38px;

  min-height:
    36px;

  margin:
    0 1px;

  border:
    1px solid rgba(32, 35, 40, 0.16) !important;

  border-radius:
    8px !important;

  background:
    #fff !important;

  box-shadow:
    none !important;

  transition:
    border-color 130ms ease,
    background 130ms ease,
    box-shadow 130ms ease;
}

body.wz-member-event-form
  .wz-event-description-block
  button:hover,
body.wz-member-event-form
  .wz-event-description-block
  select:hover {
  border-color:
    rgba(228, 0, 70, 0.28) !important;

  background:
    #fff7f9 !important;
}

body.wz-member-event-form
  .wz-event-description-block
  button:focus-visible,
body.wz-member-event-form
  .wz-event-description-block
  select:focus-visible {
  outline:
    none;

  border-color:
    rgba(228, 0, 70, 0.48) !important;

  box-shadow:
    0 0 0 3px rgba(228, 0, 70, 0.075) !important;
}

body.wz-member-event-form
  .wz-event-description-block
  [contenteditable="true"] {
  min-height:
    165px !important;

  padding:
    14px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    #fff !important;
}

/* ------------------------------------------------------
   TEMPORARY POST
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-temporary-section {
  margin-top:
    15px !important;

  padding:
    9px 13px !important;

  border-radius:
    13px;
}

body.wz-member-event-form
  .wz-event-temporary-section
  .v-switch {
  min-height:
    44px !important;

  margin:
    0 !important;
}

body.wz-member-event-form
  .wz-event-temporary-section
  .v-input__control {
  min-height:
    44px !important;
}

body.wz-member-event-form
  .wz-event-temporary-section
  .v-selection-control {
  min-height:
    44px !important;
}

/* ------------------------------------------------------
   EXISTING EDIT IMAGES
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-existing-images {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap:
    10px !important;

  padding:
    13px !important;

  border-radius:
    14px !important;
}

body.wz-member-event-form
  .wz-event-existing-images
  .image-item {
  overflow:
    hidden;

  border:
    1px solid rgba(27, 31, 37, 0.07);

  border-radius:
    11px !important;

  background:
    #fff;

  box-shadow:
    0 4px 12px rgba(25, 21, 23, 0.055);
}

body.wz-member-event-form
  .wz-event-existing-images
  .image-item
  img {
  border-radius:
    10px !important;
}

body.wz-member-event-form
  .wz-event-existing-images
  .image-item
  .v-btn {
  opacity:
    0.72;

  transform:
    scale(0.92);

  transition:
    opacity 130ms ease,
    transform 130ms ease;
}

body.wz-member-event-form
  .wz-event-existing-images
  .image-item:hover
  .v-btn,
body.wz-member-event-form
  .wz-event-existing-images
  .image-item:focus-within
  .v-btn {
  opacity:
    1;

  transform:
    scale(1);
}

/* ------------------------------------------------------
   SUBMIT BUTTON CONSISTENCY
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-form-card
  button[type="submit"],
body.wz-member-event-form
  .wz-event-form-card
  .v-btn[type="submit"] {
  min-height:
    42px !important;

  padding-inline:
    19px !important;

  border-radius:
    11px !important;

  font-size:
    0.85rem !important;

  font-weight:
    720 !important;

  letter-spacing:
    0 !important;

  text-transform:
    none !important;

  box-shadow:
    0 6px 16px rgba(228, 0, 70, 0.18) !important;
}

/* ------------------------------------------------------
   SAFE VISUAL DATE/TIME FORMATTER

   Actual bound input values remain unchanged.
------------------------------------------------------ */

body.wz-member-event-form
  .wz-event-visual-value-host {
  position:
    relative;
}

body.wz-member-event-form
  .wz-event-visual-value-host
  .wz-event-visual-value {
  position:
    absolute;

  top:
    50%;

  right:
    34px;

  left:
    16px;

  z-index:
    3;

  overflow:
    hidden;

  color:
    #5d6066;

  font-size:
    0.89rem;

  line-height:
    1.2;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  pointer-events:
    none;

  transform:
    translateY(-50%);
}

body.wz-member-event-form
  .wz-event-visual-value-host.wz-has-visual-value
  input:not(:focus) {
  color:
    transparent !important;

  caret-color:
    transparent !important;
}

body.wz-member-event-form
  .wz-event-visual-value-host.wz-is-editing
  .wz-event-visual-value {
  display:
    none;
}

body.wz-member-event-form
  .wz-event-visual-value-host.wz-is-editing
  input {
  color:
    inherit !important;

  caret-color:
    auto !important;
}

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

@media (max-width: 640px) {

  body.wz-member-event-form
    .wz-event-description-block
    [contenteditable="true"] {
    min-height:
      145px !important;
  }

  body.wz-member-event-form
    .wz-event-description-block
    [class*="toolbar"],
  body.wz-member-event-form
    .wz-event-description-block
    .ql-toolbar {
    gap:
      4px;

    padding:
      7px !important;
  }

  body.wz-member-event-form
    .wz-event-description-block
    button,
  body.wz-member-event-form
    .wz-event-description-block
    select {
    min-width:
      36px;

    min-height:
      35px;
  }

  body.wz-member-event-form
    .wz-event-temporary-section {
    padding:
      8px 11px !important;
  }

  body.wz-member-event-form
    .wz-event-existing-images {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      8px !important;

    padding:
      9px !important;
  }
}


/*
=========================================================
WayzAway Event Form
2026-08 icon/value alignment correction
=========================================================
*/

/*
 * The UK-format visual date/time value is an overlay.
 * Leave enough room for Vuetify's leading calendar/clock
 * icon so the icon never sits over the value.
 */

body.wz-member-event-form
  .wz-event-visual-value-host
  .wz-event-visual-value {
  left:
    48px !important;

  right:
    16px !important;
}

@media (max-width: 640px) {

  body.wz-member-event-form
    .wz-event-visual-value-host
    .wz-event-visual-value {
    left:
      46px !important;

    right:
      12px !important;
  }
}