/* ========================================================
   BeWise – Points / Discount Code Mutual Exclusivity
   Aligned with BestConnection brand:
     brand-2 teal  #2cb5a3
     brand-3 slate #283849
     brand-4 dark  #1c2a3a
     body font: Poppins
   ======================================================== */

/* --------------------------------------------------------
   Overlay: replaces the external credits UI when a
   non-credits coupon is already active on the cart.
   Styled as a subtle card consistent with the shop's
   rounded-xl / shadow aesthetic.
   -------------------------------------------------------- */
.bw-credits-overlay {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #f8fffe 0%, #f0faf8 100%);
  border: 1px solid rgba(44, 181, 163, 0.25);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #283849;
  font-family: 'Poppins', sans-serif;
}

.bw-credits-overlay svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: #2cb5a3;
}

.bw-credits-overlay__text {
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------
   Confirm Dialog: modal for replacing an existing coupon
   with bonus points. Matches the shop's premium feel --
   clean white card, brand teal primary button, dark slate
   accents, rounded corners, soft shadow.
   -------------------------------------------------------- */
.bw-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(28, 42, 58, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bw-confirm-dialog.bw-confirm-dialog--visible {
  opacity: 1;
  visibility: visible;
}

.bw-confirm-dialog__card {
  background: #fff;
  border-radius: 1rem;
  box-shadow:
    0 4px 6px -1px rgba(28, 42, 58, 0.08),
    0 20px 40px -4px rgba(28, 42, 58, 0.16);
  max-width: 24rem;
  width: 100%;
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: 'Poppins', sans-serif;
  transform: translateY(8px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-confirm-dialog--visible .bw-confirm-dialog__card {
  transform: translateY(0) scale(1);
}

.bw-confirm-dialog__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, #f0faf8 0%, #e0f5f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.bw-confirm-dialog__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #2cb5a3;
}

.bw-confirm-dialog__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1c2a3a;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.bw-confirm-dialog__body {
  font-size: 0.8125rem;
  color: #5a6a7a;
  line-height: 1.6;
}

.bw-confirm-dialog__body strong {
  color: #283849;
  font-weight: 500;
}

.bw-confirm-dialog__actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.bw-confirm-dialog__btn {
  flex: 1;
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  letter-spacing: -0.01em;
}

.bw-confirm-dialog__btn:active {
  transform: scale(0.97);
}

.bw-confirm-dialog__btn--confirm {
  background: #2cb5a3;
  color: #fff;
}

.bw-confirm-dialog__btn--confirm:hover {
  background: #25a090;
  box-shadow: 0 2px 8px rgba(44, 181, 163, 0.3);
}

.bw-confirm-dialog__btn--cancel {
  background: #f3f4f6;
  color: #283849;
}

.bw-confirm-dialog__btn--cancel:hover {
  background: #e8eaed;
}

/* --------------------------------------------------------
   Exclusivity Notice: subtle inline hint shown near the
   active coupon line in the cart. Uses brand dark slate
   palette to feel integrated rather than "warning-like".
   -------------------------------------------------------- */
.bw-exclusivity-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #f6f7f9;
  border: 1px solid #e2e5ea;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #5a6a7a;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.01em;
}

.bw-exclusivity-notice svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: #2cb5a3;
}

/* --------------------------------------------------------
   Hide external credits UI children when overlay is shown.
   -------------------------------------------------------- */
.bw-credits-hidden > .use-credits,
.bw-credits-hidden > .m-cart-credtis-line,
.bw-credits-hidden > :not(.bw-credits-overlay):not(.bw-exclusivity-notice) {
  display: none !important;
}