/* =========================================
   SALE COMPLETED / SOLD NOTICE
========================================= */

.conversation-sale-complete {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  margin:
    16px 24px 0;

  padding:
    12px 14px;

  background-color:
    #f0fdf4;

  border:
    1px solid
    #bbf7d0;

  border-left:
    4px solid
    var(--green);

  border-radius:
    8px;
}


.conversation-sale-complete-icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    26px;

  height:
    26px;

  flex-shrink:
    0;

  color:
    #ffffff;

  background-color:
    var(--green);

  border-radius:
    50%;

  font-size:
    0.78rem;

  font-weight:
    900;

  line-height:
    1;
}


.conversation-sale-complete-content {
  min-width:
    0;
}


.conversation-sale-complete-title {
  margin:
    0 0 3px;

  color:
    #166534;

  font-size:
    0.82rem;

  font-weight:
    850;

  line-height:
    1.3;
}


.conversation-sale-complete-text {
  margin:
    0;

  color:
    #4b6353;

  font-size:
    0.76rem;

  line-height:
    1.45;
}


/* =========================================
   SOLD WITHOUT INVOICE
========================================= */

.conversation-sale-complete.no-invoice {
  background-color:
    #fffaf3;

  border-color:
    #fed7aa;

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


.conversation-sale-complete.no-invoice
.conversation-sale-complete-icon {
  background-color:
    var(--orange-dark);
}


.conversation-sale-complete.no-invoice
.conversation-sale-complete-title {
  color:
    #92400e;
}


.conversation-sale-complete.no-invoice
.conversation-sale-complete-text {
  color:
    #6f5438;
}


/* =========================================
   SALE AGREED PANEL
========================================= */

.sale-agreed-panel {
  padding:
    24px;

  background:
    #f4f7fa;

  border-top:
    1px solid
    #d8e0e8;

  border-bottom:
    1px solid
    #d8e0e8;
}


/* =========================================
   SALE CARD
========================================= */

.sale-agreed-card {
  overflow:
    hidden;

  background:
    #ffffff;

  border:
    2px solid
    #0f2742;

  border-radius:
    12px;

  box-shadow:
    0 8px 24px
    rgba(
      15,
      39,
      66,
      0.08
    );
}


/* =========================================
   SALE HEADER
========================================= */

.sale-agreed-top {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    20px;

  padding:
    20px 22px;

  background:
    #0f2742;

  color:
    #ffffff;
}


.sale-agreed-eyebrow {
  margin-bottom:
    4px;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

  color:
    #f59e0b;
}


.sale-agreed-title {
  margin:
    0 0 5px;

  color:
    #ffffff;

  font-size:
    21px;

  font-weight:
    800;
}


.sale-agreed-help {
  margin:
    0;

  color:
    #dce5ef;

  font-size:
    13px;

  line-height:
    1.45;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.sale-agreed-close {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  width:
    34px;

  height:
    34px;

  padding:
    0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  border-radius:
    8px;

  background:
    transparent;

  color:
    #ffffff;

  font-size:
    24px;

  line-height:
    1;

  cursor:
    pointer;
}


.sale-agreed-close:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.1
    );
}


/* =========================================
   LISTING SUMMARY
========================================= */

.sale-agreed-listing-summary {
  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    20px;

  padding:
    16px 22px;

  background:
    #fff8eb;

  border-bottom:
    1px solid
    #ead9ba;
}


.sale-agreed-listing-summary
> div {
  display:
    flex;

  flex-direction:
    column;
}


.sale-agreed-summary-label {
  margin-bottom:
    3px;

  color:
    #6c7886;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.7px;

  text-transform:
    uppercase;
}


.sale-agreed-listing-summary
strong {
  color:
    #142537;

  font-size:
    0.95rem;

  font-weight:
    850;
}


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

.sale-agreed-card
form {
  padding:
    22px;
}


.sale-agreed-fields {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    18px;
}


.sale-agreed-card
.label {
  color:
    var(--navy);

  font-weight:
    800;
}


.sale-agreed-card
.input,
.sale-agreed-card
.textarea {
  border:
    1px solid
    #c4d0da;

  border-radius:
    8px;

  box-shadow:
    none;
}


