/* ============================================================
   Theme System — Light & Dark Mode for Apps Store
   ============================================================ */

/* ─── Light Mode (Default) ─────────────────────────────── */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f7fbfe;
    --bg-tertiary: #f3f9fd;
    --bg-card: #ffffff;
    --bg-breadcrumbs: #f3f3f3;
    --bg-footer: #ffffff;
    --bg-input: #ffffff;
    --bg-code: #f4f4f4;

    --text-primary: #222222;
    --text-secondary: #444444;
    --text-muted: #6c757d;
    --text-heading: #222222;
    --text-nav: #555555;
    --text-footer: #222222;
    --text-hero-h1: #000000;
    --text-hero-h2: #484848;
    --text-breadcrumb: #3c3c3c;

    --accent: #3498db;
    --accent-hover: #57aae1;
    --accent-light: rgba(52, 152, 219, 0.1);

    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --shadow-sm: 0 2px 15px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 5px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);

    --header-bg-scrolled: #fff;
    --mobile-nav-bg: #fff;

    --hero-bg: transparent;
    --section-bg-alt: #f7fbfe;

    --alert-bg: #fff3cd;
    --alert-border: #ffeeba;
    --alert-text: #856404;

    --badge-bg: #e9ecef;
    --badge-text: #495057;

    --transition-speed: 0.3s;
}

/* ─── Dark Mode ────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #1e293b;
    --bg-card: #1e293b;
    --bg-breadcrumbs: #1e293b;
    --bg-footer: #0f172a;
    --bg-input: #1e293b;
    --bg-code: #1e293b;

    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-heading: #f1f5f9;
    --text-nav: #cbd5e1;
    --text-footer: #94a3b8;
    --text-hero-h1: #f1f5f9;
    --text-hero-h2: #94a3b8;
    --text-breadcrumb: #94a3b8;

    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-light: rgba(129, 140, 248, 0.15);

    --border-color: #334155;
    --border-light: #1e293b;
    --shadow-sm: 0 2px 15px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 5px 30px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);

    --header-bg-scrolled: #0f172a;
    --mobile-nav-bg: #1e293b;

    --hero-bg: transparent;
    --section-bg-alt: #1e293b;

    --alert-bg: rgba(239, 68, 68, 0.1);
    --alert-border: rgba(239, 68, 68, 0.2);
    --alert-text: #fca5a5;

    --badge-bg: #334155;
    --badge-text: #e2e8f0;
}

/* ─── Theme Toggle Button ──────────────────────────────── */
.theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed) ease;
    color: var(--text-nav);
    font-size: 20px;
    margin: 0 8px;
}

.theme-toggle:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: all 0.4s ease;
}

.theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ─── Global Dark Mode Overrides ───────────────────────── */
body {
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-hover);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
}

/* ─── Header ───────────────────────────────────────────── */
#header.header-scrolled {
    background: var(--header-bg-scrolled);
    box-shadow: var(--shadow-sm);
}

#header .logo h1 a,
#header .logo h1 a:hover {
    color: var(--text-heading);
}

.nav-menu a {
    color: var(--text-nav);
}

.nav-menu a:hover,
.nav-menu .active > a,
.nav-menu li:hover > a {
    color: var(--accent);
}

.nav-menu .get-started a {
    background: var(--accent);
    color: #fff;
}

.nav-menu .get-started a:hover {
    background: var(--accent-hover);
}

.nav-menu .drop-down ul {
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
}

.nav-menu .drop-down ul a {
    color: var(--text-primary);
}

.nav-menu .drop-down ul a:hover,
.nav-menu .drop-down ul .active > a {
    color: var(--accent);
}

/* ─── Mobile Nav ───────────────────────────────────────── */
.mobile-nav {
    background: var(--mobile-nav-bg);
}

.mobile-nav a {
    color: var(--text-primary);
}

.mobile-nav a:hover,
.mobile-nav .active > a {
    color: var(--accent);
}

.mobile-nav .get-started a {
    background: var(--accent);
    color: #fff;
}

.mobile-nav-toggle i {
    color: var(--text-primary);
}

/* ─── Hero Section ─────────────────────────────────────── */
#hero h1 {
    color: var(--text-hero-h1);
}

#hero h2 {
    color: var(--text-hero-h2);
}

#hero .btn-get-started {
    color: var(--accent);
    border-color: var(--accent);
}

#hero .btn-get-started:hover {
    background: var(--accent);
    color: #fff;
}

/* ─── Sections ─────────────────────────────────────────── */
.section-bg {
    background-color: var(--section-bg-alt);
}

.section-title h2 {
    color: var(--text-heading);
}

