/* Demo-only overrides for the marketing site preview.
   Keep volume-discount.css a pristine mirror of the app — put preview-only tweaks here so updates
   stay a one-file copy. Loaded AFTER volume-discount.css in demo.blade.php. */

/* The embed renders real <a> links on chip/card gift images + titles; the static preview has none,
   so fake the clickable affordance (cursor + hover) here. */
.bx-gift-chip-image,
.bx-gift-chip-title,
.bx-gift-row .bx-extra-image,
.bx-gift-row .bx-extra-title {
  cursor: pointer;
}

.bx-gift-chip-image,
.bx-gift-row .bx-extra-image {
  transition: opacity 0.15s ease;
}

.bx-gift-chip-image:hover,
.bx-gift-row .bx-extra-image:hover {
  opacity: 0.85;
}

.bx-gift-chip-title:hover,
.bx-gift-row .bx-extra-title:hover {
  text-decoration: underline;
}

/* Alpine's <template x-for> element is the stepper's literal first child, so the app CSS's
   :not(:first-child) connector rule wrongly matches the first step; suppress its connector.
   nth-child(2) = the first rendered step (the template element is child 1). */
.bx-pgifts-stepper .bx-pgifts-step:nth-child(2)::before,
.bx-pgifts-stepper .bx-pgifts-step:nth-child(2)::after {
  display: none;
}

/* Demo-only switch (top of the backdrop) to flip the open modal between List and Grid layouts. */
.bxd-modal-switch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(17, 17, 17, 0.82);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
}
.bxd-modal-switch-label {
  color: rgba(255, 255, 255, 0.7);
  padding: 0 4px;
}
.bxd-modal-switch button {
  border: 0;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
}
.bxd-modal-switch button.is-on {
  background: #fff;
  color: #111;
}

/* Demo coach tip: a bobbing tooltip + soft pulse nudging the visitor to click the gift trigger
   so they discover the modal. Dismissed (via Alpine) once the modal is opened. */
.bx-gift-picker {
  position: relative;
}
.bxd-gift-hint {
  position: absolute;
  left: 50%;
  top: -46px;
  transform: translateX(-50%);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  pointer-events: none;
  padding: 8px 12px;
  border-radius: 9px;
  /* Flat soft lavender from the §2 container palette, dark text. Light-on-dark reads clearly over
     the dark trigger without the loud saturated look. */
  background: #c9bdff;
  color: #181229;
  font: 600 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  box-shadow:
    0 8px 22px rgba(124, 58, 237, 0.22),
    0 0 0 1px rgba(124, 58, 237, 0.16);
  animation: bxd-hint-bob 1.5s ease-in-out infinite;
}
.bxd-gift-hint::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: #c9bdff;
}
.bxd-gift-hint-cursor {
  font-size: 14px;
}
@keyframes bxd-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}