/* =========================================
   LISTING ACTIONS
========================================= */

.listing-detail-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    nowrap;

  gap:
    8px;

  width:
    100%;

  padding-top:
    18px;

  margin-top:
    auto;

  border-top:
    1px solid
    #dfe6ee;
}


/* =========================================
   DESKTOP OWNER ACTIONS
========================================= */

.listing-desktop-owner-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;
}


/* =========================================
   ACTION BUTTONS
========================================= */

.listing-detail-actions
.button {
  min-width:
    105px;

  min-height:
    42px;

  padding-left:
    16px;

  padding-right:
    16px;

  margin:
    0;

  border-radius:
    8px;

  font-size:
    0.76rem;

  font-weight:
    750;

  white-space:
    nowrap;

  box-shadow:
    none;

  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}


.listing-detail-actions
.button:hover {
  transform:
    translateY(-1px);
}


/* =========================================
   ACTION FORM
========================================= */

.listing-detail-action-form {
  display:
    inline-flex;

  margin:
    0;
}


.listing-detail-action-form
.button {
  width:
    auto;
}


/* =========================================
   MOBILE ACTIONS
========================================= */

.listing-mobile-owner-actions {
  display:
    none;
}


/* =========================================
   BUYER ACTION LAYOUT
========================================= */

.listing-detail-actions-buyer {
  justify-content:
    center;

  gap:
    10px;
}


.listing-detail-actions-buyer
.button {
  flex:
    1 1 0;

  min-width:
    0;

  max-width:
    none;
}


.listing-detail-actions-buyer
.favourite-action-form {
  display:
    flex;

  flex:
    1 1 0;

  min-width:
    0;

  margin:
    0;
}


.listing-detail-actions-buyer
.favourite-action-form
.button {
  width:
    100%;
}


/* =========================================
   BACK BUTTON
========================================= */

.listing-detail-actions
.back-button {
  color:
    #ffffff;

  background-color:
    var(--blue);

  border:
    1px solid
    var(--blue);
}


.listing-detail-actions
.back-button:hover {
  color:
    #ffffff;

  background-color:
    var(--blue-dark);

  border-color:
    var(--blue-dark);
}


/* =========================================
   MOBILE TOP BACK BUTTON
========================================= */

.listing-mobile-buyer-actions
.back-button {
  color:
    #ffffff;

  background-color:
    var(--blue);

  border:
    1px solid
    var(--blue);
}


.listing-mobile-buyer-actions
.back-button:hover {
  color:
    #ffffff;

  background-color:
    var(--blue-dark);

  border-color:
    var(--blue-dark);
}


/* =========================================
   EDIT / MESSAGE BUTTON
========================================= */

.edit-button {
  color:
    var(--navy);

  background-color:
    var(--orange);

  border:
    1px solid
    var(--orange);
}


.edit-button:hover {
  color:
    #ffffff;

  background-color:
    var(--orange-dark);

  border-color:
    var(--orange-dark);
}


/* =========================================
   RESERVE BUTTON
========================================= */

.reserve-button {
  color:
    var(--orange-dark);

  background-color:
    #ffffff;

  border:
    1px solid
    var(--orange);
}


.reserve-button:hover {
  color:
    var(--navy);

  background-color:
    var(--orange);

  border-color:
    var(--orange);
}


/* =========================================
   ACTIVE BUTTON
========================================= */

.active-button {
  color:
    #ffffff;

  background-color:
    var(--blue);

  border:
    1px solid
    var(--blue);
}


.active-button:hover {
  color:
    #ffffff;

  background-color:
    var(--blue-dark);

  border-color:
    var(--blue-dark);
}


/* =========================================
   SOLD ACTION BUTTON
========================================= */

.sold-button {
  color:
    #ffffff;

  background-color:
    var(--green);

  border:
    1px solid
    var(--green);
}


.sold-button:hover {
  color:
    #ffffff;

  background-color:
    var(--green-dark);

  border-color:
    var(--green-dark);
}


/* =========================================
   DELETE BUTTON
========================================= */

