/* --- Container pentru Butoanele de Acțiune (Woo + Popup) --- */
.cap-action-buttons-container {
    display: flex;          /* Activează Flexbox */
    flex-wrap: wrap;        /* Permite trecerea pe rândul următor pe ecrane mici */
    justify-content: center; /* Centrează elementele (butoanele) pe orizontală */
    align-items: center;    /* Aliniază vertical pe centru */
    gap: 20px;              /* Spațiu între butoane */
    margin-top: 20px;       /* Spațiu deasupra containerului */
    padding-top: 15px;      /* Spațiu interior sus */
    border-top: 1px solid #eee; /* Linie separatoare subțire */
}

/* --- Stil pentru wrapper-ul butonului WooCommerce SAU mesajul Out of Stock --- */
/* Acest div va fi primul element în container */
.cap-add-to-cart-button {
    /* Nu are nevoie de stiluri flex specifice aici, containerul părinte se ocupă */
    /* Putem adăuga margine dacă e necesar */
    /* margin-right: auto; */ /* Ar putea forța butonul popup spre dreapta, dar space-between e mai bun */
    text-align: left; /* Aliniază conținutul (buton/mesaj) la stânga */
}

/* --- Stil pentru butonul WooCommerce (link-ul <a>) --- */
.cap-add-to-cart-button a.button.add_to_cart_button {
    /* Stilurile de bază (culori) sunt setate inline din PHP */
    display: inline-block;
    padding: 10px 15px; /* Ajustat padding */
    font-size: 0.95em;   /* Font puțin mai mic */
    font-weight: bold;
    border-radius: 5px;
    padding-left: 30px; /* Spațiu pentru iconiță */
    text-decoration: none;
    text-align: center;
    line-height: 1.4; /* Ajustat line-height */
    max-width: 300px; /* Eliminăm min-width pentru a fi mai flexibil */
    box-sizing: border-box;
}
.cap-add-to-cart-button a.button.add_to_cart_button:hover {
     opacity: 0.85;
 }

/* Stil pentru mesajul 'Produs indisponibil' */
.cap-add-to-cart-button .outofstock {
    color: #888; /* Culoare gri */
    font-weight: normal; /* Font normal */
    font-size: 0.9em;
    padding: 8px 10px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    display: inline-block;
    background-color: #f9f9f9;
}

/* --- Stil pentru Butonul Popup --- */
/* Acesta va fi al doilea element în container */
.cap-popup-trigger-button {
    /* Stilurile de bază (culori) sunt setate inline din PHP */
    padding: 10px 15px; /* Padding similar cu celălalt buton */
    font-size: 0.95em;  /* Font similar */
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    line-height: 1.4;
    max-width: 300px;
    text-align: center;
    display: inline-block;
}
.cap-popup-trigger-button:hover {
    opacity: 0.85;
}


/* --- Responsive --- */
@media (max-width: 600px) {
    .cap-action-buttons-container {
        /* Pe mobil, păstrăm flex, dar permitem ca butoanele să ocupe mai mult spațiu */
        /* justify-content: center; /* Sau center dacă vrei să le centrezi când încap pe un rând */
        gap: 10px; /* Spațiu mai mic */
    }

    /* Facem ca fiecare element direct copil al containerului să poată ocupa lățimea */
    .cap-action-buttons-container > * {
        flex-basis: 100%; /* Forțează trecerea pe rând nou dacă nu încap */
        text-align: center; /* Centrează conținutul (butonul/mesajul) */
    }

    /* Putem mări puțin butoanele pe mobil dacă dorim */
     .cap-add-to-cart-button a.button.add_to_cart_button,
     .cap-popup-trigger-button {
         /* width: 80%; */ /* Opțional: lățime procentuală */
         /* max-width: 280px; */ /* Opțional: lățime maximă */
         padding: 12px 18px; /* Padding puțin mai mare pe mobil */
     }
}

