/* css/components/buttons.css */

/*── Base button styles ─────────────────────────────────────────────────────────*/
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  line-height: 1.5;
  transition: all var(--transition-fast) var(--ease-in-out);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

/*── Hover & focus ─────────────────────────────────────────────────────────────*/
.btn:hover, .button:hover {
  text-decoration: none;
}

/* Ensure links styled as buttons never get an underline */
a.btn:hover,
a.button:hover {
  text-decoration: none;
}

/*── Button with icon ──────────────────────────────────────────────────────────*/
/* Directional arrows at either end of a button: .button is inline-flex, and
   flex layout DROPS the whitespace text node between the label and the <i>,
   so "Label <i arrow>" renders with the arrow touching the text. Give the
   arrow its own gap at the component level so every button gets it right. */
.button > .fa-arrow-right:last-child,
.btn > .fa-arrow-right:last-child {
  margin-left: var(--space-2);
}
.button > .fa-arrow-left:first-child,
.btn > .fa-arrow-left:first-child {
  margin-right: var(--space-2);
}

.btn-icon, .button__icon {
  margin-right: var(--space-2);
  font-size: 1em;
}

.btn > i,
.button > i {
  margin-right: var(--space-2);
}

/*── Ensure any <i> in .btn / .button has spacing to its right ──────────────────*/
.btn-icon--right, .button__icon--right {
  margin-right: 0;
  margin-left: var(--space-2);
}

/*── Variants: Primary ─────────────────────────────────────────────────────────*/
.btn-primary,
.button--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus,
.button--primary:hover, .button--primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/*── Keyboard focus ring (all buttons) ─────────────────────────────────────────*/
.btn:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/*── Variants: Secondary ───────────────────────────────────────────────────────*/
.btn-secondary {
  background-color: var(--color-gray-800);
  color: var(--color-white);
  border-color: var(--color-gray-800);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
  box-shadow: var(--shadow-md);
}

.button--secondary {
  background-color: var(--color-gray-200);
  color: var(--color-gray-800);
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}
.button--secondary:hover, .button--secondary:focus {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-400);
  color: var(--color-gray-900);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/*── Variants: Outline ────────────────────────────────────────────────────────*/
.btn-outline {
  background-color: transparent;
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}
.btn-outline:hover, .btn-outline:focus {
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
  border-color: var(--color-gray-400);
}

.button--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.button--outline:hover, .button--outline:focus {
  background-color: rgba(79, 70, 229, 0.05);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

/*── Variants: Ghost (new) ────────────────────────────────────────────────────*/
.button--ghost {
  background-color: transparent;
  color: var(--color-gray-700);
  border-color: transparent;
  padding: var(--space-2);
}
.button--ghost:hover, .button--ghost:focus {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

/*── Variants: Danger ─────────────────────────────────────────────────────────*/
/* Per design-system-spec.md §3. Use for destructive actions
   (delete, cancel-subscription, remove-from-team). */
.button--danger {
  background-color: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
  box-shadow: var(--shadow-sm);
}
.button--danger:hover, .button--danger:focus {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
  color: var(--color-white);
}

/*── Sizes ─────────────────────────────────────────────────────────────────────*/
.btn-sm {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}
.button--xs {
  font-size: var(--font-size-xs);
  padding: 2px var(--space-2);
  gap: 4px;
}
.button--sm {
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-3);
}

.btn-large {
  font-size: var(--font-size-lg);
  padding: var(--space-4) var(--space-6);
}
.button--lg {
  font-size: var(--font-size-lg);
  padding: var(--space-4) var(--space-8);
}

/* Hero CTA — the single biggest action on a page (landing heroes, consoles).
   One per screen. Pairs with the night surface, which adds the indigo glow. */
.button--xl {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  padding: 17px var(--space-8);
  border-radius: 14px;
  letter-spacing: -0.2px;
}

/*── Full width/block ─────────────────────────────────────────────────────────*/
.btn-block,
.button--block {
  display: flex;
  width: 100%;
}

/*── Disabled states ─────────────────────────────────────────────────────────*/
.btn:disabled,
.btn-disabled,
.button:disabled,
.button--disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/*── :active tap-down (canonical, 2026-05-22) ───────────────────────────────────
   iOS-native press feedback for every site-wide button variant. Documented
   canonically in .claude/context/design-system-spec.md. Companion rules for
   page-CSS card / row surfaces live in /css/base/interactions.css.

   - Filled variants (primary, danger, secondary-dark, youtube): the hover
     state already darkens the background; :active extends that with a 0.97
     scale and a flattened shadow to give the haptic-illusion press feel.
   - Outline / ghost / light-secondary: a heavier indigo tint + matching
     darker text/border so the press is visible against the white surface.
   - Both transitions are 80ms — fast enough to feel instant on tap, smooth
     enough not to flicker on release.

   Reduced-motion fallback in interactions.css drops the scale transform
   site-wide. */
.btn:active,
.button:active {
  transition: transform 80ms ease, background-color 80ms ease, box-shadow 80ms ease;
}

.btn-primary:active,
.button--primary:active,
.btn-secondary:active,
.button--danger:active {
  transform: scale(0.97);
  box-shadow: none;
}
.btn-primary:active,
.button--primary:active {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.btn-secondary:active {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}
.button--danger:active {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
}

.button--secondary:active {
  transform: scale(0.97);
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-400);
  box-shadow: none;
}

.btn-outline:active,
.button--outline:active {
  transform: scale(0.97);
  background-color: rgba(79, 70, 229, 0.10);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.button--ghost:active {
  transform: scale(0.97);
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);
}

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .button:active,
  .button--primary:active,
  .button--secondary:active,
  .button--outline:active,
  .button--ghost:active,
  .button--danger:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-outline:active {
    transform: none;
  }
}

