/* 360TFT Website - Modular CSS Architecture */

/* ==================================================
   BASE IMPORTS - Foundation styles
   ================================================== */
@import url('base.css');

/* ==================================================
   COMPONENT IMPORTS - UI components
   ================================================== */
@import url('components.css');

/* ==================================================
   UTILITY IMPORTS - Helper classes
   ================================================== */
@import url('utilities.css');

/* ==================================================
   LEGACY COMPATIBILITY CLASSES
   (to be removed after HTML migration)
   ================================================== */
.btn-primary, .btn-outline, .btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 0.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, #976bdd 0%, #ff5757 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(151, 107, 221, 0.3);
}

.btn-outline {
    border: 2px solid #976bdd;
    color: #976bdd;
    background: transparent;
}

.btn-outline:hover {
    background: #976bdd;
    color: white;
}

.btn-secondary {
    background: #333;
    color: white;
}

.btn-secondary:hover {
    background: #555;
}

/* Legacy product classes */
.products { padding: 4rem 0; background: #111; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 2rem; }
.product-card { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.1); position: relative; }
.product-featured { border-color: #976bdd; }
.featured-badge { position: absolute; top: -10px; left: 20px; background: #976bdd; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
.product-card h3 { color: #976bdd; margin-bottom: 1rem; }
.product-card ul { list-style: none; margin: 1rem 0; }
.product-card li { padding: 0.25rem 0; color: #cccccc; }

/* Legacy testimonial classes */
.testimonials { padding: 4rem 0; background: #000; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0; }
.testimonial-card { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.1); }
.testimonial-author-image img { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 1rem; }
.testimonial-text { font-style: normal; margin-bottom: 1rem; color: #cccccc; }
.testimonial-author { font-weight: bold; color: #976bdd; }
.testimonial-role { color: #888; font-size: 0.9rem; }
.testimonial-highlight { background: rgba(151, 107, 221, 0.1); border-left: 3px solid #976bdd; padding: 0.5rem 1rem; margin-top: 1rem; font-size: 0.9rem; }

/* Legacy stats classes */
.live-stats-bar { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; padding: 15px 0; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.live-stats-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; }
.live-stat-item { text-align: center; min-width: 120px; }
.live-stat-number { font-size: 2rem; font-weight: bold; color: white; display: block; margin-bottom: 5px; text-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.live-stat-label { font-size: 0.9rem; opacity: 0.9; font-weight: 500; }
.stats-grid { display: flex; justify-content: center; gap: 3rem; margin: 2rem 0; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-item strong { display: block; font-size: 2rem; color: #976bdd; }

/* Legacy trust classes */
.trust-indicators, .express-trust-bar { display: flex; justify-content: center; gap: 3rem; margin: 2rem 0; flex-wrap: wrap; }
.trust-stat, .trust-item { text-align: center; }
.trust-stat strong, .trust-number { display: block; font-size: 1.5rem; color: #976bdd; font-weight: bold; }
.trust-label { color: #888; font-size: 0.9rem; }

/* Legacy conversion classes */
.conversion-paths-section { padding: 4rem 0; background: #111; text-align: center; }
.conversion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 2rem 0; }
.conversion-path { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.1); }
.path-featured { border-color: #976bdd; position: relative; }
.path-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #976bdd; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
.path-icon { font-size: 3rem; margin-bottom: 1rem; }

/* Legacy express classes */
.express-conversion-section { padding: 4rem 0; background: #000; text-align: center; }
.express-conversion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin: 2rem 0; }
.express-option { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.1); position: relative; }
.featured-express { border-color: #976bdd; }
.express-badge { position: absolute; top: -10px; left: 20px; background: #976bdd; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
.express-price { font-size: 2rem; font-weight: bold; color: #976bdd; margin: 1rem 0; }
.express-benefits { list-style: none; margin: 1rem 0; }
.express-benefits li { padding: 0.25rem 0; color: #cccccc; }
.express-conversion-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.express-cta-alternative { text-align: center; color: rgba(255, 255, 255, 0.8); margin-top: 2rem; }
.express-urgency-indicator { background: rgba(255, 87, 87, 0.1); border: 1px solid #ff5757; border-radius: 6px; padding: 1rem; margin-bottom: 2rem; color: #ff5757; font-weight: bold; }

/* Legacy hero classes */
.hero-badge { display: inline-block; background: linear-gradient(135deg, #976bdd 0%, #ff5757 100%); color: white; padding: 12px 30px; border-radius: 50px; font-size: 0.9rem; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 8px 25px rgba(151, 107, 221, 0.3); }
.hero-content { text-align: center; position: relative; z-index: 2; }
.hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; margin-bottom: 25px; background: linear-gradient(135deg, #ffffff 0%, #976bdd 50%, #ff5757 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; }
.hero-subtitle { font-size: clamp(1.2rem, 3vw, 1.8rem); color: #976bdd; font-weight: 600; margin-bottom: 30px; }
.hero-description { font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); max-width: 800px; margin: 0 auto 50px; line-height: 1.7; }
.hero-cta { display: flex; gap: 25px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* Legacy utility classes */
.btn-primary-urgent { background: linear-gradient(135deg, #ff5757 0%, #976bdd 100%); color: white; box-shadow: 0 8px 25px rgba(255, 87, 87, 0.4); animation: urgentPulse 2s infinite; }
.btn-primary-urgent:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(255, 87, 87, 0.6); }
.stat-number { font-size: 2.5rem; color: #976bdd; font-weight: 800; display: block; }
.stat-label { color: rgba(255, 255, 255, 0.8); font-size: 1rem; margin-top: 5px; }
.community-stats { background: rgba(255, 255, 255, 0.05); border-radius: 15px; padding: 30px; margin: 50px auto; max-width: 600px; text-align: center; backdrop-filter: blur(10px); }
.testimonials-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 1rem; color: #ffffff; }
.section-subtitle { text-align: center; color: #cccccc; margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.guarantee-text { color: #888; font-size: 0.9rem; text-align: center; margin-top: 1rem; }
.price-note { font-size: 1rem; color: #888; }
.price-increase-warning { color: #ff5757; font-weight: bold; font-size: 0.9rem; margin-top: 0.5rem; }
.inline-link { color: #976bdd; text-decoration: underline; }
.inline-link:hover { color: #b899e5; }
.club-alternative-notice { margin-top: 30px; padding: 20px; background: rgba(255, 87, 87, 0.1); border: 1px solid rgba(255, 87, 87, 0.3); border-radius: 12px; text-align: center; }
.urgency-pulse { width: 12px; height: 12px; background: #ff5757; border-radius: 50%; animation: pulse 1.5s infinite; display: inline-block; margin-right: 10px; }

/* ==================================================
   RESPONSIVE DESIGN
   ================================================== */
@media (max-width: 768px) {
    .hero h1,
    .hero__title {
        font-size: 2rem;
    }
    
    .product-section__grid,
    .product-grid,
    .conversion-section__grid,
    .conversion-grid,
    .express-section__grid,
    .express-conversion-grid {
        grid-template-columns: 1fr;
    }
    
    .nav__list {
        gap: 1rem;
    }
    
    .nav__link {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .stat-section__container,
    .stat-section__grid,
    .live-stats-container,
    .stats-grid,
    .trust-section,
    .trust-indicators,
    .express-trust-bar {
        gap: 1rem;
    }
}

/* CRITICAL FOOTER FIX - Remove bullet points */
footer#footer .footer-section ul,
footer .footer-section ul,
.footer-section ul,
footer ul,
footer ul li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

footer#footer .footer-section ul li::before,
footer .footer-section ul li::before,
.footer-section ul li::before,
footer ul li::before,
footer nav ul[role="list"] li::before,
footer nav ul li::before,
footer#footer nav ul[role="list"] li::before,
footer#footer nav ul li::before {
    content: "" !important;
    display: none !important;
}

footer#footer .footer-section ul li::after,
footer .footer-section ul li::after,
.footer-section ul li::after,
footer ul li::after,
footer nav ul[role="list"] li::after,
footer nav ul li::after,
footer#footer nav ul[role="list"] li::after,
footer#footer nav ul li::after {
    content: "" !important;
    display: none !important;
}

/* FOOTER INFO CENTERING */
.footer-info,
footer .footer-info,
#footer .footer-info,
.footer-bottom {
    text-align: center !important;
    margin: 0 auto !important;
}

/* ULTIMATE FOOTER CENTERING FIX - CSS Grid Solution */
footer#footer .footer-bottom,
#footer .footer-bottom,
.footer-bottom,
footer .footer-bottom,
body footer#footer .footer-bottom,
html body footer#footer .footer-bottom {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
}

footer#footer .footer-bottom .footer-info,
#footer .footer-bottom .footer-info,
.footer-bottom .footer-info,
footer .footer-bottom .footer-info,
body footer#footer .footer-bottom .footer-info,
html body footer#footer .footer-bottom .footer-info {
    width: 1160px !important;
    max-width: 1160px !important;
    text-align: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 20px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Additional paragraph-level centering */
footer#footer .footer-bottom .footer-info p,
#footer .footer-bottom .footer-info p,
.footer-bottom .footer-info p,
footer .footer-bottom .footer-info p,
body footer#footer .footer-bottom .footer-info p,
html body footer#footer .footer-bottom .footer-info p {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.footer-info .copyright,
.footer-info .tagline,
.footer-bottom .copyright,
.footer-bottom p,
footer p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* FREE RESOURCES PAGE FIXES */
/* Center the heading and hero subtitle */
#heading-free-coaching-resources-0,
.hero-subtitle {
    text-align: center !important;
}

/* Ensure hero section centering */
.hero-section .hero-subtitle,
.hero .hero-subtitle {
    text-align: center !important;
}

/* REMOVE SKIP LINKS COMPLETELY */
.skip-links,
.skip-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* REMOVE ITALICS FROM ALL TESTIMONIAL TEXT */
.testimonial-text,
.testimonial p,
.testimonial-card p,
.testimonial blockquote,
.testimonial-content,
.testimonial-quote,
p[class*="testimonial"],
*[class*="testimonial"] p {
    font-style: normal !important;
}