/**
 * Unified CTA Buttons - Single Source of Truth
 * 
 * All CTA buttons across the site (Buy Now, Contribute Now, etc.) use these styles.
 * This ensures perfect consistency in width, height, borders, colors, focus states,
 * and all visual properties.
 * 
 * DO NOT duplicate these styles elsewhere. Reference this file instead.
 */

/* Base CTA button styles - applies to all CTAs */
.buy-now-btn,
.donate-now-btn,
.contribute-now-btn,
.cta-button,
.contribute-cta {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem; /* 12px - spacing between elements */
  width: 100%;
  
  /* Spacing - EXACT measurements for consistency */
  padding: 0.75rem 1.25rem; /* 12px 20px */
  
  /* Light mode colors - WHITE background, RED text, BLACK border */
  background: #fff;
  color: var(--brand-color);  /* BRAND color for text */
  border: 3px solid #000;
  
  /* Typography */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem; /* 14px */
  
  /* RESPONSIVE FIX: Prevent text clipping on mobile */
  line-height: 1.2;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* Behavior */
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  
  /* Prevent text decoration on all children */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Ensure vertical alignment consistency */
  margin-top: auto;

  /* Enforce exact height to ensure uniformity across cards */
  min-height: 48px; /* matches visual in designs */
  height: 48px;
}

/* Product-card CTAs: remove flex gap so inline spacing is fully controlled
   by pseudo-elements/margins. We'll attach the dash to the label to prevent
   any template whitespace from appearing between label and dash. */
.product-card .buy-now-btn,
.product-card .donate-now-btn,
.product-card .contribute-now-btn,
.modern-product-card .buy-now-btn,
.modern-product-card .donate-now-btn {
  gap: 0; /* no flex gap between inline items */
}

/* Specific overrides for the Stripe contribute button so it matches the
   canonical contribute CTA visuals (uses CTA variables for light mode;
   dark-mode rule below ensures black/white + dark-border). */