/*── Button with avatar ──────────────────────────────────────────────────────*/
.btn-with-avatar,
.button--with-avatar {
  display: inline-flex;
  align-items: center;
}
.button-avatar,
.button__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: var(--space-2);
}

/*── Button groups ───────────────────────────────────────────────────────────*/
.btn-group,
.button-group {
  display: inline-flex;
}
.btn-group .btn,
.button-group .button {
  border-radius: 0;
}
.btn-group .btn:first-child,
.button-group .button:first-child {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}
.btn-group .btn:last-child,
.button-group .button:last-child {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.button-group .button:not(:first-child) {
  margin-left: -1px;
}

/*── Shine/Shimmer animation ──────────────────────────────────────────────────*/
.button--shine {
  position: relative;
  overflow: hidden;
}

.button--shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -200%; /* Start off-screen to the left */
  width: 200%;
  height: 100%;
  transform: skewX(-25deg);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine 4s infinite ease-in-out;
  animation-delay: 1s; /* Initial delay before first animation */
}

/* Moves the sweep with transform, not left. Animating left forces the browser
   to recalculate page layout on every frame, which registers as continuous
   layout shift on slower phones. The travel distance is unchanged: the sweep
   is 200% of the button wide, so 175% of its own width equals the original
   350% of the button. */
@keyframes shine {
  0% {
    transform: translateX(0) skewX(-25deg);
  }
  20% {
    transform: translateX(175%) skewX(-25deg);
  }
  100% {
    transform: translateX(175%) skewX(-25deg);
  }
}

/*── Hero buttons + responsive ───────────────────────────────────────────────*/
.hero-buttons {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  .hero-buttons .btn,
  .hero-buttons .button {
    width: 100%;
  }
}

/* YouTube Sign-in Button Styles (Revamped V2) */
.btn-youtube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Standardized padding to match .btn */
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-brand-red); /* YouTube Brand Red */
  color: #ffffff;
  border-radius: var(--radius-lg); /* Standardized Rounded Shape (not pill) */
  border: 1px solid var(--color-brand-red);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-family-base, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  height: auto; /* Let padding define height like other buttons */
  min-height: 44px; /* Mobile accessible touch target */
  min-width: auto;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  line-height: 1.5;
}

.btn-youtube:hover {
  background-color: var(--color-brand-red-dark); /* Darker YouTube Red on hover */
  border-color: var(--color-brand-red-dark);
  box-shadow: var(--shadow-md);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-youtube:active {
  background-color: #b91c1c; /* Even darker for active state */
  transform: translateY(1px);
  box-shadow: none;
}

.btn-youtube:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 21, 21, 0.3);
}

/* White Icon for Red Background */
.btn-youtube__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="%23FFFFFF" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Legacy overrides for specific sizes/themes (mapped to new style) */
.btn-youtube--large {
  font-size: var(--font-size-lg);
  padding: var(--space-4) var(--space-6);
}