/* Elimină regulile vechi pentru wrappere dacă mai există */
.cap-button-wrapper,
.cap-add-to-cart-button-wrapper,
.cap-popup-trigger-button-wrapper {
    /* Aceste clase nu mai sunt folosite în noua structură HTML */
    /* Le poți șterge complet din CSS */
}


/* --- Stil pentru Butonul de Închidere Fix al Popup-ului --- */
.cap-fixed-close-button {
    background-color: #ff0000;  /* Fundal roșu (similar cu originalul 'button22') */
    color: #f3ff00;           /* Text galben */
    border: none;              /* Fără bordură */
    border-radius: 3px;        /* Colțuri ușor rotunjite */
    padding: 9px 15px;         /* Spațiere internă */
    font-size: 18px;           /* Mărime font */
    font-family: math, sans-serif; /* Font (similar cu originalul) */
    line-height: 1.2;          /* Înălțime linie */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* O umbră mică */
    transition: background-color 0.3s ease, transform 0.1s ease; /* Efecte la hover/click */
}

.cap-fixed-close-button b {
    margin-right: 5px; /* Spațiu mic după 'X' */
}

.cap-fixed-close-button:hover {
    background-color: #cc0000; /* Roșu mai închis la hover */
}

.cap-fixed-close-button:active {
    transform: scale(0.98); /* Efect mic la apăsare */
}

/* Poți elimina sau comenta stilurile pentru vechiul buton 'x' dacă nu mai e necesar */
/*
.cap-popup-close {
    ...
}
*/


/* --- Stiluri Popup --- */

/* Wrapper pentru imaginea din popup, pentru centrare */
.cap-popup-image-wrapper {
    text-align: center; /* Centrează imaginea (element inline-block sau block cu margin: auto) */
    margin-bottom: 20px; /* Spațiu sub imagine */
}

/* Imaginea reprezentativă din popup */
.cap-popup-featured-image {
    display: inline-block; /* Permite centrarea cu text-align */
    /* Sau display: block; margin-left: auto; margin-right: auto; */
    max-width: 300px;    /* Lățime maximă */
    max-height: 300px;   /* Înălțime maximă */
    width: auto;         /* Păstrează proporțiile */
    height: auto;        /* Păstrează proporțiile */
    border-radius: 5px;  /* Colțuri rotunjite */
    border: 1px solid #ddd; /* Bordură subtilă */
    /* Eliminăm float și margin-left de la stilul anterior */
}

/* Titlul popup-ului (rămâne la fel) */
.cap-popup-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8em;
    color: #333;
    line-height: 1.3;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    text-align: center; /* Centram și titlul */
}

/* Conținutul principal (rămâne la fel) */
.cap-popup-post-content {
    line-height: 1.7;
    font-size: 1em;
    color: #444;
    margin-bottom: 25px; /* Spațiu înainte de atribute/butoane */
}
.cap-popup-post-content p {
    margin-bottom: 1.2em;
}

/* --- Stiluri ÎMBUNĂTĂȚITE pentru Atributele Produsului în Popup --- */
.cap-popup-product-attributes {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
    margin-bottom: 25px; /* Spațiu sub atribute */
}
/* Stil pentru titlul secțiunii de atribute (dacă există - H4 adăugat în JS) */
.cap-popup-product-attributes h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #555;
    text-align: center;
}

/* Stil pentru tabelul generat de wc_display_product_attributes */
.cap-popup-product-attributes table.woocommerce-product-attributes {
    width: 100%;             /* Ocupă toată lățimea disponibilă */
    border-collapse: collapse; /* Elimină spațiul dintre celule */
    font-size: 0.95em;       /* Mărime font ușor redusă */
    border: 1px solid #e0e0e0; /* Bordură exterioară subtilă */
    margin-bottom: 0; /* Elimină marja inferioară implicită a tabelului */
}

