/**
 * Global Text Color Fix
 * PRINCIPLE: Nền đen = Chữ trắng, Nền trắng = Chữ đen
 * 
 * @package ATH_ATRAHI_DESIGN
 * @version 4.0
 */

/* ==========================================================================
   GLOBAL IMAGE CONSTRAINTS - Prevent layout breaking
   ========================================================================== */

/* All images must respect container bounds */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Specific containers with images */
.portfolio-item img,
.type-card img,
.service-type-card img,
.service-type-card-img img,
.types-grid img,
.office-types img,
.space-types img,
.project-card img,
.post-card img,
.recent-post-thumb img,
.gallery-item img,
.lightbox-gallery img,
.entry-content img,
.post-content img,
article img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

/* Grid containers - ensure proper sizing */
.types-grid,
.service-types-grid,
.portfolio-grid,
.projects-grid {
    overflow: hidden;
}

.types-grid > *,
.service-types-grid > *,
.portfolio-grid > * {
    max-width: 100%;
    overflow: hidden;
}

/* Card images - fixed aspect ratio */
.service-type-card-img,
.portfolio-item,
.type-card,
.project-thumb,
.model-card,
.hero-image,
.post-thumbnail,
.wp-block-image {
    overflow: hidden;
    position: relative;
}

.service-type-card-img img,
.portfolio-item img,
.type-card img,
.model-card img,
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Models grid - ensure responsive */
.models-grid {
    overflow: hidden;
}

.models-grid .model-card {
    max-width: 100%;
}

/* WooCommerce product images */
.woocommerce-product-gallery img,
.product-gallery img,
.product-thumbnail img,
.product-image img {
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   OVERRIDE CSS VARIABLES for DARK THEME PAGES
   These pages use dark theme (nền đen → chữ trắng)
   ========================================================================== */

/* Override CSS variables for dark theme pages */
.services-main-page,
.service-detail-page,
.fb-service,
.playground-service,
.education-service,
.retail-service,
.office-service,
.residential-service,
.portfolio-modern-page,
body.single-product .product-landing-page {
    --ath-text: #ffffff;
    --ath-text-secondary: #cccccc;
    --ath-text-muted: #999999;
    --ath-bg: #0d0d0d;
    --ath-dark: #ffffff;
}

/* ==========================================================================
   DARK THEME PAGES - White/Light Text on Dark Background
   These pages use dark theme (nền đen → chữ trắng)
   ========================================================================== */

/* Main Services Page - Uses dark theme */
.services-main-page,
.services-main-page .site-main {
    background: #0d0d0d !important;
}

.services-main-page h1,
.services-main-page h2,
.services-main-page h3,
.services-main-page h4 {
    color: #ffffff !important;
}

.services-main-page p {
    color: #cccccc !important;
}

.services-main-page .service-features li {
    color: #e0e0e0 !important;
}

.services-main-page .service-desc,
.services-main-page .hero-desc,
.services-main-page .section-desc,
.services-main-page .step-desc,
.services-main-page .why-item p,
.services-main-page .cta-content p {
    color: #aaaaaa !important;
}

.services-main-page .stat-label {
    color: #999999 !important;
}

/* Service Detail Pages (F&B, Khu vui chơi, etc.) - Uses dark theme */
.service-detail-page,
.service-detail-page .site-main,
.fb-service,
.playground-service,
.education-service,
.retail-service,
.office-service,
.residential-service {
    background: #0d0d0d !important;
}

.service-detail-page h1,
.service-detail-page h2,
.service-detail-page h3,
.service-detail-page h4,
.fb-service h1, .fb-service h2, .fb-service h3,
.playground-service h1, .playground-service h2, .playground-service h3 {
    color: #ffffff !important;
}

.service-detail-page p,
.fb-service p,
.playground-service p {
    color: #cccccc !important;
}

.service-detail-page .section-desc,
.service-detail-page .hero-desc,
.service-detail-page .type-desc,
.fb-service .section-desc,
.fb-service .hero-desc {
    color: #aaaaaa !important;
}

.service-detail-page .type-item,
.fb-service .type-item {
    background: #1a1a1a !important;
}

.service-detail-page .type-title,
.fb-service .type-title {
    color: #ffffff !important;
}

.service-detail-page .type-desc,
.fb-service .type-desc {
    color: #888888 !important;
}

.service-detail-page .style-tag,
.fb-service .style-tag {
    background: rgba(185, 157, 99, 0.1) !important;
    color: #b99d63 !important;
}

/* Single Product - Dark Theme */
body.single-product .site-main {
    background: #0f0f0f !important;
}

body.single-product h1,
body.single-product h2,
body.single-product h3,
body.single-product h4 {
    color: #ffffff !important;
}

body.single-product p,
body.single-product li {
    color: #f0f0f0 !important;
}

/* Portfolio/Công trình page - Dark Theme */
.portfolio-modern-page,
.portfolio-modern-page .site-main {
    background: #0d0d0d !important;
}

.portfolio-modern-page h1,
.portfolio-modern-page h2,
.portfolio-modern-page h3 {
    color: #ffffff !important;
}

.portfolio-modern-page p {
    color: #cccccc !important;
}

/* Blog/Archive - Dark Theme */
body.blog .site-main,
body.archive .site-main,
body.search .site-main,
body.category .site-main,
body.tag .site-main {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%) !important;
}