.btn-youtube--dark {
  /* Already default, kept for compatibility */
  background-color: var(--color-brand-red);
  color: #ffffff;
}

/*── Variants: Upgrade (Premium Flat) ───────────────────────────────────*/
.button--upgrade {
  background-color: var(--color-primary-dark); /* Darker indigo for premium */
  color: var(--color-white);
  border-color: transparent;
}
.button--upgrade:hover, .button--upgrade:focus {
  background-color: #3730a3; /* Even darker indigo for hover */
  color: var(--color-white);
}

/*── Button Group (for Card + Crypto) ───────────────────────────────────*/
.cta-button-group {
  display: flex;
  width: 100%;
  align-items: stretch; /* Make buttons equal height */
}

/* The main action button (e.g., "Upgrade") */
.cta-button-group .button:not(.crypto-btn) {
  flex: 1 1 auto; /* Allow it to grow/shrink, basing width on content */
  white-space: nowrap; /* Prevent text from wrapping and causing overlap */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden; /* Prevent text from spilling out on very small screens */
  text-overflow: ellipsis;
  justify-content: center; /* Ensure icon and text are centered */
}

/* The crypto icon button */
.cta-button-group .crypto-btn {
  flex: 0 0 auto; /* Don't grow, don't shrink, base width on content/padding */
  /* Match vertical padding of other buttons, but reduce horizontal padding */
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Ensure the icon inside the crypto button has no extra margin */
.cta-button-group .crypto-btn > i {
  margin-right: 0;
}

/* Adjust border color for outline-style buttons */
.cta-button-group .button--upgrade-growth + .crypto-btn,
.cta-button-group .button--upgrade-elite + .crypto-btn {
  border-left-color: rgba(139, 92, 246, 0.3);
}

/*── Variants: Crypto ──────────────────────────────────────────────────*/
.button--crypto {
  background-color: #1a202c; /* A dark, techy color */
  color: var(--color-white);
  border-color: #2d3748;
  box-shadow: var(--shadow-sm);
}
.button--crypto:hover, .button--crypto:focus {
  background-color: #2d3748;
  border-color: #4a5568;
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.button--crypto i {
  color: #f7931a; /* Bitcoin orange, a recognizable crypto color */
}

/*── Variants: Outline Light (for dark backgrounds) ───────────────────*/
.button--outline-light {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-gray-500);
}
.button--outline-light:hover, .button--outline-light:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-gray-300);
  color: var(--color-white);
}
.button--outline-light i {
  color: #f7931a; /* Keep the bitcoin orange for consistency */
}

/* =================================================================
   NEW: Pricing Table Button Structure (October 2025 - Revision 4)
   ================================================================= */

/* The main, full-width button */
.plan-cta-cell .button--primary-action {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  /* By default, allow wrapping to prevent overflow on medium screens */
  white-space: normal;
}

/* Reduce icon margin specifically within these buttons */
.plan-cta-cell .button--primary-action .fas {
  margin-right: var(--space-2);
}

/* Main container for alternative payment options */
.alternative-payments {
  text-align: center;
  margin-top: var(--space-4); /* Added space above */
}

/* "Or pay with:" text label */
.alternative-payments__label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-1); /* Reduced space below */
}

/* Flex container for the payment links themselves */
.alternative-payments__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}

/* Individual payment links (e.g., Crypto, Razorpay) */
.alternative-payments__links a {
  color: var(--color-gray-600);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}

.alternative-payments__links a:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.alternative-payments__links a .fa-bitcoin {
  color: #f7931a; /* Bitcoin orange */
}

/* On WIDER screens, enforce single-line text because we have enough space */
@media (min-width: 992px) {
  .plan-cta-cell .button--primary-action {
      white-space: nowrap;
  }
  .alternative-payments__label {
      white-space: nowrap;
  }
}

/* =================================================================
   Unified Loading and Success States (October 2025)
   ================================================================= */
.button.button--loading {
    position: relative;
    cursor: wait;
    pointer-events: none;
}
  
/* Hide all direct children (text, icons) cleanly */
.button.button--loading > * {
    visibility: hidden;
}

/* Base spinner style (white, for dark/solid buttons) */
.button.button--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-spin 0.8s linear infinite;
  /* Reset shine properties to prevent conflicts */
  background-image: none;
  transform: none;
}