/* Stil pentru header-ul tabelului (dacă există) */
.cap-popup-product-attributes table.woocommerce-product-attributes th {
    text-align: left;        /* Aliniere text la stânga */
    padding: 10px 12px;      /* Spațiere internă */
    background-color: #f8f8f8; /* Fundal deschis pentru header */
    color: #444;
    border-bottom: 1px solid #e0e0e0;
    width: 35%; /* Lățime pentru coloana de nume atribut */
}

/* Stil pentru celulele de date din tabel */
.cap-popup-product-attributes table.woocommerce-product-attributes td {
    padding: 10px 12px;      /* Spațiere internă */
    border-bottom: 1px solid #f0f0f0; /* Linie separatoare mai fină */
}

/* Stil pentru rândurile pare (efect de zebră) */
.cap-popup-product-attributes table.woocommerce-product-attributes tr:nth-child(even) td {
    background-color: #fdfdfd;
}

/* Stil pentru paragrafele din interiorul celulelor (WC uneori le adaugă) */
.cap-popup-product-attributes table.woocommerce-product-attributes td p {
    margin: 0; /* Elimină marja paragrafelor */
    padding: 0;
}

/* Elimină ultima linie de jos */
.cap-popup-product-attributes table.woocommerce-product-attributes tr:last-child td {
    border-bottom: none;
}


/* Butonul WooCommerce din Popup (rămâne la fel) */
.cap-popup-add-to-cart {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 25px; /* Spațiu sub buton */
}
.cap-popup-woo-button { /* Clasa specifică butonului din popup */
   /* Poți adăuga stiluri specifice aici dacă vrei să arate diferit de cel din shortcode */
   /* Exemplu: */
   background-color: #28a745 !important; 
   color: white !important;
   margin-top: 20px;
   text-align: center;
   margin-bottom: 25px; 
   padding: 20px;
   font-weight: 900;
   font-size: 19px;
}

/* Mesajele Custom (rămâne la fel) */
.cap-popup-custom-messages {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
}
/* ... restul stilurilor pentru mesaje ... */




/* --- Stil Nou pentru Card Articol (Shortcode) --- */
.cap-article-item.cap-modern-card {
    background-color: #ffffff; /* Fundal alb */
    border: 1px solid #e0e0e0; /* Bordură subtilă */
    border-radius: 10px;       /* Colțuri rotunjite */
    padding: 5px;             /* Spațiu interior */
    margin-bottom: 30px;       /* Spațiu între carduri */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Umbră discretă */
    text-align: center;        /* Centrează textul și elementele inline-block */
    transition: box-shadow 0.3s ease; /* Efect la hover */
    display: flex;             /* Folosim flex pentru a aranja elementele */
    flex-direction: column;    /* Aranjare verticală (imagine, conținut, butoane) */
    align-items: center;       /* Centrează elementele pe orizontală */
}
.cap-article-item.cap-modern-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* Umbră mai pronunțată la hover */
}

/* Container Imagine (Shortcode) */
.cap-thumbnail-container {
    margin-bottom: 20px; /* Spațiu sub imagine */
    width: 100%; /* Ocupă lățimea cardului pentru centrare */
    text-align: center; /* Asigură centrarea linkului/imaginii */
}

/* Imaginea (Shortcode) - Centrată, 300x300, cover */
.cap-thumbnail-image {
    display: inline-block; /* Permite centrarea via text-align pe container */
    /* Sau display: block; margin: 0 auto; */
    width: 100%;           /* Lățime relativă la container */
    max-width: 300px;    /* Lățime MAXIMĂ */
    height: 300px;         /* Înălțime FIXĂ */
    object-fit: cover;     /* Acoperă spațiul, decupează dacă e necesar, nu distorsionează */
    object-position: center; /* Centrează imaginea în cadrul decupat */
    border-radius: 8px;    /* Colțuri rotunjite pentru imagine */
    border: 1px solid #eee; /* Bordură fină opțională */
}