body.blog h1, body.blog h2, body.blog h3,
body.archive h1, body.archive h2, body.archive h3,
body.search h1, body.search h2, body.search h3 {
    color: #ffffff !important;
}

body.blog p, body.archive p, body.search p {
    color: #cccccc !important;
}

/* 404 Page - Dark Theme */
body.error404 .site-main {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%) !important;
}

body.error404 h1, body.error404 h2 {
    color: #ffffff !important;
}

body.error404 p {
    color: #cccccc !important;
}

/* ==========================================================================
   LIGHT THEME PAGES - Dark Text on Light Background
   These pages use light theme (nền trắng → chữ đen)
   ========================================================================== */

/* Homepage */
body.home .site-main {
    background: #ffffff;
}

/* Default page template */
body.page-template-default .site-main {
    background: #ffffff;
}

/* Single Blog Post - Light Theme */
body.single-post .site-main,
body.single-post .single-post-page,
body.single-post .post-content-wrapper {
    background: #ffffff !important;
}

/* Single Post Header - Dark Theme for visual contrast */
body.single-post .post-header {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%) !important;
}

body.single-post .post-header .post-single-title {
    color: #ffffff !important;
}

body.single-post .post-header .post-categories a,
body.single-post .post-header .post-cat-link {
    color: #b99d63 !important;
}

body.single-post .post-header .post-meta-single,
body.single-post .post-header .post-meta-single span,
body.single-post .post-header .author-name {
    color: #cccccc !important;
}

/* Single Post Content - Light Theme (MAIN CONTENT AREA) */
body.single-post .entry-title {
    color: #1a1a1a !important;
}

body.single-post .post-main-content {
    background: #ffffff !important;
}

body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .post-content p {
    color: #374151 !important;
}

body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
    color: #1a1a1a !important;
}

/* Single Post - Tags */
body.single-post .post-tags .tags-label {
    color: #6b7280 !important;
}

body.single-post .post-tags .tag-link {
    color: #b99d63 !important;
    background: rgba(185, 157, 99, 0.1) !important;
}

/* Single Post - Share */
body.single-post .post-share .share-label {
    color: #374151 !important;
}

/* Single Post - Author Box */
body.single-post .author-box {
    background: #f8f9fa !important;
    border-color: #e5e7eb !important;
}

body.single-post .author-box .author-label {
    color: #6b7280 !important;
}

body.single-post .author-box .author-name-box {
    color: #1a1a1a !important;
}

body.single-post .author-box .author-bio {
    color: #374151 !important;
}

/* Single Post - Navigation */
body.single-post .post-navigation .nav-prev,
body.single-post .post-navigation .nav-next {
    background: #f8f9fa !important;
    border-color: #e5e7eb !important;
}

body.single-post .post-navigation .nav-label {
    color: #6b7280 !important;
}

body.single-post .post-navigation .nav-title {
    color: #1a1a1a !important;
}

/* Single Post - List items must be dark */
body.single-post .entry-content li,
body.single-post .entry-content ul li,
body.single-post .entry-content ol li {
    color: #374151 !important;
}

