/**
 * Homepage Color & Responsive Fixes
 * Fix màu chữ trùng màu nền cho từng section
 * ATRAHI Design Theme
 */

/* ============================================
   GENERAL COLOR VARIABLES OVERRIDE
   ============================================ */
:root {
    /* Enhanced contrast colors */
    --text-dark: #1a1a1a;
    --text-gray: #374151;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --text-white: #ffffff;
    --text-white-80: rgba(255, 255, 255, 0.85);
    --text-white-60: rgba(255, 255, 255, 0.65);
    
    /* Background colors */
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-gray: #f3f4f6;
    --bg-dark: #1a1a1a;
    --bg-gold: #b99d63;
}

/* ============================================
   HERO SECTION - White BG, Dark Text
   ============================================ */
.hero-v2,
#hero {
    background: var(--bg-white);
}

.hero-v2 .hero-title-v2,
.hero-v2 h1,
.hero-v2 h2 {
    color: var(--text-dark) !important;
}

.hero-v2 .hero-subtitle-v2 {
    color: var(--text-dark) !important;
}

.hero-v2 .hero-desc-v2 {
    color: var(--text-gray) !important;
}

.hero-v2 .section-title-v2 {
    color: var(--text-dark) !important;
}

.hero-v2 .stat-number {
    color: var(--bg-gold) !important;
}

.hero-v2 .stat-label {
    color: var(--text-muted) !important;
}

.hero-v2 .hero-badge-v2 span {
    color: var(--bg-gold) !important;
}

/* ============================================
   PAIN POINTS SECTION - White/Light BG
   ============================================ */
.painpoints-section-modern {
    background: var(--bg-light);
}

.painpoints-section-modern .section-title-v2 {
    color: var(--text-dark) !important;
}

.painpoints-section-modern .section-subtitle-v2 {
    color: var(--text-gray) !important;
}

.painpoints-section-modern .section-badge-gold span {
    color: var(--bg-gold) !important;
}

.painpoint-item-modern {
    background: var(--bg-white);
}

.painpoint-item-modern h3 {
    color: var(--text-dark) !important;
}

.painpoint-item-modern p {
    color: var(--text-muted) !important;
}

.painpoint-number {
    color: rgba(26, 26, 26, 0.08) !important;
}

/* Solution badges */
.solution-badge,
.highlight-card {
    color: var(--text-dark) !important;
}

.solution-badge .badge-title {
    color: var(--bg-gold) !important;
}

.solution-badge .badge-text {
    color: var(--text-muted) !important;
}

.highlight-card span {
    color: var(--text-dark) !important;
}

.highlight-card:hover span {
    color: var(--bg-gold) !important;
}

/* ============================================
   SOLUTIONS/SERVICES SECTION - Light BG
   ============================================ */
.solutions-section-modern {
    background: var(--bg-light);
}

.solutions-section-modern .section-title-v2 {
    color: var(--text-dark) !important;
}

.solutions-section-modern .section-subtitle-v2 {
    color: var(--text-gray) !important;
}

.solutions-section-modern .section-badge-gold span {
    color: var(--bg-gold) !important;
}

