/*
Theme Name: ويفكس
Theme URI: https://wefixontime.com
Author: ويفكس
Author URI: https://wefixontime.com
Description: قالب ويفكس للصيانة المنزلية في الإمارات
Version: 1.1.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wefix
Tags: business, rtl-language, translation-ready, custom-colors, responsive-layout
*/

/* ========================================
   WEFIX DESIGN SYSTEM v1.1
   ======================================== */
/* Fonts loaded via functions.php with display=swap (non-blocking) */

:root {
  --red:        #DC2626;
  --red-dark:   #B91C1C;
  --red-light:  #FEE2E2;
  --blue:       #1E40AF;
  --blue-dark:  #1E3A8A;
  --blue-light: #DBEAFE;
  --white:      #FFFFFF;
  --dark:       #1F2937;
  --gray:       #6B7280;
  --light:      #F3F4F6;
  --green:      #10B981;
  --border:     #E5E7EB;
  --shadow:     0 4px 24px rgba(30,64,175,.10);
  --shadow-lg:  0 8px 40px rgba(30,64,175,.15);
  --radius:     12px;
  --radius-lg:  20px;
  --t:          .25s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Poppins', sans-serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── RTL: Arabic ────────────────────────
   Applied server-side via body.rtl class when lang=ar. */
body.rtl { font-family: 'Cairo', sans-serif; direction: rtl; text-align: right; }

/* ── LTR: English ───────────────────────
   Applied server-side via body.lang-en class when ?lang=en.
   Overrides any RTL plugin or OS default. */
body.lang-en { font-family: 'Poppins', sans-serif; direction: ltr !important; text-align: left !important; unicode-bidi: embed; }

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button { cursor: pointer; border: none; outline: none; font-family: inherit; background: none; }
input, textarea, select { font-family: inherit; outline: none; }

/* ── CONTAINER ──────────────────────────── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.wp-site-blocks { padding: 0; }

/* ════════════════════════════════════════
   LOGO  —  always LTR, never flips
   ════════════════════════════════════════ */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -1px;
  text-decoration: none;
  /* Force LTR so "Wefix" never becomes "xifew" in RTL mode */
  direction: ltr !important;
  unicode-bidi: embed;
  flex-shrink: 0;
}
.site-logo .logo-red { color: var(--red); }
.logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--red), var(--blue));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  flex-shrink: 0;
}
/* Custom logo image – always LTR */
.custom-logo-link { direction: ltr !important; }
.custom-logo { max-height: 44px; width: auto; }

/* ════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════ */
.wefix-topbar {
  background: var(--blue-dark);
  color: #fff;
  padding: 7px 0;
  font-size: 12.5px;
}
.wefix-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar-info {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.topbar-info a,
.topbar-info span {
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.topbar-info a:hover { color: #fff; }
.topbar-icons { display: flex; gap: 8px; align-items: center; }
.topbar-icons a { color: rgba(255,255,255,.8); font-size: 15px; }

/* ════════════════════════════════════════
   HEADER
   ════════════════════════════════════════ */
.wefix-header {
  background: var(--white);
  box-shadow: 0 2px 16px rgba(30,64,175,.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 12px;
}

/* Desktop nav */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.header-nav a {
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--dark);
  transition: all var(--t);
  white-space: nowrap;
}
.header-nav a:hover,
.header-nav a.active,
.header-nav a.current-menu-item { background: var(--blue-light); color: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.lang-toggle {
  background: var(--light);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  transition: all var(--t);
  white-space: nowrap;
  /* Keep toggle text readable in both directions */
  direction: ltr !important;
}
.lang-toggle:hover { background: var(--blue-light); }

.btn-header-cta {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--t);
  white-space: nowrap;
  display: inline-flex; align-items: center;
}
.btn-header-cta:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220,38,38,.3); color: #fff; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  min-width: 36px;
}
.hamburger span { width: 22px; height: 2px; background: var(--dark); border-radius: 2px; display: block; transition: all var(--t); }

/* Mobile panel */
.mobile-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 1999;
}
.mobile-overlay.open { display: block; }

.mobile-nav-panel {
  position: fixed; top: 0; bottom: 0;
  width: min(290px, 85vw);
  background: #fff;
  box-shadow: -4px 0 30px rgba(0,0,0,.15);
  z-index: 2000;
  display: flex; flex-direction: column;
  padding: 24px 20px;
  /* LTR: panel slides from right */
  right: 0; left: auto;
  transform: translateX(110%);
  transition: transform .3s ease;
}
/* RTL: panel slides from left */
body.rtl .mobile-nav-panel { right: auto; left: 0; transform: translateX(-110%); }
.mobile-nav-panel.open { transform: translateX(0) !important; }

.mobile-nav-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.close-nav-btn {
  background: var(--light); border-radius: 8px;
  padding: 8px 12px; font-size: 18px; color: var(--dark);
}
.mobile-nav-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav-links a {
  font-size: 16px; padding: 13px 16px;
  border-radius: 10px; color: var(--dark);
  font-weight: 500; display: block;
  transition: all var(--t);
}
.mobile-nav-links a:hover { background: var(--blue-light); color: var(--blue); }

