/*===============================================
  RDD Interior Design — Dark Theme
  Developer: Ahmed E. El-Sbaei | https://el-sbaei.com/
  Activated via localStorage toggle button
================================================*/

/* ── Core body ── */
body.dark-theme {
  background-color: #111111;
  color: #d0d0d0;
}

/* ── Loader ── */
body.dark-theme .loader-wrapper {
  background: #111;
}
body.dark-theme .loder-section {
  background: #111;
}

/* ── Navbar ── */
body.dark-theme .dex_nav_manu,
body.dark-theme .sticky.dex_nav_manu {
  background-color: #000000 !important;
  border-bottom-color: #333 !important;
}
body.dark-theme .dex_menu ul .sub-menu {
  background: #1a1a1a;
  border-top-color: #cda274;
}
body.dark-theme .dex_menu ul .sub-menu li a {
  color: #ccc;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.dark-theme .dex_menu ul .sub-menu li:hover > a {
  background: #cda274;
  color: #fff !important;
}

/* Mobile menu */
body.dark-theme .mobile-menu-area {
  background: #000;
}

/* ── Breadcrumb — keep bg image, add dark blur overlay ── */
body.dark-theme .breatcumb-area {
  position: relative;
  overflow: hidden;
}
body.dark-theme .breatcumb-area::before {
  content: "";
  position: absolute;
  inset: -10px; /* slight bleed to hide blur edge artefacts */
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 0;
}
body.dark-theme .breatcumb-area > * {
  position: relative;
  z-index: 1;
}

/* ── Feature Area ── */
body.dark-theme .feature-area,
body.dark-theme .feature-area.style-two {
  background: #000000 !important;
}
body.dark-theme .RDD-sinlge-feature-box {
  background: #1a1a1a;
  border-color: #333;
}
body.dark-theme .RDD-sinlge-feature-box:hover,
body.dark-theme .RDD-sinlge-feature-box.active {
  background: #272727;
}
body.dark-theme .RDD-feature-title h2 {
  color: #ffffff;
}
body.dark-theme .RDD-feature-title p {
  color: #aaa;
}

/* ── About Area — has bg image in original CSS ── */
body.dark-theme .about-area,
body.dark-theme .about-area.style-two,
body.dark-theme .about-area.style-three {
  background: #111111 !important;
}
body.dark-theme .RDD-section-title h1,
body.dark-theme .RDD-section-title h2,
body.dark-theme .RDD-section-title.dark h1,
body.dark-theme .RDD-section-title.dark h2,
body.dark-theme .RDD-section-title.white h1 {
  color: #ffffff;
}
body.dark-theme .RDD-section-title h4,
body.dark-theme .RDD-section-title.dark h4,
body.dark-theme .RDD-section-title.white h4 {
  color: #cda274;
}
body.dark-theme .about-text,
body.dark-theme p.about-text {
  color: #aaa;
}
body.dark-theme .about-icon-box .icon p,
body.dark-theme .about-icon-title p {
  color: #ccc;
}
body.dark-theme .about-quote-box {
  background: #222;
  border-left-color: #cda274;
}
body.dark-theme .about-quote-box p {
  color: #bbb;
}
body.dark-theme .poeple-content h3 {
  color: #fff;
}

body.dark-theme .about-area .dreamit-section-title h1,
body.dark-theme .why-choose-us-area .dreamit-section-title h1,
body.dark-theme .process-area .dreamit-section-title h1,
body.dark-theme .testimonial-area .RDD-section-title h2,
body.dark-theme .team-area .RDD-section-title h2,
body.dark-theme .blog_area .RDD-section-title h2 {
  color: #ffffff;
}

/* ── Service Area ── */
body.dark-theme .service-area,
body.dark-theme .service-area.service-page-feature {
  background: #000000 !important;
}
body.dark-theme .single-service-box {
  background: #1a1a1a;
}
body.dark-theme .service-title h2 a {
  color: #fff;
}
body.dark-theme .service-title p {
  color: #aaa;
}
body.dark-theme .service-title p span {
  color: #cda274;
}

/* Service details */
body.dark-theme .service-details-area {
  background: #111 !important;
}
body.dark-theme .service-details-area h2,
body.dark-theme .service-details-area h3,
body.dark-theme .service-details-area h4 {
  color: #fff;
}
body.dark-theme .service-details-area p {
  color: #aaa;
}

