/* =====================================================================
   Light / dark theme
   The theme is stamped on <html data-theme="light|dark"> by the inline
   script in includes/header.php (saved choice, else the OS preference)
   and flipped by the header toggle (js/theme-toggle.js).
   style.css hardcodes most colours, so dark mode overrides the
   components the current markup actually uses rather than every legacy
   template rule.
   ===================================================================== */

/* ---- Toggle button (both themes) ---- */
.theme-toggle {
	position: relative;
	z-index: 3;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	margin-left: 14px;
	border-radius: 50%;
	border: 1px solid rgba(37, 99, 235, 0.18);
	background: rgba(255, 255, 255, 0.85);
	color: #1f2937;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
	transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.3s ease;
}

.theme-toggle:hover {
	transform: rotate(-12deg) scale(1.06);
}

.theme-toggle:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 3px;
}

.theme-toggle svg {
	position: absolute;
	width: 20px;
	height: 20px;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.theme-toggle .icon-moon {
	transform: translateY(0) rotate(0);
	opacity: 1;
}

.theme-toggle .icon-sun {
	transform: translateY(26px) rotate(90deg);
	opacity: 0;
}

[data-theme="dark"] .theme-toggle .icon-moon {
	transform: translateY(-26px) rotate(-90deg);
	opacity: 0;
}

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

/* Keep the menu + toggle grouped on the right next to each other. */
.navbar .nav-menu {
	margin-left: auto;
}

@media (max-width: 992px) {
	.theme-toggle {
		margin-left: auto;
		margin-right: 12px;
	}
}

/* Smooth cross-fade only while switching (class added by the toggle), so
   page load and hover transitions aren't slowed down. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
	transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, fill 0.45s ease !important;
}

/* =====================================================================
   DARK THEME
   ===================================================================== */
html[data-theme="dark"] {
	color-scheme: dark;
	--ink-900: #f1f5f9;
	--ink-700: #e2e8f0;
	--ink-500: #94a3b8;
	--surface-alt: #0d1528;
	--shadow-soft: 0 15px 45px rgba(0, 0, 0, 0.35);

	--dk-bg: #080e1c;
	--dk-surface: #111a2e;
	--dk-surface-2: #16213b;
	--dk-border: rgba(148, 163, 184, 0.14);
	--dk-text: #e5e7eb;
	--dk-muted: #a3adbf;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page-wrapper {
	background: var(--dk-bg);
	color: var(--dk-muted);
}

/* Generic typography: beats the one-class rules like `.mv-card h3`. */
html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ink-900);
}

/* Sections that are already light-on-dark in both themes keep their own
   text colours. */
html[data-theme="dark"] :is(p, li, label, .text):not(:is(
	.premium-breadcrumb, .services-hero, .footer-cta, .premium-footer,
	.chatbot-header, .final-cta, .why-seeku-cta, .coming-soon-card,
	.coming-soon-section
) *) {
	color: var(--dk-muted);
}

html[data-theme="dark"] .preloader {
	background-color: var(--dk-bg);
}

/* ---- Header ---- */
html[data-theme="dark"] .site-header::before {
	background: rgba(8, 14, 28, 0.72);
}

