/* PHP Version Styles */

.glass {
    background-color: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Animations that replace Framer Motion */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}
.animate-float { 
    animation: float 6s ease-in-out infinite; 
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}
.animate-pulse-glow { 
    animation: pulse-glow 4s ease-in-out infinite; 
}

.slide-up {
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Services mega menu - dynamic column widths (Step 21 fix) */
.mega-dropdown {
    display: grid;
    gap: 2.5rem;
}

/* One visible column -> compact menu */
.mega-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 400px;
    max-width: 92vw;
}

/* Two visible columns -> medium menu */
.mega-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 720px;
    max-width: 92vw;
}

/* Three visible columns -> wide menu */
.mega-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 920px;
    max-width: 92vw;
}

/* Four visible columns -> full menu (original layout) */
.mega-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 900px;
    max-width: 94vw;
}

/* Below the desktop breakpoint the nav (and this dropdown) is hidden,
   but cap the width so it can never overflow if ever shown on smaller screens. */
@media (max-width: 639px) {
    .mega-cols-1, .mega-cols-2, .mega-cols-3, .mega-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        width: 92vw;
    }
}

/* Pricing grid - responsive package cards (Step 25 layout fix).
   Plain CSS (higher specificity than the CDN Tailwind utilities) so the card
   layout works even if the Tailwind CDN script is ever delayed or offline. */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.pricing-card {
    min-width: 0;
    width: 100%;
    max-width: 380px;
    justify-self: center;
    align-self: stretch;
    overflow: visible;
}

/* Price row: allow long prices to wrap safely; keep currency + period tight. */
.pricing-card .pricing-display {
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0.125rem;
    column-gap: 0.25rem;
}

.pricing-card .price-val {
    font-size: clamp(1.9rem, 2.2vw + 1rem, 2.5rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pricing-card .price-period,
.pricing-card .pricing-display > span {
    white-space: nowrap;
}

.pricing-card .yearly-savings-label {
    flex-wrap: wrap;
}

/* Feature list text wraps inside the card; icons stay aligned. */
.pricing-card .pricing-features {
    min-width: 0;
}

.pricing-card .pricing-features li {
    min-width: 0;
}

.pricing-card .pricing-features li > span {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Empty state message spans the full grid width. */
.pricing-empty {
    grid-column: 1 / -1;
    width: 100%;
}

/* Mobile: single column, cards centered and capped at a readable width. */
@media (max-width: 639px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .pricing-card {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}