.section-title h2::before,
.section-title h2::after {
    background: var(--accent);
}

/* ─── Clients ──────────────────────────────────────────── */
.clients {
    background: var(--bg-tertiary);
}

/* ─── About ────────────────────────────────────────────── */
.about .content h3 {
    color: var(--text-heading);
}

.about .content ul i {
    color: var(--accent);
}

/* ─── Cards / Boxes ────────────────────────────────────── */
.portfolio-info-box,
.why-us .box,
.services .icon-box,
.pricing .card,
.testimonials .testimonial-item,
/* .portfolio-item — handled by inline or JS */

.team .member,
.skills .progress,
.facts .count-box,
.services-list .service-item,
.services .service-img img,
.faq .accordion-list,
.contact .info-item,
.contact .php-email-form input,
.contact .php-email-form textarea {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* ─── Breadcrumbs ──────────────────────────────────────── */
.breadcrumbs {
    background: var(--bg-breadcrumbs);
}

.breadcrumbs h2 {
    color: var(--text-heading);
}

.breadcrumbs ol li + li::before {
    color: var(--text-breadcrumb);
}

/* ─── Portfolio Details ────────────────────────────────── */
.portfolio-details .portfolio-title {
    color: var(--text-heading);
}

.portfolio-details .portfolio-info h3 {
    color: var(--text-heading);
}

.portfolio-details .portfolio-info ul li {
    color: var(--text-secondary);
}

.portfolio-details .portfolio-details-carousel .owl-dot {
    background-color: var(--border-color) !important;
}

.portfolio-details .portfolio-details-carousel .owl-dot.active {
    background-color: var(--accent) !important;
}

/* ─── Footer ───────────────────────────────────────────── */
#footer {
    background: var(--bg-footer);
}

.site-footer {
    background: var(--bg-footer);
}

.site-footer .footer-desc {
    color: var(--text-muted);
}

.site-footer .footer-title {
    color: var(--text-heading);
}

.site-footer .footer-links a {
    color: var(--text-muted);
}

.site-footer .footer-links a:hover {
    color: var(--accent);
}

.site-footer .footer-links a i {
    color: var(--accent);
}

.site-footer .footer-contact li {
    color: var(--text-muted);
}

.site-footer .footer-contact li a {
    color: var(--text-muted);
}

.site-footer .footer-contact li a:hover {
    color: var(--accent);
}

.site-footer .footer-contact li i {
    color: var(--accent);
}

.site-footer .footer-bottom {
    border-top: 1px solid var(--border-color);
}

.site-footer .footer-copyright {
    color: var(--text-muted);
}

.site-footer .footer-copyright strong {
    color: var(--text-primary);
}

.site-footer .footer-legal a {
    color: var(--text-muted);
}

.site-footer .footer-legal a:hover {
    color: var(--accent);
}

.site-footer .footer-sep {
    color: var(--border-color);
}

.site-footer .footer-brand-text {
    color: var(--text-heading);
}

/* ─── Back to Top ──────────────────────────────────────── */
.back-to-top i {
    background: var(--accent);
    color: #fff;
}

.back-to-top i:hover {
    background: var(--accent-hover);
}

/* ─── Forms ────────────────────────────────────────────── */
input, textarea, select,
.form-control,
.form-control-static {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input:focus, textarea:focus, select:focus,
.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-light) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

/* select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
} */

.input-group-text {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-check-input {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}

.form-check-label {
    color: var(--text-primary) !important;
}

.form-text,
.form-feedback {
    color: var(--text-muted) !important;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--accent) !important;
    background-image: none !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #ef4444 !important;
    background-image: none !important;
}

.custom-select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.custom-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-light) !important;
}

.custom-control-label::before {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}

/* ─── Alerts ───────────────────────────────────────────── */
.alert {
    background-color: var(--alert-bg);
    border-color: var(--alert-border);
    color: var(--alert-text);
}

/* ─── Badges ───────────────────────────────────────────── */
.badge-secondary {
    background-color: var(--badge-bg);
    color: var(--badge-text);
}

/* ─── Buttons ──────────────────────────────────────────── */
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}

.btn-outline-primary:hover {
    background-color: var(--accent);
    color: #fff;
}

/* ─── Tables ───────────────────────────────────────────── */
.table {
    color: var(--text-primary);
}

.table thead th {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-heading);
}

.table td, .table th {
    border-color: var(--border-color);
}

/* ─── Cards ────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.card-header {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-heading);
}

/* ─── Modal ────────────────────────────────────────────── */
.modal-content {
    background: var(--bg-card);
    color: var(--text-primary);
}

.modal-header {
    border-color: var(--border-color);
}

.modal-footer {
    border-color: var(--border-color);
}

