.container {
  margin: auto;
  max-width: 1170px;
}

img {
  max-width: 100%;
}

.inbox_people {
  background: hsl(0 0% 97%) none repeat scroll 0 0;
  border-right: 1px solid hsl(0 0% 77%);
  float: left;
  overflow: hidden;
  width: 40%;
}

.top_spac {
  margin: 20px 0 0;
}

.recent_heading {
  float: left;
  width: 40%;
}

.srch_bar {
  display: inline-block;
  padding:;
  text-align: right;
  width: 60%;
}

.headind_srch {
  border-bottom: 1px solid hsl(0 0% 77%);
  overflow: hidden;
  padding: 10px 29px 10px 20px;
}

.recent_heading h4 {
  color: hsl(193 93% 29%);
  font-size: 21px;
  margin: auto;
}

.srch_bar input {
  background: none;
  border: 1px solid hsl(0 0% 80%);
  border-width: 0 0 1px;
  padding: 2px 0 4px 6px;
  width: 80%;
}

.srch_bar .input-group-addon button {
  background: rgb(0 0 0 / 0%) none repeat scroll 0 0;
  border: medium none;
  color: hsl(0 0% 44%);
  font-size: 18px;
  padding: 0;
}

.srch_bar .input-group-addon {
  margin: 0 0 0 -27px;
}

.chat_ib h5 {
  color: hsl(0 0% 27%);
  font-size: 15px;
  margin: 0 0 8px;
}

.chat_ib h5 span {
  float: right;
  font-size: 13px;
}

.chat_ib p {
  color: hsl(0 0% 60%);
  font-size: 14px;
  margin: auto;
}

.chat_img {
  float: left;
  width: 11%;
}

.chat_ib {
  float: left;
  padding: 0 0 0 15px;
  width: 88%;
}

.chat_people {
  clear: both;
  overflow: hidden;
}

.chat_list {
  border-bottom: 1px solid hsl(0 0% 77%);
  margin: 0;
  padding: 18px 16px 10px;
}

.inbox_chat {
  height: 550px;
  overflow-y: scroll;
}

.active_chat {
  background: hsl(0 0% 92%);
}

.incoming_msg_img {
  display: inline-block;
  width: 6%;
}

/* PAGINA DO PRODUTO */
/* ===================================================== */
.block-comments h5,
.block-comments .h5 {
  border-bottom: 1px solid hsl(0 0% 95%);
  display: block;
  font-size: var(--size-26);
  font-weight: 600;
  margin: 40px 0 20px;
  padding: 0 0 15px;
}

.comment-panel.opacity {
  opacity: 0.3;
}

.area_comments .alert-no-message {
  font-weight: 600;
}

.area_show_more {
  display: block;
  height: 22px;
  margin: 0 auto;
  max-width: 220px;
  text-align: center;
}

.area_show_more a.btn-show-more {
  background-color: hsl(0 0% 100%);
  font-weight: 600;
  padding: 0 15px;
  transition: all 0.3s;
}

.area_show_more hr {
  margin: -10px 0 0;
}

.comment-sticky {
  position: sticky;
  top: 20px;
}

.header-fixed .comment-sticky {
  top: 150px;
}

.comment-panel p.comment-title {
  color: hsl(0 0% 26%);
  font-size: var(--size-15);
  font-weight: 600;
}

.comment-panel p.comment-subtitle {
  color: hsl(0 0% 46%);
  font-size: var(--size-13);
  margin-top: -0.5rem;
}

.button_send .button {
  padding: 7px 50px;
}

@media screen and (width <=991px) {
  .comment-sticky,
  .header-fixed .comment-sticky {
    margin-top: 10px;
    position: relative;
    top: 0;
  }
}

@media screen and (width <=360px) {
  .comment-panel button.btn.button.btn-send-comment {
    width: 100%;
  }
}
/* FIM PAGINA DO PRODUTO */
/* ===================================================== */

/* PAGINA MEUS PEDIDOS - MINHA CONTA */
/* ===================================================== */
#modalComments .modal-header {
  padding-bottom: 0;
}