#stripeContributeButton {
  background: var(--donation-cta-bg, #f3e8d9);
  color: var(--donation-cta-color, #060606);
  border: 1px solid var(--donation-cta-border, #e6d3b8);
  border-width: 1px;
}

#stripeContributeButton:hover {
  /* Match the canonical contribute-cta hover visual */
  background: #374151;
  border-color: #4b5563;
  color: #fff !important;
}

/* Dark-mode parity for the stripe contribute button */
html.dark #stripeContributeButton,
html[data-theme="dark"] #stripeContributeButton,
.dark #stripeContributeButton {
  background: #000;
  color: #fff;
  border: 1px solid var(--donation-cta-border-dark, #374151);
}

/* Remove text decoration from all button content */
.buy-now-btn,
.buy-now-btn *,
.donate-now-btn,
.donate-now-btn *,
.contribute-now-btn,
.contribute-now-btn *,
.cta-button,
.cta-button *,
.contribute-cta,
.contribute-cta * {
  text-decoration: none !important;
}

/* Dark mode base styles - BLACK background, RED text, WHITE border */
.dark .buy-now-btn,
.dark .donate-now-btn,
.dark .contribute-now-btn,
.dark .cta-button,
html[data-theme="dark"] .buy-now-btn,
html[data-theme="dark"] .donate-now-btn,
html[data-theme="dark"] .contribute-now-btn,
html[data-theme="dark"] .cta-button {
  background: #000;
  color: var(--brand-color);  /* BRAND color for text */
  border-color: #fff;
}

/* Price separator styling (for buy-now buttons with prices) */
.buy-now-btn > span:first-child::after,
.donate-now-btn > span:first-child::after,
.contribute-now-btn > span:first-child::after,
.cta-button > span:first-child::after {
  /* Separator attached to the label so it's inseparable from the label text */
  content: "—";
  display: inline-block;
  margin-left: 0.125rem; /* tiny breathing space after label */
  margin-right: 0.125rem; /* tiny breathing space before price */
  color: inherit;
  font-weight: 900;
  /* Match label font-size so label + dash read as one unit */
  font-size: inherit;
}

/* For retired product badges we do NOT want the price separator dash. Keep the
   badge text clean and exact: "RETIRED" (no dash). This targets only the
   retired badge variant applied to CTA containers. */
.retired-badge > span:first-child::after {
  content: "" !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: none !important;
}

/* Make retired badges non-interactive and visually disabled.
   This ensures retired CTAs are not clickable or focusable and show a
   disabled cursor. Template already emits aria-disabled and tabindex -1. */
.retired-badge {
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.85; /* slightly dim to indicate disabled state (card-level opacity already reduces further) */
}

/* Defensive: if a retired product still renders an anchor with .buy-now-btn,
   ensure the buy button is disabled and non-interactive as well. */
.product-card.retired .buy-now-btn {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Make the price slightly larger than the label */
.buy-now-btn > .text-2xl,
.donate-now-btn > .text-2xl,
.contribute-now-btn > .text-2xl,
.cta-button > .text-2xl {
  font-size: 1.125rem; /* slightly larger for price */
  font-weight: 900;
}

/* Hover state - RED background for all */
.buy-now-btn:hover,
.donate-now-btn:hover,
.contribute-now-btn:hover,
.cta-button:hover,
.contribute-cta:hover {
  background: var(--brand-color);
  border-color: var(--brand-color);
  color: #fff !important;
  text-decoration: none !important;
}

/* Dark mode hover - same RED for consistency */
.dark .buy-now-btn:hover,
.dark .donate-now-btn:hover,
.dark .contribute-now-btn:hover,
.dark .cta-button:hover,
html[data-theme="dark"] .buy-now-btn:hover,
html[data-theme="dark"] .donate-now-btn:hover,
html[data-theme="dark"] .contribute-now-btn:hover,
html[data-theme="dark"] .cta-button:hover {
  background: var(--brand-color);
  border-color: var(--brand-color);
  color: #fff !important;
}

/* Ensure all child elements inherit white color on hover */
.buy-now-btn:hover span,
.donate-now-btn:hover span,
.contribute-now-btn:hover span,
.cta-button:hover span,
.contribute-cta:hover span {
  color: #fff !important;
}

.dark .buy-now-btn:hover span,
.dark .donate-now-btn:hover span,
.dark .contribute-now-btn:hover span,
.dark .cta-button:hover span,
html[data-theme="dark"] .buy-now-btn:hover span,
html[data-theme="dark"] .donate-now-btn:hover span,
html[data-theme="dark"] .contribute-now-btn:hover span,
html[data-theme="dark"] .cta-button:hover span {
  color: #fff !important;
}

/* Active/Click state - subtle scale down */
.buy-now-btn:active,
.donate-now-btn:active,
.contribute-now-btn:active,
.cta-button:active,
.contribute-cta:active {
  transform: scale(0.98);
}

/* Focus state - accessible outline */
.buy-now-btn:focus,
.donate-now-btn:focus,
.contribute-now-btn:focus,
.cta-button:focus,
.contribute-cta:focus {
  outline: 2px solid var(--brand-color);
  outline-offset: 2px;
}

/* Focus visible (keyboard navigation) - enhanced outline */
.buy-now-btn:focus-visible,
.donate-now-btn:focus-visible,
.contribute-now-btn:focus-visible,
.cta-button:focus-visible,
.contribute-cta:focus-visible {
  outline: 3px solid var(--brand-color);
  outline-offset: 3px;
}

/* Disabled state */
.buy-now-btn:disabled,
.donate-now-btn:disabled,
.contribute-now-btn:disabled,
.cta-button:disabled,
.contribute-cta:disabled,
.buy-now-btn[disabled],
.donate-now-btn[disabled],
.contribute-now-btn[disabled],
.cta-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Remove extra border that appears after click (the issue from the image) */
.buy-now-btn:focus:not(:focus-visible),
.donate-now-btn:focus:not(:focus-visible),
.contribute-now-btn:focus:not(:focus-visible),
.cta-button:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure buttons don't get weird borders from browser defaults */
.buy-now-btn,
.donate-now-btn,
.contribute-now-btn,
.cta-button,
.contribute-cta {
  border-style: solid;
  border-width: 3px;
  outline-width: 0;
}

/* Special handling for Contribute Now to match others exactly */
.donate-now-btn span,
.contribute-now-btn span {
  font-weight: 900;
  text-transform: uppercase;
}

/* Override any inline styles that might conflict */
.buy-now-btn[style],
.donate-now-btn[style],
.contribute-now-btn[style],
.cta-button[style] {
  /* These important declarations ensure consistency even with inline styles */
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* RESPONSIVE FIX: Mobile button text scaling to prevent clipping */
@media (max-width: 480px) {
  .buy-now-btn,
  .donate-now-btn,
  .contribute-now-btn,
  .cta-button,
  .contribute-cta {
    font-size: 0.75rem; /* 12px - smaller on mobile */
    padding: 0.75rem 1rem; /* tighter padding */
    letter-spacing: 0.025em; /* reduced letter spacing */
  }
}

@media (max-width: 380px) {
  .buy-now-btn,
  .donate-now-btn,
  .contribute-now-btn,
  .cta-button,
  .contribute-cta {
    font-size: 0.6875rem; /* 11px - even smaller for very small screens */
    padding: 0.6875rem 0.875rem;
    letter-spacing: 0;
  }
}