/* 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;
  transform: translateY(-1px);
}

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

.btn:active, .button:active {
  transform: translateY(1px);
}

/*── Button with icon ──────────────────────────────────────────────────────────*/
.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);
  box-shadow: var(--shadow-md);
}

/*── 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);
}

/*── 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);
}

/*── 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);
}

/*── Sizes ─────────────────────────────────────────────────────────────────────*/
.btn-sm {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}
.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);
}

/*── 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;
}

/*── 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 */
}

@keyframes shine {
  0% {
    left: -200%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

/*── 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;
  box-shadow: 0 4px 15px rgba(67, 56, 202, 0.3);
}
.button--upgrade:hover, .button--upgrade:focus {
  background-color: #3730a3; /* Even darker indigo for hover */
  color: var(--color-white);
  box-shadow: 0 6px 20px rgba(67, 56, 202, 0.4);
}

/*── 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);
    }
}
  
/* Success state – visible for a short duration after a successful action */
/* Compound selector .button.button--success (0,2,0) beats any single variant like .button--primary (0,1,0) */
.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);
    cursor: default;
    pointer-events: none;
    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;
}

/*── 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);
}