#modalComments h4.modal-title {
  font-weight: 600;
}

#modalComments .modal-body {
  padding-top: 10px;
}

form#areaChatForm {
  border-top: 1px solid hsl(0 0% 95%);
  padding-top: 10px;
}

.msg_history {
  max-height: 400px;
  overflow-y: scroll;
  padding-right: 15px;
}

.msg_history::-webkit-scrollbar {
  width: 3px;
}

.msg_history::-webkit-scrollbar-track {
  background-color: hsl(0 0% 95%);
}

.outgoing_msg,
.incoming_msg {
  display: table;
  margin: 10px 0;
  width: 100%;
}

.outgoing_msg {
  color: hsl(0 0% 15%);
}

.incoming_msg {
  color: hsl(0 0% 60%);
}

.sent_msg,
.received_withd_msg {
  display: table;
  position: relative;
  width: 100%;
}

.msg_history p {
  display: table;
  float: left;
  margin: 0;
  max-width: 630px;
  word-break: break-word;
}

.sent_msg p i {
  padding-right: 5px;
}

.received_withd_msg p i {
  padding-left: 5px;
}

.msg_history p b {
  display: table;
  font-size: var(--size-15);
  word-break: break-all;
}

span.time_date {
  float: right;
  font-size: var(--size-10);
  position: absolute;
  right: 0;
  top: 0;
}

.type_msg {
  border-top: 1px solid hsl(0 0% 92%);
  margin-top: 10px;
  padding-top: 15px;
}

.type_msg .input_msg_write {
  display: table;
  position: relative;
  width: 100%;
}

.type_msg .input_msg_write input {
  padding-right: 70px;
}

.type_msg .input_msg_write button.msg_send_btn {
  border: none;
  box-shadow: none;
  min-height: 35px;
  padding: 6px 20px;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s;
}

.type_msg .input_msg_write button.msg_send_btn i {
  font-size: 16px;
}

.type_msg .input_msg_write .validation-failed {
  border: 1px solid red;
}

@media screen and (width <=991px) {
  .msg_history p b {
    max-width: 340px;
  }
}

@media screen and (width <=575px) {
  .msg_history p {
    float: none;
    width: 100%;
  }

  .msg_history p b {
    max-width: 100%;
  }

  span.time_date {
    float: none;
    position: relative;
  }
}
/* FIM PAGINA MEUS PEDIDOS - MINHA CONTA */
/* ===================================================== */

/* ==========================================================================
   DEV-567 — Storefront PDP question/answer card, ported from the vendor
   panel's precedent (skin/frontend/soulmkt/default/css/soulmkt/soulcomments/
   soulcomments.css). Namespaced under .soulmkt-soulcomments__* to avoid
   collision with the legacy rules above.
   ========================================================================== */

:root {
  --soulcomments-text-primary: hsl(0 0% 20%);
  --soulcomments-text-secondary: hsl(0 0% 46%);
  --soulcomments-border: hsl(0 0% 88%);
  --soulcomments-answer-bg: hsl(0 0% 98%);
  --soulcomments-name-locked-bg: hsl(0 0% 96%);
  --soulcomments-error: hsl(0 94% 43%);
  --soulcomments-success: hsl(134 61% 30%);
  --soulcomments-success-bg: hsl(134 61% 95%);
}

/* --------------------------------------------------------------------------
   Name field
   -------------------------------------------------------------------------- */

.soulmkt-soulcomments__field {
  margin-bottom: 1rem;
}

.soulmkt-soulcomments__name-wrapper {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  position: relative;
}

.soulmkt-soulcomments__name-input {
  width: 100%;
}

