/**
 * Versandkostentabelle — Shortcode [vitalshop_versandkosten]
 *
 * Eigenständiges, gescoptes Styling im Checkout-Look des Shops.
 * Mini-Token-System als Custom Properties (Theme hat kein globales),
 * Werte = bestehende Shop-Palette (sass/: #548460 Grün, #ebe6de Beige …).
 * BEM: Block .vitalshop-shipping-table, Elemente __zone/__carrier/…
 */

.vitalshop-shipping-table-wrap {
  --vs-st-green: #548460;
  --vs-st-beige: #ebe6de;
  --vs-st-text: #2e2e2d;
  --vs-st-muted: #6f6f6e;
  --vs-st-surface: #ffffff;
  --vs-st-surface-alt: #faf9f7;
  --vs-st-border: #e6e7e8;
  --vs-st-radius: 12px;

  margin: 24px 0 32px;
  border: 1px solid var(--vs-st-border);
  border-radius: var(--vs-st-radius);
  overflow: hidden;
  background: var(--vs-st-surface);
}

/* Ausrichtung an der Breadcrumb-Linie: .pl-50 = 50px Einzug (Desktop) */
@media (min-width: 768px) {
  .vitalshop-shipping-table-wrap {
    margin-left: 50px;
    margin-right: 50px;
  }
}

/* ACHTUNG Theme-Eigenheit: html{font-size:10px} -> rem-Werte wären winzig,
   daher bewusst px-Angaben. */
.vitalshop-shipping-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
  color: var(--vs-st-text);
}

/* Header-Band im Beige der Checkout-Karten */
.vitalshop-shipping-table thead th {
  background: var(--vs-st-beige);
  color: var(--vs-st-text);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  padding: 14px 16px;
  border: 0;
  white-space: nowrap;
}

.vitalshop-shipping-table tbody td {
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--vs-st-border);
  vertical-align: middle;
  background: var(--vs-st-surface);
}

.vitalshop-shipping-table tbody tr:nth-child(even) td {
  background: var(--vs-st-surface-alt);
}

.vitalshop-shipping-table__zone {
  font-weight: 600;
  max-width: 360px;
}

.vitalshop-shipping-table__carrier {
  white-space: nowrap;
}

.vitalshop-shipping-table__carrier-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vitalshop-shipping-table__carrier-logo {
  height: 26px;
  width: auto;
  display: block;
}

.vitalshop-shipping-table__weight {
  color: var(--vs-st-muted);
  white-space: nowrap;
}

.vitalshop-shipping-table__cost {
  font-weight: 600;
  white-space: nowrap;
}

.vitalshop-shipping-table__free {
  font-weight: 600;
  color: var(--vs-st-green);
  white-space: nowrap;
}

/* WICHTIG: Das globale Shop-Styling bläst .woocommerce-Price-amount riesig
   und grün auf — innerhalb der Tabelle neutralisieren. */
.vitalshop-shipping-table .woocommerce-Price-amount,
.vitalshop-shipping-table .woocommerce-Price-amount bdi,
.vitalshop-shipping-table .woocommerce-Price-currencySymbol {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  display: inline !important;
}

/* ------------------------------------------------------------------ */
/* Mobil (< 768px): jede Zone wird zur kleinen Karte (Checkout-Optik)  */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .vitalshop-shipping-table-wrap {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .vitalshop-shipping-table thead {
    display: none;
  }

  .vitalshop-shipping-table,
  .vitalshop-shipping-table tbody,
  .vitalshop-shipping-table tr,
  .vitalshop-shipping-table td {
    display: block;
    width: 100%;
  }

  .vitalshop-shipping-table tbody tr {
    border: 1px solid var(--vs-st-border);
    border-radius: var(--vs-st-radius);
    background: var(--vs-st-surface);
    margin-bottom: 12px;
    overflow: hidden;
  }

  .vitalshop-shipping-table tbody td,
  .vitalshop-shipping-table tbody tr:nth-child(even) td {
    background: transparent;
    border-top: 0;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    max-width: none;
    white-space: normal;
  }

  /* Zonen-Name als Karten-Titel im Beige-Band */
  .vitalshop-shipping-table tbody td.vitalshop-shipping-table__zone {
    background: var(--vs-st-beige);
    font-weight: 600;
    padding: 12px 16px;
    display: block;
  }

  .vitalshop-shipping-table tbody td.vitalshop-shipping-table__zone::before {
    content: none;
  }

  /* Label links, Wert rechts — Label kommt aus data-label */
  .vitalshop-shipping-table tbody td::before {
    content: attr(data-label);
    font-size: 13px;
    font-weight: 400;
    color: var(--vs-st-muted);
    flex: 0 0 auto;
  }
}