/*
 * Woo Bundle & Add-ons Consolidated v1.2.31
 * Stabiliseret version: bibeholder alle tidligere layoutforbedringer og sikrer at thumbnails vises vandret på desktop,
 * priser vises uden decimaler, og headeren i komplet pakke er korrekt justeret. Denne version er kompatibel med
 * den forbedrede PHP-klasse uden statiske flags.
 */

.wbac-wrap {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

.wbac-title {
  margin: 0 0 .6rem;
  font-size: 1.1rem;
}

.wbac-card {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  padding: .9rem;
  margin-bottom: .8rem;
}

/* Header rows for add-ons and complete package */
.wbac-head {
  display: grid;
  grid-template-columns: auto 160px 1fr 130px 110px;
  align-items: center;
  color: #6b7280;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .2rem;
}
.wbac-head-total {
  justify-self: end;
}

/* Header for complete bundle: 4 columns to match row */
.wbac-head-complete {
  display: grid;
  grid-template-columns: auto 1fr 130px 150px;
  align-items: center;
  color: #6b7280;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .2rem;
  column-gap: .6rem;
}
.wbac-head-complete-total {
  justify-self: end;
}
.wbac-head-complete-save {
  justify-self: end;
}

.wbac-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.wbac-addons {
  margin-top: .4rem;
}

.wbac-line {
  display: grid;
  grid-template-columns: auto 160px 1fr 130px 110px;
  align-items: center;
  column-gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, .08);
}
.wbac-line:last-child,
.wbac-line-complete {
  border-bottom: 0 !important; /* Ensure the dotted line is removed for the complete package */
}

/* Thumbnails wrapper: ensure horizontal alignment on desktop */
.wbac-thumbs {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.wbac-plus {
  margin: 0 .2rem;
}

/* Thumbnails: slightly larger to improve visual balance on desktop */
.wbac-thumb-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.wbac-info a {
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.wbac-value {
  color: #6b7280;
  font-size: .95em;
}
.wbac-value del {
  opacity: .6;
  margin-right: .25rem;
  display: inline-block;
}

.wbac-price {
  justify-self: end;
  font-weight: 700;
  white-space: nowrap;
}

.wbac-save {
  justify-self: end;
  min-width: 90px;
  text-align: right;
  font-weight: 700;
  color: #0a7b34;
}

.wbac-right-note {
  text-align: right;
  margin-top: .4rem;
  font-size: .92em;
  opacity: .8;
}

/* Complete bundle row uses 4 columns matching header */
.wbac-complete-card .wbac-line {
  grid-template-columns: auto 1fr 130px 150px;
}
.wbac-sub {
  font-size: .92em;
  opacity: .85;
}

/* Extra (gift wrap) styling: price aligned to the right and no pseudo-label */
.wbac-extra {
  margin-bottom: .7rem;
}
.wbac-extra-line {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.wbac-extra-label {
  flex: 1;
}
.wbac-extra .wbac-price {
  margin-left: auto;
  justify-self: end;
}

@media (min-width: 521px) {
  /* Final aggressive adjustment: 60px image size and 160px column width to guarantee no overlap */
  .wbac-thumb-img {
    width: 60px !important;
    height: 60px !important;
  }
  .wbac-thumbs .wbac-thumb,
  .wbac-thumbs .wbac-main {
    width: 60px;
    height: 60px;
    flex-shrink: 0; /* Prevent shrinking when space is tight */
  }
}

@media (max-width: 520px) {
  /* Hide header rows on mobile */
  .wbac-head,
  .wbac-head-complete {
    display: none;
  }
  /* Mobile layout for add-on rows: price on same row as thumbs, save below */
  .wbac-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "cb thumbs price"
      ". info save";
    column-gap: .5rem;
    padding: .7rem 0;
  }
  .wbac-line > input.wbac-addon {
    grid-area: cb;
  }
  .wbac-thumbs {
    grid-area: thumbs;
    display: flex;
    align-items: center;
    gap: .3rem;
  }
  .wbac-info {
    grid-area: info;
  }
  .wbac-price {
    grid-area: price;
    justify-self: end;
    align-self: center;
  }
  .wbac-save {
    grid-area: save;
    justify-self: end;
    align-self: center;
    font-size: .9rem;
    min-width: 60px;
  }
  /* Mobile layout for complete bundle: price and save on top row */
  .wbac-complete-card .wbac-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "cb info price"
      ". info save";
    column-gap: .5rem;
  }
  .wbac-complete-card .wbac-price {
    grid-area: price;
    justify-self: end;
    align-self: center;
  }
  .wbac-complete-card .wbac-save {
    grid-area: save;
    justify-self: end;
    align-self: center;
    font-size: .9rem;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
  .wbac-complete-card .wbac-save-amount {
    display: block;
  }
  .wbac-complete-card .wbac-save-percent {
    display: block;
    font-size: .8rem;
    opacity: .8;
  }
}