/* Conținut Articol (Shortcode) - Fără stiluri de card proprii */
.cap-article-content {
    padding: 0; /* Eliminăm padding-ul vechi */
    border: none; /* Eliminăm bordura veche */
    background-color: transparent; /* Eliminăm fundalul vechi */
    width: 100%; /* Ocupă lățimea cardului */
    margin-bottom: 20px; /* Spațiu înainte de butoane */
}

/* Titlu Articol (Shortcode) */
.cap-title {
    font-size: 1.5em; /* Mărime font puțin mai mare */
    margin-top: 0;
    margin-bottom: 10px; /* Spațiu sub titlu */
    font-weight: 600; /* Font mai gros */
    color: #333;
    line-height: 1.3;
    text-align: center; /* Asigură centrarea */
}

/* Descriere Articol (Shortcode) */
.cap-description-container {
    margin-top: 0;
    color: #000000;
    font-size: 20px; /* Mărime standard */
    line-height: 1.6;
    text-align: left; /* Text descriere centrat */
    max-width: 100%; /* Limitează lățimea descrierii pentru lizibilitate */
    margin-left: auto;
    margin-right: auto; /* Centrează containerul descrierii */
    border: 1px solid #e0e0e0;
    padding: 5px;
	font-family: Georgia, "Times New Roman", serif;
	background: #f4f1ff;
}
/* Container Butoane (Shortcode) - Ajustări */
.cap-action-buttons-container {
    margin-top: 15px; /* Ajustat spațiul de sus */
    padding-top: 15px;
    border-top: 1px solid #000000;
    width: 100%; /* Ocupă lățimea cardului */
    justify-content: center; /* Păstrăm centrarea butoanelor */
    gap: 15px 20px; /* Spațiu vertical și orizontal între butoane dacă trec pe rândul următor */
	padding-bottom: 15px;
	background: #ebe9e9;
}

/* Stiluri existente pentru butoane rămân valabile */
/* .cap-add-to-cart-button a.button... */
/* .cap-popup-trigger-button ... */

/* --- Eliminare stiluri vechi/redundante --- */
/* Comentează sau șterge regula .cap-title-image-container dacă mai există */
/* .cap-title-image-container { /* NU MAI ESTE FOLOSIT ÎN ACEASTĂ STRUCTURĂ */ } */

/* Ajustări responsive pentru card */
@media (max-width: 600px) {
    .cap-article-item.cap-modern-card {
        padding: 15px; /* Padding mai mic pe mobil */
    }
    .cap-thumbnail-image {
        max-width: 250px; /* Imagine puțin mai mică */
        height: 250px;
    }
     /* Butoanele sunt deja stacked de regula generală @media */
}

.cap-message {
    text-align: left;
    margin-bottom: 33px;
}
.cap-message-text {
    background: #ff0000;
    color: #fff;
    padding: 7px;
    border-radius: 5px;
    font-weight: 900;
}


/* --- Stiluri Secțiune Detaliată --- */

.cap-detailed-section-title {
    text-align: center;
    margin-top: 50px; /* Spațiu deasupra titlului secțiunii detaliate */
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff; /* Linie sub titlu */
    display: inline-block; /* Permite centrarea mai ușoară */
    position: relative; /* Necesar pentru a centra corect cu left/right */
    left: 50%;
    transform: translateX(-50%);
    color: #333;
}

.cap-detailed-posts-container {
    /* Poți adăuga padding sau margine dacă e necesar */
    margin-top: 20px;
     /* Aici poți refolosi stiluri grid/flex dacă le ai pentru .cap-posts-container */
     /* sau lasă cardurile să se afișeze implicit block */
}

/* Opțional: Stil specific pentru cardurile din secțiunea detaliată */
.cap-detailed-item {
    /* background-color: #f9f9f9; /* Exemplu: fundal ușor diferit */
    /* border-color: #ccc; */ /* Exemplu: bordură diferită */
}

/* Opțional: Stil specific pentru descrierea din secțiunea detaliată */
.cap-detailed-description {
   /* Poate vrei un font size mai mare sau altă formatare */
   /* font-size: 1.1em; */
}

