Pricing

/* Toggle Styles */
.pricing-toggle {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}

.toggle-option {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.5rem;
background: #f1f5f9;
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
}

.toggle-option.active {
background: #3b82f6;
color: white;
}

/* Table Structure */
.pricing-table-wrapper {
background: white;
border-radius: 0.75rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
position: relative;
overflow: hidden;
}

/* Header Row */
.header-row {
display: flex;
position: sticky;
top: 0;
z-index: 10;
background: white;
border-bottom: 1px solid #e2e8f0;
}

.header-feature {
width: 280px;
padding: 1rem;
height: 64px;
display: flex;
align-items: center;
font-weight: 600;
background: white;
position: sticky;
left: 0;
z-index: 11;
}

.header-plan {
width: 240px;
flex-shrink: 0;
padding: 1rem;
height: 64px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-weight: 600;
position: relative;
}

.header-plan.popular {
border: 2px solid #3b82f6;
border-bottom: none;
position: relative;
}

.popular-badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: #3b82f6;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}

/* Table Content */
.table-content {
overflow-y: auto;
max-height: 600px;
}

.feature-row {
display: flex;
border-bottom: 1px solid #e2e8f0;
}

.feature-name {
width: 280px;
padding: 1rem;
height: 64px;
display: flex;
align-items: center;
font-size: 0.875rem;
background: white;
position: sticky;
left: 0;
z-index: 9;
}

.feature-value {
width: 240px;
flex-shrink: 0;
padding: 1rem;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.875rem;
}

.pricing-row .feature-value {
flex-direction: column;
justify-content: center;
}

.price {
font-size: 1.25rem;
font-weight: 700;
margin: 0.25rem 0;
line-height: 1.2;
}

.price span {
font-size: 0.875rem;
color: #64748b;
font-weight: 400;
}

/* Footnotes */
.footnotes {
margin-top: 1.5rem;
padding: 1rem;
background: #f8fafc;
border-radius: 0.5rem;
font-size: 0.875rem;
color: #64748b;
line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1024px) {
.feature-name { width: 240px; }
.header-feature { width: 240px; }
.feature-value { width: 220px; }
.header-plan { width: 220px; }
}

@media (max-width: 768px) {
.feature-name, .feature-value {
font-size: 0.8125rem;
padding: 0.75rem;
}
.price { font-size: 1.1rem; }
}

.hidden { display: none; }