/* =============================================================================
   AIHub Elementor Widgets – Master Stylesheet  v2.0
   All selectors namespaced with .aihub- to prevent theme conflicts.
   Fixes applied:
     #1  Branding: Performission logo badge, no subtitle text
     #2  Icons: solid green-tinted rounded backgrounds; cards solid white
     #3  Sticky header with proper z-index + scroll shadow
     #4  Additional services in a card container
     #5  Basic plan button: green (primary) not black
     #6  Button hover: text stays white (no blue bleed)
     #7  Contact popup modal styles
     #8  Dark-mode toggle: NOT rendered (removed from HTML)
   SEO: skip-link, focus styles, reduced-motion support
============================================================================= */

/* ── Custom Fonts: 29LT Zawi ────────────────────────────────────────────── */
@font-face {
  font-family: '29LTZawi';
  src: url('29LTZawi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: '29LTZawi';
  src: url('29LTZawi-Bold.ttf') format('truetype');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* ── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  --aihub-background:        hsl(0 0% 99%);
  --aihub-foreground:        hsl(0 0% 12%);
  --aihub-card:              hsl(0 0% 100%);
  --aihub-border:            hsl(0 0% 90%);
  --aihub-muted:             hsl(0 0% 96%);
  --aihub-muted-foreground:  hsl(0 0% 55%);
  --aihub-primary:           #35b673;
  --aihub-primary-dark:      #28a05f;
  --aihub-primary-foreground:hsl(0 0% 98%);
  --aihub-shadow:            0 4px 24px rgba(0,0,0,0.08);
  --aihub-shadow-md:         0 8px 32px rgba(0,0,0,0.10);
  --aihub-shadow-soft:       0 16px 48px rgba(0,0,0,0.07);
  --aihub-radius-sm:         0.75rem;
  --aihub-radius:            1rem;
  --aihub-radius-lg:         1.5rem;
  --aihub-font:              "29LTZawi", "Cairo", system-ui, -apple-system, sans-serif;
  --aihub-transition:        0.18s ease;
}

/* ── Accessibility: Skip link ───────────────────────────────────────────── */
.aihub-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--aihub-primary);
  color: #fff;
  border-radius: var(--aihub-radius-sm);
  font-family: var(--aihub-font);
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}
.aihub-skip-link:focus { top: 1rem; outline: 3px solid #fff; }

/* ── Global focus ring ──────────────────────────────────────────────────── */
.aihub-site-header a:focus-visible,
.aihub-btn:focus-visible,
.aihub-faq-question:focus-visible,
.aihub-form-input:focus-visible,
.aihub-form-textarea:focus-visible,
.aihub-popup-close:focus-visible {
  outline: 3px solid var(--aihub-primary);
  outline-offset: 2px;
}

/* ── Box-sizing reset scoped to all widget wrappers ─────────────────────── */
.aihub-site-header *, .aihub-hero *, .aihub-stats *, .aihub-features *,
.aihub-contact-section *, .aihub-pricing *, .aihub-faq *, .aihub-site-footer *,
.aihub-popup-overlay * { box-sizing: border-box; }

/* ── Base font / direction / color ──────────────────────────────────────── */
.aihub-site-header, .aihub-hero, .aihub-stats, .aihub-features,
.aihub-contact-section, .aihub-pricing, .aihub-faq, .aihub-site-footer,
.aihub-popup-overlay {
  font-family: var(--aihub-font);
  color: var(--aihub-foreground);
  direction: rtl;
  line-height: 1.6;
}

/* Prevent theme link color from bleeding in */
.aihub-site-header a, .aihub-hero a, .aihub-stats a, .aihub-features a,
.aihub-contact-section a, .aihub-pricing a, .aihub-faq a, .aihub-site-footer a {
  text-decoration: none;
  color: inherit;
}
/* Globally block theme blue/default :hover colour leak on any aihub anchor */
.aihub-site-header a:hover,
.aihub-hero a:hover,
.aihub-stats a:hover,
.aihub-features a:hover,
.aihub-contact-section a:hover,
.aihub-pricing a:hover,
.aihub-faq a:hover,
.aihub-site-footer a:hover,
.aihub-popup-overlay a:hover {
  color: inherit; /* each component overrides this specifically */
  text-decoration: none;
}

/* ── Container ──────────────────────────────────────────────────────────── */
.aihub-container {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.aihub-grid { display: grid; }

/* ══════════════════════════════════════════════════════════════════════════
   HEADER  – Sticky / fixed positioning
   Strategy: JS detects the header on DOMContentLoaded and moves it to
   document.body so it escapes Elementor's stacking contexts, then applies
   position:fixed. A spacer div is inserted to prevent layout jump.
   The CSS below covers both the initial state (before JS fires) and the
   JS-managed fixed state.
══════════════════════════════════════════════════════════════════════════ */
.aihub-site-header {
  /* Pre-JS fallback: sticky relative to nearest scroll ancestor */
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: box-shadow 0.2s ease, background 0.2s ease;
  will-change: box-shadow;
  box-sizing: border-box;
}

/* JS-managed fixed state – applied when header is lifted to <body> */
.aihub-site-header.aihub-header-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;  /* above Elementor popups (z-index: 9999) */
}

.aihub-site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.99);
}

/* Spacer inserted by JS to prevent layout jump when header goes fixed */
.aihub-header-spacer {
  display: block;
  width: 100%;
}

/* Also force any Elementor SECTION wrapping the header to not hide overflow */
.elementor-section:has(.aihub-site-header),
.e-con:has(.aihub-site-header) {
  overflow: visible !important;
  z-index: 99998 !important;
  position: relative !important;
}

/* In Elementor editor: keep relative so it doesn't cover the panel */
.elementor-editor-active .aihub-site-header,
.elementor-editor-active .aihub-site-header.aihub-header-fixed {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 10 !important;
  box-shadow: none !important;
}