/* Service Cards - Normal state */
.solution-card-modern {
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.solution-card-modern .solution-card-subtitle {
    color: var(--bg-gold) !important;
}

.solution-card-modern .solution-card-title {
    color: var(--text-dark) !important;
}

.solution-card-modern .solution-card-desc {
    color: var(--text-muted) !important;
}

.solution-card-modern .solution-card-bullets li {
    color: var(--text-gray) !important;
}

.solution-card-modern .solution-card-cta {
    color: var(--bg-gold) !important;
}

/* Service Cards - Hover state (dark bg) */
.solution-card-modern:hover {
    background: var(--bg-dark);
}

.solution-card-modern:hover .solution-card-subtitle {
    color: var(--bg-gold) !important;
}

.solution-card-modern:hover .solution-card-title {
    color: var(--text-white) !important;
}

.solution-card-modern:hover .solution-card-desc {
    color: var(--text-white-60) !important;
}

.solution-card-modern:hover .solution-card-bullets li {
    color: var(--text-white-80) !important;
}

.solution-card-modern:hover .solution-card-cta {
    color: var(--bg-gold) !important;
}

/* Service Card Stats badge */
.solution-card-stats {
    background: rgba(185, 157, 99, 0.95) !important;
    color: var(--text-white) !important;
    font-weight: 700;
}

/* ============================================
   MODELS SECTION - White BG
   ============================================ */
.models-section {
    background: var(--bg-white);
}

.models-section .section-title-v2 {
    color: var(--text-dark) !important;
}

.model-card .model-overlay h3 {
    color: var(--text-white) !important;
}

/* ============================================
   CATEGORIES ACCORDION - Light BG
   ============================================ */
.categories-section {
    background: var(--bg-light);
}

.categories-section .section-title-v2 {
    color: var(--text-dark) !important;
}

.accordion-item {
    background: var(--bg-white);
}

.accordion-header span:first-child {
    color: var(--text-dark) !important;
}

.accordion-item.active .accordion-header span:first-child {
    color: var(--bg-gold) !important;
}

.accordion-content p {
    color: var(--text-muted) !important;
}

.accordion-icon {
    color: var(--text-light) !important;
}

.accordion-item.active .accordion-icon {
    color: var(--bg-gold) !important;
}

/* ============================================
   PROCESS SECTION - White BG
   ============================================ */
.process-section-modern {
    background: var(--bg-white);
}

.process-section-modern .section-title-v2 {
    color: var(--text-dark) !important;
}

.process-section-modern .section-subtitle-modern {
    color: var(--text-gray) !important;
}

.process-section-modern .section-badge-modern {
    color: var(--bg-gold) !important;
    background: rgba(185, 157, 99, 0.1);
}

.process-card-compact {
    background: var(--bg-light);
}

.process-card-compact h3 {
    color: var(--text-dark) !important;
}

.process-card-compact p {
    color: var(--text-muted) !important;
}

.process-chip {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

.process-time {
    color: var(--text-light) !important;
}

.btn-modern-primary {
    background: var(--bg-dark) !important;
    color: var(--text-white) !important;
}

.btn-modern-primary:hover {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

/* ============================================
   DELIVERABLES SECTION - Light BG
   ============================================ */
.deliverables-section {
    background: var(--bg-light);
}

.deliverables-section .section-title-v2 {
    color: var(--text-dark) !important;
}

.deliverables-section .section-subtitle-modern {
    color: var(--text-gray) !important;
}

.deliverable-card {
    background: var(--bg-white);
}

.deliverable-card h3 {
    color: var(--text-dark) !important;
}

.deliverable-card p {
    color: var(--text-muted) !important;
}

.deliverable-card:hover {
    border-color: var(--bg-gold) !important;
}

.deliverable-card:hover h3 {
    color: var(--bg-gold) !important;
}

/* ============================================
   TECHNICAL SECTION - White BG
   ============================================ */
.technical-section {
    background: var(--bg-white);
}

.technical-section .section-title-v2 {
    color: var(--text-dark) !important;
}

.technical-card {
    background: var(--bg-light);
    border-left: 6px solid var(--bg-gold);
}

.technical-card h3 {
    color: var(--text-dark) !important;
}

.technical-card p {
    color: var(--text-muted) !important;
}

.technical-card:hover {
    background: var(--bg-dark);
}

.technical-card:hover h3 {
    color: var(--text-white) !important;
}

.technical-card:hover p {
    color: var(--text-white-60) !important;
}

/* ============================================
   PORTFOLIO SECTION - DARK BG (Important!)
   ============================================ */
.portfolio-section-v2,
#projects {
    background: var(--bg-dark) !important;
}

/* Text on dark background - MUST be light */
.portfolio-section-v2 .section-title-v2,
.portfolio-section-v2 h2 {
    color: var(--text-white) !important;
}

.portfolio-section-v2 .section-kicker {
    color: var(--bg-gold) !important;
}

.portfolio-section-v2 .section-subtitle {
    color: var(--text-white-60) !important;
}

.portfolio-section-v2 .text-white {
    color: var(--text-white) !important;
}

.portfolio-section-v2 .text-white-70 {
    color: var(--text-white-60) !important;
}

/* Filter buttons on dark bg */
.filter-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-white-60) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-white) !important;
}