.delete-button {
  color:
    #ffffff !important;

  background-color:
    var(--red) !important;

  border:
    1px solid
    var(--red) !important;

  font-weight:
    750;
}


.delete-button:hover {
  color:
    #ffffff !important;

  background-color:
    var(--red-dark) !important;

  border-color:
    var(--red-dark) !important;
}


/* =========================================
   REPORT BUTTON
========================================= */

.listing-report-button {
  color:
    #ffffff !important;

  background-color:
    var(--red) !important;

  border:
    1px solid
    var(--red) !important;

  font-weight:
    750;
}


.listing-report-button:hover {
  color:
    #ffffff !important;

  background-color:
    var(--red-dark) !important;

  border-color:
    var(--red-dark) !important;
}


/* =========================================
   SOLD LISTING BUTTON
========================================= */

.listing-sold-button {
  color:
    #991b1b !important;

  background-color:
    #fff1f2 !important;

  border:
    1px solid
    #fecaca !important;

  opacity:
    1 !important;

  cursor:
    not-allowed;
}


.listing-sold-button:hover {
  transform:
    none !important;
}


/* =========================================
   SALE AGREED NOTE
========================================= */

.listing-sale-agreed-owner-note {
  display:
    flex;

  align-items:
    center;

  width:
    100%;

  padding:
    10px 12px;

  margin-bottom:
    4px;

  box-sizing:
    border-box;

  color:
    #9a3412;

  background-color:
    #fff7ed;

  border:
    1px solid
    #fdba74;

  border-radius:
    8px;

  font-size:
    0.8rem;

  font-weight:
    700;

  line-height:
    1.4;
}


/* =========================================
   MOBILE SALE AGREED NOTE
========================================= */

.listing-mobile-sale-agreed-note {
  grid-column:
    span 2;

  width:
    100%;

  padding:
    10px 12px;

  box-sizing:
    border-box;

  color:
    #9a3412;

  background-color:
    #fff7ed;

  border:
    1px solid
    #fdba74;

  border-radius:
    8px;

  font-size:
    0.78rem;

  font-weight:
    700;

  line-height:
    1.4;

  text-align:
    center;
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width: 900px) {

  .listing-detail-actions {
    flex-wrap:
      wrap;

    gap:
      8px;
  }


  .listing-detail-actions
  .button {
    min-width:
      95px;

    padding-left:
      13px;

    padding-right:
      13px;
  }


  .listing-detail-actions-buyer {
    gap:
      8px;
  }


  .listing-detail-actions-buyer
  .button {
    min-width:
      120px;
  }

}


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

@media screen and (max-width: 768px) {

  /* owner controls */

  .listing-mobile-owner-actions {
    display:
      grid;

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

    gap:
      8px;

    width:
      100%;

    margin-top:
      4px;

    margin-bottom:
      16px;

    padding:
      12px;

    box-sizing:
      border-box;

    background-color:
      #f8fafc;

    border:
      1px solid
      #dfe6ee;

    border-radius:
      10px;
  }


  .listing-mobile-owner-actions
  .button {
    width:
      100%;

    min-width:
      0;

    min-height:
      40px;

    margin:
      0;

    border-radius:
      8px;

    font-size:
      0.78rem;

    font-weight:
      750;
  }


  .listing-mobile-action-form {
    display:
      contents;
  }


  .listing-mobile-owner-actions
  .sold-button {
    grid-column:
      span 2;
  }


  /* =========================================
     MOBILE BUYER TOP ACTIONS
  ========================================= */

  .listing-mobile-owner-actions
  .listing-mobile-buyer-actions,
  .listing-mobile-buyer-actions {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      12px;

    width:
      100%;

    margin:
      0 0 10px;

    padding:
      0;

    background:
      transparent;

    border:
      0;

    border-radius:
      0;
  }


  .listing-mobile-buyer-actions
  .button {
    flex:
      none;

    width:
      auto;

    min-width:
      76px;

    min-height:
      34px;

    padding:
      6px 13px;

    margin:
      0;

    border-radius:
      7px;

    font-size:
      0.73rem;

    line-height:
      1;
  }


  .listing-mobile-buyer-actions
  .back-button {
    margin-right:
      auto;
  }


  .listing-mobile-buyer-actions
  .listing-report-button {
    margin-left:
      auto;
  }


  /* hide duplicate desktop owner controls */

  .listing-desktop-owner-actions {
    display:
      none;
  }


  /* hide duplicate buyer controls at bottom */

  .listing-detail-actions-buyer {
    display:
      none;
  }


  /* owner bottom area */

  .listing-detail-actions:not(
    .listing-detail-actions-buyer
  ) {
    flex-direction:
      column;

    align-items:
      stretch;

    justify-content:
      flex-start;

    gap:
      8px;

    width:
      100%;

    margin-top:
      14px;

    padding-top:
      14px;
  }


  .listing-detail-actions:not(
    .listing-detail-actions-buyer
  )
  .button,
  .listing-detail-action-form,
  .listing-detail-action-form
  .button {
    width:
      100%;

    max-width:
      none;

    min-width:
      0;
  }


  .listing-detail-actions
  .button {
    min-height:
      40px;

    font-size:
      0.78rem;
  }


  /* owner delete stays at bottom */

  .listing-detail-actions
  .delete-button {
    margin-top:
      4px;
  }

}


