.mpd-sell-metal {
  color: #222;
  font-size: 15px;
  line-height: 1.45;
}

.mpd-sell-status {
  margin-bottom: 24px;
  padding: 16px 18px;
  border-left: 4px solid #d5872a;
  background: #fff;
  scroll-margin-top: 150px;
}

.mpd-sell-status h3 {
  margin: 0 0 6px;
  color: #1f1f1f;
  font-size: 20px;
}

.mpd-sell-status p {
  margin: 0;
  color: #444;
}

.mpd-sell-status__meta {
  margin-top: 8px !important;
  color: #777;
  font-size: 13px;
}

.mpd-sell-status.is-success {
  border-left-color: #2f9e44;
  background: #f3fbf5;
}

.mpd-sell-status.is-warning {
  border-left-color: #d5872a;
  background: #fff8ef;
}

.mpd-sell-status.is-error {
  border-left-color: #d94841;
  background: #fff3f2;
}

.mpd-sell-metal h2 {
  margin: 0 0 18px;
  color: #1f1f1f;
  font-size: 22px;
  font-weight: 700;
}

.mpd-sell-metal__selector,
.mpd-sell-metal__form-wrap {
  margin-bottom: 28px;
}

.mpd-sell-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 180px 180px;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid #ece7df;
  border-bottom: 1px solid #ece7df;
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 700;
}

.mpd-sell-group {
  border-bottom: 1px solid #ece7df;
}

.mpd-sell-group__toggle {
  width: 100%;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: 0;
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  margin-bottom: 0 !important;
}

.mpd-sell-group__chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 1px solid #c67e27;
  border-bottom: 1px solid #c67e27;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.mpd-sell-group.is-open .mpd-sell-group__chevron {
  transform: rotate(-135deg);
}

.mpd-sell-group__body {
  display: none;
}

.mpd-sell-group.is-open .mpd-sell-group__body {
  display: block;
}

.mpd-sell-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 180px 180px;
  gap: 18px;
  align-items: center;
  color: #2b2b2b;
}

.mpd-sell-row__product,
.mpd-sell-row__price {
  font-size: 14px;
  color: #2b2b2b;
}

.mpd-sell-row__price {
  white-space: nowrap;
}

.mpd-sell-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.mpd-sell-row__actions input {
  width: 60px;
  min-width: 60px;
  height: 35px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
}

.mpd-sell-row__actions button {
  min-width: 36px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: #d5872a;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  margin-top: 15px;
}

