/* PrintBox Cart Add-ons — toggle în coș (vizual identic cu snippet-urile originale). */

.pbca-option {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  border: 1px solid rgba(200, 200, 200, 0.4);
  border-left: 3px solid rgba(200, 200, 200, 0.3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.35s ease;
  pointer-events: none;
  opacity: 0.5;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.pbca-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), rgba(255,255,255,0.6), rgba(255,255,255,0.4), transparent);
  animation: pbca-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pbca-shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}
.pbca-js-ready .pbca-option { pointer-events: auto; opacity: 1; }
.pbca-option:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.1); border-color: rgba(150,150,150,0.5); }
.pbca-option.pbca-active {
  background: rgba(232, 245, 233, 0.7);
  border-color: rgba(76, 175, 80, 0.3);
  border-left-color: #4CAF50;
  box-shadow: 0 2px 16px rgba(76, 175, 80, 0.12);
}
.pbca-option.pbca-active::before { animation: none; display: none; }

.pbca-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.pbca-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.pbca-switch { position: relative; width: 44px; min-width: 44px; height: 24px; background: #ccc; border-radius: 12px; transition: background 0.3s ease; }
.pbca-switch::after {
  content: ''; position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 50%;
  top: 2px; left: 2px; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.pbca-checkbox:checked + .pbca-switch { background: #4CAF50; }
.pbca-checkbox:checked + .pbca-switch::after { transform: translateX(20px); }

.pbca-text { line-height: 1.3; flex: 1; min-width: 0; font-size: clamp(11px, 3.2vw, 14px); }
.pbca-tag-group { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: auto; flex-shrink: 0; }
.pbca-price { display: inline-block; font-weight: 700; color: #2e7d32; background: #e8f5e9; padding: 1px 7px; border-radius: 3px; font-size: 13px; }
.pbca-badge {
  display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: #fff; background: #ff9800; padding: 2px 7px; border-radius: 3px; white-space: nowrap; line-height: 1.4;
  transition: background 0.3s ease; min-width: 75px; text-align: center;
}
.pbca-option.pbca-active .pbca-badge { background: #4CAF50; }
.pbca-badge.pbca-badge-loading { background: #78909c; }
.pbca-badge-dot { animation: pbca-dot-blink 1.4s infinite; opacity: 0; }
.pbca-badge-dot:nth-child(1) { animation-delay: 0s; }
.pbca-badge-dot:nth-child(2) { animation-delay: 0.2s; }
.pbca-badge-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pbca-dot-blink { 0%,20% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

.pbca-body { margin-left: 54px; margin-top: 4px; }
.pbca-subtitle { color: #666; display: block; font-size: 12px; text-align: center; }
.pbca-social { display: inline-block; font-size: 11px; color: #e65100; font-weight: 600; margin-left: 6px; }
.pbca-details-toggle { color: #0073aa; text-decoration: none; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; }
.pbca-details-toggle .pbca-dt-arrow { transition: transform 0.3s ease; font-size: 10px; }
.pbca-details {
  display: none; margin-top: 8px; padding: 10px; background: #fff; border-radius: 4px;
  border-left: 3px solid #0073aa; font-size: 13px; color: #555; transition: border-color 0.3s ease;
}
.pbca-option.pbca-active .pbca-details { border-left-color: #4CAF50; }
.pbca-details strong { color: #333; }
.pbca-details ul { margin: 6px 0 0 0; padding-left: 16px; }
.pbca-details li { margin-bottom: 3px; }
.pbca-recommendation { margin-top: 8px; padding: 6px 8px; background: #f0f8ff; border-radius: 4px; border: 1px solid #b3d9ff; transition: all 0.3s ease; }
.pbca-option.pbca-active .pbca-recommendation { background: #f0f8f0; border-color: #a5d6a7; }
.pbca-recommendation small { color: #2c5aa0; font-size: 12px; transition: color 0.3s ease; }
.pbca-option.pbca-active .pbca-recommendation small { color: #2e7d32; }

.pbca-error {
  display: none; color: #d32f2f; font-size: 12px; margin-top: 6px; padding: 6px 10px;
  background: #ffebee; border-radius: 4px; border-left: 3px solid #d32f2f;
}
.pbca-option.pbca-loading .pbca-toggle-label { pointer-events: none; opacity: 0.7; }
.pbca-spinner { display: none; align-items: center; gap: 6px; font-size: 12px; color: #888; margin-top: 4px; }
.pbca-option.pbca-loading .pbca-spinner { display: inline-flex; }
.pbca-spinner::before {
  content: ''; width: 14px; height: 14px; border: 2px solid #ddd; border-top-color: #4CAF50;
  border-radius: 50%; animation: pbca-spin 0.6s linear infinite;
}
@keyframes pbca-spin { to { transform: rotate(360deg); } }

@media (min-width: 769px) {
  .pbca-text, .pbca-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 768px) {
  .pbca-body { margin-left: 0; margin-top: 8px; }

  /* ——— Așezarea cardurilor pe mobil (cerință user 2026-08-01) ———
     Cardurile se randează prin `woocommerce_after_cart_item_name`, adică ÎNĂUNTRUL celulei
     cu titlul → pe mobil se înghesuiau în coloana din dreapta (185px), în timp ce sub
     imaginea produsului rămânea gol. Le trecem pe toată lățimea rândului, SUB imagine.

     Cum e construit rândul de coș pe mobil în Shoptimizer (main/cart-checkout.min.css):
       · `tr.cart_item` = bloc cu `padding-left: 110px` (culoarul imaginii);
       · `td.product-thumbnail` = `position:absolute; left:0; top:0`, înălțime 118px;
       · `td.product-name` = flex cu `flex-wrap: wrap` și `padding-right: 30px`.
     Deci: `flex-basis: 100%` mută fiecare card pe rândul lui, iar marginile negative
     anulează culoarul din stânga și padding-ul din dreapta. Valorile stau în variabile —
     dacă tema își schimbă vreodată măsurile, se ajustează dintr-un singur loc (iar dacă
     selectorii temei dispar, cardurile revin pur și simplu în coloana titlului). */
  .m-cart table.cart tr.cart_item {
    --pbca-cart-gutter: 110px; /* padding-left-ul rândului = lățimea culoarului imaginii */
    --pbca-cart-pad-right: 30px; /* padding-right-ul celulei cu titlul */
    --pbca-cart-thumb-h: 118px; /* înălțimea celulei cu imaginea */
  }

  /* Titlul ocupă cel puțin cât imaginea → primul card începe MEREU sub ea, chiar și la
     produsele cu nume scurt (altfel s-ar suprapune peste colțul de jos al pozei). */
  .m-cart table.cart tr.cart_item td.product-name > a {
    min-height: var(--pbca-cart-thumb-h, 118px);
  }

  /* ⚠ Baza flex include culoarul și padding-ul, NU doar 100%: cu `flex-basis: 100%`
     cardul rămâne lat cât coloana titlului (marginile negative doar mută marginile, nu
     lățesc conținutul), iar dimensiunea lui „exterioară" devine 100% − 140px, deci cele
     două carduri încap pe același rând flex și se suprapun (verificat pe staging). */
  .m-cart table.cart tr.cart_item td.product-name .pbca-option {
    flex: 0 0 calc(100% + var(--pbca-cart-gutter, 110px) + var(--pbca-cart-pad-right, 30px));
    max-width: none;
    margin-left: calc(-1 * var(--pbca-cart-gutter, 110px));
    margin-right: calc(-1 * var(--pbca-cart-pad-right, 30px));
  }

  /* Rândurile de sub carduri (preț / cantitate / sub-total) porneau tot din culoarul
     imaginii, deci etichetele atârnau la mijlocul ecranului (cerință user 2026-08-01).
     Le aducem la marginea din stânga, cu eticheta la stânga și valoarea/selectorul la
     dreapta. Celulele sunt deja flex în temă — le lipsea doar `space-between`. */
  .m-cart table.cart tr.cart_item td.product-price,
  .m-cart table.cart tr.cart_item td.product-quantity,
  .m-cart table.cart tr.cart_item td.product-subtotal {
    margin-left: calc(-1 * var(--pbca-cart-gutter, 110px));
    justify-content: space-between;
    gap: 12px;
  }
  /* Sub-total-ul are `width: 100%` din temă, iar 100% se calculează față de rândul deja
     îngustat de padding → fără asta rămânea scurt și valoarea cădea la mijloc. */
  .m-cart table.cart tr.cart_item td.product-subtotal {
    width: calc(100% + var(--pbca-cart-gutter, 110px));
  }

  /* Prețul unitar: pe DESKTOP tema ascunde complet coloana „Preț" (`display:none` și pe
     `th`, și pe `td`), dar pe mobil îl afișa ca rând separat, deasupra cantității — un preț
     care nu include opțiunile, exact lângă sub-totalul care le include. Decizie user
     2026-08-01: să nu apară nici pe mobil, ca cele două layout-uri să spună același lucru.
     Rămâne un singur preț pe rând: sub-totalul. */
  .m-cart table.cart tr.cart_item td.product-price {
    display: none;
  }
}
@media (max-width: 600px) {
  .pbca-toggle-label { flex-wrap: wrap; }
  .pbca-text { flex: 1; min-width: 0; white-space: normal; }
  .pbca-tag-group { flex-direction: row-reverse; justify-content: center; width: 100%; margin-left: 0; margin-top: 4px; gap: 6px; }
  .pbca-price { font-size: 11px; }
  .pbca-subtitle, .pbca-social { font-size: 10px; }
  .pbca-details-toggle, .pbca-details, .pbca-details li { font-size: 11px; }
  .pbca-recommendation small { font-size: 10px; }
}

/* ===== Pagina produsului (v1.5.0) — varianta G: rând cu bifă deasupra butonului de personalizare ===== */
.pbca-pdp { display: flex; flex: 0 0 100%; width: 100%; box-sizing: border-box; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 12px; /* form.cart e flex cu wrap: fara 100% randul statea pe latimea continutului */ border: 1.5px solid #E4E2DD; border-radius: 12px; background: #FAFAF7; cursor: pointer; transition: .15s; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.3; text-transform: none; }
.pbca-pdp.is-on { border-color: #27ae60; background: #F2FBF5; }
.pbca-pdp.is-busy { opacity: .7; }
.pbca-pdp__ic { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #ECEAE5; display: grid; place-items: center; font-size: 22px; flex: none; }
.pbca-pdp__tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pbca-pdp__h { font-size: 14.5px; font-weight: 700; color: #1F2D3D; }
.pbca-pdp__s { font-size: 12.5px; color: #71717A; margin-top: 2px; font-weight: 500; }
.pbca-pdp__link { color: #3b5bdb; font-weight: 600; text-decoration: none; }
.pbca-pdp__link:hover { text-decoration: underline; }
.pbca-pdp__p { font-size: 13px; font-weight: 800; color: #1E7D45; background: #EAF7EE; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pbca-pdp__cb { width: 22px; height: 22px; accent-color: #27ae60; margin: 0 0 0 4px !important; flex: none; cursor: pointer; }
/* ⓘ + tooltip */
.pbca-pdp__i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #A1A1AA; color: #71717A; font: italic 800 10.5px/1 Georgia, serif; margin-left: 4px; vertical-align: -2px; position: relative; cursor: help; }
.pbca-pdp__i:hover, .pbca-pdp__i.is-open, .pbca-pdp__i:focus { border-color: #3b5bdb; color: #3b5bdb; outline: none; }
.pbca-pdp__tip { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); width: 240px; background: #1F2D3D; color: #fff; font: 500 12.5px/1.45 'Plus Jakarta Sans', system-ui, sans-serif; padding: 9px 11px; border-radius: 9px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); display: none; z-index: 50; text-align: left; text-transform: none; }
.pbca-pdp__tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1F2D3D; }
.pbca-pdp__i:hover .pbca-pdp__tip, .pbca-pdp__i.is-open .pbca-pdp__tip, .pbca-pdp__i:focus .pbca-pdp__tip { display: block; }
@media (hover: none) { .pbca-pdp__i:hover .pbca-pdp__tip { display: none; } .pbca-pdp__i.is-open .pbca-pdp__tip { display: block; } }
@media (max-width: 480px) { .pbca-pdp__tip { left: auto; right: -20px; transform: none; } .pbca-pdp__tip::after { left: auto; right: 24px; transform: none; } }
/* Popup „vezi cum arată" */
.pbca-popup { position: fixed; inset: 0; background: rgba(20,30,45,.45); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.pbca-popup[hidden] { display: none; }
.pbca-popup__box { width: 100%; max-width: 400px; background: #fff; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; animation: pbcaIn .18s ease-out; }
@keyframes pbcaIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.pbca-popup__x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #1F2D3D; font-size: 15px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: 0; line-height: 34px; }
.pbca-popup__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pbca-popup__body { padding: 16px 18px 18px; }
.pbca-popup__t { font-size: 16px; font-weight: 800; color: #1F2D3D; margin-bottom: 6px; }
.pbca-popup__body p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #44505F; }
.pbca-popup__ok { display: block; width: 100%; border: 0; border-radius: 100px; background: #27ae60; color: #fff; font-weight: 800; font-size: 14.5px; padding: 13px; cursor: pointer; font-family: inherit; }
.pbca-popup__ok:hover { background: #1E7D45; color: #fff; }
.pbca-popup__no { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: #71717A; text-decoration: none; }

/* ===== Stil DISCRET în coș (v1.5.2) — o linie cu bifă sub numele produsului ===== */
.pbca-option.pbca-option--discret { margin-top: 8px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; overflow: visible; opacity: 1; pointer-events: auto; }
.pbca-option.pbca-option--discret::before { display: none; }
.pbca-option.pbca-option--discret:hover { box-shadow: none; }
.pbca-option.pbca-option--discret.pbca-active { background: none; }
.pbca-discret { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #44505F; cursor: pointer; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.3; }
.pbca-option--discret .pbca-checkbox.pbca-discret__cb { position: static; opacity: 1; width: 17px; height: 17px; min-width: 17px; accent-color: #27ae60; margin: 0 !important; cursor: pointer; appearance: auto; -webkit-appearance: checkbox; display: inline-block; } /* .pbca-checkbox e ascuns pentru comutatorul cardului; aici vrem caseta nativa */
.pbca-discret__t { font-weight: 500; }
.pbca-option--discret.pbca-active .pbca-discret__t { color: #1E7D45; font-weight: 600; }
.pbca-discret__p { color: #1E7D45; font-weight: 700; }
.pbca-option--discret.pbca-loading .pbca-discret { opacity: .6; }
.pbca-option--discret .pbca-error { display: none; font-size: 12px; color: #b91c1c; margin-top: 4px; }