/* =========================================
   MOBILE OWNER TOP NAVIGATION
========================================= */

.listing-mobile-owner-top-actions {
  display:
    none;
}


@media screen and (max-width: 768px) {

  .listing-mobile-owner-top-actions {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      12px;

    width:
      100%;

    margin-bottom:
      12px;
  }


  .listing-mobile-owner-top-actions
  .button {
    width:
      auto;

    min-width:
      78px;

    min-height:
      34px;

    padding:
      6px 12px;

    margin:
      0;

    border-radius:
      7px;

    font-size:
      0.72rem;

    font-weight:
      800;
  }


  .listing-mobile-owner-back {
    margin-right:
      auto !important;

    color:
      #ffffff;

    background-color:
      var(--blue);

    border:
      1px solid
      var(--blue);
  }


  .listing-mobile-owner-delete-form {
    display:
      flex;

    margin:
      0 0 0 auto;
  }


  /* owner back/delete now live at top */
  .listing-detail-actions:not(
    .listing-detail-actions-buyer
  )
  > .back-button,
  .listing-detail-actions
  .listing-owner-delete-form {
    display:
      none;
  }

}


/* =========================================
   LISTING INVOICE ACTION
========================================= */

.listing-invoice-button {
  color:
    #ffffff !important;

  background-color:
    var(--blue) !important;

  border:
    1px solid
    var(--blue) !important;

  text-decoration:
    none;
}


.listing-invoice-button:hover {
  color:
    #ffffff !important;

  background-color:
    var(--blue-dark) !important;

  border-color:
    var(--blue-dark) !important;
}


/* =========================================
   MOBILE OWNER ACTION POLISH
========================================= */

@media screen and (max-width: 768px) {

  .listing-mobile-owner-actions {
    grid-template-columns:
      1fr 1fr;

    gap:
      8px;

    margin-top:
      8px;

    margin-bottom:
      14px;

    padding:
      10px;
  }


  .listing-mobile-owner-actions
  .button {
    min-height:
      38px;

    padding:
      8px 10px;

    font-size:
      0.74rem;

    white-space:
      normal;

    text-align:
      center;
  }


  .listing-mobile-owner-actions
  .listing-mobile-sale-agreed-note {
    grid-column:
      1 / -1;

    margin:
      0;

    padding:
      9px 10px;

    font-size:
      0.72rem;
  }


  .listing-mobile-owner-actions
  .listing-invoice-button {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;
  }

}


@media screen and (max-width: 420px) {

  .listing-mobile-owner-actions {
    grid-template-columns:
      1fr;
  }


  .listing-mobile-owner-actions
  .listing-mobile-sale-agreed-note {
    grid-column:
      1;
  }

}


