/* Setăm o lățime fixă pentru prima coloană */
.custom-scrollable-table th.sticky-column,
.custom-scrollable-table td.sticky-column {
    position: -webkit-sticky; /* Pentru Safari */
    position: sticky;
    left: 0;
    background-color: #f0f0f0; /* Culoare de fundal pentru a acoperi conținutul din spate */
    z-index: 1; /* Asigură-te că este peste restul coloanelor non-header */
    border-right: 1px solid #ccc; /* Optional: Adaugă o bordură */
    font-size: 12px;
    text-align: left;
    width: 100px; /* Dimensiune fixă pentru prima coloană */
    min-width: 100px;
    max-width: 100px;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Setăm o lățime fixă pentru restul coloanelor (Desktop) */
.custom-scrollable-table th:not(.sticky-column),
.custom-scrollable-table td:not(.sticky-column) {
    width: 245px;        /* Dimensiune fixă pentru restul coloanelor */
    min-width: 245px;    /* IMPORTANT: Asigură că nu devin mai mici */
    max-width: 245px;    /* IMPORTANT: Asigură că nu devin mai mari */
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    color: #000;
}

/* Custom Scrollable Table Container */
.custom-scrollable-table-container {
    position: relative;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* white-space: nowrap; Eliminăm temporar, poate cauza probleme cu sticky */
    border: 1px solid #ccc;
    box-shadow: 0px 0px 22px 0px #3e3a3a, 8px 4px 12px 0px #d1d9e6;
    border-radius: 12px;
    margin: 20px 0;
    padding: 0; /* Eliminăm padding-ul de pe container */
}

/* Wrapper pentru tabel - necesar pt scroll corect */
.custom-scrollable-table-wrapper {
     display: inline-block; /* Permite containerului să se extindă cu tabelul */
     width: 100%; /* Ocupă lățimea containerului */
     vertical-align: top; /* Aliniere corectă */
}

/* Tabelul și celulele */
.custom-scrollable-table {
    /* width: 100%; Scoatem width 100% ca să permită scroll */
    border-collapse: collapse;
    /* display: inline-block; */ /* Nu e necesar dacă wrapper-ul e inline-block */
     min-width: 100%; /* Asigură că tabelul ocupă cel puțin lățimea containerului */
     background-color: #fff; /* Un fundal default */
}

.custom-scrollable-table th,
.custom-scrollable-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee; /* Linie mai subtilă */
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: middle; /* Aliniere verticală */
}

/* Antet fix (Header Row) */
.custom-scrollable-table thead th {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: #142445; /* Culoare antet */
    color: #fff;
    z-index: 2; /* Peste celulele normale și coloana sticky */
    border-bottom: 2px solid #000; /* Linie mai groasă sub header */
}

/* Prioritate Z-index pt colțul stânga-sus */
.custom-scrollable-table thead th.sticky-column {
    z-index: 3 !important; /* Cel mai sus */
     background-color: #0d1a30; /* Culoare distinctă pt colț */
     border-right: 1px solid #ccc;
}


/* Celulele normale din corp tabel */
.custom-scrollable-table tbody td {
    background-color: #fdfdfd;
}
.custom-scrollable-table tbody tr:nth-child(even) td {
    background-color: #f7f7f7; /* Zebra striping */
}
.custom-scrollable-table tbody td.sticky-column {
     background-color: #e9e9e9; /* Culoare diferită pt coloana sticky in tbody */
}
.custom-scrollable-table tbody tr:nth-child(even) td.sticky-column {
     background-color: #e1e1e1; /* Zebra striping pt coloana sticky */
}

/* Stil pentru celula cu produsul (imagine + nume + preț) */
.custom-scrollable-table thead th.product-cell {
    vertical-align: top; /* Aliniază conținutul sus */
    text-align: center;
	background: #142445;
}

/* Stil pentru imaginea produsului in header */
.custom-scrollable-table thead th.product-cell a img {
    max-width: 100px; /* Ajustează după nevoie */
    max-height: 100px;/* Ajustează după nevoie */
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto 8px auto; /* Spațiu sub imagine */
    border-radius: 4px; /* Colțuri rotunjite */
}

/* Stil pentru linkul cu numele produsului in header */
.custom-scrollable-table thead th.product-cell .product-link {
    display: block;
    margin-bottom: 5px;
    font-size: 0.95em;
    font-weight: bold;
    color: #ffffff; /* Text alb pt header */
    text-decoration: none;
    line-height: 1.3;
    white-space: normal; /* Permite împărțirea pe mai multe linii */
    overflow-wrap: break-word;
}
.custom-scrollable-table thead th.product-cell .product-link:hover {
    color: #dddddd; /* Culoare la hover */
}

/* Stil pentru preț in header */
.custom-scrollable-table thead .compare-price {
    font-size: 0.9em;
    font-weight: normal;
    color: #cccccc; /* Culoare mai discretă pt preț */
}
.custom-scrollable-table thead .compare-price.no-price {
    color: #888888; /* Culoare pt când nu are preț */
}