/* ─── Dropdown ─────────────────────────────────────────── */
.dropdown-menu {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background: var(--accent-light);
    color: var(--accent);
}

/* ─── List Group ───────────────────────────────────────── */
.list-group-item {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ─── Contact Form ─────────────────────────────────────── */
.contact .info {
    color: var(--text-secondary);
}

.contact .info i {
    color: var(--accent);
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-light) !important;
}

.contact .php-email-form button[type="submit"] {
    background: var(--accent) !important;
}

.contact .php-email-form button[type="submit"]:hover {
    background: var(--accent-hover) !important;
}

/* ─── Pricing Cards ────────────────────────────────────── */
.pricing .card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.pricing .card-title,
.pricing .price {
    color: var(--text-heading);
}

/* ─── Testimonials ─────────────────────────────────────── */
.testimonials .testimonial-item {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.testimonials .testimonial-item p {
    color: var(--text-secondary);
}

.testimonials .testimonial-item h3,
.testimonials .testimonial-item h4 {
    color: var(--text-heading);
}

.testimonials .testimonial-item .testimonial-img {
    border-color: var(--bg-card);
}

.testimonials .testimonial-item .testimonial-quote-icon i {
    color: var(--accent-light);
}

/* ─── Skills ────────────────────────────────────────────── */
.skills .progress {
    background: var(--bg-secondary);
}

.skills .progress-bar {
    background: var(--accent);
}

/* ─── Why Us ────────────────────────────────────────────── */
.why-us .box {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.why-us .box h3,
.why-us .box h4 {
    color: var(--text-heading);
}

/* ─── Team ─────────────────────────────────────────────── */
.team .member {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.team .member h4,
.team .member span {
    color: var(--text-heading);
}

.team .member p {
    color: var(--text-secondary);
}

/* ─── Services ─────────────────────────────────────────── */
.services .icon-box {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.services .icon-box h3,
.services .icon-box h4 {
    color: var(--text-heading);
}

.services .icon-box p {
    color: var(--text-secondary);
}

.services .icon-box .icon {
    background: var(--accent-light);
}

.services .icon-box .icon i {
    color: var(--accent);
}

.services .icon-box:hover .icon {
    background: var(--accent);
}

.services .icon-box:hover .icon i {
    color: #fff;
}

.services .service-img {
    background: var(--bg-card);
}

/* ─── Portfolio ────────────────────────────────────────── */
/* .portfolio .portfolio-item {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.portfolio .portfolio-info {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.portfolio .portfolio-info h3,
.portfolio .portfolio-info h4 {
    color: var(--text-heading);
}

.portfolio .portfolio-info p {
    color: var(--text-secondary);
} */

/* ─── FAQ / Accordion ──────────────────────────────────── */
.faq .accordion-list {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.faq .accordion-list h4,
.faq .accordion-list h5 {
    color: var(--text-heading);
}

.faq .accordion-list p {
    color: var(--text-secondary);
}

/* ─── Page Content ─────────────────────────────────────── */
.page-content,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    color: var(--text-primary);
}

.page-content p,
.page-content li {
    color: var(--text-secondary);
}

.page-content a {
    color: var(--accent);
}

/* ─── About Content ────────────────────────────────────── */
.about .content p {
    color: var(--text-secondary);
}

/* ─── Facts / Count Box ────────────────────────────────── */
.facts .count-box {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.facts .count-box i {
    color: var(--accent);
}

.facts .count-box .count {
    color: var(--text-heading);
}

.facts .count-box p {
    color: var(--text-secondary);
}

/* ─── Transition for smooth theme switch ───────────────── */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0s;
}

body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition-duration: 0.35s !important;
}

/* ─── Logo: show correct logo per theme ────────────────── */
.logo-light-mode {
    display: block;
}

.logo-dark-mode {
    display: none;
}

[data-theme="dark"] .logo-light-mode {
    display: none;
}

[data-theme="dark"] .logo-dark-mode {
    display: block;
}

[data-theme="dark"] .count-box .counter-up {
  color: #ffffff !important;
}
[data-theme="dark"] .count-box p {
  color: #ffffff8c !important;
}

[data-theme="dark"] .services .icon-box .title a, .services .icon-box:hover .title a, .services .icon-box:hover .description {
  color: #fff !important;
}

[data-theme="dark"] .services .icon-box:hover .icon {
  background: #fff !important;
}

[data-theme="dark"] .services .icon-box:hover .icon i {
  color: #3498db !important;
}

[data-theme="dark"] .contact .contact-about h3 {
  font-size: 28px;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
}

[data-theme="dark"] .portfolio #portfolio-flters li {
  color: #ffffff !important;
}