/* ── Skill Area ── */
body.dark-theme .skill-area,
body.dark-theme .skill-area.style-two {
  background: #111111 !important;
}
body.dark-theme .single-skill-box {
  background: #1a1a1a;
}
body.dark-theme .prosses-bar {
  color: #ddd;
}
body.dark-theme .barfiller {
  background: #3a3a3a;
}
body.dark-theme .barfiller .tip {
  color: #fff;
}

/* ── Project / Portfolio / Blog list Area ── */
body.dark-theme .ttm-row.bottom_zero_padding-section {
  background: #000000 !important;
}
body.dark-theme .blog-list-area,
body.dark-theme .project-area {
  background: #111 !important;
}
body.dark-theme .why-choose-us-area {
  background: #000000 !important;
}
body.dark-theme .single_blog {
  background: #1a1a1a;
}
body.dark-theme .single_blog_content {
  background: #1a1a1a;
}
body.dark-theme .blog_page_title h4 a,
body.dark-theme .blog_page_title h3 a {
  color: #fff;
}
body.dark-theme .blog_page_title h4 a:hover,
body.dark-theme .blog_page_title h3 a:hover {
  color: #cda274;
}
body.dark-theme .post-categories a,
body.dark-theme .post-categories span {
  color: #aaa;
}
body.dark-theme .dex_blog_meta a,
body.dark-theme .meta_blog_bottom a {
  color: #aaa;
}

/* Blog details */
body.dark-theme .blog-list-area {
  background: #111 !important;
}
body.dark-theme .blog-details-content h2,
body.dark-theme .blog-details-content h3,
body.dark-theme .blog-details-content h4 {
  color: #fff;
}
body.dark-theme .blog-details-content p {
  color: #bbb;
}

/* ── Testimonial Area — has bg image in original CSS ── */
body.dark-theme .testimonial-area,
body.dark-theme .testimonial-area.style-two {
  background: #111111 !important;
}
body.dark-theme .RDD-testimonial-single-box {
  background: #1e1e1e;
}
body.dark-theme .testimonial-title h3 {
  color: #fff;
}
body.dark-theme .testimonial-title p {
  color: #aaa;
}
body.dark-theme .testimonial-text p {
  color: #ccc;
}

/* ── Team Area ── */
body.dark-theme .team-area,
body.dark-theme .team-area.style-two {
  background: #000000 !important;
}
body.dark-theme .team-content {
  background: #1a1a1a;
}
body.dark-theme .team-title h3 a {
  color: #fff;
}
body.dark-theme .team-text p {
  color: #aaa;
}
body.dark-theme .team-details-area {
  background: #111 !important;
}
body.dark-theme .team-details-area h2,
body.dark-theme .team-details-area h3,
body.dark-theme .team-details-area h4 {
  color: #fff;
}
body.dark-theme .team-details-area p {
  color: #aaa;
}

/* ── Counter Area — has bg image in original CSS ── */
body.dark-theme .counter-area {
  background: #111111 !important;
}
body.dark-theme .RDD-single-counter-box {
  background: #1e1e1e;
}
body.dark-theme .counter-title h4 {
  color: #ccc;
}
body.dark-theme .counter-text h1 {
  color: #fff;
}
body.dark-theme .counter-text span {
  color: #cda274;
}
body.dark-theme .counter-text {
  color: #ddd;
}

/* ── Contact Areas ── */
body.dark-theme .contact-form-area,
body.dark-theme .contact-form-area.style-two {
  background: #000000 !important;
}
body.dark-theme .contact-service-area {
  background: #111 !important;
}
body.dark-theme .contact-form-box,
body.dark-theme .style-two .contact-form-box {
  background: #1a1a1a !important;
}
body.dark-theme .RDD-contact-title h5 {
  color: #fff;
}
body.dark-theme .faq-title h3 {
  color: #fff;
}
body.dark-theme .faq-title p {
  color: #aaa;
}
body.dark-theme .faq-contact-box h3,
body.dark-theme .faq-contact-box1 h3 {
  color: #fff;
}
body.dark-theme .faq-contact-box p,
body.dark-theme .faq-contact-box1 p {
  color: #aaa;
}
body.dark-theme .contact-form-title h3 {
  color: #fff;
}
body.dark-theme .from-box input,
body.dark-theme .from-box textarea,
body.dark-theme .form-box select {
  background: #222;
  color: #ddd;
  border-color: #444;
}
body.dark-theme .from-box input::placeholder,
body.dark-theme .from-box textarea::placeholder {
  color: #666;
}