.mobile-nav-cta { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.mobile-nav-cta a {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px; border-radius: 10px;
  font-weight: 700; font-size: 15px;
  direction: ltr !important;
}
.mobile-cta-call  { background: var(--red); color: #fff; }
.mobile-cta-wa    { background: #25D366; color: #fff; }

/* ════════════════════════════════════════
   HERO
   ════════════════════════════════════════ */
.wefix-hero {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 60%, #2563EB 100%);
  color: #fff;
  padding: 72px 0 90px;
  position: relative; overflow: hidden;
}
.wefix-hero::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 380px; height: 380px;
  background: rgba(255,255,255,.04); border-radius: 50%;
  pointer-events: none;
}
.wefix-hero::after {
  content: ''; position: absolute; bottom: -100px; left: 8%;
  width: 280px; height: 280px;
  background: rgba(220,38,38,.12); border-radius: 50%;
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative; z-index: 1;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: 6px 16px; font-size: 13px; font-weight: 500;
  margin-bottom: 18px;
}
.hero-content h1 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800; line-height: 1.15;
  margin-bottom: 16px; letter-spacing: -.5px;
}
.hero-content h1 .highlight { color: #FCA5A5; }
.hero-content > p { font-size: 16px; opacity: .88; margin-bottom: 28px; line-height: 1.7; }

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-white {
  background: #fff; color: var(--blue);
  border-radius: 10px; padding: 12px 24px;
  font-weight: 700; font-size: 15px;
  transition: all var(--t);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); color: var(--blue); }
.btn-ghost-white {
  border: 2px solid rgba(255,255,255,.6); color: #fff;
  border-radius: 10px; padding: 10px 24px;
  font-weight: 600; font-size: 15px;
  transition: all var(--t);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-ghost-white:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.hero-stats { display: flex; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.hero-stat strong { display: block; font-size: 26px; font-weight: 800; }
.hero-stat span   { font-size: 12px; opacity: .75; }

/* Quick booking card */
.hero-booking-card {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg); padding: 28px;
}
.hero-booking-card h2 { font-size: 17px; font-weight: 700; margin-bottom: 18px; }
.quick-form { display: flex; flex-direction: column; gap: 11px; }
.quick-form input,
.quick-form select {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 8px; padding: 10px 13px;
  color: #fff; font-size: 14px; width: 100%;
  transition: border var(--t);
  -webkit-appearance: none;
}
.quick-form input::placeholder { color: rgba(255,255,255,.6); }
.quick-form select option { background: var(--blue-dark); color: #fff; }
.quick-form input:focus,
.quick-form select:focus { border-color: rgba(255,255,255,.7); }
.btn-red-full {
  background: var(--red); color: #fff;
  border-radius: 10px; padding: 12px 20px;
  font-weight: 700; font-size: 15px; width: 100%;
  transition: all var(--t);
  border: none; cursor: pointer; display: block; text-align: center;
}
.btn-red-full:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }

/* ════════════════════════════════════════
   STATS STRIP
   ════════════════════════════════════════ */
.stats-strip-wrap { background: var(--light); padding-bottom: 52px; }
.stats-strip {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 36px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
  margin-top: -44px; position: relative; z-index: 10;
}
.stat-item { text-align: center; }
.stat-item strong { display: block; font-size: 30px; font-weight: 800; color: var(--blue); }
.stat-item strong.red { color: var(--red); }
.stat-item span { font-size: 12.5px; color: var(--gray); }

/* ════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════ */
.wefix-section     { padding: 64px 0; }
.wefix-section-alt { padding: 64px 0; background: var(--light); }
.wefix-section-alt .section-header p { color: #4B5563; }
.wefix-section-alt p { color: #4B5563; }

.section-header { text-align: center; margin-bottom: 48px; }
.section-eyebrow {
  display: inline-block;
  background: var(--blue-light); color: var(--blue);
  border-radius: 50px; padding: 5px 16px;
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.section-header h2 {
  font-size: clamp(24px,3vw,36px);
  font-weight: 800; color: var(--dark);
  margin-bottom: 12px; letter-spacing: -.5px;
}
.section-header p { color: var(--gray); max-width: 520px; margin: 0 auto; font-size: 15px; }
.brands-section .section-header p { color: #4B5563; }

/* ── GRIDS ──────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }

/* ════════════════════════════════════════
   CARDS
   ════════════════════════════════════════ */
.wefix-card {
  background: #fff; border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  transition: transform var(--t), box-shadow var(--t);
}
.wefix-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.service-card { text-align: center; }
.service-icon-wrap {
  width: 60px; height: 60px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin: 0 auto 16px;
}
.icon-blue  { background: var(--blue-light); color: var(--blue); }
.icon-red   { background: var(--red-light);  color: var(--red); }
.icon-green { background: #D1FAE5; color: var(--green); }
.service-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.service-card p  { color: var(--gray); font-size: 14px; line-height: 1.6; }
.learn-more-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--blue); font-weight: 600; font-size: 14px;
  margin-top: 14px; transition: gap var(--t);
}
.learn-more-link:hover { gap: 8px; color: var(--blue); }

.feature-card { display: flex; gap: 16px; align-items: flex-start; }
.feature-icon-wrap {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 12px; background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.feature-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.feature-card p  { color: var(--gray); font-size: 14px; }

/* ════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════ */
.stars { color: #F59E0B; font-size: 17px; margin-bottom: 12px; letter-spacing: 2px; }
.testi-text {
  color: var(--dark); font-size: 14.5px;
  line-height: 1.7; margin-bottom: 18px; font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: 10px; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg,var(--blue),var(--red));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.testi-author strong { display: block; font-size: 14px; font-weight: 700; }
.testi-author span   { font-size: 12px; color: var(--gray); }

/* ════════════════════════════════════════
   CTA BAND
   ════════════════════════════════════════ */
.cta-band {
  background: linear-gradient(90deg,var(--red) 0%,#EF4444 100%);
  color: #fff; padding: 52px 0;
}
.cta-band-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.cta-band p  { opacity: .88; font-size: 15px; }
.cta-btns    { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.btn-white-solid {
  background: #fff; color: var(--red);
  border-radius: 10px; padding: 12px 24px;
  font-weight: 700; font-size: 15px;
  transition: all var(--t);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-white-solid:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); color: var(--red); }
.btn-ghost-white-solid {
  border: 2px solid rgba(255,255,255,.7); color: #fff;
  border-radius: 10px; padding: 10px 24px;
  font-weight: 600; font-size: 15px;
  transition: all var(--t);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-ghost-white-solid:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* ════════════════════════════════════════
   PAGE HERO
   ════════════════════════════════════════ */
.page-hero {
  background: linear-gradient(135deg,var(--blue-dark),var(--blue));
  color: #fff; padding: 52px 0; text-align: center;
}
.page-hero h1 { font-size: clamp(26px,4vw,42px); font-weight: 800; margin-bottom: 10px; }
.page-hero p  { opacity: .85; font-size: 15px; max-width: 500px; margin: 0 auto; }
.breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 13px; opacity: .75;
  margin-bottom: 14px; flex-wrap: wrap;
}
.breadcrumb a     { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep  { opacity: .5; }

/* ════════════════════════════════════════
   TABS
   ════════════════════════════════════════ */
.tabs-wrapper {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.tabs-nav {
  display: flex; overflow-x: auto;
  border-bottom: 2px solid var(--border);
  background: var(--light); scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 14px 18px; font-size: 13px; font-weight: 600;
  color: var(--gray); white-space: nowrap;
  background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: all var(--t);
  display: flex; align-items: center; gap: 7px; cursor: pointer;
}
.tab-btn:hover { color: var(--blue); background: rgba(30,64,175,.04); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); background: #fff; }
.tab-pane { display: none; padding: 32px; }
.tab-pane.active { display: block; }

/* ════════════════════════════════════════
   FORMS
   ════════════════════════════════════════ */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-col-full { grid-column: 1/-1; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--dark); }
.form-group label .req { color: var(--red); margin-inline-start: 3px; }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 10px 13px; font-size: 14px; color: var(--dark);
  background: #fff; width: 100%;
  transition: border var(--t), box-shadow var(--t);
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.field-error { font-size: 12px; color: var(--red); display: none; }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: var(--red); }
.form-group.has-error .field-error { display: block; }
.radio-group { display: flex; gap: 14px; flex-wrap: wrap; }
.radio-label {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; font-size: 14px; font-weight: 500;
}
.radio-label input[type="radio"] { accent-color: var(--blue); width: 16px; height: 16px; }

/* Priority buttons */
.priority-group { display: flex; gap: 10px; flex-wrap: wrap; }
.priority-btn {
  padding: 8px 22px; border-radius: 8px; font-size: 14px; font-weight: 600;
  border: 2px solid #d1d5db; background: #fff; color: #374151;
  cursor: pointer; transition: all 0.2s;
}
.priority-btn:hover { border-color: var(--blue); color: var(--blue); }
.priority-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.btn-submit {
  background: var(--blue); color: #fff;
  border-radius: 10px; padding: 12px 32px;
  font-size: 15px; font-weight: 700;
  transition: all var(--t);
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; cursor: pointer; border: none;
}
.btn-submit:hover { background: var(--blue-dark); transform: translateY(-1px); color: #fff; }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.form-success {
  display: none; background: #D1FAE5;
  border: 1px solid #6EE7B7; color: #065F46;
  border-radius: 10px; padding: 14px 18px;
  font-weight: 600; margin-top: 14px;
  align-items: center; gap: 10px;
}
.form-success.show { display: flex; }

/* ════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════ */
.contact-info-box {
  background: linear-gradient(135deg,var(--blue-dark),var(--blue));
  color: #fff; border-radius: var(--radius-lg); padding: 32px 28px;
}
.contact-info-box h2 { font-size: 19px; font-weight: 800; margin-bottom: 22px; }
.contact-row {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.15);
}
.contact-row:last-child { border-bottom: none; }
.contact-row-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 9px; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.contact-row-label { display: block; font-size: 12px; opacity: .75; margin-bottom: 2px; }
.contact-row a { color: #fff; font-size: 15px; font-weight: 600; }
.contact-row a:hover { color: #FCA5A5; }

.map-box {
  background: var(--light); border-radius: var(--radius);
  height: 240px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray); flex-direction: column; gap: 8px;
  border: 2px dashed var(--border); margin-top: 20px; font-size: 36px;
}
.map-box span { font-size: 13px; color: var(--gray); }

/* ════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════ */
.value-card { text-align: center; padding: 28px 20px; border-top: 4px solid var(--blue); }
.value-card .v-icon { font-size: 36px; margin-bottom: 12px; }
.value-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 7px; }
.value-card p  { color: var(--gray); font-size: 14px; }

/* ════════════════════════════════════════
   BADGES
   ════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 50px; font-size: 12px; font-weight: 600;
}
.badge-blue  { background: var(--blue-light); color: var(--blue); }
.badge-red   { background: var(--red-light);  color: var(--red); }
.badge-green { background: #D1FAE5; color: #065F46; }

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.wefix-footer {
  background: var(--dark); color: rgba(255,255,255,.8);
  padding: 52px 0 22px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 36px; padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 24px;
}
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 13px;
  direction: ltr !important;
}
.footer-logo .logo-red { color: #FCA5A5; }
.footer-about { font-size: 14px; line-height: 1.7; opacity: .7; }
.footer-social { display: flex; gap: 9px; margin-top: 16px; }
.social-btn {
  width: 33px; height: 33px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background var(--t); color: rgba(255,255,255,.8);
}
.social-btn:hover { background: var(--red); color: #fff; }
.footer-col h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul li a { font-size: 13.5px; opacity: .7; transition: opacity var(--t),color var(--t); color: rgba(255,255,255,.8); }
.footer-col ul li a:hover { opacity: 1; color: #FCA5A5; }
.footer-contact-row { display: flex; gap: 9px; margin-bottom: 10px; font-size: 13.5px; opacity: .8; }
.footer-contact-row a { color: rgba(255,255,255,.8); }
.footer-contact-row a:hover { color: #FCA5A5; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,0.72);
}

/* ════════════════════════════════════════
   FLOATING BUTTONS
   ════════════════════════════════════════ */
.floating-actions {
  position: fixed; bottom: 24px;
  /* inset-inline-end works for both LTR/RTL */
  inset-inline-end: 20px;
  z-index: 999;
  display: flex; flex-direction: column; gap: 11px; align-items: flex-end;
}
.float-action-btn {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: all var(--t); color: #fff; text-decoration: none;
}
.float-action-btn:hover { transform: translateY(-2px) scale(1.08); color: #fff; }
.float-wa    { background: #25D366; }
.float-phone { background: var(--blue); }

/* ════════════════════════════════════════
   WORDPRESS NATIVE CONTENT STYLES
   — categories, tags, archives, single posts
   ════════════════════════════════════════ */

/* Entry / article */
.entry-content,
.entry-summary {
  font-size: 16px; line-height: 1.8; color: var(--dark);
}

/* ────────────────────────────────────────────────────────
   FIX (حل جذري): صور [caption] shortcode في ووردبرس تُنشئ
   div.wp-caption بعرض inline ثابت مبني على "width" في الـ
   shortcode نفسه (مثلاً width="1024")، وهذا الـ inline style
   يتجاوز أي قاعدة CSS خارجية بسبب أولوية inline > external.
   النتيجة: الصورة تبقى صغيرة داخل حاوية محدودة العرض حتى لو
   الشاشة أوسع بكثير، بصرف النظر عن max-width:100% العام.

   الحل: نُجبر الحاوية wp-caption + الصورة بداخلها على أخذ
   100% من عرض .entry-content دائمًا، بغض النظر عن أي inline
   width محقون من WordPress. width:100% في CSS خارجي أضعف من
   inline عادةً، لكن !important هنا ضروري ومبرر لأنه يستهدف
   خاصية عرضية بصرية بحتة (لا يوجد أي احتمال تعارض وظيفي).
   ينطبق هذا على كل صورة داخل أي مقال، حاضرًا ومستقبلاً، بلا
   أي تعديل يدوي مطلوب لكل مقال على حدة.
   ──────────────────────────────────────────────────────── */
.entry-content .wp-caption {
  width: 100% !important;
  max-width: 100% !important;
}
.entry-content .wp-caption img {
  width: 100% !important;
  height: auto !important;
}
.entry-content .wp-caption-text {
  text-align: center;
  font-size: 14px;
  color: var(--gray, #666);
  padding: 8px 4px;
}
/* صور بلا caption لكنها محاطة بـ <p> بعرض inline (نمط شائع آخر
   من بعض أدوات توليد المحتوى) — نفس المعالجة الوقائية */
.entry-content p > img,
.entry-content figure img {
  width: 100% !important;
  height: auto !important;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-weight: 700; margin: 1.5em 0 .6em; line-height: 1.3; color: var(--dark);
}
.entry-content h2 { font-size: clamp(20px,2.5vw,26px); }
.entry-content h3 { font-size: clamp(17px,2vw,21px); }
.entry-content p  { margin-bottom: 1.1em; }

/* ── العربي: محتوى يمين ── */
body.rtl .entry-content p,
body.rtl .entry-content li,
body.rtl .entry-content td,
body.rtl .entry-content blockquote { text-align: right; }

/* ── العربي: عناوين من اليمين فقط ── */
body.rtl .entry-content h2,
body.rtl .entry-content h3,
body.rtl .entry-content h4,
body.rtl .entry-content h5 { text-align: right; direction: rtl; }

/* ── الإنجليزي: محتوى يسار ── */
body.lang-en .entry-content p,
body.lang-en .entry-content li,
body.lang-en .entry-content td,
body.lang-en .entry-content blockquote { text-align: left; }

/* ── الإنجليزي: عناوين من اليسار فقط ── */
body.lang-en .entry-content h2,
body.lang-en .entry-content h3,
body.lang-en .entry-content h4,
body.lang-en .entry-content h5 { text-align: left; direction: ltr; }
.entry-content ul,
.entry-content ol { padding-inline-start: 1.4em; margin-bottom: 1.1em; }
.entry-content ul li { list-style: disc; margin-bottom: .4em; }
.entry-content ol li { list-style: decimal; margin-bottom: .4em; }
.entry-content a { color: var(--blue); text-decoration: underline; }
.entry-content a:hover { color: var(--blue-dark); }
.entry-content img {
  max-width: 100%; height: auto; border-radius: var(--radius);
  margin: 1em 0;
  /* Never hide images, just constrain size */
}
.entry-content blockquote {
  border-inline-start: 4px solid var(--blue);
  padding: .8em 1.2em; margin: 1.2em 0;
  background: var(--blue-light); border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic; color: var(--blue-dark);
}
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.entry-content th,
.entry-content td { border: 1px solid var(--border); padding: 8px 12px; font-size: 14px; }
.entry-content th { background: var(--light); font-weight: 600; }
/* قاعدة wp-caption القديمة (max-width فقط، بلا width) استُبدلت
   بالحل الكامل في قسم "FIX: تكبير صور المقال" أعلى الملف —
   كانت السبب الجذري لبقاء الصور صغيرة رغم max-width:100% العام،
   لأن inline width من WordPress كان لا يزال يُقيّد الحجم الفعلي. */

/* Post thumbnail */
.post-thumbnail { margin-bottom: 24px; margin-top: 32px; }
.post-thumbnail img {
  width: 100%; border-radius: var(--radius);
  object-fit: cover; max-height: 420px;
}

/* ── ARCHIVE / BLOG LOOP ─────────────────── */
.posts-loop { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.post-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--border);
  overflow: hidden; transition: transform var(--t),box-shadow var(--t);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card-thumb img {
  width: 100%; height: 200px; object-fit: cover;
  /* preserve image details */
  image-rendering: auto;
}
.post-card-body { padding: 20px; }
.post-card-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.post-card-cats a {
  background: var(--blue-light); color: var(--blue);
  border-radius: 50px; padding: 2px 10px; font-size: 12px; font-weight: 600;
}
.post-card-cats a:hover { background: var(--blue); color: #fff; }
.post-card h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.post-card h2 a { color: var(--dark); }
.post-card h2 a:hover { color: var(--blue); }
.post-card-excerpt { font-size: 14px; color: var(--gray); line-height: 1.6; margin-bottom: 14px; }
.post-card-meta { font-size: 12.5px; color: var(--gray); display: flex; gap: 12px; flex-wrap: wrap; }
.post-card-meta a { color: var(--gray); }
.post-card-meta a:hover { color: var(--blue); }

/* ── SINGLE POST ────────────────────────── */
.single-post-wrap { max-width: 780px; margin: 0 auto; padding: 52px 20px; }
.post-header { margin-bottom: 28px; }
.post-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.post-cats a {
  background: var(--blue-light); color: var(--blue);
  border-radius: 50px; padding: 3px 12px; font-size: 12px; font-weight: 600;
}
.post-title { font-size: clamp(24px,3.5vw,36px); font-weight: 800; margin-bottom: 14px; line-height: 1.25; }
.post-meta { font-size: 13px; color: var(--gray); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.post-meta a { color: var(--gray); }
.post-meta a:hover { color: var(--blue); }
.post-tags { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.post-tags strong { font-size: 13px; color: var(--gray); }
.post-tags a {
  border: 1px solid var(--border); border-radius: 50px;
  padding: 3px 12px; font-size: 12px; color: var(--gray);
  transition: all var(--t);
}
.post-tags a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── CATEGORIES PAGE ────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cat-card {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  padding: 24px 20px; transition: all var(--t); text-align: center;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--blue); }
.cat-card p  { font-size: 13px; color: var(--gray); }

/* ── TAGS ────────────────────────────────── */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-cloud a {
  border: 1.5px solid var(--border); border-radius: 50px;
  padding: 5px 14px; font-size: 13px; color: var(--gray);
  transition: all var(--t);
}
.tag-cloud a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── PAGINATION ─────────────────────────── */
.pagination,
.nav-links {
  display: flex; justify-content: center; gap: 8px;
  margin: 40px 0; flex-wrap: wrap;
}
.page-numbers,
.nav-links a,
.nav-links span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  border: 1.5px solid var(--border);
  font-size: 14px; font-weight: 500; color: var(--dark);
  transition: all var(--t);
}
.page-numbers:hover,
.nav-links a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.page-numbers.current { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── SIDEBAR WIDGETS ────────────────────── */
.widget { margin-bottom: 28px; }
.widget-title {
  font-size: 15px; font-weight: 700; color: var(--dark);
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--blue);
}
.widget ul li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.widget ul li a { font-size: 14px; color: var(--dark); }
.widget ul li a:hover { color: var(--blue); }

/* WP search widget */
.search-form { display: flex; gap: 8px; }
.search-field {
  flex: 1; border: 1.5px solid var(--border);
  border-radius: 8px; padding: 8px 12px; font-size: 14px;
}
.search-submit {
  background: var(--blue); color: #fff;
  border-radius: 8px; padding: 8px 16px;
  font-size: 14px; font-weight: 600; cursor: pointer; border: none;
}

/* ── COMMENTS ────────────────────────────── */
.comment-form input,
.comment-form textarea {
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 10px 13px; font-size: 14px; width: 100%;
}
.comment-form .submit {
  background: var(--blue); color: #fff; border: none;
  border-radius: 8px; padding: 10px 24px; font-weight: 700; cursor: pointer;
}

/* ════════════════════════════════════════
   WORDPRESS ALIGNMENT HELPERS
   ════════════════════════════════════════ */
.aligncenter { margin: 0 auto; text-align: center; }
.alignleft   { float: left; margin-inline-end: 1.5em; margin-bottom: 1em; }
.alignright  { float: right; margin-inline-start: 1.5em; margin-bottom: 1em; }
.alignfull   { width: 100%; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
}

/* ════════════════════════════════════════
   RESPONSIVE — TABLET
   ════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .posts-loop { grid-template-columns: repeat(2,1fr); }
  .cat-grid   { grid-template-columns: repeat(2,1fr); }
}

/* ════════════════════════════════════════
   RESPONSIVE — MOBILE  ≤ 768px
   ════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Header */
  .header-nav { display: none; }
  .btn-header-cta { display: none; }
  .hamburger { display: flex; }

  /* Topbar — show only icons on mobile */
  .topbar-info { display: none; }
  .wefix-topbar .container { justify-content: space-between; }

  /* Hero */
  .wefix-hero { padding: 40px 0 56px; }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-content h1 { font-size: 26px; }
  .hero-content > p { font-size: 14.5px; }
  .hero-btns { gap: 10px; }
  .hero-stats { gap: 16px; }
  .hero-stat strong { font-size: 22px; }

  /* Booking card full width on mobile */
  .hero-booking-card { padding: 20px; }

  /* Stats strip */
  .stats-strip { grid-template-columns: 1fr 1fr; margin-top: -20px; padding: 20px; gap: 12px; }
  .stat-item strong { font-size: 24px; }

  /* Grids → single column */
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  /* Posts */
  .posts-loop { grid-template-columns: 1fr; }
  .cat-grid   { grid-template-columns: 1fr; }

  /* Sections */
  .wefix-section,
  .wefix-section-alt { padding: 44px 0; }
  .section-header { margin-bottom: 32px; }

  /* Forms */
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-col-full { grid-column: 1; }
  .tab-pane { padding: 20px 14px; }
  .tab-btn  { padding: 11px 13px; font-size: 12.5px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }

  /* CTA */
  .cta-band-inner { flex-direction: column; text-align: center; }
  .cta-btns { justify-content: center; }
  .cta-band { padding: 40px 0; }
  .cta-band h2 { font-size: 22px; }

  /* Page hero */
  .page-hero { padding: 36px 0; }

  /* Single post */
  .single-post-wrap { padding: 32px 16px; }
  .post-title { font-size: 22px; }

  /* About grid */
  .about-hero-grid { grid-template-columns: 1fr; }

  /* Floating buttons */
  .float-action-btn { width: 46px; height: 46px; font-size: 19px; }
  .floating-actions { bottom: 18px; inset-inline-end: 14px; }
}

/* ════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  ≤ 480px
   ════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: 23px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn-white,
  .hero-btns .btn-ghost-white { justify-content: center; text-align: center; width: 100%; }
  .stats-strip { padding: 16px; gap: 10px; }
  .stat-item strong { font-size: 20px; }
  .wefix-card { padding: 18px 14px; }
  .post-card-thumb img { height: 170px; }
  .section-header h2 { font-size: 22px; }
}

/* ════════════════════════════════════════
   RTL OVERRIDES
   ════════════════════════════════════════ */
body.rtl .wefix-hero::before { right: auto; left: -80px; }
body.rtl .entry-content blockquote {
  border-inline-start: 4px solid var(--blue);
  border-inline-end: none;
}


/* ════════════════════════════════════════
   SCROLL TO TOP BUTTON
   ════════════════════════════════════════ */
#scroll-top {
  position: fixed;
  bottom: 24px;
  /* OPPOSITE side from floating buttons (WA/Phone on inline-end) */
  inset-inline-start: 20px;
  z-index: 998;
  width: 46px; height: 46px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(30,64,175,.35);
  transition: all var(--t);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  line-height: 1;
}
#scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#scroll-top:hover {
  background: var(--blue-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30,64,175,.5);
}
/* RTL: flip sides so scroll-top stays on left, WA/phone on right */
body.rtl #scroll-top {
  inset-inline-start: 20px;
  inset-inline-end: auto;
}

/* ════════════════════════════════════════
   BRANDS SECTION
   ════════════════════════════════════════ */
.brands-section { padding: 64px 0; background: var(--white); }
.brands-tabs-nav {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 36px;
}
.brand-tab-btn {
  padding: 9px 20px; border-radius: 50px;
  font-size: 14px; font-weight: 600;
  border: 2px solid var(--border);
  color: var(--gray); cursor: pointer;
  transition: all var(--t); background: #fff;
}
.brand-tab-btn:hover { border-color: var(--blue); color: var(--blue); }
.brand-tab-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.brand-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  transition: all var(--t);
  cursor: default;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.brand-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.brand-logo-img {
  width: 72px; height: 40px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .7;
  transition: all var(--t);
}
.brand-card:hover .brand-logo-img {
  filter: grayscale(0%);
  opacity: 1;
}
/* SVG fallback logo */
.brand-logo-svg {
  width: 72px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: var(--gray);
  letter-spacing: -.3px;
  transition: color var(--t);
}
.brand-card:hover .brand-logo-svg { color: var(--blue); }
.brand-name {
  font-size: 12px; font-weight: 600; color: var(--gray);
  transition: color var(--t);
}
.brand-card:hover .brand-name { color: var(--blue); }

.brands-pane { display: none; }
.brands-pane.active { display: block; }

@media (max-width: 1024px) { .brands-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 768px)  { .brands-grid { grid-template-columns: repeat(3,1fr); gap: 12px; } }
@media (max-width: 480px)  { .brands-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .brand-card { padding: 14px 8px; }
}

/* Logo text styles in brand cards (inline SVG text) */
.blogo { font-family: 'Poppins',sans-serif; font-weight: 800; font-size: 13px; }
.blogo-samsung { color: #1428A0; }
.blogo-lg      { color: #A50034; }
.blogo-carrier { color: #003087; }
.blogo-trane   { color: #EF3E23; }
.blogo-daikin  { color: #005BAC; }
.blogo-midea   { color: #E31E24; }
.blogo-gree    { color: #00A650; }
.blogo-haier   { color: #CC0000; }
.blogo-panasonic { color: #003087; }
.blogo-sharp   { color: #003087; }
.blogo-hitachi { color: #E60026; }
.blogo-mitsubishi { color: #E60026; }
.blogo-bosch   { color: #007BC0; }
.blogo-siemens { color: #009999; }
.blogo-electrolux { color: #003366; }
.blogo-whirlpool { color: #003087; }
.blogo-zanussi  { color: #0073C7; }
.blogo-beko    { color: #D4002A; }
.blogo-ariston { color: #E31E24; }
.blogo-indesit { color: #E31E24; }

/* ════════════════════════════════════════
   BRANDS SECTION - REDESIGNED v1.1
   ════════════════════════════════════════ */
.brands-section { padding: 64px 0; background: var(--light); }

.brands-tabs-nav {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 36px;
}
.brand-tab-btn {
  padding: 10px 22px; border-radius: 50px;
  font-size: 14px; font-weight: 600;
  border: 2px solid var(--border);
  color: var(--gray); cursor: pointer;
  transition: all var(--t); background: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.brand-tab-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.brand-tab-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 4px 12px rgba(30,64,175,.25); }

.brands-pane { display: none; }
.brands-pane.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.brand-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 10px 12px;
  text-align: center;
  transition: all var(--t);
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  position: relative;
  overflow: hidden;
}
.brand-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border);
  transition: background var(--t);
}
.brand-card:hover {
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(30,64,175,.14);
  transform: translateY(-4px);
}

/* Logo box inside card */
.brand-logo-box {
  width: 76px; height: 42px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px;
  transition: all var(--t);
}
.brand-logo-box span {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -.3px;
  line-height: 1.1;
  text-align: center;
  display: block;
  filter: saturate(.6);
  transition: filter var(--t);
}
.brand-card:hover .brand-logo-box span { filter: saturate(1); }

.brand-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray);
  transition: color var(--t);
  line-height: 1.2;
}
.brand-card:hover .brand-name { color: var(--dark); }

/* Responsive */
@media (max-width: 1024px) { .brands-grid { grid-template-columns: repeat(5,1fr); } }
@media (max-width: 768px)  { .brands-grid { grid-template-columns: repeat(3,1fr); gap: 10px; }
  .brand-logo-box { width: 64px; height: 36px; }
  .brand-logo-box span { font-size: 10px; }
  .brand-card { padding: 12px 8px 10px; }
  .brand-name { font-size: 10.5px; }
}
@media (max-width: 480px)  { .brands-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .brand-tab-btn { padding: 8px 14px; font-size: 13px; }
}


/* ── Screen Reader Only (accessible hidden labels) ── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Quick form field wrapper ── */
.quick-form-field { position: relative; width: 100%; }
.quick-form-field input,
.quick-form-field select { width: 100%; }

/* ════════════════════════════════════════
   WCAG AA CONTRAST FIXES
   ════════════════════════════════════════ */

/* Section alt text - ensure 4.5:1 on #F3F4F6 */
.wefix-section-alt .section-header p,
.wefix-section-alt p,
.wefix-section-alt .service-card p,
.wefix-section-alt .wefix-card p {
  color: #4B5563 !important; /* #4B5563 on #F3F4F6 = 7.1:1 ✅ */
}

/* Footer bottom text */
.footer-bottom { color: rgba(255,255,255,0.75) !important; }
.footer-bottom span { color: rgba(255,255,255,0.75) !important; }

/* Footer col links - ensure readable */
.footer-col ul li a { color: rgba(255,255,255,0.82) !important; }

/* Brand name text */
.brand-name { color: #374151 !important; font-size: 12px !important; font-weight: 600 !important; }

/* Gray text on white bg minimum contrast */
.service-card p,
.feature-card p,
.post-card-excerpt,
.testi-text { color: #4B5563 !important; }

/* Topbar links on blue-dark bg */
.topbar-info a,
.topbar-info span { color: rgba(255,255,255,0.92) !important; }

/* ══════════════════════════════════════════
   SERVICE REQUEST BOX (inline widget)
   ══════════════════════════════════════════ */
.wefix-service-box {
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
  border: 2px solid var(--blue);
  border-radius: 16px;
  overflow: hidden;
  margin: 40px 0 32px;
  box-shadow: 0 4px 24px rgba(37,99,235,.10);
}
.wsb-header {
  background: linear-gradient(135deg, var(--blue), #1d4ed8);
  color: #fff;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.wsb-icon { font-size: 28px; flex-shrink: 0; }
.wsb-title { font-size: 18px; font-weight: 700; }
.wsb-sub   { font-size: 13px; opacity: .85; margin-top: 2px; }
.wsb-body  { padding: 22px 24px; }
.wsb-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wsb-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.wsb-field label { font-size: 13px; font-weight: 600; color: var(--dark); }
.wsb-field input,
.wsb-field textarea {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}
.wsb-field input:focus,
.wsb-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}
.wsb-field textarea { resize: vertical; min-height: 80px; }
.wsb-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.wsb-btn {
  flex: 1; min-width: 140px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; border: none;
  text-align: center; text-decoration: none;
  transition: opacity .2s, transform .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.wsb-btn:hover { opacity: .88; transform: translateY(-1px); }
.wsb-btn-email { background: var(--blue); color: #fff; }
.wsb-btn-wa    { background: #25d366;     color: #fff; }
.wsb-msg {
  margin-top: 14px; padding: 11px 14px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
}
.wsb-msg.success { background: #d1fae5; color: #065f46; }
.wsb-msg.error   { background: #fee2e2; color: #991b1b; }
@media (max-width: 600px) {
  .wsb-row { grid-template-columns: 1fr; }
  .wsb-actions { flex-direction: column; }
  .wsb-btn { min-width: unset; }
}

/* Date input fix — visible on dark hero background */
#hf-date { color-scheme: dark; }
#hf-date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; cursor: pointer; width: 20px; height: 20px; }

/* ═══════════════════════════════════════════
   REVIEWS BOX
   ═══════════════════════════════════════════ */
.wefix-reviews-box {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 16px rgba(30,64,175,.07);
  padding: 28px;
  margin: 32px 0;
  font-family: inherit;
}
.wrb-header { display: flex; align-items: flex-start; margin-bottom: 22px; }
.wrb-title-wrap { display: flex; align-items: flex-start; gap: 12px; }
.wrb-icon { font-size: 28px; line-height: 1; }
.wrb-title { font-size: 18px; font-weight: 700; color: #1e3a5f; }
.wrb-stats { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.wrb-avg { font-size: 20px; font-weight: 800; color: #f59e0b; }
.wrb-stars { color: #f59e0b; font-size: 17px; letter-spacing: 1px; }
.wrb-count { font-size: 13px; color: #6b7280; }

/* Cards */
.wrb-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.wrb-card {
  background: #f8faff;
  border: 1px solid #e0e7ff;
  border-radius: 12px;
  padding: 16px 18px;
}
.wrb-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wrb-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wrb-card-info { flex: 1; }
.wrb-card-name { font-weight: 700; font-size: 14px; color: #1e3a5f; }
.wrb-card-stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; margin-top: 2px; }
.wrb-card-date { font-size: 12px; color: #9ca3af; }
.wrb-card-body { font-size: 14px; color: #374151; line-height: 1.7; }

/* Form */
.wrb-form-wrap { border-top: 1px solid #e5e7eb; padding-top: 22px; }
.wrb-form-title { font-size: 15px; font-weight: 700; color: #1e3a5f; margin-bottom: 16px; }
.wrb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:540px){ .wrb-row { grid-template-columns: 1fr; } }
.wrb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.wrb-field label { font-size: 13px; font-weight: 600; color: #374151; }
.wrb-field input[type=text], .wrb-field textarea {
  border: 1.5px solid #d1d5db; border-radius: 8px;
  padding: 9px 12px; font-size: 14px; font-family: inherit;
  transition: border-color .2s; outline: none; resize: vertical;
}
.wrb-field input:focus, .wrb-field textarea:focus { border-color: #3b82f6; }

/* Star picker */
.wrb-star-pick { display: flex; gap: 4px; font-size: 26px; cursor: pointer; color: #d1d5db; margin-top: 2px; }
.wrb-star-pick span.active { color: #f59e0b; }
.wrb-star-pick span:hover { color: #f59e0b; }

/* Submit */
.wrb-submit {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff; border: none; border-radius: 10px;
  padding: 12px 28px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity .2s; font-family: inherit;
  width: 100%; margin-top: 4px;
}
.wrb-submit:hover { opacity: .88; }
.wrb-submit:disabled { opacity: .6; cursor: not-allowed; }
.wrb-feedback {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
}
.wrb-feedback.ok { background: #d1fae5; color: #065f46; }
.wrb-feedback.err { background: #fee2e2; color: #991b1b; }
/* ══ PAGE HERO & POST TITLE — Direction by Language ══ */

/* العربي: عنوان الصفحة من اليمين */
body.rtl .page-hero { text-align: right; }
body.rtl .page-hero h1 { text-align: right; direction: rtl; }
body.rtl .page-hero p  { margin: 0; text-align: right; }
body.rtl .breadcrumb   { justify-content: flex-end; direction: rtl; }
body.rtl .post-title   { text-align: right; direction: rtl; }
body.rtl .post-meta    { direction: rtl; }
body.rtl .entry-content h1 { text-align: right; direction: rtl; }

/* الإنجليزي: عنوان الصفحة من اليسار */
body.lang-en .page-hero { text-align: left; }
body.lang-en .page-hero h1 { text-align: left; direction: ltr; }
body.lang-en .page-hero p  { margin: 0; text-align: left; }
body.lang-en .breadcrumb   { justify-content: flex-start; direction: ltr; }
body.lang-en .post-title   { text-align: left; direction: ltr; }
body.lang-en .post-meta    { direction: ltr; }
body.lang-en .entry-content h1 { text-align: left; direction: ltr; }
/* ══════════════════════════════════════════════════════════
   ENGLISH (LTR) — COMPLETE LEFT-TO-RIGHT OVERRIDE
   يُطبَّق على كل العناصر عند body.lang-en
   ══════════════════════════════════════════════════════════ */

/* الجسم العام */
body.lang-en,
body.lang-en * {
  direction: ltr;
  unicode-bidi: normal;
}

/* النصوص والعناوين */
body.lang-en p,
body.lang-en h1,
body.lang-en h2,
body.lang-en h3,
body.lang-en h4,
body.lang-en h5,
body.lang-en h6,
body.lang-en li,
body.lang-en td,
body.lang-en th,
body.lang-en blockquote,
body.lang-en label,
body.lang-en span:not(.wefix-logo-part):not(.lang-label-ar):not(.lang-label-en),
body.lang-en div:not([style*="direction:ltr"]) {
  text-align: left;
}

/* Section headers */
body.lang-en .section-header,
body.lang-en .section-header h2,
body.lang-en .section-header p { text-align: left; }

/* Page hero */
body.lang-en .page-hero,
body.lang-en .page-hero h1,
body.lang-en .page-hero p { text-align: left; }

/* Post content */
body.lang-en .entry-content,
body.lang-en .entry-content h1,
body.lang-en .entry-content h2,
body.lang-en .entry-content h3,
body.lang-en .entry-content h4,
body.lang-en .entry-content h5,
body.lang-en .entry-content p,
body.lang-en .entry-content li { text-align: left; direction: ltr; }

/* Post title + breadcrumb */
body.lang-en .post-title { text-align: left; direction: ltr; }
body.lang-en .breadcrumb { justify-content: flex-start; direction: ltr; }

/* Hero home */
body.lang-en .hero-content h1,
body.lang-en .hero-content p { text-align: left; }
body.lang-en .hero-btns { justify-content: flex-start; }

/* Cards — keep center for UX */
body.lang-en .service-card,
body.lang-en .value-card,
body.lang-en .stat-item { text-align: center; }

/* CTA band */
body.lang-en .cta-band-inner { text-align: left; }

/* Footer */
body.lang-en .footer-col h4,
body.lang-en .footer-col p,
body.lang-en .footer-col li,
body.lang-en .footer-col a { text-align: left; direction: ltr; }

/* Inputs and forms */
body.lang-en input,
body.lang-en textarea,
body.lang-en select { direction: ltr; text-align: left; }

/* استثناءات: عناصر تبقى LTR بغض النظر عن اللغة */
body.lang-en .custom-logo-link,
body.lang-en [style*="direction:ltr"],
body.lang-en .lang-toggle { direction: ltr !important; }

/* ══════════════════════════════════════════════════════════
   ARABIC (RTL) — COMPLETE RIGHT-TO-LEFT
   ══════════════════════════════════════════════════════════ */
body.rtl .section-header,
body.rtl .section-header h2,
body.rtl .section-header p { text-align: right; }

body.rtl .hero-content h1,
body.rtl .hero-content p { text-align: right; }
body.rtl .hero-btns { justify-content: flex-end; }

body.rtl .cta-band-inner { text-align: right; }

body.rtl .footer-col h4,
body.rtl .footer-col p,
body.rtl .footer-col li,
body.rtl .footer-col a { text-align: right; }

body.rtl input,
body.rtl textarea,
body.rtl select { direction: rtl; text-align: right; }