.shipping-module {
  padding: 22px;
  max-width: 1500px;
  margin: auto;
}
.shipping-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}
.shipping-header h2 {
  margin: 0;
  font-size: 1.45rem;
}
.shipping-header p {
  margin: 4px 0 0;
  color: #667085;
}
.shipping-actions,
.shipping-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}
.shipping-filter,
.shipping-refresh {
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: 7px;
  padding: 8px 10px;
  color: #344054;
  cursor: pointer;
}
.shipping-filter.active {
  background: #0f4c81;
  color: #fff;
  border-color: #0f4c81;
}
.shipping-search {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
}
.shipping-search input {
  border: 0;
  outline: 0;
  padding: 9px 0;
  width: 245px;
}
.shipping-refresh {
  font-size: 1rem;
}
.shipping-refresh.spinning i {
  animation: shipping-spin 0.8s linear infinite;
}
.shipping-summary {
  font-size: 0.9rem;
  color: #667085;
  margin: 10px 0;
}
.shipping-table-wrap {
  overflow: auto;
  border: 1px solid #eaecf0;
  border-radius: 9px;
  background: #fff;
}
.shipping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  white-space: nowrap;
}
.shipping-table th {
  text-align: left;
  background: #f9fafb;
  color: #475467;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shipping-table th,
.shipping-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #eaecf0;
  vertical-align: middle;
  line-height: 1.2;
}
.shipping-table tr:last-child td {
  border-bottom: 0;
}
.shipping-table tbody tr[data-shipment-id] {
  cursor: pointer;
}
.shipping-table tbody tr[data-shipment-id]:hover td,
.shipping-table tbody tr[data-shipment-id]:focus td {
  background: #f0f6ff;
}
.shipping-table strong {
  font-weight: 600;
}
.shipping-detail {
  display: inline;
  color: #667085;
  font-size: 0.72rem;
}
.shipping-detail::before {
  content: " · ";
  color: #98a2b3;
}
.shipment-flag,
.shipment-status {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 0.67rem;
  line-height: 1.2;
  background: #eef4ff;
  color: #175cd3;
}
.shipment-flag.return {
  background: #f4f3ff;
  color: #6938ef;
}
.shipment-flag.damage {
  background: #fef3f2;
  color: #b42318;
  margin-left: 3px;
}
.shipping-empty {
  text-align: center;
  color: #667085;
  padding: 30px !important;
}
.shipping-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: #667085;
  font-size: 0.78rem;
}
.shipping-page-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shipping-page-controls button {
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  padding: 4px 8px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font-size: 0.75rem;
}
.shipping-page-controls button:disabled {
  cursor: not-allowed;
  color: #98a2b3;
  background: #f9fafb;
}
.shipping-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 40, 0.55);
}
.shipping-modal-overlay.is-open {
  display: flex;
}
.shipping-modal {
  width: min(1080px, 100%);
  height: 90vh;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(16, 24, 40, 0.22);
}
.shipping-modal-header,
.shipping-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
}
.shipping-modal-header {
  border-bottom: 1px solid #eaecf0;
}
.shipping-modal-kicker {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shipping-modal-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; color: #667085; font-size: 0.78rem; }
.shipping-modal-tracking { overflow-wrap: anywhere; }
.shipping-modal-header h3 { margin: 4px 0 0; font-size: 1.2rem; }
.shipping-modal-close {
  border: 0;
  border-radius: 6px;
  padding: 7px 9px;
  background: transparent;
  color: #475467;
  cursor: pointer;
  font-size: 1rem;
}
.shipping-modal-close:hover { background: #f2f4f7; }
.shipping-modal-body { padding: 18px 22px; }
.shipping-modal-body section + section { margin-top: 20px; }
.shipping-modal-body h4 { margin: 0 0 10px; color: #344054; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.shipping-modal-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  border-bottom: 1px solid #eaecf0;
}
.shipping-modal-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}
.shipping-modal-tabs button[aria-selected="true"] {
  border-bottom-color: #0f4c81;
  color: #0f4c81;
}
.shipping-modal-tabs .shipping-damage-claim-tab,
.shipping-modal-tabs .shipping-damage-claim-tab[aria-selected="true"] {
  border-bottom-color: #b42318;
  color: #b42318;
}
.shipping-modal-tabs button:focus-visible {
  outline: 2px solid #0f4c81;
  outline-offset: -2px;
}
.shipping-modal-tab-panel[hidden] { display: none; }
.shipping-tab-message { margin: 0; color: #475467; font-size: 0.84rem; }
.shipping-tab-error { color: #b42318; }
.shipping-shipstation-table-wrap { overflow-x: auto; border: 1px solid #eaecf0; border-radius: 7px; }
.shipping-shipstation-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; white-space: nowrap; }
.shipping-shipstation-table th, .shipping-shipstation-table td { padding: 8px 10px; border-bottom: 1px solid #eaecf0; text-align: left; }
.shipping-shipstation-table th { background: #f9fafb; color: #475467; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; }
.shipping-shipstation-table tbody tr:last-child td { border-bottom: 0; }
.shipping-modal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.shipping-modal-info { min-width: 0; }
.shipping-modal-info-wide { grid-column: span 3; }
.shipping-modal-info dt { color: #667085; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; }
.shipping-modal-info dd { margin: 3px 0 0; color: #101828; font-size: 0.82rem; overflow-wrap: anywhere; white-space: pre-line; }
.shipping-modal-footer { justify-content: flex-end; gap: 10px; border-top: 1px solid #eaecf0; }
.shipping-return-button { border: 1px solid #b42318; border-radius: 6px; padding: 8px 18px; background: #b42318; color: #fff; cursor: pointer; font-weight: 600; }
.shipping-return-button:hover { background: #912018; }
.shipping-damage-claim-button,
.shipping-damage-claim-link { border: 1px solid #0f4c81; border-radius: 6px; padding: 8px 18px; background: #0f4c81; color: #fff; cursor: pointer; font: inherit; font-weight: 600; text-decoration: none; }
.shipping-damage-claim-button:hover,
.shipping-damage-claim-link:hover { background: #0b3b65; }
.shipping-damage-claim-button:disabled { cursor: wait; opacity: .65; }
.shipping-return-intro {
  margin: 0 0 18px;
  color: #475467;
  font-size: 0.9rem;
}
.shipping-return-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.shipping-return-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 14px 16px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  text-align: left;
}
.shipping-return-option:hover,
.shipping-return-option:focus {
  border-color: #0f4c81;
  background: #f0f6ff;
  outline: none;
}
.shipping-return-option strong { font-size: 0.92rem; }
.shipping-return-option span { color: #667085; font-size: 0.8rem; }
.shipping-return-option:disabled { cursor: wait; opacity: 0.65; }
.shipping-return-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.shipping-return-field { display: grid; gap: 5px; color: #344054; font-size: 0.78rem; font-weight: 600; }
.shipping-return-field input, .shipping-return-field select { width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 6px; padding: 8px 9px; color: #101828; font: inherit; font-weight: 400; }
.shipping-return-field input:focus, .shipping-return-field select:focus { border-color: #0f4c81; outline: 2px solid rgba(15, 76, 129, 0.15); }
.shipping-return-fee-note { grid-column: 1 / -1; margin: 0; color: #475467; font-size: 0.8rem; }
.shipping-return-back-button {
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  padding: 8px 18px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font-weight: 600;
}
.shipping-return-back-button:hover { background: #f9fafb; }
@keyframes shipping-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 800px) {
  .shipping-header {
    align-items: stretch;
    flex-direction: column;
  }
  .shipping-actions {
    flex-wrap: wrap;
  }
  .shipping-search {
    flex: 1;
  }
  .shipping-search input {
    width: 100%;
  }
  .shipping-module {
    padding: 14px;
  }
  .shipping-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .shipping-modal-overlay { align-items: flex-start; padding: 10px; overflow-y: auto; }
  .shipping-modal-header, .shipping-modal-body, .shipping-modal-footer { padding-left: 16px; padding-right: 16px; }
  .shipping-modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shipping-return-options, .shipping-return-fields { grid-template-columns: 1fr; }
  .shipping-modal-info-wide { grid-column: span 2; }
}
.shipping-modal-tab-panel > .shipping-modal-info { display: inline-block; width: calc(33.333% - 14px); margin: 0 14px 16px 0; }
.shipping-return-save-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; border-top: 1px solid #eaecf0; padding-top: 14px; }
.shipping-return-save-row span { color: #667085; font-size: 0.78rem; }
.shipping-return-save-row .shipping-return-button { flex: 0 0 auto; }
@media (max-width: 600px) {
  .shipping-modal-tab-panel > .shipping-modal-info { display: block; width: 100%; margin-right: 0; }
  .shipping-return-save-row { align-items: stretch; flex-direction: column; }
}

/* Parcel damage claims mirror the guided delivery damage-report worksheet. */
.shipping-damage-readiness { margin-bottom: 16px; border: 1px solid #bfdbfe; border-radius: 9px; padding: 12px 14px; background: #eff6ff; }
.shipping-damage-readiness > div:first-child { display: flex; justify-content: space-between; color: #1e3a5f; font-size: .76rem; font-weight: 700; text-transform: uppercase; }
.shipping-damage-readiness p { margin: 7px 0 0; color: #475467; font-size: .78rem; }
.shipping-damage-progress { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #dbeafe; }
.shipping-damage-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: #0f4c81; transition: width .2s ease; }
.shipping-damage-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, .75fr); gap: 20px; }
.shipping-damage-steps { display: flex; overflow-x: auto; border-bottom: 1px solid #d0d5dd; }
.shipping-damage-step { display: flex; align-items: center; gap: 5px; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; padding: 8px 9px; background: transparent; color: #667085; cursor: pointer; font-size: .72rem; font-weight: 600; }
.shipping-damage-step > span, .shipping-damage-panel h4 > span { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #eaecf0; color: #475467; font-size: .68rem; }
.shipping-damage-step.active { border-bottom-color: #0f4c81; color: #0f4c81; }
.shipping-damage-step.active > span { background: #0f4c81; color: #fff; }
.shipping-damage-panel { padding: 18px 4px 4px; }
.shipping-damage-panel[hidden] { display: none; }
.shipping-damage-panel h4 { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.shipping-damage-panel > p { margin: 0 0 14px; color: #667085; font-size: .8rem; }
.shipping-damage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 14px; }
.shipping-damage-field { display: grid; gap: 5px; color: #344054; font-size: .76rem; font-weight: 600; }
.shipping-damage-field input, .shipping-damage-field select, .shipping-damage-field textarea { box-sizing: border-box; width: 100%; border: 1px solid #d0d5dd; border-radius: 6px; padding: 8px 9px; color: #101828; background: #fff; font: inherit; font-weight: 400; }
.shipping-damage-field [aria-invalid="true"] { border-color: #d92d20; outline: 2px solid #fecdca; outline-offset: 1px; }
.shipping-damage-field textarea { min-height: 92px; resize: vertical; }
.shipping-damage-wide { margin-bottom: 14px; }
.shipping-damage-checklist { display: grid; gap: 7px; margin-bottom: 14px; padding-left: 10px; }
.shipping-damage-check { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; align-items: start; color: #667085; cursor: pointer; font-size: .76rem; font-weight: 400; }
.shipping-damage-check input { margin-top: 2px; }
.shipping-damage-check strong { display: block; color: #344054; font-size: .78rem; }
.shipping-damage-checklist.compact strong { display: inline; margin-right: 5px; }
.shipping-damage-tip { margin-top: 14px; border-left: 3px solid #0f4c81; padding: 9px 11px; background: #f0f6ff; color: #475467; font-size: .76rem; }
.shipping-damage-save { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; border-top: 1px solid #eaecf0; padding-top: 14px; color: #667085; font-size: .76rem; }
.shipping-damage-save [data-damage-save-status].is-success { color: #067647; font-weight: 700; }
.shipping-damage-save [data-damage-save-status].is-error { color: #b42318; font-weight: 700; }
.shipping-damage-save [data-damage-save-status].is-unsaved { color: #9a6700; font-weight: 700; }
.shipping-damage-reference { border-left: 1px solid #eaecf0; padding-left: 18px; }
.shipping-damage-reference h4:not(:first-child) { margin-top: 22px; }
.shipping-damage-reference dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: .75rem; }
.shipping-damage-reference dt { color: #667085; font-weight: 600; }
.shipping-damage-reference dd { margin: 0; overflow-wrap: anywhere; color: #101828; }
@media (max-width: 900px) { .shipping-damage-layout { grid-template-columns: 1fr; } .shipping-damage-reference { border-top: 1px solid #eaecf0; border-left: 0; padding: 18px 0 0; } }
@media (max-width: 600px) { .shipping-damage-grid { grid-template-columns: 1fr; } .shipping-damage-save { align-items: stretch; flex-direction: column; } }