/* Kraftrs Promotions — Bottom Toast
 * Theme-independent: fixed to the viewport, not injected into theme markup,
 * so it works identically regardless of mini-cart/cart-drawer implementation.
 */
.kp-toast-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999998;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 0 12px;
}

.kp-toast-root.kp-toast-bottom-left {
  justify-content: flex-start;
  padding-left: 12px;
}

.kp-toast-root.kp-toast-bottom-right {
  justify-content: flex-end;
  padding-right: 12px;
}

.kp-toast {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 12px;
  background: #ffffff;
  color: var(--kp-text, #1f2937);
  font-family: var(--kp-font, inherit);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  /* Always our fixed light palette — see cart-drawer.css for why this
     matters even without our own dark-mode CSS. */
  color-scheme: light;
  overflow: hidden;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.kp-toast-root.kp-toast-visible .kp-toast {
  transform: translateY(0);
  opacity: 1;
}

.kp-toast-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 40px 14px 16px;
}

.kp-toast-content {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.kp-toast-content .kp-cart-notice {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
}

.kp-toast-content .kp-cart-notice:last-child {
  margin-bottom: 0 !important;
}

.kp-toast-content .kp-progress-wrap {
  margin: 0 !important;
}

.kp-toast-content .kp-tier-progress {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.kp-toast-content .kp-tier-message,
.kp-toast-content .kp-tier-achieved {
  margin: 0 0 6px 0 !important;
  font-size: 0.9rem !important;
}

.kp-toast-content .kp-nudge-dismiss {
  display: inline-block;
  width: auto;
  margin-top: 4px;
  padding: 2px 0;
  border: none;
  background: transparent;
  color: var(--kp-text-light, #6b7280);
  font-family: inherit;
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.kp-toast-content .kp-nudge-dismiss:hover {
  color: var(--kp-text, #1f2937);
}

.kp-toast-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--kp-text-light, #6b7280);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.kp-toast-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--kp-text, #1f2937);
}

.kp-toast-timer {
  height: 3px;
  width: 100%;
  background: var(--kp-border, #e5e7eb);
}

.kp-toast-timer-fill {
  height: 100%;
  width: 100%;
  background: var(--kp-primary, #f5a623);
  transform-origin: left;
  transform: scaleX(1);
}

.kp-toast-root.kp-toast-running .kp-toast-timer-fill {
  transition: transform linear;
  transform: scaleX(0);
}

@media (max-width: 600px) {
  .kp-toast-root {
    padding: 0;
  }

  .kp-toast {
    max-width: 100%;
    margin: 0;
    border-radius: 12px 12px 0 0;
  }
}

/* Intentionally no @media (prefers-color-scheme: dark) block — same reason
   as cart-drawer.css: flipping the toast's own background without also
   dark-moding every color inside .kp-toast-content (notices/progress-bar
   markup shared with the drawer, defined once in frontend.css) left most
   of the toast's text unreadable against the new dark background. Always
   renders its light palette now, regardless of system theme. */