/* ==========================================================================
   Thabet — theme stylesheet (child of Hello Elementor)
   Page design (colours, fonts, buttons, spacing) is set in Elementor → Site Settings
   and on each page. This file only covers what Elementor can't do on its own:
   fonts per language, sticky header, card hover, Contact Form 7, the solar
   calculator and the cookie banner. Logical properties keep RTL/LTR in sync.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
	--th-navy: #0B2545;
	--th-navy-2: #13315C;
	--th-navy-3: #1D4E89;
	--th-sun: #F9A826;
	--th-sun-2: #FFC94D;
	--th-sun-soft: #FFF4DE;
	--th-green: #2BA84A;
	--th-green-dark: #1E7F37;
	--th-green-soft: #E7F6EB;
	--th-wa: #25D366;
	--th-wa-dark: #128C4B;
	--th-ink: #0F1C2E;
	--th-text: #334155;
	--th-muted: #5B6B7F;
	--th-line: #E3E8EF;
	--th-light: #F5F7FA;
	--th-white: #FFFFFF;

	--th-radius: 20px;
	--th-radius-sm: 12px;
	--th-radius-lg: 28px;
	--th-shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 2px 8px rgba(11, 37, 69, .05);
	--th-shadow: 0 10px 30px -12px rgba(11, 37, 69, .18);
	--th-shadow-lg: 0 30px 60px -20px rgba(11, 37, 69, .28);

	--th-font: var(--e-global-typography-text-font-family, "Inter"), "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--th-font-head: var(--e-global-typography-primary-font-family, "Poppins"), "Poppins", system-ui, sans-serif;
	--th-container: 1200px;
	--th-gutter: 20px;
	--th-header-h: 72px;
	--th-ease: cubic-bezier(.2, .7, .2, 1);
}

html[lang^="ar"] {
	--th-font: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--th-font-head: "Cairo", var(--th-font);
}

@media (min-width: 768px) {
	:root { --th-gutter: 32px; --th-header-h: 84px; }
}


/* ---------- 2. Fonts per language -----------------------------------------
   Elementor's global fonts are Cairo (set in Site Settings). English pages
   switch to Poppins (headings) + Inter (text) here, so both languages stay on brand. */
html[lang^="en"] body[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family: "Poppins";
	--e-global-typography-secondary-font-family: "Poppins";
	--e-global-typography-accent-font-family: "Poppins";
	--e-global-typography-text-font-family: "Inter";
}
html[lang^="ar"] .elementor-widget-heading .elementor-heading-title { letter-spacing: 0; }

