/* ==========================================================================
   MDT Store — header, menu, language switcher and footer
   ========================================================================== */

/* ---------- Wordmark (until a logo image is uploaded) ---------- */
.mdt-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--mdt-dark); text-decoration: none; }
.mdt-wordmark-mark { display: inline-grid; color: var(--mdt-primary); }
.mdt-wordmark-mark svg { display: block; width: 40px; height: 40px; }
.mdt-wordmark-text { display: grid; line-height: 1.05; }
.mdt-wordmark-text strong { font: 800 1.45rem/1 "Inter", system-ui, sans-serif; letter-spacing: .02em; }
.mdt-wordmark-text small { margin-top: 3px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mdt-muted); }
:lang(ar) .mdt-wordmark-text small { letter-spacing: 0; text-transform: none; font-size: .72rem; }
.mdt-hd-brand .custom-logo { max-height: 48px; width: auto; }

/* ---------- Language switcher ---------- */
.mdt-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--mdt-line);
	border-radius: 999px;
	background: var(--mdt-surface);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1;
}
.mdt-lang-switch > svg { margin-inline: 6px 2px; color: var(--mdt-primary); }
.mdt-lang-switch a, .mdt-lang-switch span { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--mdt-muted); transition: background-color .2s var(--mdt-ease), color .2s var(--mdt-ease); }
.mdt-lang-switch a:hover { color: var(--mdt-primary); background: var(--mdt-primary-tint); }
.mdt-lang-switch .is-current { background: var(--mdt-primary); color: #fff; }
.mdt-lang-switch [lang="ar"] { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.mdt-lang-switch.is-light { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); }
.mdt-lang-switch.is-light > svg { color: #5EEAD4; }
.mdt-lang-switch.is-light a { color: rgba(255, 255, 255, .8); }
.mdt-lang-switch.is-light a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.mdt-lang-switch.is-light .is-current { background: #fff; color: var(--mdt-dark); }

/* TranslatePress floating switcher is replaced by the theme switcher. */
.trp-floating-switcher { display: none !important; }

/* ---------- Utility bar ---------- */
.mdt-hd-top { background: var(--mdt-dark); color: rgba(255, 255, 255, .78); font-size: .84rem; }
.mdt-hd-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; }
.mdt-hd-top-note { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.mdt-hd-top-note span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mdt-hd-top-note svg { flex: none; color: #5EEAD4; }
.mdt-hd-top-end { display: flex; align-items: center; gap: 18px; flex: none; }
.mdt-hd-top-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); text-decoration: none; }
.mdt-hd-top-link:hover { color: #fff; }
.mdt-hd-top-link svg { color: #5EEAD4; }

/* ---------- Main bar ---------- */
.mdt-hd {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--mdt-line);
	transition: box-shadow .25s var(--mdt-ease);
}
.admin-bar .mdt-hd { top: 32px; }
.mdt-hd.is-scrolled { box-shadow: 0 14px 34px -22px rgba(13, 33, 55, .45); }
.mdt-hd-inner { position: relative; display: flex; align-items: center; gap: 24px; min-height: 80px; }
.mdt-hd-brand { flex: none; }
.mdt-hd-burger { display: none; }
.mdt-hd-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.mdt-hd-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mdt-hd-menu > li { position: relative; }
.mdt-hd-menu > li.mdt-has-mega { position: static; }
.mdt-hd-menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 28px 14px;
	color: var(--mdt-dark);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}
.mdt-hd-menu > li > a::before {
	content: "";
	position: absolute;
	inset-inline: 14px;
	bottom: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--mdt-primary);
	transform: scaleX(0);
	transition: transform .25s var(--mdt-ease);
}
.mdt-hd-menu > li:hover > a::before,
.mdt-hd-menu > li:focus-within > a::before,
.mdt-hd-menu > .current-menu-item > a::before { transform: scaleX(1); }
.mdt-hd-menu > li > a:hover, .mdt-hd-menu > .current-menu-item > a { color: var(--mdt-primary); }
.mdt-hd-menu .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.7px solid currentColor;
	border-bottom: 1.7px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .55;
}
.mdt-hd-menu .sub-menu {
	position: absolute;
	inset-block-start: calc(100% - 8px);
	inset-inline-start: 0;
	min-width: 240px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--mdt-line);
	border-radius: var(--mdt-radius);
	box-shadow: var(--mdt-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s var(--mdt-ease), transform .2s var(--mdt-ease), visibility .2s;
}
.mdt-hd-menu .sub-menu a { display: block; padding: 10px 12px; border-radius: var(--mdt-radius-sm); color: var(--mdt-dark); text-decoration: none; }
.mdt-hd-menu .sub-menu a:hover { background: var(--mdt-primary-tint); color: var(--mdt-primary); }
.mdt-hd-menu li:hover > .sub-menu, .mdt-hd-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mdt-hd-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.mdt-hd-cta { margin-inline-start: 8px; min-height: 44px; padding-inline: 18px; }

