/* ==========================================================================
   Interior Knowledge - Custom Luxury Styling & Animations
   Established 2009 | Bangladesh
   ========================================================================== */

/* Smooth Scrolling */
html, body {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #2D3139;
  background-color: #0F1216;
  overflow-x: hidden;
  width: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0F1216;
}
::-webkit-scrollbar-thumb {
  background: #2A303C;
  border-radius: 5px;
  border: 2px solid #0F1216;
}
::-webkit-scrollbar-thumb:hover {
  background: #C5A880;
}

/* Font Families */
.font-serif-luxury {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-sans-clean {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Gold Gradient Utilities */
.text-gold-gradient {
  background: linear-gradient(135deg, #DFCA9E 0%, #C5A880 50%, #9E7D4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #D5BF94 0%, #C5A880 50%, #A98553 100%);
}

.bg-gold-gradient-hover:hover {
  background: linear-gradient(135deg, #E2CDA4 0%, #D4B68D 50%, #BA945F 100%);
}

.border-gold-subtle {
  border-color: rgba(197, 168, 128, 0.25);
}

.border-gold-gradient {
  border-image: linear-gradient(135deg, #C5A880, rgba(197, 168, 128, 0.1)) 1;
}

/* Luxury Glow & Shadows */
.shadow-gold-glow {
  box-shadow: 0 10px 30px -10px rgba(197, 168, 128, 0.35);
}

.shadow-gold-subtle {
  box-shadow: 0 4px 20px -2px rgba(197, 168, 128, 0.15);
}

.shadow-luxury-card {
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
}

/* Glassmorphism Styles */
.glass-dark {
  background: rgba(15, 18, 22, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card-dark {
  background: rgba(24, 28, 34, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-card-dark:hover {
  border-color: rgba(197, 168, 128, 0.4);
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(229, 231, 235, 0.8);
}

/* Image Hover Zoom & Overlay Effects */
.portfolio-card-img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.portfolio-card:hover .portfolio-card-img {
  transform: scale(1.08);
}

.portfolio-overlay {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Service Card Hover Accent */
.service-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(197, 168, 128, 0.4);
}

/* Subtle Shimmer Animation */
@keyframes goldShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-badge {
  background: linear-gradient(90deg, rgba(197, 168, 128, 0.1) 0%, rgba(197, 168, 128, 0.3) 50%, rgba(197, 168, 128, 0.1) 100%);
  background-size: 200% 100%;
  animation: goldShimmer 4s infinite linear;
}

/* Pulse Glow for Floating WhatsApp */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
}

.whatsapp-pulse {
  animation: pulseGlow 2.5s infinite;
}

/* Lightbox Modal Animation */
.lightbox-modal {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-content {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Scroll Reveal Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Grid Aspect Ratio Ratios */
.aspect-masonry-tall {
  aspect-ratio: 3 / 4;
}

.aspect-masonry-wide {
  aspect-ratio: 4 / 3;
}

.aspect-masonry-square {
  aspect-ratio: 1 / 1;
}


/* ==========================================================================
   INTERIOR KNOWLEDGE — LUXURY WHITE & BLACK VERSION DUAL THEME ENGINE
   ========================================================================== */

/* 1. Theme Toggle Round Button */
.theme-toggle-btn {
  background-color: #FFFFFF !important;
  color: #0A0C0F !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-toggle-btn:hover {
  background-color: #F8FAFC !important;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* In White Version: The button turns BLACK as requested */
html.theme-white .theme-toggle-btn {
  background-color: #0A0C0F !important;
  color: #FFFFFF !important;
  border: 2px solid #1E293B !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

html.theme-white .theme-toggle-btn:hover {
  background-color: #000000 !important;
  border-color: #334155 !important;
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3) !important;
}

/* 2. Global Document Styling in White Version */
html.theme-white,
html.theme-white body {
  background-color: #F8FAFC !important;
  color: #1E293B !important;
}

/* Custom Scrollbar in White Version */
html.theme-white ::-webkit-scrollbar-track {
  background: #F1F5F9 !important;
}
html.theme-white ::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border: 2px solid #F1F5F9 !important;
}
html.theme-white ::-webkit-scrollbar-thumb:hover {
  background: #9E743A !important;
}

/* 3. Surface & Section Backgrounds in White Version */
html.theme-white .bg-charcoal-950 {
  background-color: #F8FAFC !important;
}

html.theme-white .bg-charcoal-900 {
  background-color: #FFFFFF !important;
}

html.theme-white .bg-charcoal-850 {
  background-color: #F1F5F9 !important;
}

html.theme-white .bg-charcoal-800 {
  background-color: #E2E8F0 !important;
}

html.theme-white .bg-charcoal-700 {
  background-color: #CBD5E1 !important;
}

/* 4. Glassmorphism & Header in White Version */
html.theme-white .glass-dark,
html.theme-white header#main-navbar,
html.theme-white header.sticky,
html.theme-white header.w-full {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 25px -4px rgba(0, 0, 0, 0.06) !important;
}

html.theme-white .glass-card-dark {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05) !important;
}

html.theme-white .glass-card-dark:hover {
  border-color: rgba(180, 130, 60, 0.4) !important;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.08) !important;
}

/* 5. Top Announcement Header Bar */
html.theme-white .top-bar-notice,
html.theme-white div[class*="bg-charcoal-950 border-b border-white"],
html.theme-white div[class*="bg-charcoal-900 border-b border-white"] {
  background-color: #F1F5F9 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

html.theme-white div[class*="border-b border-white"] .text-gray-200,
html.theme-white div[class*="border-b border-white"] .text-gray-300 {
  color: #1E293B !important;
}

/* 6. Text Colors & Contrast Optimization in White Version */
html.theme-white .text-white {
  color: #0F172A !important;
}

html.theme-white .text-gray-100,
html.theme-white .text-gray-200 {
  color: #1E293B !important;
}

html.theme-white .text-gray-300 {
  color: #334155 !important;
}

html.theme-white .text-gray-400 {
  color: #64748B !important;
}

html.theme-white .text-gray-500 {
  color: #64748B !important;
}

/* WCAG AAA Accessible Gold in White Mode */
html.theme-white .text-gold-300 {
  color: #8A6028 !important;
}

html.theme-white .text-gold-400 {
  color: #9E743A !important;
}

html.theme-white .text-gold-500 {
  color: #A3793D !important;
}

/* 7. Borders in White Version */
html.theme-white .border-white\/5 {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-white .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.10) !important;
}

html.theme-white .border-white\/15,
html.theme-white .border-white\/20 {
  border-color: rgba(0, 0, 0, 0.14) !important;
}

html.theme-white .border-charcoal-800 {
  border-color: #E2E8F0 !important;
}

/* 8. Hero Section Overlays & Elements in White Version */
html.theme-white #hero .bg-gradient-to-t {
  background: linear-gradient(to top, #F8FAFC 0%, rgba(248, 250, 252, 0.88) 40%, rgba(248, 250, 252, 0.45) 100%) !important;
}

html.theme-white #hero .bg-gradient-to-r {
  background: linear-gradient(to right, rgba(248, 250, 252, 0.96) 0%, rgba(248, 250, 252, 0.8) 55%, rgba(248, 250, 252, 0.25) 100%) !important;
}

html.theme-white #hero-badge-container {
  background: rgba(180, 130, 60, 0.12) !important;
  border-color: rgba(180, 130, 60, 0.35) !important;
}

html.theme-white #hero-card-container {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.12) !important;
}

/* 9. Cards, Lists & Accordions in White Version */
html.theme-white .service-card,
html.theme-white .process-card,
html.theme-white .testimonial-card,
html.theme-white .faq-item,
html.theme-white .portfolio-card {
  background-color: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

html.theme-white .service-card:hover,
html.theme-white .portfolio-card:hover {
  border-color: rgba(180, 130, 60, 0.4) !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.09) !important;
}

/* 10. Form Controls & Consultation Form in White Version */
html.theme-white input:not([type="checkbox"]):not([type="radio"]),
html.theme-white select,
html.theme-white textarea {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

html.theme-white input::placeholder,
html.theme-white textarea::placeholder {
  color: #94A3B8 !important;
}

html.theme-white input:focus,
html.theme-white select:focus,
html.theme-white textarea:focus {
  border-color: #C5A880 !important;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.2) !important;
}

/* 11. BOQ Cost Calculator Specifics in White Version */
html.theme-white .boq-type-btn,
html.theme-white .boq-tier-btn {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #1E293B !important;
}

html.theme-white .boq-type-btn.active,
html.theme-white .boq-tier-btn.active {
  background-color: rgba(197, 168, 128, 0.12) !important;
  border-color: #C5A880 !important;
  box-shadow: 0 4px 16px rgba(197, 168, 128, 0.2) !important;
}

html.theme-white #inclusions-container label {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html.theme-white #inclusions-container label:hover {
  border-color: rgba(180, 130, 60, 0.4) !important;
}

html.theme-white #unlock-modal > div {
  background-color: #FFFFFF !important;
  border-color: rgba(180, 130, 60, 0.35) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.2) !important;
  color: #0F172A !important;
}

/* 12. Blog Specifics in White Version */
html.theme-white .blog-card,
html.theme-white .article-card {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html.theme-white #article-modal > div {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

/* 13. Mobile Drawer in White Version */
html.theme-white #mobile-menu-drawer {
  background-color: #FFFFFF !important;
  border-left: 1px solid #E2E8F0 !important;
}

html.theme-white .mobile-nav-link {
  color: #1E293B !important;
  border-bottom-color: #F1F5F9 !important;
}

html.theme-white .mobile-nav-link:hover {
  color: #9E743A !important;
}



/* --- ADDITIONAL REFINEMENTS FOR LUXURY WHITE VERSION --- */

/* 1. Portfolio Filters in White Version */
html.theme-white .filter-btn:not(.active),
html.theme-white button[data-filter]:not(.active),
html.theme-white .blog-filter-btn:not(.active) {
  background-color: #FFFFFF !important;
  color: #475569 !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.theme-white .filter-btn:not(.active):hover,
html.theme-white button[data-filter]:not(.active):hover,
html.theme-white .blog-filter-btn:not(.active):hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #C5A880 !important;
}

/* Active filter retains luxury gold with dark text */
html.theme-white .filter-btn.active,
html.theme-white button[data-filter].active,
html.theme-white .blog-filter-btn.active {
  background-color: #C5A880 !important;
  color: #0A0C0F !important;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.3) !important;
}

/* 2. Preserve White Text Inside Portfolio Photo Overlays */
html.theme-white .portfolio-card .portfolio-overlay,
html.theme-white .portfolio-card [class*="bg-gradient-to-t"] {
  background: linear-gradient(to top, rgba(10, 12, 15, 0.95) 0%, rgba(10, 12, 15, 0.7) 45%, rgba(10, 12, 15, 0.1) 80%, transparent 100%) !important;
}

html.theme-white .portfolio-card h4,
html.theme-white .portfolio-card .portfolio-title,
html.theme-white .portfolio-card .absolute.bottom-0 h4 {
  color: #FFFFFF !important;
}

html.theme-white .portfolio-card .portfolio-cat,
html.theme-white .portfolio-card span.portfolio-cat {
  color: #D5BF94 !important;
}

html.theme-white .portfolio-card p,
html.theme-white .portfolio-card .absolute.bottom-0 p,
html.theme-white .portfolio-card p.text-gray-300 {
  color: rgba(255, 255, 255, 0.85) !important;
}

html.theme-white .portfolio-card .absolute.bottom-0 .text-gray-400 {
  color: rgba(255, 255, 255, 0.75) !important;
}

html.theme-white .portfolio-card .absolute.bottom-0 .border-white\/10 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 3. Get BOQ Estimate Banner Before Our Process */
html.theme-white section .from-charcoal-900.via-charcoal-850.to-charcoal-900 {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF8F5 50%, #FFFFFF 100%) !important;
  border: 1.5px solid rgba(197, 168, 128, 0.45) !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.07) !important;
}

html.theme-white section .from-charcoal-900.via-charcoal-850.to-charcoal-900 h3 {
  color: #0F172A !important;
}

html.theme-white section .from-charcoal-900.via-charcoal-850.to-charcoal-900 p {
  color: #475569 !important;
}

/* 4. About 17-Year Consistency Promise Box */
html.theme-white #about .bg-charcoal-800,
html.theme-white #about [class*="bg-charcoal-800"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

html.theme-white #about .bg-charcoal-800 h4,
html.theme-white #about .bg-charcoal-800 span {
  color: #0F172A !important;
}

html.theme-white #about .bg-charcoal-800 p {
  color: #475569 !important;
}