/* ── Process Area ── */
body.dark-theme .process-area,
body.dark-theme .process-area.style-three {
  background: #000000 !important;
}
body.dark-theme .process-icon-box,
body.dark-theme .process-counter-box {
  background: #1a1a1a;
}
body.dark-theme .choose-us-title h4,
body.dark-theme .process-title h3 {
  color: #fff;
}
body.dark-theme .choose-us-title p,
body.dark-theme .process-text p {
  color: #aaa;
}
body.dark-theme .process-left h3 {
  color: #fff;
}

/* ── Blog area ── */
body.dark-theme .blog_area,
body.dark-theme .blog_area.style-two {
  background: #111111 !important;
}

/* ── Brand/Clients area ── */
body.dark-theme .brand-area,
body.dark-theme .brand-area.style-two,
body.dark-theme .brand-area.style-3 {
  background: #111111 !important;
}

/* ── Call to action — has bg image in original CSS ── */
body.dark-theme .call-do-action-area {
  background: #1a1a1a !important;
}
body.dark-theme .call-do-action-area h2,
body.dark-theme .call-do-action-area h3 {
  color: #fff;
}
body.dark-theme .call-do-action-area p {
  color: #bbb;
}

/* ── Footer — has bg image in original CSS ── */
body.dark-theme .footer-middle {
  background: #0d0d0d !important;
}
body.dark-theme .widget-title {
  color: #fff;
}
body.dark-theme .company-info-desc p {
  color: #aaa;
}
body.dark-theme .menu-quick-link-content ul li a,
body.dark-theme .footer-recent-post ul li a {
  color: #aaa;
}
body.dark-theme .menu-quick-link-content ul li a:hover,
body.dark-theme .footer-recent-post ul li a:hover {
  color: #cda274;
}
body.dark-theme .footer-socail-info p {
  color: #aaa;
}
body.dark-theme .footer-socail-info span {
  color: #ccc;
}
body.dark-theme .footer-bottom {
  border-top-color: #333;
}
body.dark-theme .footer-bottom-content-copy p,
body.dark-theme .footer-bottom-content-copy a {
  color: #888;
}
body.dark-theme .footer-bottom-menu a {
  color: #888;
}

/* ── Sidebar cart widget ── */
body.dark-theme .xs-sidebar-widget {
  background: #1a1a1a;
}
body.dark-theme .contact-info h2 {
  color: #fff;
}
body.dark-theme .contact-info li {
  color: #aaa;
}

/* ── Search popup ── */
body.dark-theme .search-popup {
  background: rgba(0, 0, 0, 0.97);
}
body.dark-theme .search-popup input {
  background: #222;
  color: #ddd;
  border-color: #444;
}

/* ── Section title h1/h4 general ── */
body.dark-theme .section-title h1 {
  color: #fff;
}
body.dark-theme .section-title p {
  color: #aaa;
}

/* ── Project details ── */
body.dark-theme .project-area {
  background: #111 !important;
}
body.dark-theme .project-details h2,
body.dark-theme .project-details h3 {
  color: #fff;
}
body.dark-theme .project-details p {
  color: #aaa;
}

/* ── Accordion / FAQ ── */
body.dark-theme .accordion li a {
  color: #ddd;
  background: #1a1a1a;
}
body.dark-theme .accordion li p {
  color: #aaa;
  background: #111;
}

/* ── Generic white/light backgrounds throughout ── */
body.dark-theme .bg-white,
body.dark-theme [style*="background:#fff"],
body.dark-theme [style*="background: #fff"] {
  background: #1a1a1a !important;
}

/* ── Theme Toggle Button ── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
  flex-shrink: 0;
  vertical-align: middle;
}
.theme-toggle-btn:hover {
  background: #cda274;
  border-color: #cda274;
  color: #fff;
}
body.dark-theme .theme-toggle-btn:hover {
  background: #cda274;
  border-color: #cda274;
}

/* sun icon in dark mode, moon in light mode */
.theme-toggle-btn .icon-sun {
  display: none;
}
.theme-toggle-btn .icon-moon {
  display: inline;
}
body.dark-theme .theme-toggle-btn .icon-sun {
  display: inline;
}
body.dark-theme .theme-toggle-btn .icon-moon {
  display: none;
}

/* ── Desktop: toggle sits right of "Get a Quote" inside .header-button ── */
.header-button {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
}

/* ── Mobile toggle button (inside mobile-menu-area) ── */
.mobile-theme-toggle {
  position: absolute;
  display: none; /* shown via responsive rule below */
}

/* Show mobile toggle and hide desktop toggle at mobile breakpoints */
@media (max-width: 991px) {
  .mobile-theme-toggle {
    display: inline-flex;
  }
}

/* mobile-menu-area needs position:relative to anchor the absolute toggle */
.mobile-menu-area {
  position: relative;
}