/************************************************************
 *  FAMILY MATRIX – LAYOUT GENERAL
 ************************************************************/

.product-family-fullwidth {
    width: 100%;
    margin: 20px 0;
    position: relative; /* pentru preview imagine */
}

.product-family-fullwidth .products-family-matrix {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* cutia albă cu tabelul */
.products-family-matrix {
    margin-top: 30px;
    border: 1px solid #e5e5e5;
    padding: 0;
    background: #fff;
    overflow-x: auto; /* fallback pentru ecrane mici */
}

/* Desktop – nu vrem scroll orizontal în cutie */
@media (min-width: 992px) {
    .products-family-matrix {
        overflow-x: visible;
    }
}

/************************************************************
 *  LEGENDĂ STATUS STOC
 ************************************************************/

.pf-legend {
    margin: 20px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.pf-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pf-stock-square {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 2px;
}

/* culori status */
.pf-stock-green  { background: #47B137; }  /* disponibil imediat */
.pf-stock-yellow { background: #f1c40f; }  /* disponibil în 10 zile / depășire stoc */
.pf-stock-red    { background: #e74c3c; }  /* indisponibil */
.pf-stock-blue   { background: #1d92eb; }  /* ridicare din depozit */


/************************************************************
 *  TABEL – STRUCTURĂ & HEADER
 ************************************************************/

.family-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 960px;
}

/* Sticky header ca la RAJA */
.family-table thead th {
    top: 0;
    background: #f7f9fc;
    z-index: 3;
}

/* headere generice */
.family-table th {
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #d4dce6;
    color: #333;
}

/* primul rând de header (Cod produs / Pret per cantitate / etc.) */
/* primul rând de header (Cod produs / Lungime / ... / Pret total / Adauga in cos) */
.family-table thead tr.pf-top-header th {
    background: #1d92eb;   /* albastru */
    color: #fff;
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid #1676c2;
}

.family-table thead tr.pf-top-header th a {
    color: #fff;
}


/* grupul de prețuri */
.pf-price-group {
    text-transform: none;
}

/* rândul doi – capetele de coloană pentru praguri */
.pf-price-header th.pf-price-step {
    background: #f7a623;   /* portocaliu */
    color: #fff;
    text-align: center;
    font-weight: 600;
}

/************************************************************
 *  TABEL – RÂNDURI ȘI CELULE
 ************************************************************/

/* celule body */
.family-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
    text-align: center;
    height: 75px;
}

/* zebra */
.family-table tbody tr:nth-child(even) {
    background-color: #fbfcff;
}

/* hover pe rând */
.family-table tbody tr:hover {
    background: #fafbff;
}

/* celula Cod produs (cu bulina de stoc) */
.pf-sku-cell {
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
}


/* celulele de preț */
.pf-price-cell {
    text-align: right;
    white-space: nowrap;
}

/* portocaliu pentru produsele cu reducere */
.pf-price-cell.pf-discount {
    color: #f57c00;
    font-weight: 600;
}

/* doar celulele de preț care au data-price nenul devin clickabile */
.pf-price-cell[data-price]:not([data-price=""]) {
    cursor: pointer;
}

/* celula de preț activă (pragul curent) */
.pf-active-break {
    background: #d4f4d7;   /* verde deschis */
    font-weight: 700;
}

/* celula Pret total */
.pf-total-cell {
    text-align: right;
    font-weight: 600;
}


/************************************************************
 *  QTY: -  [input]  +  [CART]
 ************************************************************/

/* containerul pentru -  [input]  +  [cart] */
.pf-qty-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* inputul de cantitate */
.pf-qty-cell .family-qty {
    width: 70px;
    height: 44px;
    border: 1px solid #e3e5ea;
    background: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    padding: 0 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* butoanele - și + */
.pf-qty-btn {
    width: 30px;
    height: 44px;
    border: 1px solid #e3e5ea;
    background: #f7f8fb;
    font-size: 20px;
    line-height: 1;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.pf-qty-btn:hover:not(:disabled) {
    background: #eef0f7;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

/* când e dezactivat (- la qty 0) */
.pf-qty-btn:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

/* butonul Contactați-ne ( când deny_orders ) */
.pf-qty-unavailable {
    justify-content: flex-end;
}

.pf-contact-btn {
    display: inline-block;
    padding: 7px 30px;
    background: #27ae60;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-size: 15px;
    margin-right: 35px;
}




.pf-contact-btn:hover {
    background: #1f8b4c;
}

.pf-cart-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 6px 14px rgba(39,168,216,0.45);
}




/* =========================
   GRID: linii verticale (coloane)
   ========================= */
.family-table th,
.family-table td {
  border-right: 1px solid #e6eef7;
}

.family-table th:first-child,
.family-table td:first-child {
  border-left: 1px solid #e6eef7;
}

.family-table th:last-child,
.family-table td:last-child {
  border-right: none; /* să nu dubleze cu marginea boxului */
}

/* pe headerul albastru: linii mai vizibile pe fundal */
.family-table thead tr.pf-top-header th {
  border-right: 1px solid rgba(255,255,255,0.28);
}

.family-table thead tr.pf-top-header th:first-child {
  border-left: 1px solid rgba(255,255,255,0.28);
}

.family-table thead tr.pf-top-header th:last-child {
  border-right: none;
}

/* pe rândul portocaliu (prețuri): tot linii deschise */
.family-table thead tr.pf-price-header th {
  border-right: 1px solid rgba(255,255,255,0.25);
}

.family-table thead tr.pf-price-header th:last-child {
  border-right: none;
}



/* =========================
   HOVER: evidențiere celulă + rând (gri discret)
   ========================= */

.family-table td,
.family-table th {
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* rândul pe hover */
.family-table tbody tr:hover td {
  background: #f6f7f9; /* gri foarte deschis */
}

/* celula exactă pe hover */
.family-table tbody td:hover {
  background: #eceff3; 
  box-shadow: inset 0 0 0 2px #c7cdd6; /* contur gri */
  position: relative;
  z-index: 2;
}

/* dacă ai rânduri indisponibile și nu vrei hover pe ele */
.family-table tbody tr.pf-unavailable:hover td {
  background: inherit;
}
.family-table tbody tr.pf-unavailable td:hover {
  background: inherit;
  box-shadow: none;
}


/* =========================
   Qty input: fără săgeți (spinner) + centrat
   ========================= */

/* Chrome / Edge / Safari */
.family-table input[type="number"]::-webkit-outer-spin-button,
.family-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.family-table input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;

  text-align: center;      /* 0 la mijloc */
  padding-left: 0;
  padding-right: 0;
}


.family-table input[type="number"] {
  line-height: 1.2;
}



.pf-qty-max-msg{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #8a919a;      /* gri discret */
  text-align: center;
}

.pf-qty-plus:disabled{
  opacity: .45;
  cursor: not-allowed;
}



/* ancoră pentru mesaj */
.family-table td.pf-qty-cell { 
  position: relative;
  overflow: visible;
  padding-bottom: 26px; /* rezervă spațiu intern pentru mesaj, fără să afecteze rândul următor */
}

.family-table td.pf-qty-cell .pf-qty-max-msg{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;          /* în interiorul celulei, jos */
  top: auto;

  width: max-content;
  max-width: 260px;

  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #e2e6ec;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);

  font-size: 12px;
  line-height: 1.2;
  color: #8a919a;
  text-align: center;

  pointer-events: none;
  z-index: 5;
}


/* dacă vreun părinte taie mesajul */
.products-family-matrix,
.family-table {
  overflow: visible;
}




/************************************************************
 *  BUTON COȘ – PNG + ANIMAȚIE
 ************************************************************/

/* coș albastru cu PNG-ul tău */
.pf-cart-btn {
    width: 48px;
    height: 48px;
    border: none;
    background: #1d92eb;
    cursor: pointer;
    
    background-image: url("https://human-creative.ro/img/shoppingcart.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;

    box-shadow: 0 6px 14px rgba(39, 168, 216, 0.45);
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.pf-cart-btn:hover {
    background-color: #2198c4;
    box-shadow: 0 9px 20px rgba(39, 168, 216, 0.65);
    transform: translateY(-1px);
}

/* stare de succes – icon "văzut" + verde (check.png) */
.pf-cart-btn.pf-cart-success {
    background-color: #1d92eb; /* verde */
    background-image: url("https://human-creative.ro/img/check.png");
}

/* animația de rotire */
.pf-cart-btn.pf-cart-animating {
    animation: pf-cart-spin 1.5s ease-in-out;
}

/* stare dezactivată – qty = 0 */
.pf-cart-btn:disabled,
.pf-cart-btn.pf-cart-disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* fără efect de hover când e dezactivat */
.pf-cart-btn:disabled:hover,
.pf-cart-btn.pf-cart-disabled:hover {
    background-color: #1d92eb; /* rămâne culoarea de bază */
    box-shadow: none;
    transform: none;
}



@keyframes pf-cart-spin {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(-20deg); }
    100% { transform: rotate(0deg); }
}

/* dacă mai există vreo .pf-cart-icon în HTML, o ascundem */
.pf-cart-btn .pf-cart-icon {
    display: none;
}

/************************************************************
 *  PREVIEW IMAGINE LA HOVER
 ************************************************************/

.pf-preview {
    position: absolute;
    left: 0;
    transform: translateX(-100%); /* scoate boxul în stânga wrapper-ului */
    background: #fff;
    z-index: 50;
    display: none;      /* ascuns implicit */
    padding: 4px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.pf-preview img {
    max-width: 70px;
    height: auto;
    display: block;
}

.pf-preview-show {
    display: block;
}

/************************************************************
 *  TOTAL GENERAL SUB TABEL
 ************************************************************/

.pf-grand-total-wrapper {
    margin-top: 10px;
    padding-top: 10px;
    font-size: 17px;
    font-weight: 600;
    color: #1d92eb;
    text-align: right;
    padding-right: 4%;
    margin-bottom: 20px;
}

/************************************************************
 *  SCROLLBAR CUSTOM (opțional, doar WebKit)
 ************************************************************/

.products-family-matrix::-webkit-scrollbar {
    height: 8px;
}

.products-family-matrix::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* Mobile / tabletă – lăsăm min-width mai mare și scrollbar */
@media (max-width: 991px) {
    .family-table {
        min-width: 1100px;
    }
}



a.pf-backlink-link {
    color: #1d92eb;
    font-size: 16px;
    font-weight: 700;
}



/************************************************************
 *  MOBILE LIST (în loc de tabel)
 ************************************************************/
.pf-mobile-list { display: none; padding: 18px 18px 10px; }

.pf-mobile-title{
  font-size: 18px;
  font-weight: 700;
  color: #111;
  text-align: center;
  margin-bottom: 12px;
}

.pf-mobile-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #ececec;
}

.pf-mobile-left{
  display: grid;
  grid-template-columns: 12px 1fr; /* col 1 = bulina, col 2 = text */
  column-gap: 10px;
  align-items: start;
  min-width: 0;
}

.pf-mobile-left > .pf-stock-square{
  grid-column: 1;
  grid-row: 1;
  margin-top: 5px; /* ca în poză */
}

.pf-mobile-text{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* rândul 2 începe din coloana 1 => fix sub bulină */
.pf-mobile-features-line{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}


.pf-mobile-text{ min-width: 0; }

.pf-mobile-ref a{
  font-weight: 700;
  color: #111827;
  text-decoration: none;
}
.pf-mobile-ref a:hover{ text-decoration: underline; }

.pf-mobile-desc{
  margin-top: 4px;
  font-size: 13px;
  color: #555;
  line-height: 1.25;
  word-break: break-word;
}

.pf-mobile-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pf-mobile-price{
  text-align: right;
  white-space: nowrap;
}
.pf-mobile-price.pf-discount{ color: #f57c00; }

.pf-mobile-price-val{
  display: inline;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
}



.pf-mobile-currency{
  display: block;
  font-size: 12px;
  color: #444;
  line-height: 1.1;
}

.pf-mobile-cart{
  width: 44px;
  height: 44px;
  background-size: 24px 24px;
  box-shadow: 0 6px 14px rgba(39, 168, 216, 0.35);
}

.pf-mobile-contact{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 4px;
  background: #27ae60;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  font-size: 13px;
}

.pf-mobile-qty{ display:none; }




@media (max-width: 767px){
  /* ascundem tabelul + totalul pe mobil */
  .family-table,
  .pf-grand-total-wrapper,
  .pf-preview{
    display: none !important;
  }

  .pf-mobile-list{ display: block; }

  /* pe mobil nu vrem scroll orizontal */
  .products-family-matrix{ overflow-x: visible; }

  /* legenda mai compactă */
  .pf-legend{
    margin: 5px 10px 0;
        font-size: 13px;
        gap: 3px;
        display: grid;
        
  }
  
  .pf-mobile-list{
      padding: 5px 10px 6px!important;
  }
  
  .pf-mobile-price {
    display: ruby;
}

.pf-mobile-items span.pf-stock-square {
    margin-top: 5px;
}
  
}






/* Referință + caracteristici pe aceeași linie (cu wrap dacă nu încape) */
.pf-mobile-ref-inline{
  display: flex;
  align-items: baseline;
  gap: 2px 10px;
}

.pf-mobile-inline-features{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

/* forțăm inline, ca să nu fie afectat de CSS din temă */
.pf-mobile-feature{
  display: inline-flex !important;
  align-items: baseline;
  font-size: 13px;
  color: #555;
  line-height: 1.25;
  white-space: nowrap;
}

.pf-mobile-feature strong{
  display: inline !important;
  color: #111;
  font-weight: 700;
}

.pf-mobile-sep{
  padding: 0 4px;
  color: #555;
}



/* Linie: Referință + caracteristici, pe același rând, cu wrap “de la capăt” */
.pf-mobile-line{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.pf-mobile-ref-link{
  font-weight: 700;
  color: #111827;
  text-decoration: none;
}
.pf-mobile-ref-link:hover{ text-decoration: underline; }



.pf-mobile-contact{
      display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    background: #27ae60;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    font-size: 13px;
}


.pf-backlink-wrapper { margin-top: 10px; }
.pf-backlink-link {
  font-weight: 600;
  color: #1d92eb;
  text-decoration: none;
}
.pf-backlink-link:hover { text-decoration: underline; }


/* Pe produsul părinte (familie), ascundem badge-ul/box-ul de disponibilitate */
.product-add-to-cart.pf-has-family .product-availability,
.product-add-to-cart.pf-has-family #product-availability,
.product-add-to-cart.pf-has-family .st_product_availability,
.product-add-to-cart.pf-has-family .availability,
.product-add-to-cart.pf-has-family .availability_statut,
.product-add-to-cart.pf-has-family .pro_availability,
.product-add-to-cart.pf-has-family .product-available {
  display: none !important;
}




/* Doar în zona de acțiuni din dreapta (add-to-cart) */
html.pf-has-family .product-actions .pack-qty-header,
html.pf-has-family .product-actions .pack-qty-controls {
  display: none !important;
}

/* Dacă ai tabel de qty breaks în zona de actions */
html.pf-has-family .product-actions #qtybreaktable,
html.pf-has-family .product-actions .qtybreaktable {
  display: none !important;
}


/* === FIX: 10px padding st/dr + fara spatiu mare intre selector si cos (doar coloana "Adauga in cos") === */
.family-table td.pf-qty-cell:not(.pf-qty-unavailable) {
  padding-left: 10px !important;
  padding-right: 10px !important;

  justify-content: flex-start;   /* totul incepe din stanga */
  column-gap: 10px;              /* spatiu controlat intre selector si cos */
}

/* IMPORTANT: nu impinge cosul in dreapta (altfel apare spatiu mare) */
.family-table td.pf-qty-cell:not(.pf-qty-unavailable) .pf-cart-btn {
  margin-left: 0 !important;
}
/* === FIX: latime fixa pentru ultima coloana (Adauga in cos) === */
.family-table thead th:last-child,
.family-table tbody td.pf-qty-cell {
  width: 250px;
    min-width: 240px;
    max-width: 240px;
    white-space: nowrap;
}

#pf-family-matrix { scroll-margin-top: 130px; }



/* Cod produs: link pe toata celula + cod albastru */
.family-table td.pf-sku-cell { position: relative; }

.family-table td.pf-sku-cell > a.pf-sku-cell-link{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center; /* pastreaza aspectul actual (centrat) */
  gap: 6px;
  padding: 10px 8px;       /* identic cu .family-table td */
  text-decoration: none;
  color: #1e88e5;
}

.family-table td.pf-sku-cell > a.pf-sku-cell-link:visited{
  color: #1e88e5;
}