/* Custom Scrollbar */
.custom-scrollable-table-container::-webkit-scrollbar {
    height: 10px; /* Scrollbar puțin mai gros */
    width: 10px;
}
.custom-scrollable-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.custom-scrollable-table-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
.custom-scrollable-table-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Scroll Buttons Container (cel de sub tabel) */
.scroll-buttons-container {
    text-align: center; /* Centrează butoanele */
    padding: 10px 0;
    background-color: #f1f1f1; /* Un fundal similar cu track-ul scrollbarului */
    position: sticky; /* Face containerul sticky */
    bottom: 0; /* Lipește de josul .custom-scrollable-table-container */
    left: 0;
    width: 100%;
    z-index: 5; /* Peste conținutul tabelului, dar sub header sticky dacă există */
}


/* Scroll Buttons */
.custom-scroll-btn {
    background-color: #142445;
    cursor: pointer;
    padding: 8px 16px;
    /* Position/bottom/left sunt gestionate de containerul sticky */
    color: #fff;
    font-size: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid #0d1a30;
    transition: transform 0.2s ease, background-color 0.2s ease;
    margin: 0 5px; /* Spațiu între butoane */
}
.custom-scroll-btn:hover {
    background-color: #1f3661;
    transform: translateY(-1px); /* Efect mic la hover */
}
.custom-scroll-btn.custom-hidden {
    display: none !important; /* Ascundere buton când nu este necesar */
}

/* --- Stiluri pentru Butoanele din Footer Tabel --- */

/* Container pentru butoanele din celula tfoot */
.custom-scrollable-table tfoot td.compare-buttons-cell {
    text-align: center; /* Centrează butoanele în celulă */
    padding: 15px 10px; /* Mai mult spațiu vertical */
}

/* Stiluri generale pentru ambele butoane (Add to Cart & Read Review) */
.custom-scrollable-table tfoot td.compare-buttons-cell .button {
    display: block;         /* FACE CA BUTOANELE SĂ STEA UNUL SUB ALTUL */
    width: 95%;             /* Lățime (ajustează dacă dorești) */
    max-width: 250px;       /* O lățime maximă rezonabilă */
    margin-left: auto;      /* Centrează butonul în celulă */
    margin-right: auto;     /* Centrează butonul în celulă */
    margin-bottom: 8px;     /* Spațiu ÎNTRE butoane */
    padding: 10px 15px;     /* Padding mai mare */
    font-size: 0.95em;      /* Font puțin mai mare */
    font-weight: bold;      /* Text bold */
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
    box-sizing: border-box; /* Include padding/border în lățime */
    border: 1px solid transparent; /* Adaugă un border transparent default */
}

/* Elimină marginea de jos pentru ultimul buton din celulă */
.custom-scrollable-table tfoot td.compare-buttons-cell .button:last-child {
    margin-bottom: 0;
}

