/* ========================================
   Pricing CTA Section Component
   ======================================== */

/* Full-width section with background */
.pricing-cta-section {
    padding: 1.5rem 0;
    background-color: var(--color-neutral-200); /* #F2E1E9 - Haupthintergrund mit leichtem Rosa */
    width: 100%;
}

/* Content wrapper for readability and centering */
.pricing-cta-section__content-wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 768px) {
    .pricing-cta-section {
        padding: 2.5rem 0;
    }

    .pricing-cta-section__content-wrapper {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .pricing-cta-section {
        padding: 3rem 0;
    }

    .pricing-cta-section__content-wrapper {
        padding-left: var(--spacing-12);
        padding-right: var(--spacing-12);
    }
}

.pricing-cta-section__headline {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-700);
    text-align: center;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-12);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 768px) {
    .pricing-cta-section__headline {
        font-size: var(--font-size-4xl);
        padding-left: 0;
        padding-right: 0;
    }
}

.pricing-cta-section__card {
    height: 100%;

    /* Flexbox layout for button alignment */
    display: flex;
    flex-direction: column;

    /* Enhanced border treatment for premium aesthetic */
    border: 2px solid var(--color-neutral-300); /* Thicker, more visible border */
    border-bottom: 3px solid var(--color-accent-main); /* Rosa accent for elegance (#A65C94) */
    border-radius: var(--border-radius-lg);

    /* Enhanced shadow depth for premium feel */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Layered shadow */

    /* Smooth transitions */
    transition: all var(--transition-normal);

    /* Clean white background */
    background-color: var(--color-neutral-white);

    /* Responsive margin */
    margin-bottom: var(--spacing-8);
}

/* Enhanced hover state with stronger shadow and lift */
.pricing-cta-section__card:hover {
    transform: translateY(-4px); /* Maintain lift effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Enhanced hover shadow */
    border-bottom-color: var(--color-accent-main); /* Keep Rosa accent on hover */
}

/* Accessibility: Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .pricing-cta-section__card {
        transition: box-shadow var(--transition-normal); /* Only transition shadow, not transform */
    }

    .pricing-cta-section__card:hover {
        transform: none; /* Disable lift effect for users who prefer reduced motion */
    }
}

.pricing-cta-section__card-header {
    background-color: var(--color-neutral-100);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-200);
    text-align: center;
}

.pricing-cta-section__card-header h3 {
    font-family: var(--font-heading); /* Use heading font for stronger presence */
    font-size: var(--font-size-2xl); /* Increase from xl to 2xl for prominence */
    font-weight: var(--font-weight-bold); /* Increase from semibold to bold */
    color: var(--color-primary-700); /* Maintain Weinrot color */
    line-height: var(--line-height-snug);
    margin: 0;
}

.pricing-cta-section__card-body {
    flex: 1 1 auto;
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.pricing-cta-section__price {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl); /* Increase from 3xl to 4xl for stronger emphasis */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-600); /* Slightly darker for more impact (from 500 to 600) */
    text-align: center;
    margin-bottom: var(--spacing-4);
    margin-top: 0;
}

.pricing-cta-section__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-6) 0;
    flex-grow: 1;
}

.pricing-cta-section__features li {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    line-height: var(--line-height-relaxed);
    padding-left: var(--spacing-6);
    margin-bottom: var(--spacing-3);
    position: relative;
}

.pricing-cta-section__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-secondary-500);
    font-weight: var(--font-weight-bold);
}

.pricing-cta-section__description {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    line-height: var(--line-height-loose); /* Increase from relaxed to loose for better readability */
    margin: 0 0 var(--spacing-6) 0; /* Reduced from spacing-8 to spacing-6 */
    flex-grow: 1;
    text-align: center;
}

.pricing-cta-section__reminder {
    margin-top: var(--spacing-12);
    padding: var(--spacing-8);
    background-color: var(--color-neutral-100);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--color-accent-main);
    text-align: center;
}

.pricing-cta-section__reminder-text {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-700);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Tablet: 2×2 grid - add bottom margin for first row only */
@media (min-width: 768px) {
    .pricing-cta-section__card {
        margin-bottom: 0;
    }

    /* Add bottom margin only for first row tiles in 2×2 layout */
    .pricing-cta-section .row > div:nth-child(-n+2) .pricing-cta-section__card {
        margin-bottom: var(--spacing-8);
    }

    .pricing-cta-section__reminder {
        margin-top: var(--spacing-16);
        padding: var(--spacing-10);
    }

    .pricing-cta-section__reminder-text {
        font-size: var(--font-size-xl);
    }
}

/* Desktop: Single 1×4 row - no vertical spacing needed */
@media (min-width: 1024px) {
    .pricing-cta-section__card {
        margin-bottom: 0;
    }
}

