/* ===== Container ===== */
.offerlistcontainer {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  font-family: sans-serif;
  width: 100%;
}

/* ===== Offer card ===== */
.offerrow {
  border: 1px solid #22AC38;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 6px;
  background-color: #f9f9f9;
  line-height: 1.6;

  /* prevent width “jump” when history appears */
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.offercardinfo { margin-bottom: 12px; }

/* Action buttons */
.offeractions button { margin-right: 10px; }

/* Counter form */
.counterform {
  margin-top: 15px;
  background-color: #f0f8ff;
  border-radius: 4px;
  padding: 12px;
  overflow: hidden;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
  display: none;
  max-height: 0;
  opacity: 0;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.form-row label { margin-right: 8px; white-space: nowrap; }
.short-input { width: 100px; }

.counterform-actions { display: flex; gap: 10px; }

.counter-message {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  padding: 6px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Countdown */
.countdown-clock { font-weight: bold; }
.countdown-warning { color: #E60033; }  /* < 4 hours */
.countdown-normal  { color: #00479D; }  /* 4+ hours */
.countdown-expired { color: #000000; }

/* Status labels */
.accepted-label { color: #22AC38; font-weight: bold; }
.declined-label { color: #E60033; font-weight: bold; }

/* Details table */
.offer-details-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.offer-details-table td {
  padding: 4px 8px;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Misc */
.form-actions button { margin-right: 10px; }
.counter-preview { margin: 6px 0 10px; font-size: 14px; line-height: 1.4; }

/* ===== Seller heading / Learn More ===== */
.sellerheading { padding-top: 16px; margin-bottom: 8px; }

.seller-titlewrap {
  max-width: 900px;   /* match .offerlistcontainer */
  margin: 0 auto;
  padding: 0 20px;    /* match side padding */
}

.seller-titlebar {
  position: relative;
  text-align: center; /* centers "Seller Offers" */
  min-height: 36px;
}
.seller-titlebar .seller-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.seller-titlebar .learnmore-btn {
  position: absolute;
  right: 20px;        /* matches padding above */
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 12px;
  border: 1px solid #22AC38;
  background: #fff;
  color: #22AC38;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}
.seller-titlebar .learnmore-btn:hover { background: #f3fff6; }

/* ===== Offer History ===== */
.history-toggle { margin-top: 8px; }
.history-toggle button {
  padding: 6px 12px;
  border: 1px solid #22AC38;
  background: #fff;
  color: #22AC38;
  border-radius: 4px;
  cursor: pointer;
}
.history-toggle button:hover { background: #f3fff6; }

.history-section {
  margin-top: 10px;
  width: 100%;
  /* no fixed/min height so the card grows when shown */
}
.history-hidden {
  display: none !important;  /* collapse height when hidden */
}

.history-inner {
  width: 100%;
  /* let content define height; scroll only if parent/container sets a max-height */
  overflow: visible;
}

.history-loading,
.history-empty,
.history-error { font-style: italic; opacity: 0.85; }

/* Keep the history grid inside the card width */
.history-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;    /* prevents content from expanding width */
}
.history-table th,
.history-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  font-size: 13px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Column widths */
.history-table th:nth-child(1),
.history-table td:nth-child(1) {
  width: 8%;              /* Round */
  white-space: nowrap;
  text-align: center;
}
.history-table th:nth-child(2),
.history-table td:nth-child(2) {
  width: 12%;             /* By */
  white-space: nowrap;
}
.history-table th:nth-child(3),
.history-table td:nth-child(3) {
  width: 10%;             /* Offer */
  white-space: nowrap;
}
.history-table th:nth-child(4),
.history-table td:nth-child(4) {
  width: 22%;             /* Submitted */
}
.history-table th:nth-child(5),
.history-table td:nth-child(5) {
  width: 48%;             /* Message */
}

/* Keep any leftover spacer from affecting layout */
.history-spacer { display: none !important; }

/* ===== Media Queries (all at bottom) ===== */
@media (max-width: 1050px) {
  .history-table th:nth-child(4),
  .history-table td:nth-child(4) { width: 20%; }
  .history-table th:nth-child(5),
  .history-table td:nth-child(5) { width: 50%; }
}

@media (max-width: 540px) {
  .history-table th:nth-child(4),
  .history-table td:nth-child(4) { width: 18%; }
  .history-table th:nth-child(5),
  .history-table td:nth-child(5) { width: 50%; }
}

@media (max-width: 520px) {
  .seller-titlebar { text-align: center; }
  .seller-titlebar .learnmore-btn {
    position: static;
    transform: none;
    display: inline-block;
    margin-top: 8px;     /* button drops below the title, centered */
  }
}