/* ---------- Services mega panel ---------- */
.mdt-mega {
	position: absolute;
	inset-block-start: calc(100% - 6px);
	inset-inline: var(--mdt-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 18px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--mdt-line);
	border-radius: var(--mdt-radius-lg);
	box-shadow: 0 40px 80px -30px rgba(13, 33, 55, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .22s var(--mdt-ease), transform .22s var(--mdt-ease), visibility .22s;
}
.mdt-has-mega:hover > .mdt-mega, .mdt-has-mega:focus-within > .mdt-mega { opacity: 1; visibility: visible; transform: none; }
.mdt-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mdt-mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--mdt-radius); color: var(--mdt-dark); text-decoration: none; transition: background-color .2s var(--mdt-ease); }
.mdt-mega-item:hover { background: var(--mdt-primary-tint); }
.mdt-mega-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--mdt-primary-soft); color: var(--mdt-primary-strong); }
.mdt-mega-item strong { display: block; font-size: .93rem; line-height: 1.35; }
.mdt-mega-item small { display: block; margin-top: 2px; color: var(--mdt-muted); font-size: .8rem; line-height: 1.45; }
.mdt-mega-promo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	border-radius: var(--mdt-radius);
	color: rgba(255, 255, 255, .82);
	background:
		radial-gradient(80% 80% at 100% 0%, color-mix(in srgb, #00C4C8 45%, transparent), transparent 70%),
		var(--mdt-dark);
}
.mdt-mega-promo-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #5EEAD4; }
.mdt-mega-promo strong { color: #fff; font-size: 1.05rem; }
.mdt-mega-promo p { margin: 0 0 6px; font-size: .88rem; }
.mdt-mega-promo .mdt-btn { margin-top: auto; min-height: 40px; font-size: .88rem; }

/* ---------- Mobile drawer ---------- */
.mdt-drawer-cta { margin-top: 18px; }

/* ---------- Phone bottom bar: raised quote button ---------- */
.mdt-bottom-cta { position: relative; }
.mdt-bottom-cta-dot {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-top: -22px;
	border-radius: 50%;
	background: linear-gradient(135deg, #00A3AA, var(--mdt-primary));
	color: #fff;
	box-shadow: 0 10px 20px -8px rgba(0, 120, 128, .7), 0 0 0 4px #fff;
}
.mdt-bottom-nav .mdt-bottom-cta { color: var(--mdt-primary); font-weight: 600; }

/* ---------- Footer ---------- */
.mdt-ft { position: relative; margin-top: clamp(80px, 10vw, 140px); color: rgba(255, 255, 255, .7); }
.mdt-ft-cta {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: -70px;
	padding: clamp(26px, 4vw, 44px);
	border-radius: var(--mdt-radius-lg);
	color: rgba(255, 255, 255, .88);
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(94, 234, 212, .35), transparent 60%),
		linear-gradient(115deg, var(--mdt-primary) 0%, color-mix(in srgb, var(--mdt-primary) 45%, var(--mdt-dark)) 100%);
	box-shadow: 0 30px 60px -28px rgba(0, 120, 128, .65);
	overflow: hidden;
}
.mdt-ft-cta::after {
	content: "";
	position: absolute;
	inset-block: -40%;
	inset-inline-end: -10%;
	width: 40%;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 14px);
	transform: skewX(-12deg);
	pointer-events: none;
}
.mdt-ft-cta h2 { color: #fff; margin-bottom: 6px; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); }
.mdt-ft-cta p { margin: 0; max-width: 58ch; }
.mdt-ft-cta-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.mdt-ft-cta-wa { background: transparent; border-color: rgba(255, 255, 255, .45); }
.mdt-ft-cta-wa:hover { background: #1F9D55; border-color: #1F9D55; box-shadow: none; }

.mdt-ft-main {
	position: relative;
	isolation: isolate;
	padding-top: 130px;
	background:
		radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, var(--mdt-primary) 30%, transparent), transparent 70%),
		radial-gradient(35% 50% at 100% 0%, rgba(94, 234, 212, .12), transparent 70%),
		var(--mdt-dark);
}
.mdt-ft-main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, #000, transparent 85%);
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.mdt-ft-grid { display: grid; grid-template-columns: 1.3fr 1fr .8fr 1.2fr; gap: clamp(24px, 4vw, 48px); padding-bottom: 48px; }
.mdt-ft .mdt-wordmark { color: #fff; }
.mdt-ft .mdt-wordmark-mark { color: #00A3AA; }
.mdt-ft .mdt-wordmark-text small { color: rgba(255, 255, 255, .55); }
.mdt-ft-about p { margin: 16px 0 0; max-width: 40ch; line-height: 1.75; }
.mdt-ft-about .custom-logo-link { display: inline-block; padding: 8px 14px; border-radius: 12px; background: #fff; line-height: 0; }
.mdt-ft-about .custom-logo { display: block; width: auto; max-height: 52px; }
.mdt-ft-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(94, 234, 212, .3); border-radius: 999px; color: #fff; font-size: .86rem; font-weight: 600; }
.mdt-ft-badge svg { color: #5EEAD4; }
.mdt-ft-title { position: relative; margin-bottom: 18px; padding-bottom: 12px; color: #fff; font-size: 1rem; }
.mdt-ft-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 32px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #00C4C8, #5EEAD4); }
.mdt-ft-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mdt-ft-links a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .2s var(--mdt-ease), padding .2s var(--mdt-ease); }
.mdt-ft-links a:hover { color: #fff; padding-inline-start: 6px; }
.mdt-ft-office { display: grid; gap: 4px; margin-bottom: 18px; font-size: .92rem; line-height: 1.6; }
.mdt-ft-office strong { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.mdt-ft-office strong svg { color: #5EEAD4; }
.mdt-ft-office a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.mdt-ft-office a:hover { color: #5EEAD4; }
.mdt-ft .mdt-social a { background: rgba(255, 255, 255, .08); color: #fff; }
.mdt-ft .mdt-social a:hover { background: var(--mdt-primary); }
.mdt-ft-bottom { border-top: 1px solid rgba(255, 255, 255, .08); font-size: .86rem; }
.mdt-ft-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; padding-inline-end: calc(var(--mdt-gutter) + 64px); }
.mdt-ft-bottom p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.mdt-hd-menu > li > a { padding-inline: 10px; }
	.mdt-mega { grid-template-columns: 1fr; }
	.mdt-mega-promo { display: none; }
	.mdt-ft-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
	.mdt-hd-nav, .mdt-hd-cta { display: none; }
	.mdt-hd-burger { display: inline-grid; }
	.mdt-hd-inner { min-height: 66px; gap: 8px; }
	.mdt-hd-brand { margin-inline: auto; }
	.mdt-hd-actions { gap: 0; }
}
@media (max-width: 782px) { .admin-bar .mdt-hd { top: 46px; } }
@media (max-width: 700px) {
	.mdt-hd-top-note { display: none; }
	.mdt-hd-top-inner { justify-content: center; }
	.mdt-hide-sm { display: none !important; }
	.mdt-ft-grid { grid-template-columns: 1fr; }
	.mdt-ft-cta-actions .mdt-btn { flex: 1 1 100%; }
	.mdt-ft-bottom-inner { justify-content: center; text-align: center; padding-inline-end: var(--mdt-gutter); }
	.mdt-wordmark-text small { display: none; }
}

/* ---------- Footer: hours and directions ---------- */
.mdt-ft-hours { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: rgba(255, 255, 255, .78); }
.mdt-ft-hours svg { flex: none; margin-top: 4px; color: #5EEAD4; }
.mdt-ft-directions { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; color: #5EEAD4 !important; }