/* ---------- 3. Base ------------------------------------------------------ */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--th-sun); outline-offset: 3px; border-radius: 4px; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
img { max-width: 100%; height: auto; }
.th-icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; }
[dir="rtl"] .th-flip { transform: scaleX(-1); }
.skip-link.screen-reader-text:focus { background: var(--th-navy); color: #fff; z-index: 100000; }

/* ---------- 4. Header (Elementor header template) ------------------------ */
.ehf-header #masthead { position: sticky; top: 0; z-index: 999; transition: box-shadow .25s; }
.admin-bar.ehf-header #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar.ehf-header #masthead { top: 0; } }
.ehf-header #masthead.is-scrolled { box-shadow: 0 8px 24px -12px rgba(11, 37, 69, .35); }
.th-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > a { white-space: nowrap; }
.th-lang-switch a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--th-navy); text-decoration: none; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--th-line); }
.th-lang-switch a:hover { border-color: var(--th-navy); color: var(--th-navy); }
.th-lang-switch .th-icon { width: 16px; height: 16px; }
.th-footer-bar .th-lang-switch a { color: #fff; border-color: rgba(255,255,255,.3); }

/* ---------- 5. Cards (services, why-us) ---------------------------------- */
.th-card { transition: transform .25s var(--th-ease), box-shadow .25s var(--th-ease); overflow: hidden; }
.th-card:hover { transform: translateY(-4px); box-shadow: var(--th-shadow-lg) !important; }
.th-card .elementor-widget-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.th-card > .elementor-widget-button, .th-card > .e-con-inner > .elementor-widget-button { margin-top: auto; }
.th-hero .elementor-heading-title { text-wrap: balance; }

/* Header: logo | menu (fills the middle) | language + CTA (natural width) */
.th-header .th-header-actions { width: auto !important; max-width: none; flex: 0 0 auto; }
.th-header .elementor-widget-navigation-menu { flex: 1 1 0% !important; min-width: 0 !important; }
.th-header .th-header-logo { flex: 0 0 auto; }

/* Footer (Elementor footer template) */
.th-footer-bar a { color: #C9D6E6; }
.th-footer-bar a:hover { color: #fff; }
.th-footer-bar .th-legal-links a { text-decoration: none; }
.th-footer-bar .th-legal-links a:hover { text-decoration: underline; }

/* Phone numbers and emails read left-to-right inside Arabic text */
a[href^="tel:"] .elementor-icon-list-text, a[href^="mailto:"] .elementor-icon-list-text,
.th-ltr .elementor-icon-box-description { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .th-ltr .elementor-icon-box-description { text-align: right; }

/* Yoast breadcrumbs in page banners */
.th-breadcrumbs, .th-breadcrumbs a { color: #C9D6E6; font-size: .9rem; text-decoration: none; }
.th-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.th-breadcrumbs .breadcrumb_last { color: #fff; font-weight: 600; }
.th-breadcrumbs p { margin: 0; }

/* ---------- 6. Buttons used inside shortcodes (calculator) --------------- */
.th-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.th-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
	font-family: var(--th-font-head); font-weight: 700; font-size: 1rem; line-height: 1.2;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: transform .2s var(--th-ease), box-shadow .2s var(--th-ease), background-color .2s, color .2s, border-color .2s;
}
.th-btn:hover { transform: translateY(-2px); }
.th-btn:active { transform: translateY(0); }
.th-btn .th-icon { width: 1.1em; height: 1.1em; }
.th-btn--sun { background: var(--th-sun); color: var(--th-navy); box-shadow: 0 10px 24px -10px rgba(249, 168, 38, .8); }
.th-btn--sun:hover { background: var(--th-sun-2); color: var(--th-navy); }
.th-btn--navy { background: var(--th-navy); color: #fff; }
.th-btn--navy:hover { background: var(--th-navy-2); color: #fff; }
.th-btn--wa { background: var(--th-wa); color: #06341A; }
.th-btn--wa:hover { background: #3BE07A; color: #06341A; }
.th-btn--outline { border-color: var(--th-navy); color: var(--th-navy); background: transparent; }
.th-btn--outline:hover { background: var(--th-navy); color: #fff; }
.th-btn--ghost { background: rgba(11, 37, 69, .06); color: var(--th-navy); }
.th-btn--ghost:hover { background: rgba(11, 37, 69, .12); color: var(--th-navy); }
.th-btn--sm { min-height: 40px; padding: 8px 18px; font-size: .92rem; }
.th-btn--lg { min-height: 56px; padding: 14px 30px; font-size: 1.05rem; }
.th-btn--block { width: 100%; }
.th-btn[disabled] { opacity: .6; pointer-events: none; }
.th-linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }


/* ---------- 7. Contact Form 7 -------------------------------------------- */
.wpcf7 form { margin: 0; }
.wpcf7 .th-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .wpcf7 .th-row { grid-template-columns: 1fr 1fr; } }
.wpcf7 .th-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.wpcf7 .th-field > label, .wpcf7 .th-label { font-weight: 700; color: var(--th-ink); font-size: .95rem; }
.wpcf7 .th-req { color: #C2410C; }
.wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 input[type="number"], .wpcf7 select, .wpcf7 textarea {
	width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid #CBD5E1; border-radius: var(--th-radius-sm);
	background: #fff; color: var(--th-ink); font-size: 1rem; font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.wpcf7 textarea { min-height: 110px; height: 110px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--th-navy-3); box-shadow: 0 0 0 4px rgba(29, 78, 137, .15); }
.wpcf7 input[type="tel"] { direction: ltr; text-align: start; }
html[dir="rtl"] .wpcf7 input[type="tel"], html[dir="rtl"] .wpcf7 input[type="email"] { text-align: right; }
.wpcf7 .wpcf7-radio { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wpcf7 .wpcf7-radio .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-radio label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid #CBD5E1; border-radius: var(--th-radius-sm); cursor: pointer; font-weight: 700; color: var(--th-ink); }
.wpcf7 .wpcf7-radio input { accent-color: var(--th-navy); width: 18px; height: 18px; }
.wpcf7 .wpcf7-radio label:has(input:checked) { border-color: var(--th-navy); background: var(--th-sun-soft); }
.wpcf7 .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.wpcf7 .wpcf7-acceptance input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--th-navy); flex: none; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-not-valid { border-color: #C2410C !important; }
.wpcf7 .wpcf7-not-valid-tip { color: #C2410C; font-size: .86rem; font-weight: 600; margin-top: 4px; }
.wpcf7 input[type="submit"] {
	width: 100%; min-height: 54px; margin-top: 8px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--e-global-color-secondary, var(--th-sun)); color: var(--e-global-color-primary, var(--th-navy));
	font-family: var(--th-font-head); font-weight: 700; font-size: 1.05rem; transition: transform .2s, filter .2s;
}
.wpcf7 input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.06); }
.wpcf7 .wpcf7-spinner { display: block; margin: 10px auto 0; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--th-radius-sm); font-weight: 600; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--th-green); background: var(--th-green-soft); color: var(--th-green-dark); }
.wpcf7 .th-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wpcf7 .th-hint { color: var(--th-muted); font-size: .85rem; }

/* ---------- 8. Calculator ([thabet_calculator]) ------------------------- */
.th-container { width: 100%; max-width: calc(var(--th-container) + 2 * var(--th-gutter)); margin-inline: auto; padding-inline: var(--th-gutter); }
.th-section { padding-block: 24px; }
/* Lead form + calculator panels */
.th-panel { background: #fff; border-radius: var(--th-radius-lg); padding: 24px; box-shadow: var(--th-shadow); border: 1px solid var(--th-line); }
@media (min-width: 768px) { .th-panel { padding: 36px; } }
.th-panel--navy { background: linear-gradient(160deg, var(--th-navy), var(--th-navy-2)); color: #C8D6E6; border: 0; }
.th-panel--navy h3 { color: #fff; }
.th-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .th-row { grid-template-columns: 1fr 1fr; } }
.th-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.th-field label { font-weight: 700; color: var(--th-ink); font-size: .95rem; }
.th-req { color: #C2410C; }
.th-field input[type="text"], .th-field input[type="tel"], .th-field input[type="email"], .th-field input[type="number"], .th-field select, .th-field textarea {
	width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid #CBD5E1; border-radius: var(--th-radius-sm);
	background: #fff; color: var(--th-ink); font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.th-field textarea { min-height: 96px; resize: vertical; }
.th-field input:focus, .th-field select:focus, .th-field textarea:focus { outline: none; border-color: var(--th-navy-3); box-shadow: 0 0 0 4px rgba(29, 78, 137, .15); }
.th-field.is-invalid input, .th-field.is-invalid select, .th-field.is-invalid textarea { border-color: #C2410C; }
.th-error { color: #C2410C; font-size: .86rem; font-weight: 600; min-height: 0; }
.th-error:empty { display: none; }
.th-hint { color: var(--th-muted); font-size: .85rem; }
.th-field--check { margin-top: 4px; }
.th-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; font-size: .92rem !important; color: var(--th-text) !important; cursor: pointer; }
.th-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--th-navy); flex: none; }
.th-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.th-form__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.th-form__status { margin: 12px 0 0; font-weight: 600; }
.th-form__status:empty { display: none; }
.th-form__status.is-error { color: #C2410C; }
.th-muted { color: var(--th-muted); }
.th-success { text-align: center; padding: 24px 8px; }
.th-success > .th-icon { width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: var(--th-green-soft); color: var(--th-green-dark); margin-bottom: 12px; }
.th-success h3 { margin: 0 0 8px; }
.th-success p { margin: 0 0 20px; }
form.is-sent > *:not(.th-success) { display: none !important; }

/* Tiles (property type) */
.th-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .th-tiles { grid-template-columns: repeat(4, 1fr); } }
.th-tile { position: relative; cursor: pointer; }
.th-tile input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.th-tile span {
	display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; text-align: center;
	border: 1.5px solid #CBD5E1; border-radius: var(--th-radius); font-weight: 700; color: var(--th-ink); transition: all .2s;
}
.th-tile .th-icon { width: 34px; height: 34px; color: var(--th-navy-3); }
.th-tile input:checked + span { border-color: var(--th-navy); background: var(--th-sun-soft); box-shadow: 0 0 0 3px rgba(249, 168, 38, .4); }
.th-tile input:focus-visible + span { outline: 3px solid var(--th-sun); outline-offset: 2px; }

/* Progress */
.th-progress { list-style: none; display: flex; gap: 8px; margin: 0 0 28px; padding: 0; counter-reset: none; }
.th-progress li { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--th-muted); }
.th-progress li::before { content: ""; height: 6px; border-radius: 6px; background: var(--th-line); transition: background .3s; }
.th-progress li span { display: none; }
.th-progress li.is-active, .th-progress li.is-done { color: var(--th-navy); }
.th-progress li.is-active::before, .th-progress li.is-done::before { background: var(--th-sun); }
.th-step-panel { border: 0; padding: 0; margin: 0; min-width: 0; }
.th-step-panel legend { font-family: var(--th-font-head); font-size: 1.3rem; font-weight: 700; color: var(--th-ink); margin-bottom: 18px; padding: 0; }


.th-calc__grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .th-calc__grid { grid-template-columns: 1fr 1.05fr; align-items: start; } .th-calc__lead { grid-column: 1 / -1; } }
.th-seg { border: 0; padding: 0; margin: 0 0 22px; }
.th-seg legend { font-weight: 700; color: var(--th-ink); margin-bottom: 10px; font-size: .95rem; padding: 0; }
.th-seg__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .th-seg__opts { grid-template-columns: repeat(4, 1fr); } }
.th-seg__opt { position: relative; cursor: pointer; }
.th-seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.th-seg__opt span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--th-radius-sm); border: 1.5px solid #CBD5E1; font-weight: 700; font-size: .88rem; text-align: center; color: var(--th-ink); transition: all .2s; }
.th-seg__opt .th-icon { width: 24px; height: 24px; color: var(--th-navy-3); }
.th-seg__opt input:checked + span { border-color: var(--th-navy); background: var(--th-sun-soft); }
.th-seg__opt input:focus-visible + span { outline: 3px solid var(--th-sun); outline-offset: 2px; }
.th-range { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px) { .th-range { flex-direction: row; align-items: center; } }
.th-range input[type="range"] { flex: 1; accent-color: var(--th-sun); height: 6px; min-width: 0; }
.th-range__num { display: flex; align-items: center; gap: 8px; flex: none; }
.th-range__num input { width: 130px !important; text-align: center; font-weight: 800; font-size: 1.1rem !important; color: var(--th-navy) !important; }
.th-range__num span { font-weight: 700; color: var(--th-muted); min-width: 32px; }
.th-calc__kicker { margin: 0 0 4px; font-size: .9rem; font-weight: 700; color: var(--th-sun-2); text-transform: uppercase; letter-spacing: .08em; }
html[lang^="ar"] .th-calc__kicker { letter-spacing: 0; }
.th-calc__hero { margin-bottom: 22px; }
.th-calc__hero > span { display: block; font-size: 1rem; color: #C8D6E6; }
.th-calc__hero strong { font-family: var(--th-font-head); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); color: #fff; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.th-calc__hero small { font-size: 1.1rem; color: var(--th-sun-2); }
.th-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
@media (min-width: 640px) { .th-results { grid-template-columns: repeat(3, 1fr); } }
.th-result { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--th-radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.th-result__icon .th-icon { width: 20px; height: 20px; color: var(--th-sun-2); }
.th-result__label { font-size: .8rem; color: #9FB3CB; }
.th-result__value { color: #fff; font-family: var(--th-font-head); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.th-result__value [data-out="cost"] { font-size: .8em; white-space: nowrap; }
.th-result__value small { font-size: .75rem; color: #9FB3CB; font-weight: 600; }
.th-calc__note { background: rgba(249, 168, 38, .15); border-inline-start: 3px solid var(--th-sun); padding: 10px 14px; border-radius: 8px; color: #FBE3B6; font-size: .9rem; }
.th-calc__disclaimer { font-size: .8rem; color: #8FA4BD; margin: 0 0 18px; }
.th-calc__lead h3 { margin-top: 0; }
[data-out].is-updating { animation: th-pulse .4s; }
@keyframes th-pulse { 50% { opacity: .5; } }


/* ---------- 9. Cookie banner -------------------------------------------- */

.th-cookie {
	position: fixed; z-index: 1000; inset-inline: 16px; bottom: 16px; max-width: 560px;
	background: var(--th-navy); color: #DCE6F2; border-radius: var(--th-radius); padding: 20px 22px; box-shadow: var(--th-shadow-lg);
	font-size: .92rem;
}
.th-cookie p { margin: 0 0 14px; }
.th-cookie a { color: var(--th-sun-2); }
.th-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.th-cookie .th-btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; }

.th-cookie p { color: #DCE6F2; }
.th-linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- 10. Motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print { #masthead, .ehf-footer footer, .joinchat, .th-cookie { display: none !important; } }