/* Business Website Co. -- shared promo-code widget styles.
   Loaded on index.html and start.html, each with its own independent
   widget instance. Rose Noir tokens only -- no hardcoded hex. */

.promo-sticky-btn {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-cta-fill);
  color: var(--color-cta-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-sm);
  cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-brand-rose) 35%, transparent);
  transition: transform var(--duration-fast) var(--ease-out);
}

.promo-sticky-btn:hover {
  transform: translateY(-2px);
}

.promo-sticky-btn[data-applied="true"] {
  background: var(--status-success);
}

.promo-popover {
  position: fixed;
  right: var(--space-lg);
  bottom: calc(var(--space-lg) + 56px);
  z-index: 61;
  width: min(320px, calc(100vw - 2 * var(--space-lg)));
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-text-primary) 18%, transparent);
}

.promo-popover[hidden] {
  display: none;
}

.promo-popover-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
}

.promo-popover-row {
  display: flex;
  gap: var(--space-sm);
}

.promo-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  text-transform: uppercase;
}

.promo-apply-btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-cta-fill);
  color: var(--color-cta-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-sm);
  cursor: pointer;
  white-space: nowrap;
}

.promo-apply-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.promo-message {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}

.promo-message.success { color: var(--status-success); }
.promo-message.error { color: var(--status-error); }

.promo-applied-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.promo-applied-label {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--status-success);
  font-size: var(--text-body-sm);
}

.promo-clear-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  text-decoration: underline;
  font-size: var(--text-body-sm);
  cursor: pointer;
  padding: 0;
}

/* Price display: original price struck through, discounted price in rose,
   placed to the right of it -- per spec. */
.price-original.has-discount {
  text-decoration: line-through;
  color: var(--color-text-muted);
  font-size: 0.6em;
  font-weight: 500;
  margin-right: var(--space-sm);
  vertical-align: middle;
}

.price-discounted {
  color: var(--color-brand-rose);
  font-weight: 700;
}

.price-discount-badge {
  display: inline-block;
  margin-left: var(--space-sm);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-rose) 18%, transparent);
  color: var(--color-brand-rose);
  font-size: var(--text-label);
  font-weight: 700;
  vertical-align: middle;
}