/* ==========================================================================
   Pricing Cards - Apple-Inspired Premium Design

   A luxurious, minimalist pricing card component following Apple's Human
   Interface Guidelines with glassmorphism effects matching Presentify's
   dark brand aesthetic.

   Design Principles:
   - "Less but better" (Dieter Rams)
   - Content is king, UI defers
   - Typography creates hierarchy
   - Subtle glassmorphism for depth
   - 8pt grid spacing system
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens (CSS Custom Properties)
   ========================================================================== */

.pricing-apple {
  /* Colors - Dark Navy Theme */
  --pricing-bg-section: #03081C;
  --pricing-bg-card: rgba(255, 255, 255, 0.03);
  --pricing-bg-card-hover: rgba(255, 255, 255, 0.05);
  --pricing-bg-recommended: rgba(255, 255, 255, 0.04);

  /* Borders */
  --pricing-border-default: rgba(255, 255, 255, 0.10);
  --pricing-border-hover: rgba(255, 255, 255, 0.20);
  --pricing-border-recommended: rgba(102, 126, 234, 0.35);
  --pricing-border-divider: rgba(255, 255, 255, 0.06);

  /* Text Colors */
  --pricing-text-primary: #ffffff;
  --pricing-text-secondary: rgba(255, 255, 255, 0.70);
  --pricing-text-tertiary: rgba(255, 255, 255, 0.50);
  --pricing-text-quaternary: rgba(255, 255, 255, 0.35);

  /* Accent Colors */
  --pricing-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --pricing-gradient-hover: linear-gradient(135deg, #7888f1 0%, #8759b3 100%);
  --pricing-accent-purple: #667eea;
  --pricing-accent-glow: rgba(102, 126, 234, 0.25);

  /* Success Green for Checkmarks */
  --pricing-check-color: #32d74b;

  /* Spacing (8pt Grid) */
  --pricing-space-4: 4px;
  --pricing-space-8: 8px;
  --pricing-space-12: 12px;
  --pricing-space-16: 16px;
  --pricing-space-20: 20px;
  --pricing-space-24: 24px;
  --pricing-space-32: 32px;
  --pricing-space-40: 40px;
  --pricing-space-48: 48px;
  --pricing-space-64: 64px;

  /* Typography */
  --pricing-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pricing-font-plan: 24px;
  --pricing-font-description: 15px;
  --pricing-font-price: 48px;
  --pricing-font-interval: 16px;
  --pricing-font-feature: 15px;
  --pricing-font-button: 15px;
  --pricing-font-badge: 11px;

  /* Font Weights */
  --pricing-weight-regular: 400;
  --pricing-weight-medium: 500;
  --pricing-weight-semibold: 600;
  --pricing-weight-bold: 700;

  /* Border Radius */
  --pricing-radius-sm: 8px;
  --pricing-radius-md: 12px;
  --pricing-radius-lg: 16px;
  --pricing-radius-xl: 20px;
  --pricing-radius-full: 9999px;

  /* Transitions */
  --pricing-duration-fast: 150ms;
  --pricing-duration-base: 200ms;
  --pricing-duration-slow: 300ms;
  --pricing-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pricing-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --pricing-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Shadows */
  --pricing-shadow-button: 0 4px 16px rgba(102, 126, 234, 0.30);
  --pricing-shadow-button-hover: 0 6px 20px rgba(102, 126, 234, 0.40);

  /* Glassmorphism */
  --pricing-blur: blur(20px);
}

/* ==========================================================================
   2. Section Container
   ========================================================================== */

.pricing-apple {
  position: relative;
  background: var(--pricing-bg-section);
  padding: var(--pricing-space-64) var(--pricing-space-16);
  font-family: var(--pricing-font-family);
  overflow: hidden;
}

/* Section Header */
.pricing-apple__header {
  text-align: center;
  margin-bottom: var(--pricing-space-48);
}

.pricing-apple__subtitle {
  display: inline-block;
  font-size: 14px;
  font-weight: var(--pricing-weight-medium);
  color: var(--pricing-accent-purple);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--pricing-space-12);
}

.pricing-apple__title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: var(--pricing-weight-bold);
  color: var(--pricing-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   3. Grid Layout - Equal Height Cards
   ========================================================================== */

.pricing-apple__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pricing-space-24);
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch; /* Forces equal heights */
}