/* Stil specific pentru butonul "Citește recenzia" (dacă NU are culori inline) */
.custom-scrollable-table tfoot .button.compara-produse-read-review-btn {
    /* Culorile vor fi suprascrise de stilurile inline din PHP dacă sunt setate în admin */
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

/* Efect hover generic dacă nu sunt culori custom */
.custom-scrollable-table tfoot td.compare-buttons-cell .button:hover {
   filter: brightness(90%); /* Întunecă puțin la hover */
   text-decoration: none; /* Asigură că nu apare subliniere */
}

/* Stil pentru butonul Add-to-Cart (pt a suprascrie eventual font-size-ul temei) */
.custom-scrollable-table tfoot td .button.add_to_cart_button {
    font-size: 0.95em; /* Asigură aceeași mărime ca celălalt buton */
    /* Alte stiluri sunt preluate din tema sau setate inline */
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
     /* Ajustări pentru coloana sticky pe mobil */
    .custom-scrollable-table th.sticky-column,
    .custom-scrollable-table td.sticky-column {
        width: 80px; /* Mai îngustă pe mobil */
        min-width: 80px;
        max-width: 80px;
        font-size: 11px;
        /* background: #333; Poate nu mai e nevoie de fundal închis */
        /* color: #fff; */
        line-height: 1.3;
    }

     /* Ajustări pentru celelalte coloane pe mobil */
    .custom-scrollable-table th:not(.sticky-column),
    .custom-scrollable-table td:not(.sticky-column) {
        width: 180px;       /* Lățime mai mică pe mobil */
        min-width: 180px;
        max-width: 180px;
        font-size: 13px; /* Font mai mic */
    }

     /* Ajustări font header pe mobil */
     .custom-scrollable-table thead th {
         font-size: 13px;
     }
    .custom-scrollable-table thead th.product-cell .product-link {
         font-size: 0.9em;
     }
     .custom-scrollable-table thead .compare-price {
         font-size: 0.8em;
     }
    .custom-scrollable-table thead th.product-cell a img {
        max-width: 80px;
        max-height: 80px;
    }

     /* Ajustări butoane scroll pe mobil */
    .custom-scroll-btn {
        padding: 6px 12px;
        font-size: 14px;
    }

    /* Butoanele din footer sunt deja block, dar ajustăm lățimea/padding */
    .custom-scrollable-table tfoot td.compare-buttons-cell .button {
        width: 98%; /* Aproape complet */
        padding: 8px 10px;
        font-size: 0.9em;
    }
}

/* Clasă generală pentru containerul pluginului */
.compara-produse-container {
    margin-bottom: 30px; /* Spațiu sub tot tabelul */
}

/* Stiluri pentru Sticky Header generat de JS */
/* Containerul vizibil fixat */
.custom-sticky-container {
    position: fixed; /* Fixat în pagină */
    top: 0; /* Aliniat sus (poate necesita ajustare pt admin bar/header temă) */
    left: 0; /* Aliniere stânga (ajustat de JS) */
    width: 100%; /* Lățime ajustată de JS */
    z-index: 999; /* Sub admin bar, dar peste majoritatea conținutului */
    background-color: rgb(232 251 255); /* Fundal header sticky */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* O umbră subtilă */
    display: none; /* Inițial ascuns */
    overflow: hidden; /* Ascunde scrollbar-ul containerului */
}

/* Tabelul clonat din interiorul containerului fixat */
.custom-sticky-table {
    border-collapse: collapse;
    width: auto; /* Lățimea este setată de JS */
    background-color: #142445; /* Fundal specific pt tabelul sticky */
}
.custom-sticky-table thead th {
    /* Păstrează stilurile din .custom-scrollable-table thead th,
       dar suprascrie fundalul dacă e necesar */
    background-color: #142445 !important; /* Asigură fundalul dorit */
    color: #fff !important; /* Asigură text alb */
    border-bottom: 2px solid #000; /* Linie sub header sticky */
}

/* Asigură că prima coloană din headerul sticky e stilizată corect */
.custom-sticky-table thead th.sticky-column {
     position: sticky !important; /* Important pt a funcționa în container fix */
     left: 0 !important;
     z-index: 4 !important; /* Peste celelalte th-uri din sticky header */
     background-color: #0d1a30 !important; /* Culoare distinctă pt colț sticky */
}


/* Stil pentru imaginea din sticky header */
.custom-sticky-table thead th a img {
    max-width: 80px; /* Imagini mai mici în header sticky */
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto 5px auto;
}

/* Stil SPECIFIC pentru linkul cu numele produsului ÎN HEADERUL STICKY */
.custom-sticky-table thead th.product-cell .product-link {
    display: block; /* Necesar pentru text-overflow */
    white-space: nowrap; /* Nu permite trecerea pe rândul următor */
    overflow: hidden; /* Ascunde textul care depășește */
    text-overflow: ellipsis; /* Adaugă "..." la sfârșit */
    width: 100%; /* Ocupă lățimea celulei părintelui (th) */
    margin-bottom: 3px;
    font-size: 0.9em;
    font-weight: bold;
    color: #f0f0f0; /* Culoare deschisă pentru sticky header */
    text-decoration: none;
}
.custom-sticky-table thead th.product-cell .product-link:hover {
     color: #fff;
     text-decoration: none;
}

/* Stil pentru prețul din sticky header */
.custom-sticky-table thead .compare-price {
     font-size: 0.85em;
     color: #cccccc;
     white-space: nowrap; /* Asigură că prețul nu se împarte */
}
/* Stiluri pentru textele adiționale din comparator */
.comparator-text-detail {
    font-size: 0.85em; /* Mărime mai mică pentru detalii */
    color: #555;      /* O culoare gri închis, discretă */
    line-height: 1.3;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block; /* Asigură că ocupă propria linie */
}

/* Specific pentru textele deasupra elementelor */
.text-above-add-to-cart,
.text-above-read-review,
.text-above-footer-price {
    margin-bottom: 8px; /* Spațiu mai mare sub textul de deasupra */
}

/* Specific pentru textele sub elemente */
.text-below-add-to-cart,
.text-below-read-review,
.text-below-footer-price {
    margin-top: 8px; /* Spațiu mai mare deasupra textului de dedesubt */
}

/* Ajustări pentru butoane dacă textele adiționale sunt prezente */
.custom-scrollable-table tfoot td.compare-buttons-cell .button {
    /* Poate dorești să ajustezi marginile butoanelor dacă textele sunt lungi */
    /* Exemplu: margin-bottom: 5px; (dacă textul de jos e scurt) */
}

.compara-produse-main-title {
    text-align: center; /* Sau altă aliniere */
    margin-bottom: 20px; /* Spațiu sub titlu */
    font-size: 24px; /* Mărimea fontului */
    /* Alte stiluri dorite */
}