/* =========================================
   DESKTOP ACTIVE INVOICE LAYOUT
========================================= */

@media screen and (min-width: 769px) {

  .listing-detail-actions-owner.listing-detail-actions-invoice {
    display:
      grid;

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

    grid-template-rows:
      auto auto;

    align-items:
      center;

    justify-content:
      stretch;

    column-gap:
      8px;

    row-gap:
      10px;

    width:
      100%;
  }


  .listing-detail-actions-owner.listing-detail-actions-invoice
  .listing-desktop-owner-actions {
    display:
      contents;
  }


  .listing-detail-actions-owner.listing-detail-actions-invoice
  > .back-button {
    grid-column:
      1;

    grid-row:
      1;
  }


  .listing-detail-actions-owner.listing-detail-actions-invoice
  .edit-button {
    grid-column:
      2;

    grid-row:
      1;
  }


  .listing-detail-actions-owner.listing-detail-actions-invoice
  .listing-invoice-button {
    grid-column:
      3;

    grid-row:
      1;
  }


  .listing-detail-actions-owner.listing-detail-actions-invoice
  .listing-sale-agreed-owner-note {
    grid-column:
      1 / 5;

    grid-row:
      2;

    min-height:
      38px;

    width:
      100%;

    margin:
      0;

    padding:
      8px 12px;

    border-radius:
      8px;

    font-size:
      0.74rem;

    line-height:
      1.25;

    white-space:
      normal;
  }


  .listing-detail-actions-owner.listing-detail-actions-invoice
  .listing-owner-delete-form {
    grid-column:
      5;

    grid-row:
      2;

    justify-self:
      end;
  }


  .listing-detail-actions-owner.listing-detail-actions-invoice
  .listing-owner-delete-form
  .button {
    min-width:
      110px;
  }

}


/* =========================================
   SOLD LISTING ACTION COLOURS
========================================= */

/* sold listings no longer need editing
   on desktop */
@media screen and (min-width: 769px) {

  .listing-detail-actions-sold
  .listing-desktop-owner-actions
  > .edit-button {
    display:
      none;
  }

}


/* invoice is the main sold-item action
   on both desktop and mobile */
.listing-detail-actions-sold
.listing-sold-invoice-button,
.listing-mobile-owner-actions.is-sold
.listing-sold-invoice-button {
  color:
    var(--navy) !important;

  background-color:
    var(--orange) !important;

  border-color:
    var(--orange) !important;
}


.listing-detail-actions-sold
.listing-sold-invoice-button:hover,
.listing-mobile-owner-actions.is-sold
.listing-sold-invoice-button:hover {
  color:
    #ffffff !important;

  background-color:
    var(--orange-dark) !important;

  border-color:
    var(--orange-dark) !important;
}


/* keeps relist visually different
   from the back button on sold items */
.listing-mobile-owner-actions.is-sold
.active-button,
.listing-detail-actions-owner
.active-button {
  color:
    #ffffff;

  background-color:
    var(--navy);

  border-color:
    var(--navy);
}


.listing-mobile-owner-actions.is-sold
.active-button:hover,
.listing-detail-actions-owner
.active-button:hover {
  background-color:
    #223247;

  border-color:
    #223247;
}


/* =========================================
   MOBILE SOLD ACTION LAYOUT
========================================= */

@media screen and (max-width: 768px) {

  .listing-mobile-owner-actions.is-sold {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .listing-mobile-owner-actions.is-sold
  .listing-invoice-button,
  .listing-mobile-owner-actions.is-sold
  .listing-mobile-action-form {
    grid-column:
      auto;
  }


  .listing-mobile-owner-actions.is-sold
  .listing-mobile-sale-agreed-note {
    grid-column:
      1 / -1;
  }

}


@media screen and (max-width: 420px) {

  .listing-mobile-owner-actions.is-sold {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .listing-mobile-owner-actions.is-sold
  .button {
    font-size:
      0.7rem;

    padding-left:
      6px;

    padding-right:
      6px;
  }

}