/* ========================================
   Button Styles - DesignProfile Grün with Interactive States
   ======================================== */

/* Default button state - DesignProfile Grün (var(--color-secondary-500) = #36771A) */
.pricing-cta-section .btn-primary {
    /* Sizing and layout */
    width: 100%;
    min-width: auto;
    padding: 12px 24px; /* Touch-friendly padding (min 44px height on mobile) */

    /* DesignProfile Grün color scheme */
    background-color: var(--color-secondary-500); /* Grün #36771A */
    border: 2px solid var(--color-secondary-600); /* Darker border for definition */
    color: var(--color-neutral-white); /* White text for contrast */

    /* Typography */
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);

    /* Visual treatment */
    border-radius: var(--border-radius-md); /* Consistent with design system */
    box-shadow: var(--shadow-sm); /* Subtle elevation */

    /* Smooth transitions for interactive states */
    transition: all 0.25s ease-in-out;

    /* Ensure button is above decorative elements */
    position: relative;
    z-index: var(--z-index-2);
}

/* Hover state - Darker Grün with lift effect (desktop only) */
@media (hover: hover) {
    .pricing-cta-section .btn-primary:hover {
        background-color: var(--color-secondary-600); /* Darker Grün #2D6315 */
        border-color: var(--color-secondary-700); /* Even darker border */
        transform: translateY(-2px); /* Subtle lift effect */
        box-shadow: var(--shadow-md); /* Enhanced shadow on hover */
    }
}

/* Focus state - High contrast outline for accessibility (WCAG AA compliance) */
.pricing-cta-section .btn-primary:focus,
.pricing-cta-section .btn-primary:focus-visible {
    outline: 3px solid var(--color-neutral-900); /* High contrast dark outline */
    outline-offset: 3px; /* Space between button and outline */
    /* Maintain hover styles if focused via mouse */
}

/* Active state - Press down effect */
.pricing-cta-section .btn-primary:active {
    background-color: var(--color-secondary-700); /* Even darker Grün #1D5405 */
    border-color: var(--color-secondary-800);
    transform: translateY(0); /* Reset lift effect */
    box-shadow: var(--shadow-sm); /* Reduce shadow on press */
}

/* Disabled state - Reduced opacity (for future use, not currently needed) */
.pricing-cta-section .btn-primary:disabled {
    background-color: var(--color-neutral-300);
    border-color: var(--color-neutral-400);
    color: var(--color-neutral-600);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Tablet: Center buttons with minimum width */
@media (min-width: 768px) {
    .pricing-cta-section .btn-primary {
        width: auto;
        min-width: 200px;
        align-self: center;
    }
}

/* Desktop: Reduce minimum width for 1×4 layout */
@media (min-width: 1024px) {
    .pricing-cta-section .btn-primary {
        width: auto;
        min-width: 160px;
    }
}

/* Accessibility: Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .pricing-cta-section .btn-primary {
        transition: none; /* Disable transitions for users who prefer reduced motion */
    }

    .pricing-cta-section .btn-primary:hover {
        transform: none; /* Disable lift effect */
    }
}

/* ========================================
   Decorative Elements
   ======================================== */

/* Mobile-first: Hidden by default for content-first experience */
.pricing-cta-section__decorative-right {
    display: none;
}

/* Tablet (640-1023px): Decorative elements hidden */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Right leaf: Hidden on tablet to prioritize pricing content */
    .pricing-cta-section__decorative-right {
        display: none;
    }
}

/* Desktop (≥1024px): Decorative leaf visible */
@media (min-width: 1024px) {
    /* Section positioning context */
    .pricing-cta-section {
        position: relative;
        overflow: hidden; /* Prevent horizontal scroll from decorative elements */
    }

    /* Right flying leaf - positioned relative to content wrapper */
    .pricing-cta-section__decorative-right {
        display: block;
        position: absolute;
        left: calc(50% + 600px + 50px); /* Center + half of max-width (1200px/2) + 50px offset */
        top: 20%;
        width: 200px;
        height: auto;
        z-index: var(--z-index-1);
        opacity: 0.9;
        pointer-events: none; /* Prevent interaction with decorative elements */
        will-change: transform; /* Performance optimization for animation */
        animation: pricingLeafFloat 3s ease-in-out infinite; /* Gentle floating animation */
        animation-delay: 0s; /* Start immediately */
    }

    /* Ensure content wrapper has higher z-index than decorations */
    .pricing-cta-section__content-wrapper {
        position: relative;
        z-index: var(--z-index-2);
    }
}

/* ========================================
   Decorative Leaf Animation
   ======================================== */

/* Gentle floating animation for decorative leaf (matching hero section style) */
@keyframes pricingLeafFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

/* Accessibility: Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .pricing-cta-section__decorative-right {
        animation: none; /* Disable animation for users who prefer reduced motion */
    }
}