html[data-theme="dark"] .site-header.scrolled::before {
	background: rgba(8, 14, 28, 0.94);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .nav-menu ul li a {
	color: var(--ink-700);
}

html[data-theme="dark"] .nav-menu ul li a:hover,
html[data-theme="dark"] .nav-menu ul li a.active {
	color: #60a5fa;
}

/* Dark lettering in the logo disappears on dark backgrounds, so the
   (tightly cropped) logo sits on a white badge in dark mode — and always
   in the footer, whose background is dark in both themes. */
html[data-theme="dark"] .site-logo,
.premium-footer .site-logo {
	box-sizing: content-box;
	padding: 5px 10px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .theme-toggle {
	background: rgba(17, 26, 46, 0.9);
	border-color: rgba(148, 163, 184, 0.25);
	color: #facc15;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
	html[data-theme="dark"] .nav-menu {
		background: rgba(8, 14, 28, 0.98);
	}
}

/* ---- Section backgrounds ---- */
html[data-theme="dark"] :is(
	.home-hero, .about-hero, .portfolio-hero, .ppd-hero, .legal-hero,
	.premium-services-white, .premium-contact, .premium-map-section,
	.luxury-products, .ppd-features, .ppd-overview, .legal-section,
	.portfolio-featured, .main-footer
) {
	background: var(--dk-bg);
}

html[data-theme="dark"] .home-hero {
	background: radial-gradient(ellipse at 70% 0%, rgba(37, 99, 235, 0.16), transparent 60%), var(--dk-bg);
}

html[data-theme="dark"] .ppd-hero,
html[data-theme="dark"] .portfolio-hero,
html[data-theme="dark"] .about-hero {
	background: linear-gradient(180deg, #0d1528 0%, var(--dk-bg) 100%);
}

/* ---- Cards & surfaces ---- */
html[data-theme="dark"] :is(
	.info-card, .process-step, .industry-chip, .faq-item, .value-card,
	.premium-card-white, .mv-card, .map-contact-card, .luxury-card,
	.ppd-feature-card, .ppd-hero-visual-panel, .legal-content,
	.spotlight-slide, .tech-network-panel, .stats-showcase .count-box,
	.contact-form-panel, .portfolio-card, .service-modal, .chatbot-window,
	.mv-top-graphics
) {
	background: var(--dk-surface);
	border-color: var(--dk-border);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .mv-card.highlight {
	background: linear-gradient(160deg, #172554, var(--dk-surface));
}

html[data-theme="dark"] :is(
	.ppd-feature-chip, .ppd-orbit-chip, .spotlight-feature-chip,
	.category-pill, .ppd-category-badge, .luxury-badge, .spotlight-nav-btn,
	.spotlight-content .luxury-tag
) {
	background: var(--dk-surface-2);
	border-color: var(--dk-border);
	color: var(--dk-text);
}

html[data-theme="dark"] .tilt-3d::after {
	background: radial-gradient(circle at var(--mx) var(--my), rgba(96, 165, 250, 0.35), transparent 45%);
	mix-blend-mode: screen;
}

/* ---- Buttons & links ---- */
html[data-theme="dark"] .btn-outline-premium {
	color: #93c5fd;
	border-color: rgba(147, 197, 253, 0.55);
}

html[data-theme="dark"] .btn-outline-premium:hover {
	color: #ffffff;
}

html[data-theme="dark"] :is(.service-card-link, .legal-content a, .map-contact-card a, .section-subtitle a) {
	color: #60a5fa;
}

html[data-theme="dark"] .legal-toc-link {
	color: var(--dk-muted);
}

html[data-theme="dark"] :is(.legal-toc-link:hover, .legal-toc-link.active) {
	color: #60a5fa;
}

/* ---- Forms ---- */
html[data-theme="dark"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
	background: var(--dk-surface-2);
	border-color: rgba(148, 163, 184, 0.22);
	color: var(--dk-text);
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
	color: #6b7689;
}

/* ---- Chatbot ---- */
html[data-theme="dark"] .chatbot-messages {
	background: var(--surface-alt);
}

html[data-theme="dark"] .chatbot-btn-secondary {
	background: var(--dk-surface-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .chatbot-header h2,
html[data-theme="dark"] .chatbot-header p {
	color: #ffffff;
}

/* ---- Floating call / WhatsApp buttons (inline white backgrounds) ---- */
html[data-theme="dark"] .wmn-wrap .wmn-widget {
	background-color: var(--dk-surface) !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] #call-fx .wmn-widget svg {
	color: #93c5fd;
}

/* =====================================================================
   Cookie consent banner (js/consent.js)
   ===================================================================== */
.consent-banner {
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 100000;
	width: min(760px, calc(100% - 32px));
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(37, 99, 235, 0.14);
	box-shadow: 0 25px 60px rgba(17, 24, 39, 0.18);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transform: translate(-50%, 140%);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.consent-banner.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
}

.consent-icon {
	flex: 0 0 46px;
	height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #ffffff;
	background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.consent-text {
	flex: 1;
	min-width: 0;
}

.consent-text strong {
	display: block;
	margin-bottom: 2px;
	font-size: 15px;
	color: #111827;
}

.consent-text p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #4b5563;
}

.consent-text a {
	color: #2563eb;
	text-decoration: underline;
}

.consent-actions {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.consent-btn {
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.consent-btn:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.consent-decline {
	background: transparent;
	color: #374151;
	border: 1px solid rgba(17, 24, 39, 0.18);
}

.consent-accept {
	border: 0;
	color: #ffffff;
	background: linear-gradient(135deg, #2563eb, #06b6d4);
	box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}

.consent-btn:hover {
	transform: translateY(-1px);
}

html[data-theme="dark"] .consent-banner {
	background: rgba(17, 26, 46, 0.96);
	border-color: rgba(148, 163, 184, 0.18);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .consent-text strong {
	color: #f1f5f9;
}

html[data-theme="dark"] .consent-text p {
	color: #a3adbf;
}

html[data-theme="dark"] .consent-text a {
	color: #60a5fa;
}

html[data-theme="dark"] .consent-decline {
	color: #e5e7eb;
	border-color: rgba(148, 163, 184, 0.3);
}

@media (max-width: 640px) {
	.consent-banner {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
	}

	.consent-icon {
		display: none;
	}

	.consent-actions {
		width: 100%;
	}

	.consent-btn {
		flex: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.consent-banner {
		transition: none;
	}
}

/* "Install App" button in the footer (js/pwa.js) */
.pwa-install-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 14px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.pwa-install-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.6);
}

/* ---- Chat assistant (dark) ---- */
html[data-theme="dark"] .chatbot-message.bot {
	background: var(--dk-surface-2);
	border-color: var(--dk-border);
	color: var(--dk-text);
}

html[data-theme="dark"] .chatbot-message-link {
	color: #60a5fa;
}

html[data-theme="dark"] .chatbot-suggestion-chip {
	background: var(--dk-surface-2);
	border-color: rgba(148, 163, 184, 0.25);
	color: var(--dk-text);
}

html[data-theme="dark"] .chatbot-suggestion-chip:hover {
	border-color: #60a5fa;
	color: #93c5fd;
}

html[data-theme="dark"] .chatbot-input-row {
	border-top-color: var(--dk-border);
}

html[data-theme="dark"] .chatbot-typing span {
	background: #64748b;
}

html[data-theme="dark"] .chatbot-contact-form h3 {
	color: var(--ink-900);
}

/* ---- Logo sizing ----
   images/logo-cropped.png has no empty margin (unlike the 600×600
   logo.png), so it can be sized exactly and lines up with the menu.
   !important beats the legacy .site-logo rules in style.css. */
.site-header .logo img.site-logo {
	height: 52px !important;
	width: auto !important;
	max-height: none !important;
	max-width: none !important;
	margin-top: 0 !important;
	display: block;
	transition: height 0.35s ease;
}

.site-header.scrolled .logo img.site-logo {
	height: 42px !important;
}

.premium-footer .logo img.site-logo {
	height: 72px !important;
	width: auto !important;
	max-height: none !important;
	margin-top: 0 !important;
}

@media (max-width: 767px) {
	.site-header .logo img.site-logo {
		height: 44px !important;
	}

	.site-header.scrolled .logo img.site-logo {
		height: 38px !important;
	}
}