/* ==========================================================================
   4. Card Base Styles
   ========================================================================== */

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pricing-bg-card);
  border: 1px solid var(--pricing-border-default);
  border-radius: var(--pricing-radius-lg);
  padding: var(--pricing-space-32);
  backdrop-filter: var(--pricing-blur);
  -webkit-backdrop-filter: var(--pricing-blur);
  transition:
    border-color var(--pricing-duration-slow) var(--pricing-ease-smooth),
    background var(--pricing-duration-slow) var(--pricing-ease-smooth),
    transform var(--pricing-duration-slow) var(--pricing-ease-out);
}

/* Card Hover State */
.pricing-card:hover {
  border-color: var(--pricing-border-hover);
  background: var(--pricing-bg-card-hover);
  transform: translateY(-4px);
}

/* ==========================================================================
   5. Recommended Card (Subtle Highlight)
   ========================================================================== */

.pricing-card--recommended {
  background: var(--pricing-bg-recommended);
  border-color: var(--pricing-border-recommended);
}

.pricing-card--recommended:hover {
  border-color: rgba(102, 126, 234, 0.50);
  background: rgba(255, 255, 255, 0.06);
}

/* Recommended Badge - Positioned above card */
.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--pricing-font-badge);
  font-weight: var(--pricing-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pricing-text-primary);
  background: var(--pricing-gradient);
  border: none;
  border-radius: var(--pricing-radius-full);
  padding: var(--pricing-space-4) var(--pricing-space-16);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
  z-index: 1;
}

/* ==========================================================================
   6. Card Header (Plan Name & Description)
   ========================================================================== */

.pricing-card__header {
  margin-bottom: var(--pricing-space-24);
}

.pricing-card__name {
  font-size: var(--pricing-font-plan);
  font-weight: var(--pricing-weight-semibold);
  color: var(--pricing-text-primary);
  margin: 0 0 var(--pricing-space-8) 0;
  letter-spacing: -0.01em;
}

.pricing-card__description {
  font-size: var(--pricing-font-description);
  font-weight: var(--pricing-weight-regular);
  color: var(--pricing-text-tertiary);
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   7. Price Display (Hero Element)
   ========================================================================== */

.pricing-card__price {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--pricing-space-32);
  padding-bottom: var(--pricing-space-24);
  border-bottom: 1px solid var(--pricing-border-divider);
}

.pricing-card__currency {
  font-size: 24px;
  font-weight: var(--pricing-weight-semibold);
  color: var(--pricing-text-primary);
  margin-right: var(--pricing-space-4);
  align-self: flex-start;
  margin-top: 8px;
}

.pricing-card__amount {
  font-size: var(--pricing-font-price);
  font-weight: var(--pricing-weight-bold);
  color: var(--pricing-text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}

.pricing-card__interval {
  font-size: var(--pricing-font-interval);
  font-weight: var(--pricing-weight-regular);
  color: var(--pricing-text-quaternary);
  margin-left: var(--pricing-space-8);
}

/* ==========================================================================
   8. Feature List
   ========================================================================== */

.pricing-card__features {
  flex: 1; /* Expands to fill available space */
  margin-bottom: var(--pricing-space-32);
}

.pricing-card__feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-card__feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--pricing-space-12);
  font-size: var(--pricing-font-feature);
  font-weight: var(--pricing-weight-regular);
  color: var(--pricing-text-secondary);
  padding: var(--pricing-space-8) 0;
  line-height: 1.5;
}

/* Checkmark Icon */
.pricing-card__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--pricing-check-color);
  margin-top: 1px;
}

/* ==========================================================================
   9. Card Footer (CTA Button)
   ========================================================================== */

.pricing-card__footer {
  margin-top: auto; /* Sticks to bottom */
}

/* ==========================================================================
   10. Button Styles
   ========================================================================== */

/* Base Button */
.pricing-button {
  display: block;
  width: 100%;
  padding: 14px var(--pricing-space-24);
  font-family: var(--pricing-font-family);
  font-size: var(--pricing-font-button);
  font-weight: var(--pricing-weight-medium);
  text-align: center;
  text-decoration: none;
  border-radius: var(--pricing-radius-md);
  cursor: pointer;
  min-height: 44px; /* Apple HIG minimum touch target */
  transition:
    border-color var(--pricing-duration-base) var(--pricing-ease-smooth),
    background var(--pricing-duration-base) var(--pricing-ease-smooth),
    transform var(--pricing-duration-fast) var(--pricing-ease-bounce),
    box-shadow var(--pricing-duration-base) var(--pricing-ease-smooth);
}