/* 5. Footer & Subfooter in White Version */
html.theme-white footer {
  background-color: #F1F5F9 !important;
  border-top: 1px solid #E2E8F0 !important;
}

html.theme-white footer .text-white {
  color: #0F172A !important;
}

html.theme-white footer .text-gray-400,
html.theme-white footer .text-gray-500 {
  color: #64748B !important;
}

html.theme-white footer a.text-gray-400:hover {
  color: #9E743A !important;
}

html.theme-white footer .bg-charcoal-950 {
  background-color: #E2E8F0 !important;
  border-top: 1px solid #CBD5E1 !important;
}

html.theme-white footer .bg-charcoal-950 p {
  color: #64748B !important;
}

/* 6. Mobile Drawer Styling in White Version */
html.theme-white #mobile-menu-drawer {
  background-color: #FFFFFF !important;
  border-left: 1px solid #E2E8F0 !important;
}

html.theme-white #mobile-menu-drawer .text-white {
  color: #0F172A !important;
}

html.theme-white #mobile-menu-drawer .text-gray-200,
html.theme-white #mobile-menu-drawer .text-gray-300,
html.theme-white #mobile-menu-drawer .text-gray-400 {
  color: #334155 !important;
}

html.theme-white #mobile-menu-drawer .border-white\/5,
html.theme-white #mobile-menu-drawer .border-white\/10 {
  border-color: #F1F5F9 !important;
}



