/*
 * ============================================================
 * thermocold-skiron.css  |  v2.0
 * Thermocold product styles — Skiron.gr
 * iLoveIt Digital Agency
 * ============================================================
 * Enqueue in child theme functions.php:
 *   wp_enqueue_style('thermocold', get_stylesheet_directory_uri().'/thermocold-skiron.css');
 *
 * Classes injected by tc_relink.php post-processor:
 *   tc-products-table  tc-prod-row  tc-prod-name
 *   tc-badge-hc  tc-badge-cc  tc-badge-rc
 *   tc-badge-ext  tc-badge-out  tc-cap-val  tc-temp-val
 * ============================================================
 */

/* ── BASE ────────────────────────────────────────────────── */
.tc-content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    max-width: 100%;
}
.tc-content *, .tc-content *::before, .tc-content *::after {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT LISTING TABLE  (class injected by tc_relink.php)
══════════════════════════════════════════════════════════ */
.tc-content table.tc-products-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 13px;
    table-layout: auto;
}
.tc-content table.tc-products-table,
.tc-content table.tc-products-table td,
.tc-content table.tc-products-table tr {
    border: none !important;
}

/* ── Product row ─────────────────────────────────────────── */
.tc-content .tc-prod-row {
    background: #f0f4f8;
    border-bottom: 4px solid #ffffff !important;
}
.tc-content .tc-prod-row td {
    padding: 0 !important;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Product name cell (dark navy, white text) ───────────── */
.tc-content .tc-prod-name {
    background: #1a3557 !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    font-weight: 700;
    font-size: 14px;
    min-width: 160px;
    white-space: nowrap;
}
.tc-content .tc-prod-name a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
}
.tc-content .tc-prod-name a:hover {
    color: #a8d0f8 !important;
    text-decoration: none !important;
}

