<style>
/* WastePlace Pricing Page Styles */
.wp-pricing-container {
max-width: 1400px;
margin: 0 auto;
}
.wp-header {
text-align: center;
margin-bottom: 60px;
color: black;
}
.wp-header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 16px;
}
.wp-header p {
font-size: 1.25rem;
max-width: 600px;
margin: 0 auto;
}
.wp-billing-toggle {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
gap: 16px;
}
.wp-billing-toggle label {
color: #4571cd;
font-weight: 500;
font-size: 1rem;
}
.wp-toggle-container {
position: relative;
display: inline-block;
}
.wp-toggle-switch {
position: relative;
width: 60px;
height: 30px;
background: rgba(69,113,205,0.3);
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #4571cd;
}
.wp-toggle-switch.active {
background: #76b580;
border-color: #76b580;
}
.wp-toggle-slider {
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.wp-toggle-switch.active .wp-toggle-slider {
transform: translateX(30px);
}
.wp-discount-badge {
background: #76b580 !important;
color: white !important;
padding: 14px 28px !important;
border-radius: 30px !important;
font-size: 1.3rem !important;
font-weight: 900 !important;
margin-left: 20px !important;
box-shadow: 0 8px 16px rgba(0,0,0,0.25) !important;
transform: scale(1.1) !important;
}
.wp-business-toggle {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 80px;
gap: 20px;
flex-wrap: wrap;
}
.wp-business-toggle label {
color: black;
font-weight: 500;
font-size: 1rem;
margin-bottom: 8px;
display: block;
text-align: center;
}
.wp-business-options {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.wp-business-option {
position: relative;
}
.wp-business-checkbox {
display: none;
}
.wp-business-label {
display: inline-block;
background: white !important;
color: #4571cd !important;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
font-weight: 500;
border: 2px solid #4571cd;
}
.wp-business-label:hover {
background: rgba(69,113,205,0.1) !important;
transform: translateY(-2px);
}
.wp-business-checkbox:checked + .wp-business-label {
background: #4571cd !important;
border-color: #4571cd !important;
color: white !important;
transform: scale(1.05);
}
.wp-business-checkbox:checked + .wp-business-label:hover {
background: #3a5ba8 !important;
}
.wp-business-label.coming-soon {
opacity: 1;
cursor: not-allowed;
position: relative;
background: white !important;
color: #4571cd !important;
}
.wp-business-label.coming-soon::after {
content: "Coming Soon!";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(69, 113, 205, 0.9);
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 25px;
font-size: 0.8rem;
font-weight: 600;
opacity: 0;
transition: opacity 0.3s ease;
}
.wp-business-label.coming-soon:hover::after {
opacity: 1;
}
.wp-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.wp-pricing-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 3px solid #4571cd;
}
.wp-pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}
.wp-pricing-card.popular {
border-color: #4CAF50;
transform: scale(1.05);
}
.wp-pricing-card.popular::before {
content: "Most Popular";
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #4CAF50;
color: white;
padding: 8px 24px;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
}
.wp-plan-name {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 8px;
}
.wp-plan-price {
font-size: 3rem;
font-weight: 800;
color: #1f2937;
margin-bottom: 8px;
}
.wp-plan-price .currency {
font-size: 1.5rem;
vertical-align: top;
}
.wp-plan-price .period {
font-size: 1rem;
font-weight: 400;
color: #6b7280;
}
.wp-trial-ribbon {
position: relative;
background: #76b580;
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
margin-bottom: 20px;
display: inline-block;
width: fit-content;
}
.wp-plan-subtitle {
font-size: 0.875rem;
color: #6b7280;
margin-bottom: 20px;
min-height: 40px;
}
.wp-plan-description {
color: #4b5563;
margin-bottom: 30px;
font-size: 0.95rem;
min-height: 60px;
}
.wp-cta-button {
width: 100%;
padding: 16px 24px;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 30px;
}
.wp-cta-primary {
background: white;
color: #4571cd;
border: 2px solid #4571cd;
}
.wp-cta-primary:hover {
background: rgba(69,113,205,0.1);
transform: translateY(-2px);
}
.wp-cta-primary .arrow {
margin-left: 8px;
transition: transform 0.3s ease;
}
.wp-cta-primary:hover .arrow {
transform: translateX(4px);
}
.wp-cta-secondary {
background: white;
color: #4571cd;
border: 2px solid #4571cd;
}
.wp-cta-secondary:hover {
background: rgba(69,113,205,0.1);
transform: translateY(-2px);
}
.wp-features-section {
margin-bottom: 20px;
}
.wp-features-inherit {
font-size: 0.875rem;
color: #6b7280;
margin-bottom: 15px;
text-align: center;
font-weight: 500;
}
.wp-features-list {
list-style: none;
margin: 0;
padding: 0;
}
.wp-features-list li {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
font-size: 0.9rem;
color: #374151;
}
.wp-features-list li::before {
content: "✓";
color: #76b580;
font-weight: bold;
margin-right: 12px;
font-size: 1rem;
flex-shrink: 0;
margin-top: 2px;
}
.wp-ai-companion {
display: inline-block;
background: #76b580;
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
margin-top: 15px;
}
.wp-custom-price {
font-size: 2rem;
font-weight: 700;
color: #1f2937;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.wp-header h1 {
font-size: 2rem;
}
.wp-header p {
font-size: 1rem;
}
.wp-pricing-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.wp-pricing-card.popular {
transform: none;
}
.wp-business-options {
justify-content: center;
}
}
</style>