.soulmkt-soulcomments__label {
  color: var(--soulcomments-text-primary);
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.soulmkt-soulcomments__name-wrapper--locked {
  background: var(--soulcomments-name-locked-bg);
  border-radius: 0.25rem;
}

.soulmkt-soulcomments__name-input--locked {
  background: transparent;
  border-color: transparent;
  color: var(--soulcomments-text-primary);
  cursor: default;
}

.soulmkt-soulcomments__name-hint {
  color: var(--soulcomments-text-secondary);
  font-size: 0.8125rem;
  margin: 0.25rem 0 0;
}

.soulmkt-soulcomments__login-hint {
  color: var(--soulcomments-text-secondary);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Inline validation hint (replaces bootbox.alert)
   -------------------------------------------------------------------------- */

.soulmkt-soulcomments__hint {
  color: var(--soulcomments-error);
  display: block;
  font-size: 0.8125rem;
}

.soulmkt-soulcomments__hint:not(:empty) {
  margin-top: 0.25rem;
}

[aria-invalid='true'] {
  border-color: var(--soulcomments-error) !important;
}

/* --------------------------------------------------------------------------
   Success message (guaranteed feedback — does not depend on doGritter)
   -------------------------------------------------------------------------- */

.soulmkt-soulcomments__success {
  border-radius: 0.25rem;
  color: var(--soulcomments-success);
  display: none;
  font-size: 0.875rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
}

.soulmkt-soulcomments__success--visible {
  background: var(--soulcomments-success-bg);
  display: block;
}

/* --------------------------------------------------------------------------
   Card (question / answer)
   -------------------------------------------------------------------------- */

.data_comments:not(:last-child) .soulmkt-soulcomments__card {
  border-bottom: 1px solid var(--soulcomments-border);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.soulmkt-soulcomments__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
}

.soulmkt-soulcomments__author {
  color: var(--soulcomments-text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
}

.soulmkt-soulcomments__date {
  color: hsl(0 0% 40%);
  display: block;
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

.soulmkt-soulcomments__badge {
  background: hsl(0 0% 93%);
  border-radius: 1rem;
  color: var(--soulcomments-text-secondary);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}

.soulmkt-soulcomments__badge--pending {
  background: hsl(45 100% 92%);
  color: hsl(38 92% 30%);
}

.soulmkt-soulcomments__text {
  color: var(--soulcomments-text-primary);
  font-size: 1rem;
  margin: 0.5rem 0 0;
  overflow-wrap: break-word;
  white-space: pre-line;
  word-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Seller's reply — indented, subtly highlighted
   -------------------------------------------------------------------------- */

.soulmkt-soulcomments__answer {
  background: var(--soulcomments-answer-bg);
  border-left: 2px solid var(--soulcomments-border);
  border-radius: 0 0.25rem 0.25rem 0;
  margin: 1rem 0 0 1.5rem;
  padding: 0.75rem 1rem;
}

.soulmkt-soulcomments__answer .soulmkt-soulcomments__text {
  color: hsl(0 0% 33%);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.soulmkt-soulcomments__empty {
  color: var(--soulcomments-text-secondary);
  padding: 3rem 1rem;
  text-align: center;
}

.soulmkt-soulcomments__empty i {
  color: hsl(0 0% 87%);
  display: block;
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.soulmkt-soulcomments__empty p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Panel layout — CSS grid (ports the .asd-comments precedent), replaces the
   Bootstrap .row/.col-md-8/.col-md-4 grid. List comes first in the DOM, so
   mobile (single column) naturally shows it before the form — no order needed.
   -------------------------------------------------------------------------- */

.soulmkt-soulcomments__panel {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
}

.soulmkt-soulcomments__panel-list {
  grid-column: span 8;
  min-width: 0;
}

.soulmkt-soulcomments__panel-form {
  grid-column: span 4;
  min-width: 0;
}

@media (width <= 720px) {
  .soulmkt-soulcomments__panel {
    gap: 2rem 0;
    grid-template-columns: 1fr;
  }

  .soulmkt-soulcomments__panel-list,
  .soulmkt-soulcomments__panel-form {
    grid-column: 1/-1;
  }

  .soulmkt-soulcomments__answer {
    margin-left: 0.75rem;
    padding: 0.625rem 0.75rem;
  }
}