.mpd-sell-selector-summary {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.mpd-sell-selector-summary strong {
  color: #d5872a;
}

.mpd-sell-metal__form-wrap {
  display: block;
}

.mpd-sell-form-panel {
  padding: 20px 24px 24px;
  border: 1px solid #ece7df;
  background: #fff;
}

.mpd-sell-payment {
  margin-bottom: 22px;
}

.mpd-sell-payment__header {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.mpd-sell-payment__header h3 {
  margin: 0;
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 700;
}

.mpd-sell-payment__select-label {
  display: block;
  max-width: 420px;
}

.mpd-sell-payment-fields {
  margin-top: 14px;
}

.mpd-sell-payment-group {
  display: none;
}

.mpd-sell-payment-group.is-active {
  display: block;
}

.mpd-sell-payment-field {
  display: block;
  max-width: 420px;
  color: #7b7b7b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.mpd-sell-payment-field + .mpd-sell-payment-field {
  margin-top: 14px;
}

.mpd-sell-payment-field--inline select,
.mpd-sell-payment-field--inline input,
.mpd-sell-payment-field input,
.mpd-sell-payment-field select {
  margin-top: 6px;
}

.mpd-sell-payment-note {
  margin: 0;
  color: #666;
  font-size: 13px;
}

.mpd-sell-grid,
.mpd-sell-grid--three,
.mpd-sell-grid--two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.mpd-sell-form-notes {
  margin: 0 0 20px 18px;
  padding: 0;
  color: #595959;
  line-height: 1.7;
  font-size: 13px;
}

.mpd-sell-form-notes li + li {
  margin-top: 4px;
}

.mpd-sell-form {
  display: grid;
  gap: 18px;
}

.mpd-sell-form label {
  display: block;
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.mpd-sell-form input,
.mpd-sell-form select,
.mpd-sell-form textarea,
.mpd-sell-payment select,
.mpd-sell-payment input {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #d8d8d8;
  border-radius: 0;
  background: #fff;
  color: #222;
  box-shadow: none;
  font-size: 14px;
}

.mpd-sell-form input,
.mpd-sell-form select,
.mpd-sell-payment select,
.mpd-sell-payment input {
  min-height: 36px;
}

.mpd-sell-form textarea {
  min-height: 210px;
  resize: vertical;
}

.mpd-sell-form__full {
  grid-column: 1 / -1;
}

.mpd-sell-photo-upload input[type="file"] {
  min-height: 0;
  padding: 10px;
}

.mpd-sell-photo-upload__help {
  margin: 7px 0 0;
  color: #666;
  font-size: 13px;
  font-weight: 400;
}

.mpd-sell-photo-upload__status {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #d6b335;
  background: #fffaf0;
  color: #17212b;
  font-size: 13px;
  font-weight: 600;
}

.mpd-sell-photo-upload__status[hidden] {
  display: none;
}

.mpd-sell-photo-upload__status.is-error {
  grid-template-columns: minmax(0, 1fr);
  border-color: #c0392b;
  background: #fff3f2;
  color: #9c2f24;
}

.mpd-sell-photo-upload__status.is-complete {
  grid-template-columns: minmax(0, 1fr);
  border-color: #27864a;
  background: #f1fbf4;
  color: #1e6b3a;
}

.mpd-sell-photo-upload__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(23, 33, 43, 0.2);
  border-top-color: #c89f22;
  border-radius: 50%;
  animation: mpd-sell-photo-spin 0.75s linear infinite;
}

.mpd-sell-photo-upload__status.is-error .mpd-sell-photo-upload__spinner,
.mpd-sell-photo-upload__status.is-complete .mpd-sell-photo-upload__spinner {
  display: none;
}

.mpd-sell-photo-upload__status.is-error .mpd-sell-photo-upload__status-text,
.mpd-sell-photo-upload__status.is-complete .mpd-sell-photo-upload__status-text {
  grid-column: 1 / -1;
  width: auto;
  min-width: 0;
  max-width: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.mpd-sell-photo-upload__progress {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  overflow: hidden;
  background: rgba(23, 33, 43, 0.12);
}

.mpd-sell-photo-upload__progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: #c89f22;
  transition: width 0.15s ease;
}

.mpd-sell-photo-upload__status.is-error .mpd-sell-photo-upload__progress,
.mpd-sell-photo-upload__status.is-complete .mpd-sell-photo-upload__progress {
  display: none;
}

@keyframes mpd-sell-photo-spin {
  to {
    transform: rotate(360deg);
  }
}

.mpd-sell-photo-upload__preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mpd-sell-photo-upload__item {
  position: relative;
  min-width: 0;
}

.mpd-sell-photo-upload__placeholder {
  display: flex;
  width: 100%;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8d8d8;
  background: #f5f5f5;
  color: #a00;
  font-size: 12px;
  text-align: center;
}

.mpd-sell-photo-upload__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  width: 22px;
  height: 22px;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.mpd-sell-photo-upload__remove:hover,
.mpd-sell-photo-upload__remove:focus {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}

.mpd-sell-photo-upload__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #d8d8d8;
  background: #f5f5f5;
}

.mpd-sell-photo-upload__name {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #555;
  font-size: 12px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mpd-sell-form__footer {
  display: grid;
  gap: 14px;
}

.mpd-sell-form__footer-field {
  max-width: 420px;
}

.mpd-sell-form__footer-field .js-mpd-appointment-date-display {
  cursor: pointer;
}

.ui-datepicker.mpd-sell-datepicker {
  z-index: 100000 !important;
  width: 280px;
  padding: 12px;
  border: 1px solid #d8b233;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  color: #151a20;
  font-size: 14px;
}

.mpd-sell-datepicker .ui-datepicker-header {
  position: relative;
  min-height: 32px;
  margin-bottom: 8px;
  text-align: center;
}

.mpd-sell-datepicker .ui-datepicker-title {
  padding: 0 40px;
  font-weight: 700;
  line-height: 32px;
}

.mpd-sell-datepicker .ui-datepicker-prev,
.mpd-sell-datepicker .ui-datepicker-next {
  position: absolute;
  top: 0;
  width: 32px;
  height: 32px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  text-decoration: none;
  cursor: pointer;
}

.mpd-sell-datepicker .ui-datepicker-prev > span,
.mpd-sell-datepicker .ui-datepicker-next > span {
  display: none !important;
}

.mpd-sell-datepicker .ui-datepicker-prev {
  left: 0;
}

.mpd-sell-datepicker .ui-datepicker-next {
  right: 0;
}

.mpd-sell-datepicker .ui-datepicker-prev::after,
.mpd-sell-datepicker .ui-datepicker-next::after {
  position: absolute;
  inset: 0;
  color: #151a20;
  font-size: 22px;
  line-height: 30px;
  text-align: center;
}

.mpd-sell-datepicker .ui-datepicker-prev::after {
  content: '\2039';
}

.mpd-sell-datepicker .ui-datepicker-next::after {
  content: '\203a';
}

.mpd-sell-datepicker table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.mpd-sell-datepicker th,
.mpd-sell-datepicker td {
  width: 14.285%;
  padding: 2px;
  border: 0;
  text-align: center;
}

.mpd-sell-datepicker td a,
.mpd-sell-datepicker td span {
  display: block;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #151a20;
  line-height: 30px;
  text-align: center;
}

.mpd-sell-datepicker td a:hover,
.mpd-sell-datepicker .ui-datepicker-current-day a {
  background: #d8b233;
  color: #111;
}

.mpd-sell-datepicker .ui-state-disabled span {
  color: #a2a7ad;
  cursor: not-allowed;
}

.mpd-sell-form__submit-row {
  display: block;
}

.mpd-sell-form__submit-row .button {
  min-width: 160px;
  min-height: 40px;
}

.mpd-sell-form__submit-row .button.is-loading,
.mpd-sell-form__submit-row .button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.is-required {
  color: #d61818;
}

.mpd-sell-metal__selector h2,
.mpd-sell-metal__selector span,
.mpd-sell-metal__selector .mpd-sell-row__product,
.mpd-sell-metal__selector .mpd-sell-row__price,
.mpd-sell-metal__selector .woocommerce-Price-amount,
.mpd-sell-metal__selector .woocommerce-Price-currencySymbol {
  color: #fff;
}

@media (max-width: 900px) {
  .mpd-sell-table-head,
  .mpd-sell-row {
    grid-template-columns: 1fr;
  }

  .mpd-sell-row__actions,
  .mpd-sell-selector-summary {
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
  }

  .mpd-sell-payment__header {
    display: flex;
    align-items: flex-start;
  }
}

.mpd-sell-price-unavailable {
  color: #7a7a7a;
  font-style: italic;
}


.mpd-sell-row.is-overflow-item {
  display: none;
}

.mpd-sell-group.is-expanded .mpd-sell-row.is-overflow-item {
  display: grid;
}

.mpd-sell-see-more {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid #ece7df;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}


.mpd-sell-table-head {
  display: grid !important;
  align-items: center;
}

.mpd-sell-table-head > span {
  display: block;
  min-width: 0;
}

.mpd-sell-group__body {
  padding: 8px 0;
}

.mpd-sell-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) 180px 180px !important;
  gap: 5px;
  align-items: center;
  padding: 0 0;
  height: 50px;
}

.mpd-sell-row > * {
  min-width: 0;
}

.mpd-sell-row__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.mpd-sell-row__actions .js-mpd-sell-qty {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0 !important;
}

.mpd-sell-row__actions .js-mpd-add-quote {
  width: auto !important;
  min-width: 36px !important;
  height: 30px;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.mpd-sell-see-more {
  display: block;
}

@media (max-width: 900px) {
  .mpd-sell-row {
    grid-template-columns: 1fr !important;
    height: auto;
    min-height: 0;
    gap: 6px;
    padding: 8px 0 10px;
    align-items: start;
  }

  .mpd-sell-row__actions {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
}

.mpd-sell-form-gate {
  padding: 8px 0;
}

.mpd-sell-form-gate h3 {
  margin: 0 0 10px;
  color: #1f1f1f;
  font-size: 20px;
}

.mpd-sell-form-gate p {
  margin: 0;
  color: #444;
}

.mpd-sell-form-gate__actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.mpd-sell-row__actions .js-mpd-sell-qty::-webkit-outer-spin-button,
.mpd-sell-row__actions .js-mpd-sell-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mpd-sell-row__actions .js-mpd-subtract-quote {
  background: #c67e27 !important;
  color: #fff !important;
}

.mpd-sell-form-gate__actions a.button:last-child {
  display: none !important;
}

.mpd-sell-account h2 {
  margin-bottom: 18px;
}

.mpd-sell-orders-table tbody td,
.mpd-sell-order-items tbody td,
.mpd-sell-order-items tfoot th,
.mpd-sell-order-items tfoot td,
.mpd-sell-order-meta dt,
.mpd-sell-order-meta dd {
  color: #fff !important;
}

.mpd-account-order-tabs {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 24px;
  border: 1px solid #d7ad35;
}

.mpd-account-order-tab {
  min-width: 132px;
  padding: 10px 18px;
  color: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.mpd-account-order-tab + .mpd-account-order-tab {
  border-left: 1px solid #d7ad35;
}

.mpd-account-order-tab:hover,
.mpd-account-order-tab:focus {
  color: #d7ad35;
}

.mpd-account-order-tab.is-active {
  background: #d7ad35;
  color: #101d2d;
}

.mpd-sell-orders-table .mpd-sell-order-status,
.mpd-sell-order-heading .mpd-sell-order-status {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #8a8f98;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.mpd-sell-order-status.is-approved {
  border-color: #56b870;
  color: #56b870;
}

.mpd-sell-order-status.is-pending,
.mpd-sell-order-status.is-submitted {
  border-color: #d7ad35;
  color: #d7ad35;
}

.mpd-sell-order-status.is-cancelled,
.mpd-sell-order-status.is-rejected {
  border-color: #e06b6c;
  color: #e06b6c;
}

.mpd-sell-order-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.mpd-sell-order-heading h2,
.mpd-sell-order-heading p {
  margin: 0 0 6px;
}

.mpd-sell-order-items th:nth-child(n+2),
.mpd-sell-order-items td:nth-child(n+2) {
  text-align: right;
}

.mpd-sell-order-meta {
  margin: 24px 0 0;
  border-top: 1px solid rgba(128, 128, 128, 0.35);
}

.mpd-sell-order-meta > div {
  display: grid;
  grid-template-columns: minmax(140px, 28%) 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}

.mpd-sell-order-meta dt {
  font-weight: 700;
}

.mpd-sell-order-meta dd {
  margin: 0;
}

.mpd-sell-account .woocommerce-pagination {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 768px) {
  .mpd-account-order-tabs {
    display: flex;
    width: 100%;
  }

  .mpd-account-order-tab {
    flex: 1 1 50%;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
  }

  .mpd-sell-order-heading {
    display: block;
  }

  .mpd-sell-order-heading .mpd-sell-order-status {
    margin-top: 8px;
  }

  .mpd-sell-order-meta > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mpd-sell-order-items th:nth-child(n+2),
  .mpd-sell-order-items td:nth-child(n+2) {
    text-align: left;
  }
}