.sale-agreed-card
.input:focus,
.sale-agreed-card
.textarea:focus {
  border-color:
    var(--orange-dark);

  box-shadow:
    0 0 0 2px
    rgba(
      230,
      126,
      0,
      0.12
    );
}


.sale-agreed-card
.textarea {
  resize:
    vertical;
}


/* =========================================
   FIELD HELP
========================================= */

.sale-agreed-field-help {
  margin-top:
    5px;

  color:
    #778391;

  font-size:
    11px;
}


.sale-agreed-optional {
  margin-left:
    5px;

  color:
    #8b96a3;

  font-size:
    10px;

  font-weight:
    500;
}


/* =========================================
   WARNING
========================================= */

.sale-agreed-warning {
  margin-top:
    18px;

  padding:
    13px 15px;

  color:
    #344354;

  background:
    #fff8eb;

  border-left:
    4px solid
    #f59e0b;

  border-radius:
    5px;
}


.sale-agreed-warning
strong {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #1c2d3e;
}


.sale-agreed-warning
p {
  margin:
    0;

  font-size:
    13px;

  line-height:
    1.45;
}


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

.sale-agreed-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    20px;
}


.sale-agreed-actions
.button {
  min-height:
    40px;

  border-radius:
    8px;

  font-weight:
    800;
}


.sale-confirm-button {
  font-weight:
    850;
}


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

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

  .conversation-sale-complete {
    margin:
      14px 14px 0;

    padding:
      11px 12px;
  }

}


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

  .sale-agreed-panel {
    padding:
      15px;
  }


  .sale-agreed-top {
    padding:
      17px;
  }


  .sale-agreed-listing-summary {
    grid-template-columns:
      1fr;

    gap:
      10px;

    padding:
      14px 17px;
  }


  .sale-agreed-card
  form {
    padding:
      17px;
  }


  .sale-agreed-fields {
    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .sale-agreed-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .sale-agreed-actions
  .button {
    width:
      100%;
  }

}

/* =========================================
   LIVE INVOICE SUMMARY
========================================= */

.sale-agreed-live-summary {
  display:
    grid;

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

  gap:
    10px;

  margin:
    4px 0 18px;
}

.sale-agreed-live-summary-item {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    12px 14px;

  background:
    #f8fafc;

  border:
    1px solid
    #dbe3ea;

  border-radius:
    8px;
}

.sale-agreed-live-summary-item span {
  color:
    #64748b;

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.sale-agreed-live-summary-item strong {
  color:
    var(--navy);

  font-size:
    0.95rem;

  font-weight:
    850;
}

.sale-agreed-live-summary-item.is-total {
  background:
    #fff8eb;

  border-color:
    #ead9ba;
}

.sale-agreed-live-summary-item.is-total strong {
  font-size:
    1.05rem;
}

.sale-agreed-tax-status {
  margin:
    0 0 20px;

  padding:
    13px 15px;

  background:
    #f8fafc;

  border:
    1px solid
    #dbe3ea;

  border-left:
    4px solid
    var(--green);

  border-radius:
    7px;
}

.sale-agreed-tax-status strong {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #1f2937;

  font-size:
    0.84rem;
}

.sale-agreed-tax-status p {
  margin:
    0;

  color:
    #64748b;

  font-size:
    0.76rem;

  line-height:
    1.45;
}

.sale-agreed-gst-preview {
  margin-top:
    4px !important;

  color:
    #166534 !important;

  font-weight:
    800;
}

.sale-agreed-payment-disclaimer {
  margin-top:
    10px;

  color:
    #7b8794;

  font-size:
    0.7rem;

  line-height:
    1.45;
}

@media screen and (max-width: 700px) {
  .sale-agreed-live-summary {
    grid-template-columns:
      1fr;
  }
}


/* =========================================
   INVOICE BUYER NAME
========================================= */

.sale-agreed-help
.sale-agreed-buyer-name {
  color:
    #ffffff !important;

  font-weight:
    850;

  text-decoration:
    underline;

  text-decoration-color:
    var(--orange);

  text-underline-offset:
    3px;
}