/* Spinner for light/outline buttons (e.g., secondary, outline) */
.button.button--secondary.button--loading::after,
.button.button--outline.button--loading::after,
.button.button--outline-light.button--loading::after,
.button.button--ghost.button--loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: var(--color-primary);
}

.button.button--crypto.button--loading::after {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-white);
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}
  
/* Green ("success") button variant. Historically this rule also set
   pointer-events:none + cursor:default because it was designed as a transient
   post-click success state. But .button--success is used site-wide as a
   standard green colour variant (wallet Request Payout, mock-checkout,
   wallet-withdraw submit, dev components library, etc.), so blocking pointer
   events here made every green button/link unclickable (caught April 2026 when
   a creator reported he couldn't request a payout). If a caller wants the
   "disabled after success" behaviour, add the `disabled` attribute or combine
   with `.button--loading`. */
.button.button--success,
.button.button--success:hover,
.button.button--success:focus {
    background-color: var(--color-success);
    border-color: var(--color-success-dark);
    color: var(--color-white);
    transition: all 0.2s ease-in-out;
}

/* Ensure the success icon and text are styled correctly */
/* Compound selector (0,2,0 + element/class) beats variant icon colors like .button--crypto i (0,1,1) */
.button.button--success .fas,
.button.button--success span {
    color: var(--color-white);
}

/* Primary Razorpay Button */
.btn-razorpay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: #2563eb;
  color: var(--color-white);
  border: none;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2), 0 1px 2px rgba(0,0,0,0.1);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 20px;
}

.btn-razorpay:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(0,0,0,0.1);
}

.btn-razorpay .razorpay-logo {
  height: 18px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Size modifier for small Razorpay buttons, like on the pricing page */
.btn-razorpay.button--sm {
  padding: var(--space-2) var(--space-4); /* 8px 16px */
  font-size: var(--font-size-sm);
  gap: var(--space-2);
}

.btn-razorpay.button--sm .razorpay-logo {
  height: 14px;
}

/* Generic style for the Razorpay logo when used inside any .button component */
.button .razorpay-logo {
  height: 16px;
  width: auto;
  filter: brightness(0) invert(1); /* Ensures the logo is white for dark/colored buttons */
  margin-left: var(--space-2);
}

/* Size modifier for small buttons */
.button.button--sm .razorpay-logo {
  height: 14px;
}

/*── AI Credit Badge — append inside any .button to show credit cost ─────────
    Usage: <button class="button button--primary">
             <i class="fas fa-magic"></i> Generate Titles
             <span class="btn-credit"><i class="fas fa-coins"></i> 0.25</span>
           </button>
───────────────────────────────────────────────────────────────────────────────*/
.btn-credit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 1px 8px 1px 6px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.6;
}

.btn-credit i {
  font-size: 0.65rem;
  color: #fcd34d; /* gold */
}

/* On light-background buttons (outline, ghost, secondary) */
.button--outline .btn-credit,
.button--ghost .btn-credit,
.button--secondary .btn-credit,
.btn-secondary .btn-credit,
.btn-outline .btn-credit {
  background: rgba(79, 70, 229, 0.1);
  color: var(--color-gray-700);
}

.button--outline .btn-credit i,
.button--ghost .btn-credit i,
.button--secondary .btn-credit i,
.btn-secondary .btn-credit i,
.btn-outline .btn-credit i {
  color: #d97706; /* amber — readable on white bg */
}

/* Free trial pill variant */
.btn-credit--free {
  background: rgba(16, 185, 129, 0.25);
  color: #fff;
}
.btn-credit--free i {
  color: #fff;
}
.button--outline .btn-credit--free,
.button--ghost .btn-credit--free,
.button--secondary .btn-credit--free {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}
.button--outline .btn-credit--free i,
.button--ghost .btn-credit--free i,
.button--secondary .btn-credit--free i {
  color: #059669;
}

/*── Variants: Outline Secondary (Neutral) ───────────────────────────────*/
.button--outline-secondary {
  background-color: transparent;
  color: var(--color-gray-600);
  border-color: var(--color-gray-300);
  font-weight: var(--font-weight-medium);
  box-shadow: none;
}
.button--outline-secondary:hover, .button--outline-secondary:focus {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-400);
  color: var(--color-gray-800);
  box-shadow: none;
  transform: translateY(-1px);
}