/* Single Post - TOC (Table of Contents) on light background */
body.single-post .toc-container,
body.single .toc-container,
.single-post-page .toc-container {
    background: #f8f9fa !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
}

body.single-post .toc-title,
body.single .toc-title,
.single-post-page .toc-title {
    color: #1a1a1a !important;
    border-bottom-color: #e5e7eb !important;
}

body.single-post .toc-toggle-text,
body.single .toc-toggle-text {
    color: #b99d63 !important;
}

body.single-post .toc-nav,
body.single .toc-nav,
.single-post-page .toc-nav {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 20px !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease !important;
}

body.single-post .toc-container:not(.collapsed) .toc-nav,
body.single .toc-container:not(.collapsed) .toc-nav,
.single-post-page .toc-container:not(.collapsed) .toc-nav {
    max-height: 800px !important;
    opacity: 1 !important;
    padding: 15px 20px 20px !important;
}

body.single-post .toc-list a,
body.single .toc-list a,
.single-post-page .toc-list a,
body.single-post .toc-list li a,
.toc-container .toc-list a {
    color: #374151 !important;
}

body.single-post .toc-list a:hover,
body.single .toc-list a:hover,
.single-post-page .toc-list a:hover {
    color: #b99d63 !important;
}

body.single-post .toc-list li::before,
body.single .toc-list li::before,
.single-post-page .toc-list li::before {
    background: #d1d5db !important;
}

body.single-post .toc-list li:hover::before {
    background: #b99d63 !important;
}

/* Single Post - Sidebar on light background */
body.single-post .sidebar,
body.single-post .blog-sidebar,
body.single-post .widget-area,
body.single-post #secondary,
body.single-post .post-sidebar,
body.single .post-sidebar,
.single-post-page .post-sidebar {
    background: #ffffff !important;
}

body.single-post .widget-title,
body.single-post .sidebar-widget .widget-title,
body.single-post .blog-sidebar .widget-title,
body.single-post #secondary .widget-title,
body.single-post .post-sidebar .widget-title,
body.single .post-sidebar .widget-title,
.single-post-page .sidebar-widget h3 {
    color: #1a1a1a !important;
    border-bottom-color: #e5e7eb !important;
}

/* Single Post - Sidebar widget list items - MUST BE DARK */
body.single-post .widget ul li,
body.single-post .sidebar-widget ul li,
body.single-post .blog-sidebar ul li,
body.single-post #secondary .widget ul li,
body.single-post .widget_categories ul li,
body.single-post .widget_archive ul li,
body.single-post .cat-item,
body.single-post .post-sidebar .sidebar-widget ul li,
body.single .post-sidebar ul li,
.single-post-page .sidebar-widget ul li {
    color: #374151 !important;
    border-bottom-color: #e5e7eb !important;
}

/* Single Post - Sidebar links - MUST BE DARK */
body.single-post .widget ul li a,
body.single-post .sidebar-widget ul li a,
body.single-post .blog-sidebar ul li a,
body.single-post #secondary .widget ul li a,
body.single-post .widget_categories ul li a,
body.single-post .widget_archive ul li a,
body.single-post .cat-item a,
body.single-post .post-sidebar a,
body.single .post-sidebar a,
.single-post-page .post-sidebar a,
.single-post-page .sidebar-widget a {
    color: #374151 !important;
}

body.single-post .widget ul li a:hover,
body.single-post .sidebar-widget ul li a:hover,
body.single-post .blog-sidebar ul li a:hover,
body.single-post #secondary .widget ul li a:hover,
body.single-post .post-sidebar a:hover,
.single-post-page .post-sidebar a:hover {
    color: #b99d63 !important;
}

/* Single Post - Recent posts widget */
body.single-post .recent-post-item .post-title,
body.single-post .widget .post-title {
    color: #1a1a1a !important;
}

body.single-post .recent-post-item .post-date,
body.single-post .widget .post-date {
    color: #6b7280 !important;
}

/* Single Post - Recent Posts Widget - DARK TEXT */
body.single-post .recent-posts-widget .recent-post-item,
body.single-post .recent-post-item,
body.single .recent-post-item,
.single-post-page .recent-post-item {
    color: #374151 !important;
}

