/* =========================================================
   DL Frequently Bought Together (DL-FBT)
   Clean consolidated stylesheet (2026-01-30)
   ========================================================= */

/* Layout */
.dl-fbt {
  margin-top: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.dl-fbt__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .dl-fbt__layout {
    grid-template-columns: 1fr;
  }
}

.dl-fbt__summary {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 1rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px; /* spacing between rows + button */
}

#dl-fbt .dl-fbt__btn {
  margin-top: 6px; /* optional extra spacing above the button */
}

/* Outer FBT container */
#dl-fbt.dl-fbt {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 1.2rem;
}

/* =========================================================
   Item + thumb positioning
   ========================================================= */

#dl-fbt .dl-fbt__item {
  position: relative;
  /* themes sometimes add spacing for badges */
  padding-top: 0;
}

#dl-fbt .dl-fbt__thumb {
  position: relative;
}

/* Ensure thumbnail doesn't overlay the toggle */
#dl-fbt .dl-fbt__item a,
#dl-fbt .dl-fbt__item img {
  position: relative;
  z-index: 1;
  overflow: visible;
}

#dl-fbt .dl-fbt__products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1100px) {
  #dl-fbt .dl-fbt__products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  #dl-fbt .dl-fbt__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  #dl-fbt .dl-fbt__products {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Include checkbox (custom)
   ========================================================= */

#dl-fbt .dl-fbt__include {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Hide native checkbox WITHOUT disabling clicks */
#dl-fbt .dl-fbt__include input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* Custom checkbox */
#dl-fbt .dl-fbt__check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--accent,
  var(--color-accent,
  var(--primary,
  var(--wp--preset--color--primary,
  var(--woocommerce-primary,
  #2271b1)))));
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

/* Checked state */
#dl-fbt .dl-fbt__include input:checked + .dl-fbt__check {
  background: var(--accent,
  var(--color-accent,
  var(--primary,
  var(--wp--preset--color--primary,
  var(--woocommerce-primary,
  #2271b1)))));
  border-color: var(--accent,
  var(--color-accent,
  var(--primary,
  var(--wp--preset--color--primary,
  var(--woocommerce-primary,
  #2271b1)))));
}

/* Tick */
#dl-fbt .dl-fbt__check::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
}

#dl-fbt .dl-fbt__include input:checked + .dl-fbt__check::after {
  opacity: 1;
}

/* =========================================================
   State styling (driven by JS classes)
   ========================================================= */

/* Unchecked (excluded): greyed out */
#dl-fbt .dl-fbt__item.is-excluded {
  opacity: 0.5;
}

/* Checked but incomplete: should NOT look disabled */
#dl-fbt .dl-fbt__item.is-incomplete {
  opacity: 1;
  outline: 2px dashed rgba(0, 0, 0, 0.2);
  outline-offset: 6px;
}

/* Invalid combo etc. */
#dl-fbt .dl-fbt__item.is-invalid {
  opacity: 0.75;
}

/* Hint text under price */
#dl-fbt .dl-fbt__hint {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.85;
}

/* When excluded, make everything "dead" EXCEPT the checkbox toggle */
#dl-fbt .dl-fbt__item.is-excluded * {
  pointer-events: none;
}

#dl-fbt .dl-fbt__item.is-excluded .dl-fbt__include,
#dl-fbt .dl-fbt__item.is-excluded .dl-fbt__include * {
  pointer-events: auto;
}

/* Optional: visually dim disabled controls when excluded (JS disables them) */
#dl-fbt .dl-fbt__item.is-excluded .dl-fbt__select,
#dl-fbt .dl-fbt__item.is-excluded .dl-fbt__personal-input {
  opacity: 0.7;
}

/* =========================================================
   Pricing and button styling
   ========================================================= */

#dl-fbt .dl-fbt__total {
  font-size: 20px !important;
  line-height: 1.1;
  display: inline-block;
  margin-right: 6px;
}

#dl-fbt .dl-fbt__label {
  font-size: 12px  !important;
  opacity: 0.75;
}

/* =========================================================
   Personalisation block (optional styling)
   ========================================================= */

#dl-fbt .dl-fbt__personal {
  margin-top: 0.75rem;
}

#dl-fbt .dl-fbt__personal-title {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

#dl-fbt .dl-fbt__personal-field {
  display: block;
  margin-bottom: 0.5rem;
}

#dl-fbt .dl-fbt__personal-label {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

#dl-fbt .dl-fbt__personal-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#dl-fbt .dl-fbt__personal-help {
  display: block;
  font-size: 12px;
  opacity: 0.75;
}

/* Emphasise help a bit when invalid/incomplete */
#dl-fbt .dl-fbt__item.is-invalid .dl-fbt__personal-help,
#dl-fbt .dl-fbt__item.is-incomplete .dl-fbt__personal-help {
  font-weight: 600;
}