/* --- EXTRA REFINEMENTS FOR BOQ AND BLOG PAGES IN WHITE VERSION --- */
html.theme-white section[class*="from-charcoal-900"],
html.theme-white .bg-gradient-to-b.from-charcoal-900 {
  background: linear-gradient(to bottom, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

html.theme-white .glass-card {
  background-color: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05) !important;
}

html.theme-white #project-types .boq-type-btn {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
}

html.theme-white #project-types .boq-type-btn.active {
  background-color: rgba(197, 168, 128, 0.15) !important;
  border-color: #C5A880 !important;
  box-shadow: 0 4px 16px rgba(197, 168, 128, 0.25) !important;
}

html.theme-white #finish-tiers button {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
}

html.theme-white #finish-tiers button.active {
  background-color: rgba(197, 168, 128, 0.15) !important;
  border-color: #C5A880 !important;
}

html.theme-white #boq-right-card {
  background-color: #FFFFFF !important;
  border: 1.5px solid rgba(197, 168, 128, 0.45) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.08) !important;
}

html.theme-white #boq-right-card h4,
html.theme-white #boq-right-card span.text-white {
  color: #0F172A !important;
}

html.theme-white #blog-search {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

/* 7. Hero Section CTAs in White Version */
html.theme-white #hero a[href="#portfolio"] {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