.aihub-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  gap: 1rem;
}
@media (min-width: 1024px) { .aihub-header-inner { height: 4.5rem; } }

/* ── Brand – green AI square + Performission PNG, side by side ── */
.aihub-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none !important;
}
.aihub-brand-logo {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--aihub-radius-sm);
  background: var(--aihub-primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  line-height: 1;
}
/* Legacy text nodes hidden now that we use the PNG */
.aihub-brand-text     { display: none !important; }
.aihub-brand-title    { display: none !important; }
.aihub-brand-subtitle { display: none !important; }

/* Performission PNG sits directly next to the green square */
.aihub-brand-partner {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.aihub-performission-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain;
  display: block;
  opacity: 1;
  mix-blend-mode: normal;
  transition: opacity var(--aihub-transition);
}
.aihub-contact-section-dark .aihub-performission-logo {
  mix-blend-mode: screen;
}
.aihub-brand:hover .aihub-performission-logo { opacity: 0.82; }
.aihub-performission-text { display: none !important; }

/* Footer brand: identical layout + size to header */
.aihub-site-footer .aihub-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.aihub-site-footer .aihub-brand-logo {
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.aihub-site-footer .aihub-performission-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 140px !important;
}

/* Desktop nav */
.aihub-nav { display: none; }
.aihub-nav-list { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.aihub-nav-list a { font-size: 0.925rem; font-weight: 600; color: rgba(0,0,0,0.58); transition: color var(--aihub-transition); }
.aihub-nav-list a:hover { color: var(--aihub-primary); }
/* Ensure any theme link override can't inject blue on hover */
.aihub-site-header a:hover,
.aihub-site-header a:focus,
.aihub-hero a:hover,
.aihub-hero a:focus { text-decoration: none; }
/* Nav links inside colored backgrounds should stay white */
.aihub-contact-section-dark a:hover { color: #fff !important; }
.aihub-header-actions { display: none; gap: 0.6rem; align-items: center; }

@media (min-width: 768px) {
  .aihub-nav { display: block; }
  .aihub-header-actions { display: flex; }
  .aihub-nav-toggle-label { display: none !important; }
  .aihub-mobile-nav { display: none !important; }
}

/* Hamburger */
.aihub-nav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.aihub-nav-toggle-label {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  cursor: pointer;
  border-radius: var(--aihub-radius-sm);
  transition: background var(--aihub-transition);
}
.aihub-nav-toggle-label:hover { background: rgba(0,0,0,0.04); }
.aihub-hamburger {
  width: 1.35rem; height: 0.125rem;
  background: rgba(0,0,0,0.65);
  border-radius: 999px;
  position: relative;
  transition: transform 0.22s ease, background 0.22s ease;
}
.aihub-hamburger::before, .aihub-hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.35rem; height: 0.125rem;
  background: rgba(0,0,0,0.65);
  border-radius: 999px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.aihub-hamburger::before { top: -0.4rem; }
.aihub-hamburger::after  { top:  0.4rem; }

/* Mobile nav drawer */
.aihub-mobile-nav {
  max-height: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.98);
  border-top: 1px solid rgba(0,0,0,0.07);
  transition: max-height 0.35s ease;
}
.aihub-mobile-nav-inner {
  padding: 0.6rem 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.aihub-mobile-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.aihub-mobile-nav-list a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--aihub-radius-sm);
  font-weight: 600;
  color: rgba(0,0,0,0.7);
  transition: background var(--aihub-transition), color var(--aihub-transition);
}
.aihub-mobile-nav-list a:hover { background: rgba(53,182,115,0.07); color: var(--aihub-primary); }
.aihub-mobile-nav-actions { display: grid; gap: 0.5rem; }

.aihub-nav-toggle:checked + .aihub-nav-toggle-label .aihub-hamburger { transform: rotate(45deg); background: transparent; }
.aihub-nav-toggle:checked + .aihub-nav-toggle-label .aihub-hamburger::before { transform: rotate(90deg); }
.aihub-nav-toggle:checked + .aihub-nav-toggle-label .aihub-hamburger::after  { opacity: 0; }
.aihub-nav-toggle:checked ~ .aihub-mobile-nav { max-height: 100dvh; }
/* Class-based fallback for when toggle is nested (JS adds this class to header) */
.aihub-site-header.aihub-nav-open .aihub-mobile-nav { max-height: 100dvh; }
.aihub-site-header.aihub-nav-open .aihub-nav-toggle-label .aihub-hamburger { transform: rotate(45deg); background: transparent; }
.aihub-site-header.aihub-nav-open .aihub-nav-toggle-label .aihub-hamburger::before { transform: rotate(90deg); }
.aihub-site-header.aihub-nav-open .aihub-nav-toggle-label .aihub-hamburger::after  { opacity: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS  – Fix #5 #6: primary always green, hover text always white
══════════════════════════════════════════════════════════════════════════ */
.aihub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--aihub-font);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    transform var(--aihub-transition),
    box-shadow var(--aihub-transition),
    background-color var(--aihub-transition),
    color var(--aihub-transition),
    border-color var(--aihub-transition);
  text-decoration: none !important;
  white-space: nowrap;
}
.aihub-btn:hover  { transform: translateY(-1px); }
.aihub-btn:active { transform: translateY(0px); }

