/* NDA Bundles — widget. Mosteneste fontul si culorile temei; nimic hardcodat. */
.ndab {
  --ndab-bg: transparent;
  --ndab-pad: 20px;
  --ndab-border: currentColor;
  --ndab-title-size: 22px;
  --ndab-msg-size: 16px;
  --ndab-img-w: 140px;
  --ndab-img-h: 140px;
  --ndab-img-fit: contain;
  --ndab-img-faded: .5;
  --ndab-accent: currentColor;
  --ndab-btn-radius: 4px;
  font-family: var(--ndab-font, inherit);
  /* mostenita din tema, dar suprascrisa cand fundalul e inchis */
  color: var(--ndab-fg, inherit);
  background: var(--ndab-bg);
  padding: var(--ndab-pad) 0;
  margin: 0;
}
.ndab--bordered { border: 1px solid var(--ndab-border); padding-left: 16px; padding-right: 16px; }

/* pe fundal inchis, si liniile si textele secundare trebuie sa se vada */
#nda-bundles-root .ndab hr,
#nda-bundles-root .ndab .ndab-sep { border-color: var(--ndab-line, currentColor); }
#nda-bundles-root .ndab select,
#nda-bundles-root .ndab option {
  color: var(--ndab-fg, inherit);
  background: var(--ndab-select-bg, transparent);
}
.ndab * { box-sizing: border-box; }

.ndab-title {
  font-size: var(--ndab-title-size);
  color: var(--ndab-title-color, inherit);
  font-family: var(--ndab-title-font, var(--ndab-font, inherit));
  font-weight: var(--ndab-title-weight, inherit);
  letter-spacing: var(--ndab-title-ls, inherit);
  margin: 0 0 .4em;
}
.ndab-msg {
  font-size: var(--ndab-msg-size); color: var(--ndab-msg-color, inherit);
  background: var(--ndab-msg-bg, transparent); font-weight: 600; margin-bottom: .8em; padding: 2px 0;
}

/* Randul cu produse. Celulele NU cresc peste latimea lor: cu trei produse
   randul e plin oricum, dar cu doua fiecare ar fi luat jumatate din latime si
   ar fi ramas o gaura uriasa la mijloc. Grupul se centreaza cand ramane loc. */
.ndab-gallery {
  display: flex; align-items: flex-start; flex-wrap: nowrap;
  gap: 10px; width: 100%; justify-content: center;
}
.ndab-plus { align-self: center; font-size: 20px; opacity: .6; flex: 0 0 auto; }
.ndab-cell {
  position: relative;
  flex: 0 1 var(--ndab-img-w);
  min-width: 0;
  max-width: var(--ndab-img-w);
}
.ndab-img { width: 100%; max-width: var(--ndab-img-w); cursor: pointer; }
.ndab-img img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: var(--ndab-img-fit); display: block;
}
.ndab-img--faded { opacity: var(--ndab-img-faded); transition: opacity .15s ease; }
.ndab-img--hidden { visibility: hidden; }

/* Ne desenam SINGURI caseta si bifa.
   Temele moderne sterg aspectul implicit al casetelor (appearance: none) si
   isi deseneaza propria bifa pe alt element. Caseta noastra ramanea atunci un
   patrat gol: se vedea bifata doar la trecerea mouse-ului, din stilul temei.
   Selectorul incepe cu #nda-bundles-root ca sa batem CSS-ul temei. */
#nda-bundles-root .ndab-check {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  border: 1.5px solid var(--ndab-check-border, rgba(0, 0, 0, .45));
  border-radius: 4px;
  background: var(--ndab-check-bg, #fff);
  transition: background-color .12s ease, border-color .12s ease;
}

