/* ==========================================================================
   Alternivite - Pricing Page Styles
   ========================================================================== */

/* Hero */
.price-hero {
   padding-top: calc(var(--nav-height) + var(--space-16));
   padding-bottom: var(--space-4);
   text-align: center;
}

.price-hero-content {
   max-width: 600px;
   margin: 0 auto;
}

.price-hero-title {
   font-size: var(--text-4xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   line-height: var(--leading-tight);
   margin-bottom: var(--space-4);
}

.price-hero-text {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
   .price-hero-title {
      font-size: var(--text-5xl);
   }
}

/* Billing Toggle */
.price-toggle-wrap {
   display: flex;
   justify-content: center;
   padding: var(--space-8) 0 var(--space-12);
}

.price-toggle {
   display: inline-flex;
   background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-full);
   padding: var(--space-1);
}

.price-toggle-btn {
   padding: var(--space-2) var(--space-5);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--text-secondary);
   background: transparent;
   border: none;
   border-radius: var(--radius-full);
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-default);
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
}

.price-toggle-btn:hover {
   color: var(--text-primary);
}

.price-toggle-btn--active {
   background: var(--bg-primary);
   color: var(--text-primary);
   box-shadow: var(--shadow-sm);
   font-weight: var(--font-semibold);
}

.price-toggle-save {
   font-size: var(--text-xs);
   font-weight: var(--font-bold);
   color: var(--color-success-600);
   background: var(--color-success-50);
   padding: 2px 8px;
   border-radius: var(--radius-full);
}

[data-theme="dark"] .price-toggle-save {
   color: var(--color-success-400);
   background: rgba(34, 197, 94, 0.15);
}

/* Pricing Cards */
.price-cards {
   padding-bottom: var(--space-16);
}

.price-cards-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-8);
   max-width: 1100px;
   margin: 0 auto;
   align-items: start;
}

@media (min-width: 768px) {
   .price-cards-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* Individual Card */
.price-card {
   position: relative;
   background: var(--bg-primary);
   border: 2px solid var(--border-primary);
   border-radius: var(--radius-xl);
   padding: var(--space-8);
   display: flex;
   flex-direction: column;
}

/* Featured (Recommended) */
.price-card--featured {
   border-color: var(--color-primary-500);
   box-shadow: 0 0 0 1px var(--color-primary-500), var(--shadow-lg);
}

@media (min-width: 768px) {
   .price-card--featured {
      transform: scale(1.04);
      z-index: 1;
   }
}

.price-card-badge {
   position: absolute;
   top: -14px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--color-primary-500);
   color: white;
   font-size: var(--text-xs);
   font-weight: var(--font-bold);
   padding: var(--space-1) var(--space-4);
   border-radius: var(--radius-full);
   white-space: nowrap;
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
}

/* Card Header */
.price-card-header {
   text-align: center;
   padding-bottom: var(--space-6);
   border-bottom: 1px solid var(--border-primary);
   margin-bottom: var(--space-6);
}

.price-card-name {
   font-size: var(--text-xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.price-card-desc {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-4);
}

.price-card-trial {
   margin-bottom: var(--space-4);
}

.price-card-trial-badge {
   display: inline-flex;
   align-items: center;
   padding: var(--space-1) var(--space-3);
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: var(--color-success-700);
   background: var(--color-success-50);
   border-radius: var(--radius-full);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
}

.price-card-trial-badge--accent {
   color: var(--color-primary-700);
   background: var(--color-primary-100);
}

[data-theme="dark"] .price-card-trial-badge {
   color: var(--color-success-400);
   background: rgba(34, 197, 94, 0.15);
}

[data-theme="dark"] .price-card-trial-badge--accent {
   color: var(--color-primary-400);
   background: rgba(99, 102, 241, 0.15);
}

/* Price Display */
.price-card-price {
   display: flex;
   align-items: baseline;
   justify-content: center;
   gap: var(--space-1);
   margin-bottom: var(--space-1);
}

.price-card-currency {
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   color: var(--text-secondary);
}

.price-card-amount {
   font-size: var(--text-5xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   line-height: 1;
}

.price-card-amount--custom {
   font-size: var(--text-3xl);
}

.price-card-period {
   font-size: var(--text-sm);
   color: var(--text-tertiary);
}

.price-card-billed {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   margin: 0;
}

.price-card-billed-text {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   margin-top: var(--space-1);
}

/* Limits */
.price-card-limits {
   margin-bottom: var(--space-6);
}

.price-card-limits-title {
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   margin-bottom: var(--space-4);
}

.price-card-limit-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.price-card-limit {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) 0;
   border-bottom: 1px solid var(--border-primary);
}

.price-card-limit:last-child {
   border-bottom: none;
}

.price-card-limit-icon {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-secondary);
   border-radius: var(--radius-md);
   color: var(--text-secondary);
}