/* ── PRIMARY ── green bg, white text always, high specificity to beat themes */
.aihub-btn.aihub-btn-primary,
a.aihub-btn.aihub-btn-primary,
button.aihub-btn.aihub-btn-primary {
  background: var(--aihub-primary) !important;
  color: #ffffff !important;
  border-color: var(--aihub-primary) !important;
}
.aihub-btn.aihub-btn-primary:hover,
.aihub-btn.aihub-btn-primary:focus,
a.aihub-btn.aihub-btn-primary:hover,
a.aihub-btn.aihub-btn-primary:focus,
button.aihub-btn.aihub-btn-primary:hover,
button.aihub-btn.aihub-btn-primary:focus {
  background: var(--aihub-primary-dark) !important;
  border-color: var(--aihub-primary-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(53,182,115,0.35);
  text-decoration: none !important;
}

/* ── GHOST ── transparent → green on hover, white text */
.aihub-btn.aihub-btn-ghost,
a.aihub-btn.aihub-btn-ghost,
button.aihub-btn.aihub-btn-ghost {
  background: transparent !important;
  color: rgba(0,0,0,0.68) !important;
  border-color: rgba(0,0,0,0.16) !important;
}
.aihub-btn.aihub-btn-ghost:hover,
.aihub-btn.aihub-btn-ghost:focus,
a.aihub-btn.aihub-btn-ghost:hover,
a.aihub-btn.aihub-btn-ghost:focus,
button.aihub-btn.aihub-btn-ghost:hover,
button.aihub-btn.aihub-btn-ghost:focus {
  background: var(--aihub-primary) !important;
  border-color: var(--aihub-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(53,182,115,0.28);
  text-decoration: none !important;
}

/* ── OUTLINE ── transparent → green on hover, white text */
.aihub-btn.aihub-btn-outline,
a.aihub-btn.aihub-btn-outline,
button.aihub-btn.aihub-btn-outline {
  background: transparent !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.72) !important;
}
.aihub-btn.aihub-btn-outline:hover,
.aihub-btn.aihub-btn-outline:focus,
a.aihub-btn.aihub-btn-outline:hover,
a.aihub-btn.aihub-btn-outline:focus,
button.aihub-btn.aihub-btn-outline:hover,
button.aihub-btn.aihub-btn-outline:focus {
  background: var(--aihub-primary) !important;
  border-color: var(--aihub-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(53,182,115,0.28);
  text-decoration: none !important;
}

/* Sizes */
.aihub-btn-lg    { padding-block: 0.9rem; padding-inline: 1.5rem; font-size: 1rem; }
.aihub-btn-fluid { width: 100%; text-align: center; }
.aihub-btn-block { display: flex; width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════════════ */
.aihub-hero {
  position: relative;
  overflow: hidden;
  padding-block: 1rem 1rem;
  background: linear-gradient(160deg, rgba(240,250,245,0.8) 0%, var(--aihub-background) 60%);
}
@media (min-width: 640px) { .aihub-hero { padding-block: 1.5rem 1.5rem; } }
@media (min-width: 1024px) { .aihub-hero { padding-block: 2rem 2rem; } }

.aihub-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aihub-hero .aihub-container { position: relative; z-index: 1; }

.aihub-hero-circle {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.65;
}
.aihub-hero-circle-1 { width: 20rem; height: 20rem; top: 4rem; right: 2rem; background: rgba(53,182,115,0.2); }
.aihub-hero-circle-2 { width: 18rem; height: 18rem; bottom: 4rem; left: 2rem; background: rgba(53,182,115,0.12); }

.aihub-hero-content { max-width: 60rem; margin-inline: auto; text-align: center; padding-top: 0.5rem; }
@media (min-width: 1024px) { .aihub-hero-content { padding-top: 1rem; } }

/* Wrapper to center the RTL trust column */
.aihub-hero-trust-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.aihub-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(53,182,115,0.3);
  background: rgba(53,182,115,0.1);
  color: var(--aihub-primary);
  font-size: 0.875rem; font-weight: 700;
  margin-bottom: 0.75rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aihub-badge-icon { display: flex; align-items: center; width: 1rem; height: 1rem; }
.aihub-badge-icon svg { width: 100%; height: 100%; }

.aihub-hero-title {
  font-size: clamp(1.75rem, 5vw, 3.75rem);
  font-weight: 800; line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: -0.025em;
}
@media (min-width: 640px) { .aihub-hero-title { margin-bottom: 0.75rem; } }
.aihub-highlight { color: var(--aihub-primary); }

.aihub-hero-subtitle {
  max-width: 42rem; margin: 0 auto 0.75rem;
  font-size: 1rem; color: var(--aihub-muted-foreground); line-height: 1.7;
}
@media (min-width: 640px) { .aihub-hero-subtitle { margin-bottom: 1.25rem; font-size: 1.1rem; } }

.aihub-hero-cta { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; }
@media (min-width: 640px) {
  .aihub-hero-cta { flex-direction: row; }
  .aihub-hero-cta .aihub-btn { min-width: 13rem; }
}
.aihub-cta-icon { font-size: 0.85rem; }

/* Trust list – Fix #2: icons have solid rounded green bg */
/* RTL Fix: column layout so all items start from the same right edge */
.aihub-hero-trust {
  margin-top: 0.75rem;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin-inline: auto;
  direction: rtl;
}
@media (min-width: 1024px) {
  .aihub-hero-trust {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    margin-top: 1rem;
    width: 100%;
    flex-wrap: nowrap;
  }
}

/* Each trust item: icon first (right side in RTL), then text */
.aihub-trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--aihub-muted-foreground);
  direction: rtl;
  text-align: right;
  width: 100%;
  padding: 0;
  margin: 0;
}
@media (min-width: 1024px) {
  .aihub-trust-item {
    width: auto;
  }
}
/* Fix #2: solid icon background */
.aihub-trust-icon {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 0.6rem;
  background: rgba(53,182,115,0.12);
  flex-shrink: 0;
}
.aihub-trust-icon svg { width: 1rem; height: 1rem; }

/* Platform preview card */
.aihub-hero-preview { margin-top: 1.5rem; display: flex; justify-content: center; }
@media (min-width: 1024px) { .aihub-hero-preview { margin-top: 2.5rem; } }

.aihub-platform-card {
  width: clamp(18rem, 80vw, 52rem);
  border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;              /* Fix #2: solid white, no transparency */
  box-shadow: var(--aihub-shadow-md);
  padding: 0.75rem;
}
.aihub-platform-hero {
  aspect-ratio: 16/9;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(53,182,115,0.15), rgba(30,160,90,0.06));
  display: grid; place-items: center;
  padding: 2rem; text-align: center;
}
.aihub-platform-icon {
  width: 5rem; height: 5rem;
  border-radius: 1.25rem;
  background: rgba(53,182,115,0.18); /* Fix #2: solid tinted bg */
  display: grid; place-items: center;
  margin-inline: auto; margin-bottom: 1.25rem;
}
.aihub-platform-icon svg { width: 2.25rem; height: 2.25rem; }
.aihub-platform-title   { margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 800; }
.aihub-platform-subtitle{ margin: 0; color: var(--aihub-muted-foreground); font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   STATS
══════════════════════════════════════════════════════════════════════════ */
.aihub-stats {
  padding-block: 1.25rem;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
@media (min-width: 640px) { .aihub-stats { padding-block: 2rem; } }
.aihub-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem; text-align: center;
}
@media (min-width: 640px) { .aihub-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.aihub-stat-value { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; color: var(--aihub-primary); }
.aihub-stat-label { margin-top: 0.4rem; color: var(--aihub-muted-foreground); font-size: 0.9rem; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   FEATURES  – Fix #2: solid icon backgrounds, solid cards
══════════════════════════════════════════════════════════════════════════ */
.aihub-features { padding-block: 1.5rem 2rem; background: var(--aihub-background); }
@media (min-width: 640px) { .aihub-features { padding-block: 2rem 2.5rem; } }

.aihub-section-header { max-width: 48rem; margin: 0 auto 1rem; text-align: center; }
@media (min-width: 640px) { .aihub-section-header { margin-bottom: 1.5rem; } }
.aihub-section-title  {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800; letter-spacing: -0.025em;
}
.aihub-section-subtitle {
  margin: 0;
  color: var(--aihub-muted-foreground);
  font-size: 1.05rem; line-height: 1.75;
}

.aihub-features-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px)  { .aihub-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .aihub-features-grid { grid-template-columns: repeat(4, 1fr); } }

.aihub-feature-card {
  padding: 1rem;
  border-radius: var(--aihub-radius-lg);
  border: 1px solid rgba(0,0,0,0.07);
  background: #fff;            /* Fix #2: solid white */
  box-shadow: var(--aihub-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
@media (min-width: 640px) { .aihub-feature-card { padding: 1.5rem; } }
.aihub-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(53,182,115,0.28);
  box-shadow: 0 12px 36px rgba(53,182,115,0.14);
}

/* Fix #2: icon container – solid rounded green tint */
.aihub-feature-icon {
  width: 3rem; height: 3rem;
  border-radius: var(--aihub-radius-sm);
  display: grid; place-items: center;
  background: rgba(53,182,115,0.12);
  margin-bottom: 1rem;
}
.aihub-feature-icon svg { width: 1.4rem; height: 1.4rem; }
.aihub-feature-title { margin: 0 0 0.6rem; font-size: 1.1rem; font-weight: 700; }
.aihub-feature-desc  { margin: 0; color: var(--aihub-muted-foreground); font-size: 0.9rem; line-height: 1.7; }

/* ── Mobile RTL alignment fix: align icon + text from right edge ── */
@media (max-width: 639px) {
  .aihub-feature-card {
    text-align: right;
  }
  .aihub-feature-icon {
    margin-inline-start: auto;
    margin-inline-end: 0;
    margin-right: 0;
    margin-left: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════════════════════════════════════════ */
.aihub-contact-section { padding-block: 1.5rem 2rem; background: var(--aihub-background); }
@media (min-width: 640px) { .aihub-contact-section { padding-block: 2rem 2.5rem; } }
.aihub-contact-section-dark {
  background: var(--aihub-foreground);
  color: var(--aihub-background);
}

.aihub-contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px)  { .aihub-contact-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .aihub-contact-grid { grid-template-columns: 1.15fr 1fr; } }

.aihub-contact-info { max-width: 36rem; }
.aihub-contact-title   { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; }
.aihub-contact-subtitle{ margin: 0 0 2rem; color: var(--aihub-muted-foreground); font-size: 1.05rem; line-height: 1.75; }

.aihub-contact-cards { display: grid; gap: 1.1rem; }
.aihub-contact-card  { display: flex; align-items: flex-start; gap: 1rem; }
/* Fix #2: solid icon bg */
.aihub-contact-icon {
  width: 3rem; height: 3rem;
  border-radius: var(--aihub-radius-sm);
  display: grid; place-items: center;
  background: rgba(53,182,115,0.12);
  flex-shrink: 0;
}
.aihub-contact-icon svg { width: 1.3rem; height: 1.3rem; }
.aihub-contact-section-dark .aihub-contact-icon { background: rgba(53,182,115,0.25); }
.aihub-contact-label { margin: 0; font-size: 0.8rem; color: var(--aihub-muted-foreground); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.aihub-contact-link  { font-size: 0.95rem; font-weight: 700; color: inherit; }
.aihub-contact-link:hover { color: var(--aihub-primary); text-decoration: underline; }

/* Form card – solid white, Fix #2 */
.aihub-contact-form-card {
  border-radius: var(--aihub-radius-lg);
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;             /* Fix #2: solid white */
  box-shadow: var(--aihub-shadow-md);
}
@media (min-width: 640px) { .aihub-contact-form-card { padding: 2rem; } }
.aihub-contact-section-dark .aihub-contact-form-card {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
}

.aihub-contact-form { display: grid; gap: 1.25rem; }
.aihub-form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .aihub-form-grid { grid-template-columns: 1fr 1fr; } }

.aihub-form-field { display: grid; gap: 0.4rem; }
.aihub-form-label { font-size: 0.875rem; font-weight: 700; color: var(--aihub-foreground); }

.aihub-form-input,
.aihub-form-textarea {
  width: 100%;
  border-radius: var(--aihub-radius);
  border: 1.5px solid rgba(0,0,0,0.12);
  padding: 0.8rem 1rem;
  background: #fff;
  color: var(--aihub-foreground);
  font-size: 0.95rem;
  font-family: var(--aihub-font);
  outline: none;
  direction: rtl;
  text-align: right;
  transition: border-color var(--aihub-transition), box-shadow var(--aihub-transition);
}
.aihub-form-input:focus,
.aihub-form-textarea:focus {
  border-color: var(--aihub-primary);
  box-shadow: 0 0 0 3px rgba(53,182,115,0.18);
}
.aihub-form-textarea { resize: vertical; min-height: 9rem; }
.aihub-form-input::placeholder, .aihub-form-textarea::placeholder { color: rgba(0,0,0,0.36); }

/* Dark variant inputs */
.aihub-contact-section-dark .aihub-form-input,
.aihub-contact-section-dark .aihub-form-textarea {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
}
.aihub-contact-section-dark .aihub-form-input::placeholder,
.aihub-contact-section-dark .aihub-form-textarea::placeholder { color: rgba(255,255,255,0.45); }

/* Success state */
.aihub-success-message { text-align: center; padding: 2rem 1rem; }
.aihub-success-icon    { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
.aihub-success-title   { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 800; }
.aihub-success-text    { margin: 0; color: var(--aihub-muted-foreground); }

/* Toast */
.aihub-toast-message {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(5rem);
  background: var(--aihub-foreground); color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: var(--aihub-radius);
  font-size: 0.9rem; font-weight: 700;
  z-index: 9998; opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  white-space: nowrap;
  font-family: var(--aihub-font);
  box-shadow: var(--aihub-shadow-md);
}
.aihub-toast-message.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════
   PRICING  – Fix #4 #5 #6
══════════════════════════════════════════════════════════════════════════ */
.aihub-pricing { padding-block: 1.5rem 2rem; background: rgba(53,182,115,0.06); }
@media (min-width: 640px) { .aihub-pricing { padding-block: 2rem 2.5rem; } }

.aihub-pricing-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) {
  .aihub-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

/* Pricing card */
.aihub-pricing-card {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--aihub-radius-lg);
  background: #fff;
  border: 2px solid rgba(0,0,0,0.07);
  box-shadow: var(--aihub-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
@media (min-width: 640px) {
  .aihub-pricing-card {
    padding: 2rem;
    gap: 0.85rem;
  }
}
.aihub-pricing-card:hover { box-shadow: var(--aihub-shadow-md); }
.aihub-pricing-card-popular { border-color: rgba(53,182,115,0.45); }

.aihub-pricing-label {
  position: absolute;
  top: -0.85rem;
  right: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--aihub-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.aihub-pricing-badge    { margin: 0; font-size: 1.5rem; font-weight: 800; }
.aihub-pricing-subtitle { margin: 0; color: var(--aihub-muted-foreground); font-size: 0.9rem; }
.aihub-pricing-price    { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.aihub-pricing-amount   { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.aihub-pricing-unit     { color: var(--aihub-muted-foreground); font-size: 0.95rem; }
.aihub-pricing-commission { margin: 0; font-size: 0.88rem; color: var(--aihub-primary); font-weight: 600; }
.aihub-pricing-note     { margin: 0; font-size: 0.8rem; color: var(--aihub-muted-foreground); }
.aihub-pricing-desc     { margin: 0; color: var(--aihub-muted-foreground); font-size: 0.92rem; line-height: 1.55; }

/* Features list */
.aihub-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.aihub-pricing-features li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Icon */
.aihub-feature-icon-wrap {
  flex-shrink: 0;
  width: 1.1rem;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}
.aihub-feature-included .aihub-feature-icon-wrap { color: var(--aihub-primary); }
.aihub-feature-addon .aihub-feature-icon-wrap    { color: var(--aihub-primary); }

/* Additional services card */
.aihub-pricing-additional-card {
  margin-top: 1.25rem;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--aihub-radius-lg);
  padding: 1.25rem 1rem 1rem;
  box-shadow: var(--aihub-shadow);
}
@media (min-width: 640px) {
  .aihub-pricing-additional-card {
    margin-top: 1.5rem;
    padding: 1.5rem 2rem 1.25rem;
  }
}

.aihub-pricing-additional-title {
  margin: 0 0 1rem;
  font-weight: 800;
  font-size: 1.15rem;
}

.aihub-pricing-additional-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .aihub-pricing-additional-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .aihub-pricing-additional-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.aihub-additional-item {
  display: flex;
  flex-direction: row;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 1rem;
  border-radius: var(--aihub-radius);
  background: rgba(53,182,115,0.06);
  border: 1px solid rgba(53,182,115,0.15);
  font-size: 0.88rem;
  color: var(--aihub-foreground);
  text-align: right;
  direction: rtl;
}
.aihub-additional-item::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--aihub-primary);
  flex-shrink: 0;
}

.aihub-pricing-features li span:last-child {
  flex: 1;
  min-width: 0;
  max-width: 70%;
  word-break: break-word;
  overflow-wrap: break-word;
}

.aihub-pricing-terms {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--aihub-muted-foreground);
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════════════════════ */
.aihub-faq { padding-block: 1.5rem 2rem; background: var(--aihub-background); }
@media (min-width: 640px) { .aihub-faq { padding-block: 2rem 2.5rem; } }

.aihub-faq-list { display: grid; gap: 1rem; max-width: 48rem; margin-inline: auto; }

.aihub-faq-item {
  border: 1.5px solid rgba(0,0,0,0.07);
  border-radius: var(--aihub-radius-lg);
  background: #fff;
  padding: 0.5rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.aihub-faq-item[open] {
  border-color: rgba(53,182,115,0.35);
  box-shadow: 0 8px 30px rgba(53,182,115,0.10);
}
.aihub-faq-question {
  cursor: pointer;
  padding: 0.85rem 0;
  font-size: 1rem; font-weight: 700;
  color: var(--aihub-foreground);
  list-style: none;
  font-family: var(--aihub-font);
  display: flex; justify-content: space-between; align-items: center;
}
.aihub-faq-question::after {
  content: "+";
  font-size: 1.4rem; font-weight: 300;
  color: var(--aihub-primary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 0.5rem;
}
.aihub-faq-item[open] .aihub-faq-question::after { transform: rotate(45deg); }
.aihub-faq-question::-webkit-details-marker { display: none; }
.aihub-faq-answer {
  padding: 0 0 0.85rem;
  font-size: 0.925rem;
  color: var(--aihub-muted-foreground);
  line-height: 1.75;
}
.aihub-faq-cta { margin-top: 1.5rem; text-align: center; }
.aihub-faq-cta-text { margin: 0 0 0.75rem; color: var(--aihub-muted-foreground); font-size: 0.95rem; }
/* Fix #7: FAQ CTA is now a styled button, not just a text link */
.aihub-faq-cta-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--aihub-primary);
  color: #fff !important;
  font-weight: 700; font-size: 0.95rem;
  font-family: var(--aihub-font);
  transition: background var(--aihub-transition), box-shadow var(--aihub-transition), transform var(--aihub-transition);
}
.aihub-faq-cta-link:hover {
  background: var(--aihub-primary-dark);
  box-shadow: 0 4px 16px rgba(53,182,115,0.35);
  transform: translateY(-1px);
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   MINI CONTACT STRIP  –  widget-contact-mini.php
   A compact centred section: heading + 3-field inline form
══════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.aihub-contact-mini {
  padding-block: 2rem 2rem;
  background: #f8fdf9;                        /* very light green tint    */
  border-top: 1px solid rgba(53,182,115,.12);
  border-bottom: 1px solid rgba(53,182,115,.12);
}

.aihub-contact-mini-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

/* ── Heading block ── */
.aihub-contact-mini-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--aihub-foreground);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.aihub-contact-mini-sub {
  margin: 0;
  font-size: 0.95rem;
  color: var(--aihub-muted-foreground);
  max-width: 36rem;
  line-height: 1.6;
}

/* ── Form strip ── */
.aihub-contact-mini-form {
  width: 100%;
  max-width: 900px;
}

/* Fields row – stacks on mobile, 4-col on desktop */
.aihub-mini-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: end;
}

@media (min-width: 600px) {
  .aihub-mini-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .aihub-mini-fields {
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.75rem;
  }
}

/* Individual field */
.aihub-mini-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: right;
}

/* Submit button column – vertically aligns with inputs */
.aihub-mini-field-btn {
  justify-content: flex-end;
}

.aihub-mini-submit {
  width: 100%;
  white-space: nowrap;
  padding-inline: 1.8rem;
  height: 48px;                               /* match input height       */
}

/* ── Inline success message ── */
.aihub-mini-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  background: rgba(53,182,115,.1);
  border: 1px solid rgba(53,182,115,.25);
  border-radius: var(--aihub-radius);
  margin-top: 1rem;
  color: var(--aihub-primary);
  font-weight: 600;
}
.aihub-mini-success-icon {
  font-size: 1.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════════════ */
.aihub-site-footer {
  border-top: 1px solid rgba(53,182,115,0.18);
  background: rgba(53,182,115,0.06);
  padding-block: 2.5rem 1.75rem;
}
.aihub-footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .aihub-footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; } }
@media (min-width: 1024px) { .aihub-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; } }

.aihub-footer-brand { display: flex; flex-direction: column; gap: 0.75rem; }
.aihub-footer-text  { margin: 0; color: var(--aihub-muted-foreground); max-width: 28rem; line-height: 1.7; font-size: 0.9rem; }

.aihub-footer-social { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.aihub-social-link {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--aihub-radius-sm);
  border: 1.5px solid rgba(53,182,115,0.25);
  background: rgba(255,255,255,0.7);
  color: rgba(0,0,0,0.6);
  transition: border-color var(--aihub-transition), color var(--aihub-transition), background var(--aihub-transition);
}
.aihub-social-link svg { width: 1rem; height: 1rem; }
.aihub-social-link:hover {
  border-color: var(--aihub-primary);
  color: #fff;
  background: var(--aihub-primary);
}

.aihub-footer-heading { margin: 0 0 0.6rem; font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; }
.aihub-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.aihub-footer-list a, .aihub-footer-link { color: var(--aihub-muted-foreground); font-size: 0.9rem; transition: color var(--aihub-transition); }
.aihub-footer-list a:hover, .aihub-footer-link:hover { color: var(--aihub-primary); }

.aihub-footer-bottom {
  margin-top: 1.75rem;
  border-top: 1px solid rgba(53,182,115,0.18);
  padding-top: 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
}
@media (min-width: 640px) { .aihub-footer-bottom { flex-direction: row; justify-content: space-between; } }
.aihub-footer-bottom p { margin: 0; font-size: 0.85rem; color: var(--aihub-muted-foreground); }
.aihub-footer-bottom-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.aihub-footer-bottom-links a { color: var(--aihub-muted-foreground); font-size: 0.85rem; }
.aihub-footer-bottom-links a:hover { color: var(--aihub-primary); }

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT POPUP MODAL  – Fix #7
══════════════════════════════════════════════════════════════════════════ */
.aihub-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  /* Fix #8: never inherit or trigger dark-mode */
  color-scheme: light;
}
.aihub-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.aihub-popup-box {
  position: relative;
  background: #fff;
  border-radius: var(--aihub-radius-lg);
  padding: 2rem;
  width: min(480px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease;
  opacity: 0;
  direction: rtl;
  font-family: var(--aihub-font);
}
.aihub-popup-overlay.is-open .aihub-popup-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.aihub-popup-close {
  position: absolute;
  top: 1rem; left: 1rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: transparent;
  cursor: pointer;
  display: grid; place-items: center;
  color: rgba(0,0,0,0.5);
  transition: background var(--aihub-transition), color var(--aihub-transition);
  font-family: var(--aihub-font);
  padding: 0;
}
.aihub-popup-close:hover { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.9); }