body.single-post .recent-post-info h4,
body.single-post .recent-posts-widget h4,
body.single .recent-post-info h4,
.single-post-page .recent-post-info h4,
.single-post-page .recent-posts-widget .recent-post-item h4 {
    color: #1a1a1a !important;
}

body.single-post .recent-post-info span,
body.single-post .recent-posts-widget span,
body.single .recent-post-info span,
.single-post-page .recent-post-info span {
    color: #6b7280 !important;
}

/* Single Post - Category List - DARK TEXT */
body.single-post .category-list li,
body.single-post .category-list li a,
body.single .category-list li,
body.single .category-list li a,
.single-post-page .category-list li,
.single-post-page .category-list li a {
    color: #374151 !important;
}

body.single-post .category-list li a:hover,
body.single .category-list li a:hover,
.single-post-page .category-list li a:hover {
    color: #b99d63 !important;
}

body.single-post .category-list .count,
body.single .category-list .count,
.single-post-page .category-list .count {
    background: rgba(185, 157, 99, 0.1) !important;
    color: #b99d63 !important;
}

/* Single Post - CTA Widget - DARK BACKGROUND */
body.single-post .cta-widget {
    background: #1a1a1a !important;
}

body.single-post .cta-widget h3 {
    color: #ffffff !important;
}

body.single-post .cta-widget p {
    color: #cccccc !important;
}