.price-card-limit-label {
   flex: 1;
   font-size: var(--text-sm);
   color: var(--text-secondary);
}

.price-card-limit-value {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   text-align: right;
}

/* Features List */
.price-card-features {
   flex: 1;
   margin-bottom: var(--space-6);
}

.price-card-feature-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.price-card-feature-list li {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) 0;
   font-size: var(--text-sm);
   color: var(--text-secondary);
}

.price-card-feature-list li svg {
   flex-shrink: 0;
}

/* Card Footer */
.price-card-footer {
   margin-top: auto;
}

.price-card-cta {
   width: 100%;
   text-align: center;
}

/* Comparison Table */
.price-comparison {
   padding: var(--space-16) 0;
}

.price-comparison-header {
   text-align: center;
   margin-bottom: var(--space-10);
}

.price-comparison-title {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.price-comparison-subtitle {
   font-size: var(--text-lg);
   color: var(--text-secondary);
}

.price-table-wrap {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
}

.price-table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-sm);
}

.price-table th,
.price-table td {
   padding: var(--space-3) var(--space-4);
   text-align: left;
   border-bottom: 1px solid var(--border-primary);
}

.price-table thead th {
   background: var(--bg-tertiary);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   position: sticky;
   top: 0;
   z-index: 1;
}

.price-table thead th:not(.price-table-feature-col) {
   text-align: center;
   min-width: 120px;
}

.price-table-feature-col {
   min-width: 200px;
}

.price-table-featured-col {
   background: var(--color-primary-50) !important;
}

[data-theme="dark"] .price-table-featured-col {
   background: rgba(99, 102, 241, 0.08) !important;
}

.price-table td:not(:first-child) {
   text-align: center;
}

.price-table td:first-child {
   font-weight: var(--font-medium);
   color: var(--text-primary);
}

.price-table-check {
   width: 48px;
}

.price-table-category {
   background: var(--bg-secondary) !important;
   font-weight: var(--font-semibold) !important;
   color: var(--text-primary) !important;
   text-transform: uppercase;
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-wide);
}

@media (max-width: 768px) {
   .price-table {
      font-size: var(--text-xs);
   }

   .price-table th,
   .price-table td {
      padding: var(--space-2) var(--space-3);
   }
}

/* FAQ */
.price-faq {
   padding: var(--space-16) 0;
}

.price-faq-header {
   text-align: center;
   margin-bottom: var(--space-10);
}

.price-faq-title {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.price-faq-subtitle {
   font-size: var(--text-lg);
   color: var(--text-secondary);
}

.price-faq-list {
   max-width: 700px;
   margin: 0 auto;
}

/* Enterprise Contact */
.price-enterprise {
   padding: var(--space-16) 0;
}

.price-enterprise-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-12);
   align-items: start;
}

@media (min-width: 900px) {
   .price-enterprise-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
   }
}

.price-enterprise-title {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-4);
}

.price-enterprise-text {
   font-size: var(--text-base);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-6);
}

.price-enterprise-benefits {
   list-style: none;
   padding: 0;
   margin: 0;
}

.price-enterprise-benefits li {
   position: relative;
   padding-left: var(--space-6);
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-3);
}

.price-enterprise-benefits li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 7px;
   width: 8px;
   height: 8px;
   background: var(--color-success-500);
   border-radius: 2px;
   transform: rotate(45deg);
}

/* Enterprise Form */
.price-enterprise-form {
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   padding: var(--space-8);
}

.price-enterprise-form-title {
   font-size: var(--text-xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-6);
}

.price-enterprise-submit {
   width: 100%;
   margin-top: var(--space-4);
}

.price-enterprise-form-note {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   text-align: center;
   margin-top: var(--space-3);
}

/* Responsive */
@media (max-width: 640px) {
   .price-hero {
      padding-top: calc(var(--nav-height) + var(--space-8));
   }

   .price-hero-title {
      font-size: var(--text-2xl);
   }

   .price-hero-text {
      font-size: var(--text-base);
   }

   .price-card {
      padding: var(--space-6);
   }

   .price-comparison-title,
   .price-faq-title,
   .price-enterprise-title {
      font-size: var(--text-2xl);
   }
}