/* Outline Button (Default) */
.pricing-button--outline {
  background: transparent;
  border: 1px solid var(--pricing-border-hover);
  color: var(--pricing-text-primary);
}

.pricing-button--outline:hover {
  border-color: var(--pricing-text-primary);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.pricing-button--outline:active {
  transform: translateY(0);
}

/* Gradient Button (Recommended Plan) */
.pricing-button--gradient {
  background: var(--pricing-gradient) !important;
  border: none !important;
  color: var(--pricing-text-primary) !important;
  box-shadow: var(--pricing-shadow-button);
  position: relative;
  overflow: hidden;
}

/* Override any ::before pseudo-element from global styles */
.pricing-button--gradient::before {
  display: none !important;
}

.pricing-button--gradient:hover {
  background: var(--pricing-gradient-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--pricing-shadow-button-hover);
  color: var(--pricing-text-primary) !important;
}

.pricing-button--gradient:active {
  transform: translateY(0);
  box-shadow: var(--pricing-shadow-button);
}

/* Outline Button Hover Fix */
.pricing-button--outline::before {
  display: none !important;
}

.pricing-button--outline:hover {
  color: var(--pricing-text-primary) !important;
}

/* ==========================================================================
   11. Accessibility
   ========================================================================== */

/* Focus States */
.pricing-button:focus-visible {
  outline: 2px solid var(--pricing-accent-purple);
  outline-offset: 3px;
}

.pricing-card:focus-within {
  border-color: var(--pricing-border-hover);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-button {
    transition: none;
  }

  .pricing-card:hover,
  .pricing-button:hover {
    transform: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .pricing-card {
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.30);
  }

  .pricing-card__feature-item {
    color: var(--pricing-text-primary);
  }

  .pricing-button--outline {
    border-width: 2px;
  }
}

/* ==========================================================================
   12. Responsive Design
   ========================================================================== */

/* Mobile (Default - 320px+) */
@media (max-width: 767px) {
  .pricing-apple {
    padding: var(--pricing-space-48) var(--pricing-space-16);
  }

  .pricing-apple__grid {
    grid-template-columns: 1fr;
    gap: var(--pricing-space-16);
  }

  .pricing-card {
    padding: var(--pricing-space-24);
  }

  .pricing-card__name {
    font-size: 20px;
  }

  .pricing-card__amount {
    font-size: 40px;
  }

  .pricing-card__badge {
    top: -10px;
    font-size: 10px;
    padding: 3px 12px;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .pricing-apple__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .pricing-apple__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pricing-space-24);
  }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  .pricing-apple {
    padding: var(--pricing-space-64) var(--pricing-space-32);
  }

  .pricing-apple__grid {
    max-width: 1400px;
  }
}

/* ==========================================================================
   13. Empty State / Nothing Found
   ========================================================================== */

.pricing-apple__empty {
  text-align: center;
  padding: var(--pricing-space-64) var(--pricing-space-32);
  color: var(--pricing-text-tertiary);
}

.pricing-apple__empty-title {
  font-size: 20px;
  font-weight: var(--pricing-weight-semibold);
  color: var(--pricing-text-secondary);
  margin-bottom: var(--pricing-space-8);
}

.pricing-apple__empty-text {
  font-size: var(--pricing-font-description);
  color: var(--pricing-text-tertiary);
}

/* ==========================================================================
   14. Loading State (Optional)
   ========================================================================== */

.pricing-card--loading {
  pointer-events: none;
}

.pricing-card--loading .pricing-card__name,
.pricing-card--loading .pricing-card__description,
.pricing-card--loading .pricing-card__amount,
.pricing-card--loading .pricing-card__feature-item {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: pricing-shimmer 1.5s infinite;
  border-radius: var(--pricing-radius-sm);
  color: transparent !important;
}

@keyframes pricing-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   15. Override Legacy Styles
   ========================================================================== */

/* Override any conflicting styles from pricing.css */
.pricing-apple .pricing-block,
.pricing-apple .pricing-block-two,
.pricing-apple .pricing-table {
  all: unset;
  display: contents;
}

.pricing-apple .theme-btn {
  all: unset;
}