#nda-bundles-root .ndab-check:checked {
  background: var(--ndab-accent, #1a1a1a);
  border-color: var(--ndab-accent, #1a1a1a);
}

/* bifa propriu-zisa, doua linii rotite */
#nda-bundles-root .ndab-check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--ndab-check-tick, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#nda-bundles-root .ndab-check:disabled { opacity: .45; cursor: default; }

#nda-bundles-root .ndab-check:focus-visible {
  outline: 2px solid var(--ndab-accent, #1a1a1a);
  outline-offset: 2px;
}

#nda-bundles-root .ndab-check--corner {
  position: absolute;
  top: 6px;
  right: 6px;
}

.ndab-purchase { margin: 14px 0; }
.ndab-total { margin-bottom: 10px; }
.ndab-total-price { font-weight: 600; }
.ndab-total-compare, .ndab-compare {
  text-decoration: line-through; opacity: .65; margin-left: .4em; color: var(--ndab-compare-color, inherit);
}
.ndab--compare-bold .ndab-compare, .ndab--compare-bold .ndab-total-compare { font-weight: 700; }

.ndab-saved {
  display: inline-block; margin-left: .55em; padding: 2px 9px; border-radius: 99px;
  font-size: .86em; font-weight: 600; line-height: 1.5;
  color: var(--ndab-saved-color, #0b6b3a);
  background: var(--ndab-saved-bg, rgba(15, 157, 88, .12));
  white-space: nowrap;
}
.ndab-saved--plain { padding: 0; background: none; border-radius: 0; }

.ndab-btn {
  cursor: pointer;
  font-family: var(--ndab-btn-font, var(--ndab-font, inherit));
  font-size: var(--ndab-btn-size, inherit);
  font-weight: var(--ndab-btn-weight, inherit);
  letter-spacing: var(--ndab-btn-ls, inherit);
  text-transform: var(--ndab-btn-transform, none);
  padding: var(--ndab-btn-padding, 12px 22px);
  min-height: 42px;
  line-height: 1.2;
  border: var(--ndab-btn-border, 0);
  box-shadow: var(--ndab-btn-shadow, none);
  border-radius: var(--ndab-btn-radius);
  color: var(--ndab-btn-color, #fff); background: var(--ndab-btn-bg, #111);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ndab-btn:active:not(:disabled) { transform: translateY(1px); }
.ndab-btn:hover:not(:disabled) {
  color: var(--ndab-btn-hover-color, var(--ndab-btn-color, #fff));
  background: var(--ndab-btn-hover-bg, var(--ndab-btn-bg, #111));
}
.ndab-btn:disabled { opacity: .5; cursor: not-allowed; }
.ndab--btn-full .ndab-saved {
  display: inline-block; margin-left: .55em; padding: 2px 9px; border-radius: 99px;
  font-size: .86em; font-weight: 600; line-height: 1.5;
  color: var(--ndab-saved-color, #0b6b3a);
  background: var(--ndab-saved-bg, rgba(15, 157, 88, .12));
  white-space: nowrap;
}
.ndab-saved--plain { padding: 0; background: none; border-radius: 0; }

.ndab-btn { width: 100%; }

.ndab-list { border-top: 1px solid rgba(128,128,128,.25); padding-top: 12px; }
.ndab-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 6px 0; cursor: pointer;
}
.ndab-name { color: var(--ndab-name-color, inherit); }
.ndab-link { color: inherit; }
.ndab-desc { color: var(--ndab-desc-color, inherit); opacity: .8; flex-basis: 100%; }
.ndab-price { color: var(--ndab-price-color, inherit); }
.ndab-price--sale { color: var(--ndab-sale-color, inherit); }
.ndab--price-bold .ndab-price { font-weight: 700; }
.ndab-variant {
  font: inherit; padding: 4px 6px;
  color: var(--ndab-variant-color, inherit);
  background: var(--ndab-variant-bg, transparent);
  border: 1px solid var(--ndab-variant-border, rgba(128,128,128,.4));
}
.ndab-rating { color: var(--ndab-rating-color, #f9bd36); letter-spacing: 1px; }
.ndab-star { opacity: .3; }
.ndab-star--on { opacity: 1; }
.ndab-rating-count { color: inherit; opacity: .7; }
.ndab-error { margin-top: 10px; color: #b42318; }

/* Compact — totul pe un rand, cumpararea sub bundle */
.ndab--compact .ndab-cell-name { font-size: .95em; margin-top: 6px; }
.ndab--compact .ndab-cell-prices { margin-top: 4px; }

/* Stack — lista deasupra, cumpararea dedesubt */
.ndab--stack .ndab-purchase { border-top: 1px solid rgba(128,128,128,.25); padding-top: 12px; }

@media (max-width: 749px) {
  .ndab-gallery { gap: 6px; }
  .ndab-cell { max-width: none; }
  .ndab-plus { font-size: 16px; }
  .ndab-saved {
  display: inline-block; margin-left: .55em; padding: 2px 9px; border-radius: 99px;
  font-size: .86em; font-weight: 600; line-height: 1.5;
  color: var(--ndab-saved-color, #0b6b3a);
  background: var(--ndab-saved-bg, rgba(15, 157, 88, .12));
  white-space: nowrap;
}
.ndab-saved--plain { padding: 0; background: none; border-radius: 0; }

.ndab-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ndab-img--faded, .ndab-saved {
  display: inline-block; margin-left: .55em; padding: 2px 9px; border-radius: 99px;
  font-size: .86em; font-weight: 600; line-height: 1.5;
  color: var(--ndab-saved-color, #0b6b3a);
  background: var(--ndab-saved-bg, rgba(15, 157, 88, .12));
  white-space: nowrap;
}
.ndab-saved--plain { padding: 0; background: none; border-radius: 0; }

.ndab-btn { transition: none; }
}

/* ── fereastra de confirmare dupa adaugare ────────────────────────────────
   Cosul temei nu se vede mereu imediat, iar clientul ramane cu impresia ca
   nu s-a intamplat nimic. Aratam noi ce a intrat in cos.
   Toate regulile pornesc de la id, ca sa bata CSS-ul temei. */
#ndab-popup.ndab-popup-back {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); padding: 16px;
  animation: ndab-fade .12s ease-out;
}
@keyframes ndab-fade { from { opacity: 0 } to { opacity: 1 } }

#ndab-popup .ndab-popup {
  background: #fff; color: #1a1a1a; border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  width: 100%; max-width: 380px; padding: 20px;
  font-family: var(--ndab-font, inherit);
  animation: ndab-rise .16s ease-out;
}
@keyframes ndab-rise { from { transform: translateY(8px) } to { transform: none } }

#ndab-popup .ndab-popup-title { font-size: 17px; font-weight: 600; margin-bottom: 14px; }

#ndab-popup .ndab-popup-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
#ndab-popup .ndab-popup-item { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; }
#ndab-popup .ndab-popup-item img {
  width: 44px; height: 44px; flex: none; object-fit: cover;
  border-radius: 6px; background: #f4f4f4;
}

#ndab-popup .ndab-popup-actions { display: flex; flex-direction: column; gap: 8px; }
#ndab-popup .ndab-popup-primary,
#ndab-popup .ndab-popup-secondary {
  display: block; width: 100%; box-sizing: border-box;
  padding: 11px 16px; border-radius: var(--ndab-btn-radius, 8px);
  font-size: 15px; font-weight: 600; text-align: center; cursor: pointer;
  text-decoration: none; border: 1px solid transparent; font-family: inherit;
}
#ndab-popup .ndab-popup-primary {
  background: var(--ndab-btn-bg, #1a1a1a); color: var(--ndab-btn-color, #fff);
}
#ndab-popup .ndab-popup-secondary {
  background: transparent; color: #1a1a1a; border-color: rgba(0, 0, 0, .2);
}
#ndab-popup .ndab-popup-primary:focus-visible,
#ndab-popup .ndab-popup-secondary:focus-visible { outline: 2px solid var(--ndab-accent, #1a1a1a); outline-offset: 2px; }

@media (max-width: 480px) {
  #ndab-popup .ndab-popup { max-width: none; }
}