body.single-post .cta-widget .cta-btn {
    background: linear-gradient(135deg, #b99d63 0%, #a08550 100%) !important;
    color: #0d0d0d !important;
}

body.single-post .cta-widget .cta-phone {
    color: #b99d63 !important;
}

/* Single Post - Search Widget */
body.single-post .sidebar-search .search-input {
    background: #f8f9fa !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}

body.single-post .sidebar-search .search-input::placeholder {
    color: #9ca3af !important;
}

body.single-post .sidebar-search .search-btn {
    color: #6b7280 !important;
}

/* WooCommerce Archive/Shop - Light Theme */
body.woocommerce.post-type-archive-product .site-main,
body.woocommerce-page:not(.single-product) .site-main {
    background: #ffffff !important;
}

body.woocommerce:not(.single-product) h1,
body.woocommerce:not(.single-product) h2,
body.woocommerce:not(.single-product) h3 {
    color: #1a1a1a !important;
}

body.woocommerce:not(.single-product) p {
    color: #4b5563 !important;
}

/* ==========================================================================
   SPECIFIC COMPONENT FIXES
   ========================================================================== */

/* Light background cards - ensure dark text */
.post-card,
.service-type-card,
.pricing-card {
    background: #ffffff;
}

.post-card .post-title,
.service-type-card h3,
.pricing-card h3 {
    color: #1a1a1a !important;
}

.post-card .post-excerpt,
.service-type-card p,
.pricing-card .feature {
    color: #4b5563 !important;
}

/* Feature list on light background */
.feature-list li {
    color: #374151 !important;
}

/* Dark background sections inside light pages */
.dark-section,
.bg-dark {
    background: #1a1a1a !important;
}

.dark-section h1, .dark-section h2, .dark-section h3,
.bg-dark h1, .bg-dark h2, .bg-dark h3 {
    color: #ffffff !important;
}

.dark-section p, .bg-dark p {
    color: #cccccc !important;
}

/* ==========================================================================
   BUTTONS - Proper contrast
   ========================================================================== */

/* Gold button - dark text on gold */
.btn-gold, .btn-primary {
    background: linear-gradient(135deg, #b99d63 0%, #a08550 100%);
    color: #1a1a1a !important;
}

.btn-gold:hover, .btn-primary:hover {
    background: #ffffff;
    color: #1a1a1a !important;
}

/* Outline button on dark background - white text */
.services-main-page .btn-outline,
.portfolio-modern-page .btn-outline,
body.single-product .btn-outline {
    background: transparent;
    border-color: #b99d63;
    color: #ffffff !important;
}

.services-main-page .btn-outline:hover,
.portfolio-modern-page .btn-outline:hover,
body.single-product .btn-outline:hover {
    background: #b99d63;
    color: #1a1a1a !important;
}

/* Outline button on light background - dark text */
body.home .btn-outline,
body.page-template-default .btn-outline,
body.single-post .btn-outline {
    border-color: #1a1a1a;
    color: #1a1a1a !important;
}

body.home .btn-outline:hover,
body.page-template-default .btn-outline:hover,
body.single-post .btn-outline:hover {
    background: #1a1a1a;
    color: #ffffff !important;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

/* Dark background breadcrumbs */
.services-main-page .breadcrumb a,
.portfolio-modern-page .breadcrumb a,
body.single-product .breadcrumb a {
    color: #aaaaaa !important;
}

.services-main-page .breadcrumb a:hover,
.portfolio-modern-page .breadcrumb a:hover,
body.single-product .breadcrumb a:hover {
    color: #b99d63 !important;
}

.services-main-page .breadcrumb .current,
.portfolio-modern-page .breadcrumb .current,
body.single-product .breadcrumb .current {
    color: #b99d63 !important;
}

/* Light background breadcrumbs */
body.home .breadcrumb a,
body.page-template-default .breadcrumb a,
body.single-post .breadcrumb a {
    color: #4b5563 !important;
}

body.home .breadcrumb a:hover,
body.page-template-default .breadcrumb a:hover,
body.single-post .breadcrumb a:hover {
    color: #b99d63 !important;
}

/* ==========================================================================
   FOOTER - Always dark background
   ========================================================================== */

.site-footer {
    background: #0d0d0d !important;
    color: rgba(255, 255, 255, 0.8);
}

.site-footer h3, .site-footer h4, .site-footer h5 {
    color: #ffffff !important;
}

.site-footer p,
.site-footer li {
    color: rgba(255, 255, 255, 0.7) !important;
}

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

.site-footer a:hover {
    color: #b99d63 !important;
}

/* ==========================================================================
   HEADER - Mixed: Topbar dark, Main nav light
   ========================================================================== */

/* Topbar - Dark background, white text */
.header-topbar {
    background: linear-gradient(90deg, #0d0d0d 0%, #1a1a1a 50%, #0d0d0d 100%) !important;
}

.header-topbar .topbar-item,
.header-topbar a {
    color: #e5e5e5 !important;
}

.header-topbar a:hover {
    color: #b99d63 !important;
}

/* Main Nav - Light background, dark text */
.main-nav {
    background: rgba(255, 255, 255, 0.98) !important;
}

.main-nav .nav-link,
.main-nav .menu-item a,
.main-nav .nav-menu a,
.nav-menu .nav-item .nav-link,
.nav-center .nav-menu .nav-link,
.site-header .main-nav .nav-link {
    color: #374151 !important;
}

.main-nav .nav-link:hover,
.main-nav .menu-item a:hover,
.main-nav .nav-menu a:hover,
.main-nav .nav-item.active .nav-link,
.nav-menu .nav-item .nav-link:hover,
.nav-center .nav-menu .nav-link:hover {
    color: #b99d63 !important;
}

/* Mega Menu - Light background */
.mega-menu {
    background: rgba(255, 255, 255, 0.98) !important;
}

.mega-menu a,
.mega-menu .mega-item-title,
.mega-menu .mega-menu-item a,
.mega-menu .mega-item h4,
.mega-menu .mega-item-content h4 {
    color: #374151 !important;
}

.mega-menu a:hover,
.mega-menu .mega-menu-item a:hover,
.mega-menu .mega-item:hover h4 {
    color: #b99d63 !important;
}

.mega-menu .mega-item-desc,
.mega-menu .mega-item-content p,
.mega-menu p {
    color: #6b7280 !important;
}

/* Mobile menu - Dark background */
.mobile-nav-menu,
.mobile-menu-panel {
    background: #0d0d0d !important;
}

.mobile-nav-menu a,
.mobile-menu-panel a {
    color: #ffffff !important;
}

.mobile-nav-menu a:hover,
.mobile-menu-panel a:hover {
    color: #b99d63 !important;
}

/* ==========================================================================
   CTA BUTTONS - Proper contrast
   ========================================================================== */

/* Gold CTA buttons - dark text for readability */
.nav-cta-btn,
.mega-cta-btn,
.footer-cta-btn.primary {
    background: linear-gradient(135deg, #b99d63 0%, #a08550 100%) !important;
    color: #0d0d0d !important;
}

.nav-cta-btn:hover,
.mega-cta-btn:hover {
    color: #0d0d0d !important;
}

/* Mobile CTA buttons - dark text on gold */
.mobile-cta-btn {
    background: linear-gradient(135deg, #b99d63 0%, #a08550 100%) !important;
    color: #0d0d0d !important;
}

/* Secondary/outline CTA buttons */
.footer-cta-btn.secondary {
    background: transparent !important;
    border-color: #b99d63 !important;
    color: #b99d63 !important;
}

.footer-cta-btn.secondary:hover {
    background: #b99d63 !important;
    color: #0d0d0d !important;
}

/* Nav phone text - dark on light background */
.nav-phone .phone-text .phone-label {
    color: #6b7280 !important;
}

.nav-phone .phone-text .phone-number {
    color: #1a1a1a !important;
}

/* ==========================================================================
   PRICING CARDS - Featured card has dark background
   ========================================================================== */

/* Featured pricing card - Dark background, white text */
.pricing-card-v2.featured,
.pricing-card.featured {
    background: #1a1a1a !important;
}

.pricing-card-v2.featured h3,
.pricing-card.featured h3,
.pricing-card.featured .card-name {
    color: #ffffff !important;
}

.pricing-card-v2.featured .pricing-price,
.pricing-card.featured .price {
    color: #b99d63 !important;
}

.pricing-card-v2.featured .pricing-benefits li,
.pricing-card.featured .features-list li {
    color: #e5e5e5 !important;
}

.pricing-card-v2.featured .pricing-price span,
.pricing-card.featured .price .unit {
    color: #aaaaaa !important;
}

/* Regular pricing cards - Light background, dark text */
.pricing-card-v2:not(.featured),
.pricing-card:not(.featured) {
    background: #ffffff !important;
}

.pricing-card-v2:not(.featured) h3,
.pricing-card:not(.featured) h3,
.pricing-card:not(.featured) .card-name {
    color: #1a1a1a !important;
}

.pricing-card-v2:not(.featured) .pricing-benefits li,
.pricing-card:not(.featured) .features-list li {
    color: #374151 !important;
}

/* ==========================================================================
   CONTACT FORM SECTION - Dark background
   ========================================================================== */

.contact-cta-section,
.cta-section-dark,
.contact-form-wrapper {
    background: #1a1a1a !important;
}

.contact-cta-section h2,
.contact-cta-section h3,
.cta-section-dark h2 {
    color: #ffffff !important;
}

.contact-cta-section p {
    color: #cccccc !important;
}

/* HOTLINE phone number */
.contact-info .hotline-number,
.contact-cta-section .phone-number,
.hotline-phone,
.contact-phone {
    color: #ffffff !important;
}

/* ==========================================================================
   FOOTER PRE-CTA - Dark background
   ========================================================================== */

.footer-pre-cta,
.pre-footer-cta {
    background: #1a1a1a !important;
}

.footer-pre-cta h2,
.footer-pre-cta h3,
.pre-footer-cta h2 {
    color: #ffffff !important;
}

.footer-pre-cta p,
.pre-footer-cta p {
    color: #cccccc !important;
}

/* Footer CTA buttons */
.footer-pre-cta .btn,
.footer-pre-cta .cta-btn,
.pre-footer-cta .btn {
    color: #0d0d0d !important;
}

/* Outline/secondary button in footer */
.footer-pre-cta .btn-outline,
.pre-footer-cta .btn-outline {
    background: transparent !important;
    border-color: #b99d63 !important;
    color: #b99d63 !important;
}

.footer-pre-cta .btn-outline:hover,
.pre-footer-cta .btn-outline:hover {
    background: #b99d63 !important;
    color: #0d0d0d !important;
}

/* ==========================================================================
   PRICING PAGE - Complete Fix
   ========================================================================== */

/* Pricing page - Light background */
.pricing-page,
.pricing-page .page-main,
.pricing-page .pricing-main {
    background: #f8f9fa !important;
}

/* Pricing section header */
.pricing-page .section-header h2,
.pricing-main .section-header h2,
.pricing-tab-content h2 {
    color: #1a1a1a !important;
}

.pricing-page .section-desc,
.pricing-main .section-desc {
    color: #6b7280 !important;
}

/* Pricing tabs */
.pricing-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.pricing-tab {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pricing-tab.active,
.pricing-tab:hover {
    background: #b99d63 !important;
    color: #0d0d0d !important;
    border-color: #b99d63 !important;
}

/* Regular pricing card */
.pricing-card:not(.featured) {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.pricing-card:not(.featured) .pricing-header h3,
.pricing-card:not(.featured) h3 {
    color: #1a1a1a !important;
}

.pricing-card:not(.featured) .pricing-badge {
    background: #e5e7eb !important;
    color: #374151 !important;
}

.pricing-card:not(.featured) .pricing-badge.gold {
    background: #b99d63 !important;
    color: #ffffff !important;
}

.pricing-card:not(.featured) .price-number,
.pricing-card:not(.featured) .pricing-price {
    color: #b99d63 !important;
}

.pricing-card:not(.featured) .price-unit {
    color: #6b7280 !important;
}

.pricing-card:not(.featured) .pricing-features li {
    color: #374151 !important;
    border-color: #f3f4f6 !important;
}

.pricing-card:not(.featured) .pricing-features .check {
    color: #10b981 !important;
}

.pricing-card:not(.featured) .pricing-features .x,
.pricing-card:not(.featured) .pricing-features .disabled {
    color: #9ca3af !important;
}

/* Featured pricing card - DARK */
.pricing-card.featured {
    background: #1a1a1a !important;
    border-color: #b99d63 !important;
}

.pricing-card.featured .pricing-ribbon {
    background: linear-gradient(135deg, #b99d63 0%, #a08550 100%) !important;
    color: #0d0d0d !important;
}

.pricing-card.featured .pricing-header h3,
.pricing-card.featured h3 {
    color: #ffffff !important;
}

.pricing-card.featured .pricing-badge {
    background: #b99d63 !important;
    color: #0d0d0d !important;
}

.pricing-card.featured .price-number,
.pricing-card.featured .pricing-price {
    color: #b99d63 !important;
}

.pricing-card.featured .price-unit {
    color: #aaaaaa !important;
}

.pricing-card.featured .pricing-features li {
    color: #e5e5e5 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.pricing-card.featured .pricing-features .check {
    color: #b99d63 !important;
}

/* Pricing buttons */
.pricing-card .btn-outline {
    background: transparent !important;
    border: 2px solid #b99d63 !important;
    color: #b99d63 !important;
}

.pricing-card .btn-outline:hover {
    background: #b99d63 !important;
    color: #0d0d0d !important;
}

.pricing-card .btn-gold,
.pricing-card.featured .btn-gold {
    background: linear-gradient(135deg, #b99d63 0%, #a08550 100%) !important;
    color: #0d0d0d !important;
}

/* ==========================================================================
   PAGE HEROES - Proper contrast
   ========================================================================== */

/* Page hero with dark background */
.page-hero,
.pricing-hero,
.service-hero {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%) !important;
    position: relative;
}

.page-hero .page-hero-title,
.pricing-hero h1,
.service-hero h1,
.page-hero h1 {
    color: #ffffff !important;
}

.page-hero .page-hero-desc,
.pricing-hero p,
.service-hero p,
.page-hero p {
    color: #cccccc !important;
}

.page-hero .page-badge,
.page-hero .hero-badge {
    background: rgba(185, 157, 99, 0.15) !important;
    color: #b99d63 !important;
}

/* ==========================================================================
   SECTION SPACING & RESPONSIVE
   ========================================================================== */

/* Section spacing */
.section,
.section-v2 {
    padding: 80px 0;
}

@media (max-width: 768px) {
    .section,
    .section-v2 {
        padding: 60px 0;
    }
    
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Pricing cards responsive */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    .pricing-card.featured {
        transform: none !important;
        order: -1;
    }
    
    /* Pricing tabs responsive */
    .pricing-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .pricing-tab {
        width: 100%;
        text-align: center;
    }
    
    /* Section headers responsive */
    .section-title,
    .section-title-v2,
    .section-header h2 {
        font-size: 1.75rem !important;
    }
    
    .section-desc {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .section,
    .section-v2 {
        padding: 40px 0;
    }
    
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .section-title,
    .section-title-v2,
    .section-header h2 {
        font-size: 1.5rem !important;
    }
    
    .pricing-card {
        padding: 1.5rem !important;
    }
}

/* ==========================================================================
   ACCORDION SECTIONS - Light background contrast
   ========================================================================== */

/* Categories accordion on light background */
.categories-section {
    background: #f8f9fa !important;
}

.accordion-item {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.accordion-header {
    color: #1a1a1a !important;
    font-weight: 600;
}

.accordion-header span:first-child {
    color: #1a1a1a !important;
}

.accordion-item.active .accordion-header span:first-child {
    color: #b99d63 !important;
}

.accordion-content p {
    color: #6b7280 !important;
}

.accordion-icon svg {
    color: #6b7280 !important;
}

.accordion-item.active .accordion-icon svg {
    color: #b99d63 !important;
}
/* ==========================================================================
   TYPE-CARD & SERVICE-TYPES on DARK PAGES - Fix Color Conflicts
   ========================================================================== */

/* On dark theme pages, service-types section should be dark too */
.service-detail-page .service-types,
.services-main-page .service-types {
    background: transparent !important;
}

/* Type cards on dark pages - white text on dark card bg */
.service-detail-page .type-card,
.services-main-page .type-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.service-detail-page .type-card:hover,
.services-main-page .type-card:hover {
    background: rgba(185, 157, 99, 0.08) !important;
    border-color: rgba(185, 157, 99, 0.2) !important;
}

/* Type cards on light pages - dark text on white card bg */
.service-landing .service-types-section .service-type-card,
.services-page .service-types .service-type-card {
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
}

.service-landing .service-type-card h3,
.services-page .service-type-card h3 {
    color: #1a1a1a !important;
}

.service-landing .service-type-card p,
.services-page .service-type-card p,
.service-landing .service-type-card li,
.services-page .service-type-card li {
    color: #6b7280 !important;
}

/* Icons on service type cards - always gold */
.service-type-card .stc-icon,
.service-type-card .stc-icon svg,
.type-card .type-icon,
.type-card .type-icon svg {
    color: #b99d63 !important;
}


/* Service detail pages - button fixes */
.service-detail-page .btn-outline {
    background: transparent;
    border-color: #b99d63;
    color: #ffffff !important;
}

.service-detail-page .btn-outline:hover {
    background: #b99d63;
    color: #1a1a1a !important;
}

/* Service landing pages (page-service-*) - buttons on light sections */
.service-landing .btn-outline {
    border-color: #b99d63;
    color: #b99d63 !important;
}

.service-landing .btn-outline:hover {
    background: #b99d63;
    color: #1a1a1a !important;
}


/* ============================================
   FIX: Services Main Page - Process section
   .services-process has WHITE background but 
   global rules force WHITE text -> INVISIBLE
   Specificity 0,2,1 beats 0,1,1
   ============================================ */
.services-main-page .services-process h2,
.services-main-page .services-process h3,
.services-main-page .services-process h4 {
    color: #1a1a1a !important;
}

.services-main-page .services-process p,
.services-main-page .services-process .step-desc,
.services-main-page .services-process .section-desc {
    color: #666666 !important;
}

.services-main-page .services-process .step-icon {
    color: #b99d63 !important;
}

.services-main-page .services-process .step-icon svg {
    color: #b99d63 !important;
    stroke: #b99d63 !important;
}

.services-main-page .services-process .section-title {
    color: #1a1a1a !important;
}

/* ============================================
   FIX: About Page - dark background sections
   .about-page has dark bg from inner-pages.css
   but text colors assume light background
   ============================================ */
.about-page .about-story .section-title,
.about-page .about-story h2,
.about-page .about-story h3,
.about-page .about-story h4 {
    color: #ffffff !important;
}

.about-page .about-story p,
.about-page .about-story .story-text p {
    color: rgba(255,255,255,0.7) !important;
}

.about-page .about-story .highlight-item {
    color: #e0e0e0 !important;
}

.about-page .about-story .highlight-item span {
    color: #b99d63 !important;
}

.about-page .about-services .section-title,
.about-page .about-services h2 {
    color: #ffffff !important;
}

.about-page .about-services .section-desc {
    color: rgba(255,255,255,0.6) !important;
}

.about-page .about-services .service-title {
    color: #1a1a1a !important;
}

.about-page .about-services .service-desc {
    color: #666666 !important;
}