/* ==========================================================================
   ONSA Plus | globalni promenne + op-tbl (tabulka)
   Nacita se pres <link> v hlavicce sablony Shoptetu.

   Varianty tabulky:
   .op-tbl--zebra    stridave pruhy radku
   .op-tbl--compare  porovnavaci (centrovane bunky mimo prvniho sloupce)
   .op-tbl--stack    na uzkem mobilu se rozpadne do karet misto scrollu
   .is-best          zvyrazneny sloupec (dej na th i na vsechny td sloupce)
   .op-tbl-yes / .op-tbl-no  ikony ano/ne
   ========================================================================== */

:root {
  --op-radius-lg: 20px;
  --op-radius: 12px;
  --op-radius-sm: 8px;

  --op-green: var(--color-secondary, #16A34A);
  --op-green-hover: var(--color-secondary-hover, #188B42);
  --op-green-bg: #F0FDF4;
  --op-gray-bg: var(--colors-surface-secondary, #F7F7F7);
  --op-ink: #111827;
  --op-line: var(--colors-foregrounds-borders-secondary, #DADADA);
  --op-line-soft: rgba(17, 24, 39, .10);
}

@media (max-width: 1199px) {
  :root {
    --op-radius-lg: 10px;
  }
}

/* --- Obal: horizontalni scroll + zaobleni ------------------------------- */
.op-tbl-wrap {
  display: block;
  width: 100%;
  margin: 0 0 24px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius);
  background: #FFFFFF;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Tabulka ------------------------------------------------------------ */
.op-tbl,
#content .op-tbl,
.category-perex .op-tbl,
.category__secondDescription .op-tbl,
.news-item-detail .op-tbl,
.basic-description .op-tbl {
  width: 100%;
  min-width: 520px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: var(--op-ink);
  background: #FFFFFF;
}

.op-tbl caption {
  caption-side: top;
  padding: 14px 16px 0;
  text-align: left;
  font-weight: 600;
  color: var(--op-ink);
}

.op-tbl th,
.op-tbl td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--op-line-soft);
  background: transparent;
}

/* Hlavicka */
.op-tbl thead th {
  background: var(--op-ink);
  color: #FFFFFF;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 0;
}

/* Prvni sloupec jako popiskovy */
.op-tbl tbody th {
  background: var(--op-gray-bg);
  font-weight: 600;
  border-right: 1px solid var(--op-line-soft);
}

/* Zebra */
.op-tbl--zebra tbody tr:nth-child(even) td {
  background: var(--op-gray-bg);
}

/* Posledni radek bez linky */
.op-tbl tbody tr:last-child th,
.op-tbl tbody tr:last-child td {
  border-bottom: 0;
}

/* Hover radku */
.op-tbl tbody tr:hover th,
.op-tbl tbody tr:hover td {
  background: var(--op-green-bg);
}

/* --- Porovnavaci varianta ----------------------------------------------- */
.op-tbl--compare td,
.op-tbl--compare thead th:not(:first-child) {
  text-align: center;
}

.op-tbl--compare th:first-child,
.op-tbl--compare td:first-child {
  text-align: left;
}

/* Zvyrazneny sloupec */
.op-tbl .is-best {
  background: var(--op-green-bg);
}

.op-tbl thead .is-best {
  background: var(--op-green);
  color: #FFFFFF;
}

.op-tbl-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--op-green-hover);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
  white-space: nowrap;
}

/* --- Ikony ano / ne ----------------------------------------------------- */
.op-tbl-yes,
.op-tbl-no {
  display: inline-block;
  width: 22px;
  height: 22px;
  overflow: hidden;
  text-indent: -999em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.op-tbl-yes {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.2 5.2L20 7'/></svg>");
}

.op-tbl-no {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'><path d='M6 6l12 12M18 6L6 18'/></svg>");
}

/* --- Text uvnitr tabulky ------------------------------------------------ */
.op-tbl strong,
.op-tbl b {
  display: inline;
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
}

/* Sablona podtrhava odkazy v obsahu, proto !important */
.op-tbl a,
.category__secondDescription .op-tbl a,
.category-perex .op-tbl a,
.news-item-detail .op-tbl a,
.basic-description .op-tbl a {
  color: var(--op-green);
  text-decoration: none !important;
  border-bottom: 1px solid rgba(22, 163, 74, .35);
}

.op-tbl a:hover,
.op-tbl a:focus {
  color: var(--op-green-hover);
  border-bottom-color: var(--op-green-hover);
}

/* Poznamka pod tabulkou */
.op-tbl-note {
  margin: -16px 0 24px;
  color: rgba(17, 24, 39, .65);
  font-size: 90%;
  line-height: 1.5;
}

/* --- Responzivita ------------------------------------------------------- */
@media (max-width: 768px) {
  .op-tbl th,
  .op-tbl td {
    padding: 11px 13px;
  }
}

@media (max-width: 480px) {
  .op-tbl {
    min-width: 460px;
  }

  .op-tbl th,
  .op-tbl td {
    padding: 10px 12px;
  }

  .op-tbl-badge {
    display: block;
    margin: 4px 0 0;
  }
}

/* --- Varianta --stack: na uzkem mobilu misto scrollu karty -------------- */
@media (max-width: 640px) {
  .op-tbl--stack {
    display: block;
    min-width: 0;
  }

  .op-tbl--stack thead {
    display: none;
  }

  .op-tbl--stack tbody,
  .op-tbl--stack tr,
  .op-tbl--stack th,
  .op-tbl--stack td {
    display: block;
    width: auto;
  }

  .op-tbl--stack tr {
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--op-line);
  }

  .op-tbl--stack tr:last-child {
    border-bottom: 0;
  }

  .op-tbl--stack tbody th {
    padding: 12px 14px 6px;
    background: transparent;
    border: 0;
  }

  .op-tbl--stack td {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 14px;
    border: 0;
    background: transparent;
    text-align: right;
  }

  .op-tbl--stack td::before {
    content: attr(data-label);
    flex: 0 0 45%;
    text-align: left;
    font-weight: 600;
    color: var(--op-ink);
  }

  .op-tbl--stack tbody tr:hover td,
  .op-tbl--stack tbody tr:hover th {
    background: transparent;
  }
}