/* Responsive pentru titlu */
@media (max-width: 600px) {
    .cap-detailed-section-title {
        font-size: 1.5em; /* Mărime mai mică pe mobil */
        margin-top: 40px;
        width: 90%; /* Ocupă mai mult din lățime */
    }
}


/* --- Stil pentru Secțiunea Pliabilă de Atribute din Card --- */
.cap-article-item details.cap-product-attributes-details {
    margin-top: 15px; /* Spațiu deasupra */
    margin-bottom: 20px; /* Spațiu dedesubt, înainte de butoane */
    padding: 12px 15px; /* Spațiere internă */
    border: 1px solid #e5e5e5; /* Bordură subtilă */
    border-radius: 6px; /* Colțuri ușor rotunjite */
    background-color: #f9f9f9; /* Fundal foarte deschis */
    text-align: left; /* Aliniere text la stânga */
}

/* Stil pentru sumar (titlul pliabil) */
.cap-article-item details.cap-product-attributes-details summary {
    font-weight: bold;
    color: #444; /* Culoare text mai închisă */
    cursor: pointer;
    padding: 5px 0; /* Spațiu vertical mic */
    outline: none; /* Elimină conturul la focus */
    list-style: revert; /* Afișează săgeata standard (sau triunghiul) */
    transition: color 0.2s ease;
}
.cap-article-item details.cap-product-attributes-details summary:hover {
    color: #007bff; /* Schimbă culoarea la hover */
}

/* Stil pentru conținutul din <details> (unde e tabelul) */
.cap-article-item details.cap-product-attributes-details .cap-attributes-content {
    margin-top: 10px; /* Spațiu între summary și tabel */
    padding-top: 10px;
    border-top: 1px dashed #ddd; /* Linie separatoare fină */
}

/* Ajustări specifice pentru tabelul de atribute WC din interiorul <details> */
.cap-article-item .cap-attributes-content table.woocommerce-product-attributes {
    font-size: 0.9em; /* Font puțin mai mic pentru specificații */
    width: 100%;
    border: none; /* Eliminăm bordura dublă (are deja containerul) */
    border-collapse: collapse;
    margin-bottom: 0;
}
.cap-article-item .cap-attributes-content table.woocommerce-product-attributes th,
.cap-article-item .cap-attributes-content table.woocommerce-product-attributes td {
     padding: 8px 10px; /* Padding puțin redus */
     border-bottom: 1px solid #eee; /* Linii separatoare între rânduri */
     vertical-align: top; /* Aliniere sus dacă textul e pe mai multe rânduri */
 }
.cap-article-item .cap-attributes-content table.woocommerce-product-attributes tr:last-child th,
.cap-article-item .cap-attributes-content table.woocommerce-product-attributes tr:last-child td {
     border-bottom: none; /* Elimină ultima linie */
 }
 .cap-article-item .cap-attributes-content table.woocommerce-product-attributes th {
     background-color: transparent; /* Fundal header transparent */
     font-weight: normal; /* Font normal pt label atribut */
     color: #555;
     width: 35%; /* Lățime fixă pentru label */
 }
 .cap-article-item .cap-attributes-content table.woocommerce-product-attributes td p {
     margin: 0; /* Elimină marja paragrafelor adăugate de WC */
     padding: 0;
 }

/* Stil pentru Mesajul 'Niciun atribut' (dacă e cazul - deși verificăm înainte) */
.cap-article-item .cap-attributes-content .woocommerce-product-attributes-list--no-attributes {
    color: #888;
    font-style: italic;
}

/* Responsive: Potrivim padding-ul details pe mobil */
@media (max-width: 600px) {
    .cap-article-item details.cap-product-attributes-details {
        padding: 10px;
    }
    .cap-article-item .cap-attributes-content table.woocommerce-product-attributes th,
    .cap-article-item .cap-attributes-content table.woocommerce-product-attributes td {
         padding: 6px 8px;
     }
}