/\* ==========================================================================  
ONSA Plus | op-tbl  
Tabulka pro obsah kategorie, blogu, detailu produktu a staticke stranky.  
Vyzaduje blok globalnich promennych vyse.

Varianty:  
.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  
========================================================================== \*/

/\* --- 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;  
}  
}