/* =========================================================
   MARKETPLACE.CSS  (v1.8)
   Guest Posting Marketplace — page-specific styles
   - Hero KPIs: readable (no white-on-white)
   - Table pager: numeric buttons, active/disabled styles
   - Sticky thead never overlaps modal (z-index tuned)
   - Tight filter→table spacing, table polish, modal/grid tweaks
   ========================================================= */

/* --- HERO (green gradient + circular decor) ----------------------------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, #009933 0%, #003300 100%);
  color: #FFFFFF;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset-inline-end: -120px;
  inset-block-start: -120px;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 42px solid rgba(255,255,255,.12);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-18deg);
}
.hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  inset-block-end: -120px;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 30px solid rgba(255,255,255,.1);
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotate(24deg);
}
.hero-inner { padding-block: 86px; position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
.hero-badge-row { display:flex; gap:.75rem; margin-bottom:1rem; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .9rem; border-radius:999px;
  background: rgba(15,23,42,.65);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.25rem 0 0; }
.hero-illustration-card {
  background:#fff; color:var(--color-text-main, #0f172a);
  border-radius: 28px; padding: 1.4rem;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}
.hero-illustration-card img { width:100%; height:auto; border-radius:12px; }

/* HERO KPIs — readable (no white-on-white) */
.hero-illustration-metrics {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem; margin-top:1rem;
}
.metric-pill {
  padding:.75rem 1rem; border-radius:14px;
  background: rgba(255,255,255,.92);
  color:#0d3b22;
  font-size:.92rem;
  box-shadow:0 6px 18px rgba(2, 44, 34, .08);
  border:1px solid rgba(2, 44, 34, .06);
}
.metric-pill strong {
  display:block; font-size:1.05rem; color:#06603f; line-height:1.1;
}

/* Compact variant already used */
.hero.hero--compact .hero-inner { padding-block: 72px; }

/* --- KPI STRIP (secondary section style if used) ------------------------ */
.kpi-strip .grid-4 { align-items: stretch; }
.kpi-card {
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:16px;
  padding:1.1rem 1.25rem;
  text-align:center;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.kpi-card .kpi-value {
  font-size:1.8rem; font-weight:800; color:#06603f; line-height:1;
}
.kpi-card .kpi-label { margin-top:.35rem; font-size:.97rem; color:#475569; }

/* --- INVENTORY HEADER ---------------------------------------------------- */
.inventory-header { text-align:center; }
.inventory-header .section-description { max-width: 720px; margin-inline: auto; }

/* --- FILTER BAR ---------------------------------------------------------- */
.filter-bar-wrap { margin-top: 10px; } /* KPI → filter becomes tight */
.filter-bar {
  
  background:#fff; border:1px solid #E5E7EB; border-radius:14px;
  padding:.9rem; box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.filter-item { display:grid; gap:.35rem; }
.filter-item--grow { grid-column: span 2 / span 2; }
.filter-actions { display:flex; gap:.5rem; align-items:center; }
.filter-bar .input, .filter-bar .select { height:42px; }

/* Keep filter tight to the table below */
.section.section--tight + .section.section--tight { padding-top: 8px; }

/* --- TABLE --------------------------------------------------------------- */
.table-card {
  border:1px solid #E5E7EB;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.07);
}
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table {
  width:100%; border-collapse:separate; border-spacing:0; min-width: 980px;
}
.table thead th {
  position:sticky; top:0;
  z-index: 5; /* modal uses 1000+ */
  background:#F8FAFC; color:#0F172A;
  font-weight:700; text-align:left;
  padding:.9rem .9rem; border-bottom:1px solid #E5E7EB; white-space:nowrap;
  box-shadow: 0 1px 0 rgba(226,232,240,.8);
}
.table tbody td {
  padding:.85rem .9rem; border-bottom:1px solid #F1F5F9;
  vertical-align:middle; color:#111827;
}
.table tbody tr:hover { background:rgba(6,96,63,.045); }
.table a { color:#0F5132; text-decoration:none; }
.table a:hover { text-decoration:underline; }
.table .price { font-weight:700; color:#06603f; }
.table .price--muted { color:#4A4A4A; font-weight:600; }

/* Top tools row (count and page-size) */
.table-tools {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px; border-bottom:1px solid #E5E7EB; background:#fff; gap:12px;
}
.table-tools .rows-select { display:flex; align-items:center; gap:.5rem; }
.select--sm { height:36px; }

/* Numeric pager under table */
.table-pagination, #mp-pager {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding: 12px 14px; border-top:1px solid #E5E7EB; background:#fff;
}
#mp-pager .btn, .table-pagination .btn {
  border-radius: 12px;
  padding: .42rem .7rem;
  font-size: .86rem;
}
#mp-pager .btn.is-active,
.table-pagination .btn.is-active {
  background:#06603f; color:#fff; border-color:#06603f;
}
#mp-pager .btn:disabled,
.table-pagination .btn:disabled {
  opacity:.5; cursor:not-allowed;
}
#mp-page-info { color:#64748b; }

/* “No results” message cell */
.table td[colspan="9"] {
  text-align: center;
  color: #4A4A4A;
  padding: 22px 14px;
}

/* Small button utility */
.btn-sm { padding:.45rem .7rem; border-radius:10px; font-size:.85rem; line-height:1; }

/* --- MODAL (above sticky headers) --------------------------------------- */
.modal { position:fixed; inset:0; display:none; z-index:1000; }
.modal[aria-hidden="false"] { display:block; }
.modal__overlay { position:absolute; inset:0; background:rgba(2,6,23,.55); backdrop-filter: blur(2px); z-index:1000; }
.modal__content {
  position:relative; z-index:1001; max-width:760px; width:calc(100% - 2rem);
  margin:6vh auto; background:#fff; border-radius:18px; border:1px solid #E5E7EB;
  box-shadow:0 30px 60px rgba(15,23,42,.25); padding:1.25rem;
}
.modal__close {
  position:absolute; top:10px; inset-inline-end:10px;
  width:36px; height:36px; border-radius:999px; border:1px solid #E5E7EB;
  background:#fff; cursor:pointer;
}

/* Order summary at top of modal */
.order-summary { display:grid; gap:.5rem; margin-bottom:.75rem; }
.order-summary .sum-row {
  display:flex; flex-wrap:wrap; gap:.75rem 1.25rem;
  font-size:.95rem; color:#111827;
}
.order-summary a { color:#06603f; text-decoration: underline; }

/* --- MODAL FORM GRID (matches your HTML .order-grid) -------------------- */
.order-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.8rem;
}
.order-grid .span-2 { grid-column: span 2 / span 2; }
.order-grid .span-3 { grid-column: 1 / -1; }
.order-grid .form-control { margin:0; }
#order-msg { min-height: 120px; }

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .filter-item--grow { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-illustration { order: -1; }
  .filter-bar { grid-template-columns: 1.2fr repeat(3, 1fr) auto; }
}
@media (max-width: 920px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-actions { justify-content: flex-start; }
  .order-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .hero-inner { padding-block: 66px; }
  .kpi-strip .grid-4 { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .modal__content { margin: 4vh auto; padding: 1rem; }
}
@media (max-width: 560px) {
  .hero-illustration-metrics { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kpi-strip .grid-4 { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .order-grid { grid-template-columns: 1fr; }
  .order-grid .span-2, .order-grid .span-3 { grid-column: auto; }
}
.file-buttons{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}