html.theme-white #hero a[href="#portfolio"]:hover {
  border-color: #C5A880 !important;
  color: #9E743A !important;
}

html.theme-white #hero a[href="boq.html"] {
  background-color: rgba(197, 168, 128, 0.15) !important;
  border: 1.5px solid rgba(197, 168, 128, 0.45) !important;
  color: #8A6028 !important;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.15) !important;
}

html.theme-white #hero a[href="boq.html"]:hover {
  background-color: #C5A880 !important;
  color: #0A0C0F !important;
  border-color: #C5A880 !important;
}

html.theme-white #hero a[href="boq.html"] i {
  color: #8A6028 !important;
}

html.theme-white #hero a[href="boq.html"]:hover i {
  color: #0A0C0F !important;
}

/* 8. FAQ Section in White Version */
html.theme-white #faq {
  background-color: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
}

html.theme-white #faq .faq-item {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

html.theme-white #faq .faq-item h3 {
  color: #0F172A !important;
}

html.theme-white #faq .faq-content p,
html.theme-white #faq .faq-content ul,
html.theme-white #faq .faq-content li {
  color: #334155 !important;
}

html.theme-white #faq .faq-content .bg-gold-500\/10 {
  background-color: rgba(197, 168, 128, 0.12) !important;
  border-color: rgba(197, 168, 128, 0.35) !important;
  color: #78521F !important;
}

html.theme-white #faq .faq-icon {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #9E743A !important;
}