.filter-btn.active {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

/* Portfolio card text - on image overlay */
.portfolio-card-v2 h3,
.portfolio-card-overlay h3 {
    color: var(--text-white) !important;
}

.portfolio-card-overlay p,
.portfolio-card-meta {
    color: var(--text-white-60) !important;
}

.portfolio-card-cta {
    color: var(--text-white) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.portfolio-card-cta:hover {
    background: rgba(185, 157, 99, 0.2) !important;
    border-color: rgba(185, 157, 99, 0.4) !important;
}

/* Badges on cards */
.badge-light {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-white) !important;
}

.badge-dark {
    background: rgba(0, 0, 0, 0.5) !important;
    color: var(--text-white) !important;
}

/* Outline button on dark bg */
.portfolio-section-v2 .btn-outline-v2,
.portfolio-section-v2 .btn-v2.btn-outline-v2 {
    background: transparent !important;
    color: var(--text-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.portfolio-section-v2 .btn-outline-v2:hover {
    background: var(--bg-gold) !important;
    border-color: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

/* ============================================
   PRICING SECTION - White BG
   ============================================ */
.pricing-section-v2,
#pricing {
    background: var(--bg-white);
}

.pricing-section-v2 .section-title-v2 {
    color: var(--text-dark) !important;
}

/* Pricing Tabs */
.pricing-tab {
    background: var(--bg-gray);
    color: var(--text-light) !important;
}

.pricing-tab:hover {
    background: rgba(185, 157, 99, 0.15);
    color: var(--bg-gold) !important;
}

.pricing-tab.active {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

/* Standard pricing cards - Light BG */
.pricing-card-v2 {
    background: var(--bg-light);
}

.pricing-card-v2 h3 {
    color: var(--text-dark) !important;
}

.pricing-card-v2 .pricing-price {
    color: var(--bg-gold) !important;
}

.pricing-card-v2 .pricing-price span {
    color: var(--text-light) !important;
}

.pricing-card-v2 .pricing-benefits li {
    color: var(--text-gray) !important;
}

.pricing-card-v2 .pricing-btn {
    background: var(--bg-dark) !important;
    color: var(--text-white) !important;
}

.pricing-card-v2 .pricing-btn:hover {
    background: var(--bg-gold) !important;
}

/* Featured pricing card - DARK BG */
.pricing-card-v2.featured {
    background: var(--bg-dark) !important;
}

.pricing-card-v2.featured h3 {
    color: var(--text-white) !important;
}

.pricing-card-v2.featured .pricing-price {
    color: var(--bg-gold) !important;
}

.pricing-card-v2.featured .pricing-price span {
    color: var(--text-white-60) !important;
}

.pricing-card-v2.featured .pricing-benefits li {
    color: var(--text-white-80) !important;
}

.pricing-card-v2.featured .pricing-btn {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

.pricing-card-v2.featured .pricing-btn:hover {
    background: #a08850 !important;
}

.pricing-badge {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

/* ============================================
   CASE STUDY SECTION - Light BG
   ============================================ */
.casestudy-section {
    background: var(--bg-light);
}

.casestudy-section .section-title-v2 {
    color: var(--text-dark) !important;
}

.casestudy-card {
    background: var(--bg-white);
}

.casestudy-label {
    color: var(--bg-gold) !important;
}

.casestudy-content h3 {
    color: var(--text-dark) !important;
}

.casestudy-quote {
    color: var(--text-muted) !important;
}

.casestudy-stats .stat-value {
    color: var(--bg-gold) !important;
}

.casestudy-stats .stat-text {
    color: var(--text-light) !important;
}

/* ============================================
   FAQ SECTION - White BG
   ============================================ */
.faq-section,
#faq {
    background: var(--bg-white);
}

.faq-section .section-title-v2 {
    color: var(--text-dark) !important;
}

.faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-question span:first-child {
    color: var(--text-dark) !important;
}

.faq-question:hover span:first-child {
    color: var(--bg-gold) !important;
}

.faq-item.active .faq-question span:first-child {
    color: var(--bg-gold) !important;
}

.faq-answer p {
    color: var(--text-muted) !important;
}

.faq-icon {
    color: var(--text-light) !important;
}

.faq-item.active .faq-icon {
    color: var(--bg-gold) !important;
}

/* ============================================
   CONTACT SECTION - DARK BG (Important!)
   ============================================ */
.contact-section-v2 {
    background: var(--bg-white);
}

.contact-wrapper-v2 {
    background: var(--bg-dark) !important;
}

/* Text on dark wrapper - MUST be light */
.contact-info-v2 h2 {
    color: var(--text-white) !important;
}

.contact-info-v2 .text-gold {
    color: var(--bg-gold) !important;
}

.contact-label {
    color: var(--text-white-60) !important;
}

.contact-value {
    color: var(--text-white) !important;
}

.contact-item-v2.muted .contact-value {
    color: var(--text-white-60) !important;
}

/* Form inside dark section - white bg */
.contact-form-v2 {
    background: var(--bg-white) !important;
}

.contact-form-v2 input,
.contact-form-v2 select {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.contact-form-v2 input::placeholder {
    color: var(--text-light) !important;
}

.contact-form-v2 input:focus,
.contact-form-v2 select:focus {
    border-color: var(--bg-gold) !important;
    box-shadow: 0 0 0 3px rgba(185, 157, 99, 0.1) !important;
}

.submit-btn {
    background: var(--bg-dark) !important;
    color: var(--text-white) !important;
}

.submit-btn:hover {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

/* ============================================
   MOBILE STICKY CTA
   ============================================ */
.mobile-sticky-cta .sticky-btn {
    font-weight: 700;
}

.sticky-btn.call {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

.sticky-btn.zalo {
    background: #0068ff !important;
    color: var(--text-white) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 1024px) {
    .portfolio-header {
        text-align: center;
    }
    
    .portfolio-filters-v2 {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* Ensure text is always readable on mobile */
    .section-title-v2 {
        font-size: 1.75rem !important;
    }
    
    .section-subtitle-v2,
    .section-subtitle-modern {
        font-size: 1rem !important;
    }
    
    /* Dark section text fix for mobile */
    .portfolio-section-v2 .section-header-v2 {
        text-align: center;
    }
    
    .pricing-card-v2.featured {
        transform: none;
    }
    
    /* Contact section mobile */
    .contact-wrapper-v2 {
        padding: 2rem !important;
    }
    
    .contact-info-v2 h2 {
        font-size: 2rem !important;
        text-align: center;
    }
    
    .contact-details-v2 {
        text-align: center;
    }
    
    /* Form mobile */
    .contact-form-v2 {
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .section-title-v2 {
        font-size: 1.5rem !important;
    }
    
    .hero-title-v2 {
        font-size: 2rem !important;
    }
    
    .pricing-grid-v2 {
        gap: 1.5rem;
    }
    
    .portfolio-card-overlay {
        padding: 1.25rem;
    }
    
    .portfolio-card-overlay h3 {
        font-size: 1.125rem !important;
    }
}

/* ============================================
   TEXT GOLD FIX
   ============================================ */
.text-gold,
span.text-gold {
    color: var(--bg-gold) !important;
}

/* Ensure gold text is visible on all backgrounds */
.bg-dark .text-gold,
.section-dark .text-gold,
.portfolio-section-v2 .text-gold,
.contact-wrapper-v2 .text-gold {
    color: var(--bg-gold) !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    * {
        color: #000000 !important;
        background: #ffffff !important;
    }
    
    .text-gold {
        color: #8a7445 !important;
    }
}

/* ============================================
   FOOTER COLOR FIXES
   ============================================ */

/* Footer CTA Section - Gold BG */
.footer-cta-section {
    background: linear-gradient(135deg, var(--bg-gold), #9a8352) !important;
}

.footer-cta-section h2 {
    color: var(--text-white) !important;
}

.footer-cta-section p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.footer-cta-btn.primary {
    background: var(--text-white) !important;
    color: #8a7445 !important;
}

.footer-cta-btn.secondary {
    background: transparent !important;
    color: var(--text-white) !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
}

.footer-cta-btn.secondary:hover {
    background: var(--text-white) !important;
    color: #8a7445 !important;
}

/* Footer Main - DARK BG */
.footer-main {
    background: linear-gradient(180deg, #1a1a1a, #0a0a0a) !important;
}

/* Logo invert for dark bg */
.footer-logo img {
    filter: brightness(0) invert(1);
}

.footer-tagline {
    color: var(--bg-gold) !important;
}

.footer-desc {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Footer titles */
.footer-title,
.footer-column h4 {
    color: var(--text-white) !important;
}

/* Footer links */
.footer-links li a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-links li a:hover {
    color: var(--bg-gold) !important;
}

/* Footer contact */
.footer-contact .contact-text strong {
    color: rgba(255, 255, 255, 0.9) !important;
}

.footer-contact .contact-text p {
    color: rgba(255, 255, 255, 0.6) !important;
}

.footer-contact .contact-text a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.footer-contact .contact-text a:hover {
    color: var(--bg-gold) !important;
}

.phone-number {
    color: var(--bg-gold) !important;
}

/* Footer badges */
.badge-item {
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.badge-item:hover {
    background: rgba(185, 157, 99, 0.1) !important;
    border-color: rgba(185, 157, 99, 0.2) !important;
}

/* Footer socials */
.footer-socials .social-link {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.footer-socials .social-link:hover {
    background: var(--bg-gold) !important;
    color: var(--text-white) !important;
}

/* Footer bottom */
.footer-bottom {
    background: #0a0a0a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.5) !important;
}

.footer-meta a {
    color: rgba(255, 255, 255, 0.6) !important;
}

.footer-meta a:hover {
    color: var(--bg-gold) !important;
}