.aihub-popup-header { text-align: center; margin-bottom: 1.5rem; }
.aihub-popup-icon { font-size: 2.25rem; display: block; margin-bottom: 0.75rem; }
.aihub-popup-title   { margin: 0 0 0.4rem; font-size: 1.4rem; font-weight: 800; color: var(--aihub-foreground); }
.aihub-popup-subtitle{ margin: 0; font-size: 0.9rem; color: var(--aihub-muted-foreground); line-height: 1.6; }

.aihub-popup-form { display: grid; gap: 1rem; }
.aihub-popup-textarea { min-height: 6rem !important; }

/* Popup success state */
.aihub-popup-success { text-align: center; padding: 1rem 0; }
.aihub-popup-success .aihub-success-icon { font-size: 3rem; margin-bottom: 0.75rem; }

/* ══════════════════════════════════════════════════════════════════════════
   GEO PRICING badge & animations
══════════════════════════════════════════════════════════════════════════ */
.aihub-geo-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(53,182,115,0.1);
  border: 1px solid rgba(53,182,115,0.28);
  color: var(--aihub-primary);
  font-size: 0.82rem; font-weight: 700;
  font-family: var(--aihub-font);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.aihub-geo-badge--visible { opacity: 1; transform: translateY(0); }

@keyframes aihub-geo-flash-out {
  to { opacity: 0; transform: translateY(-5px); }
}
@keyframes aihub-geo-flash-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aihub-geo-updating { animation: aihub-geo-flash-out 0.2s ease forwards; }
.aihub-geo-updated  { animation: aihub-geo-flash-in 0.3s ease forwards; }
.aihub-pricing[data-aihub-geo] .aihub-pricing-amount { transition: color 0.2s ease; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aihub-btn, .aihub-feature-card, .aihub-popup-box,
  .aihub-popup-overlay, .aihub-geo-badge, .aihub-geo-updating, .aihub-geo-updated,
  .aihub-toast-message { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FIX #8 – Remove dark-mode toggle buttons injected by themes/plugins
   Targets the most common selectors used by Elementor themes and popular
   WordPress dark-mode plugins. Hidden via display:none so they never flash.
══════════════════════════════════════════════════════════════════════════ */
.dark-mode-switcher,
.dark-mode-toggle,
[class*="dark-mode-btn"],
[class*="darkmode-toggle"],
[class*="darkmode-layer"],
.dark-mode-layer,
#dark-mode-toggle,
#darkModeToggle,
.elementor-dark-mode,
[data-dark-toggle],
.ast-dark-mode-toggle,
.generate-dark-mode-toggle,
.ocean-dark-mode-toggle,
.hfe-dark-mode-button,
.hfe-nav-menu__dark-mode {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Extended dark-mode toggle suppression (WP Dark Mode + others) ──────── */
#dark-mode-btn,
.dark-mode-btn,
[class*="dark-mode-btn"],
#theme-toggle,
.theme-toggle,
[class*="theme-toggle"],
#color-mode-toggle,
.color-mode-toggle,
#darken,
.darken-toggle,
.wp-dark-mode-switch,
.wp-dark-mode-switcher,
#wp-dark-mode-switch,
[class*="wp-dark-mode"],
[id*="wp-dark-mode"],
[class*="darkmode"]:not(.aihub-contact-section-dark):not(.aihub-footer),
[id*="darkmode"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT FORM 7 — Complete AIHub Design Override
   Covers ALL CF7 HTML output: wpcf7 wrapper, form, p tags, span tags,
   inputs, textarea, submit, validation, success/error messages.
══════════════════════════════════════════════════════════════════════════ */

/* 1. Outer wpcf7 div — remove all CF7 default spacing */
.aihub-cf7-wrap .wpcf7 {
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. The <form> itself — vertical flex column with gap */
.aihub-cf7-wrap .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

/* 3. CF7 wraps each field group in a <p> — make it a field block */
.aihub-cf7-wrap .wpcf7-form p {
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Hide auto-br tags to prevent flex gaps from doubling */
.aihub-cf7-wrap .wpcf7-form br {
  display: none !important;
}

/* 4. CF7 wraps each input in a <span> — must be block-level */
.aihub-cf7-wrap .wpcf7-form span.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* 5. Labels */
.aihub-cf7-wrap .wpcf7-form label {
  font-family: var(--aihub-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--aihub-foreground);
  display: block;
  text-align: right;
  direction: rtl;
  margin-bottom: 0 !important;
}
.aihub-contact-section-dark .aihub-cf7-wrap label {
  color: rgba(255,255,255,0.85);
}

/* 6. All text inputs */
.aihub-cf7-wrap .wpcf7-form input[type="text"],
.aihub-cf7-wrap .wpcf7-form input[type="email"],
.aihub-cf7-wrap .wpcf7-form input[type="tel"],
.aihub-cf7-wrap .wpcf7-form input[type="number"],
.aihub-cf7-wrap .wpcf7-form input[type="url"],
.aihub-cf7-wrap .wpcf7-form select {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--aihub-border);
  border-radius: var(--aihub-radius-sm);
  font-family: var(--aihub-font);
  font-size: 0.95rem;
  color: var(--aihub-foreground);
  background: var(--aihub-card);
  transition: border-color var(--aihub-transition), box-shadow var(--aihub-transition);
  direction: rtl;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* 7. Textarea */
.aihub-cf7-wrap .wpcf7-form textarea {
  display: block;
  width: 100%;
  min-height: 7rem;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--aihub-border);
  border-radius: var(--aihub-radius-sm);
  font-family: var(--aihub-font);
  font-size: 0.95rem;
  color: var(--aihub-foreground);
  background: var(--aihub-card);
  transition: border-color var(--aihub-transition), box-shadow var(--aihub-transition);
  direction: rtl;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
}

/* 8. Focus states */
.aihub-cf7-wrap .wpcf7-form input[type="text"]:focus,
.aihub-cf7-wrap .wpcf7-form input[type="email"]:focus,
.aihub-cf7-wrap .wpcf7-form input[type="tel"]:focus,
.aihub-cf7-wrap .wpcf7-form input[type="number"]:focus,
.aihub-cf7-wrap .wpcf7-form input[type="url"]:focus,
.aihub-cf7-wrap .wpcf7-form textarea:focus,
.aihub-cf7-wrap .wpcf7-form select:focus {
  border-color: var(--aihub-primary);
  box-shadow: 0 0 0 3px rgba(53,182,115,0.15);
}

/* 9. Dark section inputs */
.aihub-contact-section-dark .aihub-cf7-wrap input[type="text"],
.aihub-contact-section-dark .aihub-cf7-wrap input[type="email"],
.aihub-contact-section-dark .aihub-cf7-wrap input[type="tel"],
.aihub-contact-section-dark .aihub-cf7-wrap input[type="number"],
.aihub-contact-section-dark .aihub-cf7-wrap textarea,
.aihub-contact-section-dark .aihub-cf7-wrap select {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.aihub-contact-section-dark .aihub-cf7-wrap input::placeholder,
.aihub-contact-section-dark .aihub-cf7-wrap textarea::placeholder {
  color: rgba(255,255,255,0.45);
}
.aihub-contact-section-dark .aihub-cf7-wrap input:focus,
.aihub-contact-section-dark .aihub-cf7-wrap textarea:focus {
  border-color: var(--aihub-primary);
  background: rgba(255,255,255,0.12);
}

/* 10. Submit button — CF7 renders <input type="submit"> */
.aihub-cf7-wrap .wpcf7-form input[type="submit"] {
  display: block;
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: var(--aihub-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px;
  font-family: var(--aihub-font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--aihub-transition), transform var(--aihub-transition), box-shadow var(--aihub-transition);
  direction: rtl;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.aihub-cf7-wrap .wpcf7-form input[type="submit"]:hover {
  background: var(--aihub-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(53,182,115,0.35);
}

/* 11. Validation errors */
.aihub-cf7-wrap .wpcf7-not-valid-tip {
  font-family: var(--aihub-font);
  font-size: 0.8rem;
  color: #e53e3e;
  margin-top: 0.25rem;
  display: block;
}
.aihub-cf7-wrap .wpcf7-not-valid {
  border-color: #e53e3e !important;
}

/* 12. Response output (success/error bar) */
.aihub-cf7-wrap .wpcf7-response-output {
  font-family: var(--aihub-font);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: var(--aihub-radius-sm);
  margin-top: 0.5rem;
  border: none !important;
  direction: rtl;
}
.aihub-cf7-wrap .wpcf7-mail-sent-ok {
  background: rgba(53,182,115,0.12);
  color: var(--aihub-primary);
  border: 1px solid rgba(53,182,115,0.3) !important;
}
.aihub-cf7-wrap .wpcf7-mail-sent-ng,
.aihub-cf7-wrap .wpcf7-spam-blocked,
.aihub-cf7-wrap .wpcf7-validation-errors,
.aihub-cf7-wrap .wpcf7-acceptance-missing {
  background: rgba(229,62,62,0.08);
  color: #c53030;
  border: 1px solid rgba(229,62,62,0.25) !important;
}

/* 13. Spinner */
.aihub-cf7-wrap .wpcf7-spinner {
  margin-inline-start: 0.5rem;
  vertical-align: middle;
}

/* 14. Editor placeholder notice */
.aihub-cf7-notice {
  font-family: var(--aihub-font);
  padding: 1.5rem;
  background: rgba(53,182,115,0.06);
  border: 1.5px dashed rgba(53,182,115,0.3);
  border-radius: var(--aihub-radius);
  color: var(--aihub-muted-foreground);
  text-align: center;
  font-size: 0.9rem;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   CF7 MINI STRIP — horizontal grid layout
   .aihub-cf7-mini-wrap makes the form a 3-field + button row on desktop
══════════════════════════════════════════════════════════════════════════ */

.aihub-cf7-mini-wrap .wpcf7-form {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: end;
}
@media (min-width: 600px) {
  .aihub-cf7-mini-wrap .wpcf7-form {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 900px) {
  .aihub-cf7-mini-wrap .wpcf7-form {
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.75rem;
  }
  .aihub-cf7-mini-wrap .wpcf7-form input[type="submit"] {
    width: auto;
    white-space: nowrap;
    padding-inline: 1.8rem;
  }
}

.aihub-cf7-mini-wrap .wpcf7-form > p {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: right;
}

.aihub-cf7-mini-wrap .wpcf7-form input[type="text"],
.aihub-cf7-mini-wrap .wpcf7-form input[type="tel"],
.aihub-cf7-mini-wrap .wpcf7-form input[type="email"] {
  height: 48px;
  padding: 0 1rem;
}

.aihub-cf7-mini-wrap .wpcf7-form input[type="submit"] {
  height: 48px;
  padding: 0 1.8rem;
}

/* Response spans full row in mini form */
.aihub-cf7-mini-wrap .wpcf7-response-output {
  grid-column: 1 / -1;
  text-align: center;
}