/* ── Capacity badge label cells (HC / CC / RC) ───────────── */
.tc-content .tc-badge-hc,
.tc-content .tc-badge-cc,
.tc-content .tc-badge-rc {
    padding: 0 10px !important;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.tc-content .tc-badge-hc {
    background: #c0392b !important;
    color: #ffffff !important;
}
.tc-content .tc-badge-cc {
    background: #1565c0 !important;
    color: #ffffff !important;
}
.tc-content .tc-badge-rc {
    background: #2e7d32 !important;
    color: #ffffff !important;
}

/* ── Capacity value cells (kW values) ────────────────────── */
.tc-content .tc-cap-val {
    padding: 14px 12px !important;
    color: #333 !important;
    font-size: 13px;
    white-space: nowrap;
    border-right: 1px solid #d8e2ec !important;
}

/* ── Temperature badge cells (EXT / OUT) ─────────────────── */
.tc-content .tc-badge-ext,
.tc-content .tc-badge-out {
    background: #e4e8ee !important;
    color: #555 !important;
    padding: 0 8px !important;
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Temperature value cells ─────────────────────────────── */
.tc-content .tc-temp-val {
    padding: 14px 10px !important;
    color: #333 !important;
    font-size: 13px;
    white-space: nowrap;
}

/* ── Responsive: stack on mobile ─────────────────────────── */
@media (max-width: 640px) {
    .tc-content table.tc-products-table,
    .tc-content table.tc-products-table tbody,
    .tc-content table.tc-products-table tr,
    .tc-content table.tc-products-table td {
        display: block;
        width: 100%;
        white-space: normal;
    }
    .tc-content .tc-prod-name {
        padding: 10px 14px !important;
        font-size: 15px;
    }
    .tc-content .tc-badge-hc,
    .tc-content .tc-badge-cc,
    .tc-content .tc-badge-rc,
    .tc-content .tc-badge-ext,
    .tc-content .tc-badge-out {
        display: inline-block;
        padding: 2px 8px !important;
        margin: 2px;
        border-radius: 3px;
    }
    .tc-content .tc-cap-val,
    .tc-content .tc-temp-val {
        display: inline-block;
        padding: 2px 6px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   INTRO SECTION (image + description at top of listing page)
══════════════════════════════════════════════════════════ */

/* Intro block: any table before the product table that has
   an image cell + text cell */
.tc-content > div > table:first-of-type tr td:has(img),
.tc-content table:first-of-type td:has(img) {
    width: 160px;
    vertical-align: top;
    padding-right: 20px !important;
}
.tc-content table:first-of-type td:has(img) img {
    max-width: 155px;
    height: auto;
    border-radius: 4px;
}

/* ── Intro heading (category title) ──────────────────────── */
.tc-content h1, .tc-content h2 {
    color: #0056a3;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0056a3;
}
.tc-content h3 { color: #1a3557; font-size: 16px; margin-bottom: 8px; }
.tc-content h4 { font-size: 14px; color: #333; margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE (individual product: iMEX etc.)
══════════════════════════════════════════════════════════ */

/* ── Product header bar (name + capacity badges in a row) ── */
.tc-content .product-main-features,
.tc-content .product-features,
.tc-content .product-head,
.tc-content .prod-header,
.tc-content .product-title-bar,
.tc-content .t3-feature-row {
    background: #f2f2f2;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 2px solid #d8d8d8;
    margin-bottom: 20px;
    border-radius: 3px 3px 0 0;
}

/* Model name inside header bar */
.tc-content .model-name,
.tc-content .product-name,
.tc-content .producttitle,
.tc-content h1.producttitle,
.tc-content .product-features h2,
.tc-content .product-title-bar h2 {
    color: #0056a3;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    border: none;
    padding: 0;
    min-width: 100px;
}

/* ── Capacity badge SPANS (inside detail page header) ─────── */
.tc-content .badge-heating,
.tc-content [class*="badge-h"],
.tc-content .badge.h,
.tc-content .hc-badge {
    border: 2px solid #c0392b;
    color: #c0392b;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}
.tc-content .badge-cooling,
.tc-content [class*="badge-c"],
.tc-content .badge.c,
.tc-content .cc-badge {
    border: 2px solid #1565c0;
    color: #1565c0;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}
.tc-content .badge-recovery,
.tc-content [class*="badge-r"],
.tc-content .badge.r,
.tc-content .rc-badge {
    border: 2px solid #2e7d32;
    color: #2e7d32;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}

/* Temperature badges (gray pill) */
.tc-content .badge-temp,
.tc-content [class*="temp-badge"],
.tc-content [class*="outdoor"],
.tc-content [class*="max-temp"] {
    background: #757575;
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
}

/* ── Two-column layout: product image + details ───────────── */
.tc-content .product-layout,
.tc-content .product-container,
.tc-content .product-body,
.tc-content .prod-layout {
    display: flex;
    gap: 24px;
    padding: 4px 0 20px;
    align-items: flex-start;
}
.tc-content .product-image-col,
.tc-content .product-image,
.tc-content .prod-image { flex: 0 0 270px; max-width: 270px; }
.tc-content .product-image-col img,
.tc-content .product-image img,
.tc-content .prod-image img { max-width: 100%; height: auto; display: block; }

/* Details column with blue left border */
.tc-content .product-details-col,
.tc-content .product-details,
.tc-content .prod-details,
.tc-content .product-info {
    flex: 1;
    border-left: 3px solid #0056a3;
    padding-left: 20px;
}

/* "Product details:" italic heading */
.tc-content .product-details-col h3:first-of-type,
.tc-content .product-details h3:first-of-type,
.tc-content .details-title {
    color: #0056a3;
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 8px;
    border: none;
    padding: 0;
}

/* Section headers VERSIONS / UNITS DESCRIPTIONS / ADVANTAGES */
.tc-content .product-details strong,
.tc-content .product-details b,
.tc-content .prod-details strong,
.tc-content .prod-details b {
    display: block;
    font-weight: 700;
    color: #222;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 14px;
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT GRID (card view on category/listing pages)
══════════════════════════════════════════════════════════ */
.tc-content .products-grid,
.tc-content .product-list,
.tc-content .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 10px 0;
}
.tc-content .product-card,
.tc-content .prod-card,
.tc-content .product-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    background: #fff;
    transition: box-shadow .2s;
}
.tc-content .product-card:hover { box-shadow: 0 4px 12px rgba(0,86,163,.12); }
.tc-content .product-card img { max-width: 100%; max-height: 130px; object-fit: contain; margin-bottom: 8px; }
.tc-content .product-card a {
    color: #0056a3;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════
   TECH SPEC TABLE (inside product detail pages)
══════════════════════════════════════════════════════════ */
.tc-content table.specs,
.tc-content .specs-table,
.tc-content table:not(.tc-products-table) {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 12px;
}
.tc-content table:not(.tc-products-table) th,
.tc-content table:not(.tc-products-table) td {
    border: 1px solid #d0d0d0;
    padding: 6px 10px;
    text-align: left;
    vertical-align: middle;
}
.tc-content table:not(.tc-products-table) th {
    background: #0056a3;
    color: #fff;
    font-weight: 600;
}
.tc-content table:not(.tc-products-table) tr:nth-child(even) td {
    background: #f5f8fc;
}

/* ══════════════════════════════════════════════════════════
   GENERAL TYPOGRAPHY & LINKS
══════════════════════════════════════════════════════════ */
.tc-content p { margin-bottom: 10px; color: #444; }
.tc-content ul, .tc-content ol { margin: 6px 0 12px 20px; }
.tc-content li { margin-bottom: 3px; color: #444; }
.tc-content a { color: #0056a3; text-decoration: none; }
.tc-content a:hover { color: #003d7a; text-decoration: underline; }
.tc-content img { max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tc-content .product-layout,
    .tc-content .product-container { flex-direction: column; }
    .tc-content .product-image-col,
    .tc-content .product-image { flex: none; max-width: 100%; margin-bottom: 14px; }
    .tc-content .product-details-col,
    .tc-content .product-details { border-left: none; border-top: 3px solid #0056a3; padding-left: 0; padding-top: 14px; }
    .tc-content .products-grid { grid-template-columns: 1fr 1fr; }
}