/* Pricing Page Specific CSS */

/* Header Styling - Standalone */
.pricing-header {
    width: 100%;
}

/* Updated to target .container-custom specifically for the pricing header styling */
.pricing-header .container-custom {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 15px;
    padding: 0 50px; 
    margin:0 50px ;
    position: relative; 
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* Mobile Menu Positioning */
#mobile-menu {
    border-radius: 15px 15px;
    margin-top: 5px;
    /* Ensure it doesn't get clipped if container has overflow:hidden (it shouldn't) */
    z-index: 50; 
}

/* Body Padding Override from HTML file context */
body {
    background-color: #ffffff;
}

/* Pricing Main Section Base */

/* Responsive */
@media (max-width: 640px) {
    .pricing-header .container-custom {
        padding: 0 15px;
    }
}


/* Pricing Section Base Styles */
.pricing-main-section {
    padding: 80px 0px;
    font-family: 'THICCCBOI Light', sans-serif;
    /* Reveal Animation Base State */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.pricing-main-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pricing-section-heading {
    font-family: 'THICCCBOI', sans-serif;
    font-size: 48px;
    font-weight: 500; /* Reduced weight from 700 */
    color: #000000; /* Changed to black */
    text-align: center;
    margin-bottom: 60px;
}

/* Pricing Grid System */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: 30px;
    margin-bottom: 30px;
    align-items: stretch; /* Ensure equal height */
}

/* Card Styling */
.pricing-card {
    background-color: rgba(141, 171, 255, 0.17);
    border-radius: 15px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: transform 0.3s ease;
    height: 100%; /* Fill grid cell height */
    
    /* Animation Item Base State */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Bespoke Card Specifics */
.bespoke-card {
    /* Desktop: Position in center column of 2nd row */
    grid-column: 2 / 3; 
    
    align-items: center; /* Center align specifically for Bespoke */
    text-align: center;
    justify-content: center; /* Vertically center content if height is large */
}

/* Sub Heading (Core, Growth, etc) */
.pricing-sub-heading {
    font-family: 'THICCCBOI', sans-serif;
    font-size: 20px;
    font-weight: 500; /* Reduced weight */
    color: #000000; /* Changed to black */
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Main Price */
.pricing-price {
    margin-bottom: 30px;
    font-family: 'THICCCBOI', sans-serif;
    color: #000000; /* Changed to black */
}

.pricing-price .amount {
    font-size: 42px;
    font-weight: 500; /* Reduced weight */
    line-height: 1;
}

/* Users List */
.pricing-users-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    font-family: 'THICCCBOI', sans-serif; 
    font-size: 16px;
    color: #000000; /* Changed to black */
    font-weight: 500; /* Normal weight */
}

.pricing-users-list li {
    margin-bottom: 8px;
}

/* Divider */
.pricing-divider {
    width: 100%;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2); /* Slightly darker line for visibility on black text theme */
    margin: 20px 0;
}

/* Features Heading */
.pricing-features-heading {
    font-family: 'THICCCBOI', sans-serif;
    font-size: 14px;
    font-weight: 600; /* Slightly bold but less than 700 */
    text-transform: uppercase;
    color: #000000; /* Changed to black */
    margin-bottom: 15px;
}

/* Features List */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 15px;
    color: #000000; /* Changed to black */
    line-height: 1.4;
}

.feature-icon {
    width: 18px;
    height: 18px;
    color: #0085FE;
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 2px; 
}

/* Single Content Line for Bespoke */
.pricing-content-single {
    font-family: 'THICCCBOI', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000000; /* Changed to black */
}

/* Animation Trigger Classes */
.pricing-reveal-on-scroll.is-visible .pricing-reveal-item {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays */
.pricing-delay-100 { transition-delay: 0.1s; }
.pricing-delay-200 { transition-delay: 0.2s; }
.pricing-delay-300 { transition-delay: 0.3s; }

/* Responsive Media Queries */

/* Tablet (max-width 992px) */
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        align-items: stretch; /* Equal height */
    }
    
    /* Reset specific positioning for Bespoke card on tablet/mobile */
    .bespoke-card {
        grid-column: auto; /* Allow natural flow */
        /* It will naturally fall into row 2, col 2 or row 3 depending on count. 
           With 4 items: Row 1 (1,2), Row 2 (3,4). Perfect 2x2 grid. */
        align-items: center;
    }
}

@media (max-width: 1300px) {
    .pricing-header .container-custom{
        margin: 0;
    }
}
/* Mobile (max-width 640px) */
@media (max-width: 640px) {
    .pricing-main-section {
        padding: 50px 0px;
    }

    .pricing-section-heading {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .pricing-grid {
        grid-template-columns: 1fr; /* 1 column */
        gap: 20px;
    }

    .pricing-card {
        padding: 30px 20px;
        align-items: flex-start; 
        width: 100%; /* Ensure full width */
    }
    
    .bespoke-card {
        align-items: center; /* Keep center for bespoke content */
    }

    .pricing-price .amount {
        font-size: 36px;
    }
}