/* Qovali visual foundation and the global consultation bar. */
:root {
  --qv-primary: #4c1d95;
  --qv-primary-hover: #2e1065;
  --qv-page-bg: #faf8f5;
  --qv-card-bg: #ffffff;
  --qv-text: #0a0a0c;
  --qv-muted: #625d68;
  --qv-border: #e7e1da;
  --qv-shadow-soft: 0 14px 36px rgba(23, 7, 46, .10);
  --qv-radius: 16px;
  --qv-section-space: clamp(3.5rem, 7vw, 6.5rem);

  /* Structural tokens sampled from the original light-mode card language. */
  --qv-ink: #18181b;
  --qv-surface: #ffffff;
  --qv-surface-warm: #faf8f5;
  --qv-border-strong: #18181b;
  --qv-shadow-offset: 4px 4px 0 #18181b;
  --qv-radius-structural: 0px;
  --qv-muted-ink: #52525b;
}

/* Closed means visually and interactively absent, including after a reload. */
.sticky-cta {
  --qv-consultation-bg: var(--sticky-cta-bg, var(--bg-surface, #fffdf9));
  --qv-consultation-text: var(--sticky-cta-text, var(--text-primary, #18181b));
  --qv-consultation-button: var(--sticky-cta-button, var(--pp, #4c1d95));
  --qv-consultation-button-text: #ffffff;
  --qv-consultation-hover: var(--pp-dark, #2e1065);
  position: fixed;
  inset-inline: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 199;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 22px;
  background: var(--qv-consultation-bg) !important;
  color: var(--qv-consultation-text) !important;
  border: 3px solid var(--border-strong, var(--qv-border-strong)) !important;
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--shadow-color, var(--qv-ink)) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(110%);
  transition: transform .28s ease, opacity .2s ease, visibility 0s linear .28s;
}

:root[data-theme="dark"] .sticky-cta {
  --qv-consultation-bg: var(--bg-surface, #17171d);
  --qv-consultation-text: var(--text-primary, #f5f2ec);
  --qv-consultation-button: var(--pp, #a78bfa);
  --qv-consultation-button-text: #18181b;
  --qv-consultation-hover: var(--pp-light, #c4b5fd);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sticky-cta {
    --qv-consultation-bg: var(--bg-surface, #17171d);
    --qv-consultation-text: var(--text-primary, #f5f2ec);
    --qv-consultation-button: var(--pp, #a78bfa);
    --qv-consultation-button-text: #18181b;
    --qv-consultation-hover: var(--pp-light, #c4b5fd);
  }
}

.sticky-cta.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.sticky-cta.is-closed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(110%);
}

.sticky-cta-text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  color: var(--qv-consultation-text) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.sticky-cta-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  border-radius: 0;
}

.sticky-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.sticky-cta .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 2px solid var(--border-strong, var(--qv-border-strong));
  border-radius: 0;
  box-shadow: var(--shadow-sm, 3px 3px 0 var(--qv-ink));
  background: var(--qv-consultation-button) !important;
  color: var(--qv-consultation-button-text) !important;
  font-family: var(--font-arabic, Tajawal, Arial, sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.sticky-cta .btn-sm:hover,
.sticky-cta .btn-sm:focus-visible {
  background: var(--qv-consultation-hover) !important;
  transform: translate(-2px, -2px);
  outline: 2px solid var(--qv-consultation-text);
  outline-offset: 4px;
}

.sticky-cta-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--border-strong, var(--qv-border-strong));
  border-radius: 0;
  box-shadow: var(--shadow-sm, 3px 3px 0 var(--qv-ink));
  background: transparent;
  color: var(--qv-consultation-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sticky-cta-close:hover,
.sticky-cta-close:focus-visible {
  color: var(--qv-consultation-text);
  background: var(--accent-pale, #ede9fe);
  outline: 2px solid var(--qv-consultation-text);
  outline-offset: 4px;
}

html.sticky-cta-visible body {
  padding-bottom: calc(var(--sticky-cta-height, 0px) + 28px + env(safe-area-inset-bottom));
}

html.sticky-cta-visible .wa-btn {
  bottom: calc(var(--sticky-cta-height, 72px) + 34px + env(safe-area-inset-bottom));
}

/* The editable workflow shares the page palette; video is a separate visual block. */
html body.qovali-seo-landing-page .seo-page-template.commerce-seo-page .qovali-methodology {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.commerce-seo-page #wdc-methodology-title {
  max-width: none;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
  padding-block: 0;
}

.commerce-seo-page .qovali-methodology > .section-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
}

.commerce-seo-page .qovali-methodology > .section-inner > :is(.qovali-methodology__intro, .qovali-methodology__tabs-wrap, .qovali-methodology__panels, .qovali-methodology__video) {
  grid-column: 1 / -1;
}

.commerce-seo-page .qovali-methodology__intro .section-sub {
  max-width: 100%;
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.65;
}

.commerce-seo-page .qovali-methodology__tab {
  flex-direction: row;
  gap: 8px;
  min-height: 72px;
  padding: 12px 10px;
  color: var(--methodology-ink);
  background: var(--methodology-surface);
  border: 2px solid var(--border-strong);
  border-radius: 0;
  box-shadow: none;
}

.commerce-seo-page .qovali-methodology__tab-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.commerce-seo-page .qovali-methodology__tab-number {
  font-size: 22px;
}

.commerce-seo-page .qovali-methodology__tab-title {
  font-size: 15px;
  text-align: right;
}

.commerce-seo-page .qovali-methodology__tab:hover {
  border-color: var(--border-strong);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sm);
}

.commerce-seo-page .qovali-methodology__tab.is-active {
  color: var(--methodology-active-ink);
  background: var(--methodology-purple);
  border-color: var(--border-strong);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

.commerce-seo-page .qovali-methodology__panel {
  gap: 24px;
  padding: 16px;
  background: var(--methodology-surface);
  border: 3px solid var(--border-strong);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}

.commerce-seo-page .qovali-methodology__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 10px 16px;
}

.commerce-seo-page .qovali-methodology__heading-row {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.commerce-seo-page .qovali-methodology__content > :is(h2, h3, h4, h5, h6) {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

.commerce-seo-page .qovali-methodology__content > :is(p, ul, .qovali-methodology__deliverable) {
  grid-column: 1 / -1;
  margin: 0;
}

.commerce-seo-page .qovali-methodology__items {
  gap: 4px;
}

.commerce-seo-page .qovali-methodology__items li {
  margin: 0;
}

.commerce-seo-page .qovali-methodology__visual {
  min-height: 190px;
  padding: 12px;
  background: var(--bg-surface-alt);
  border-radius: 0;
}

.commerce-seo-page .qovali-methodology__image,
.commerce-seo-page .qovali-methodology__illustration {
  max-height: 220px;
}

.commerce-seo-page .qovali-methodology__stage-number {
  font-size: 28px;
}

.commerce-seo-page .qovali-methodology__duration {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 0;
}

.commerce-seo-page .qovali-methodology__content h3 {
  font-size: 24px;
}

.commerce-seo-page .qovali-methodology__deliverable {
  border-color: var(--border-soft);
}

.commerce-seo-page .qovali-methodology__progress {
  margin-top: 16px;
}

.commerce-seo-page .qovali-methodology__progress-track {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: 0;
}

.commerce-seo-page .qovali-methodology__progress-bar {
  border-radius: 0;
}

.commerce-seo-page .qovali-methodology__controls {
  justify-content: flex-end;
  margin-top: 16px;
}

.commerce-seo-page .qovali-methodology__arrow {
  color: var(--methodology-active-ink);
  background: var(--methodology-purple);
  border: 2px solid var(--border-strong);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

.commerce-seo-page .qovali-methodology__arrow:hover:not(:disabled) {
  background: var(--methodology-purple-dark);
  border-color: var(--border-strong);
}

.commerce-seo-page .qovali-methodology__arrow:disabled {
  color: var(--methodology-muted);
  background: var(--bg-surface-alt);
  border-color: var(--border-soft);
  box-shadow: none;
}

@media (max-width: 820px) {
  .commerce-seo-page .qovali-methodology > .section-inner {
    column-gap: 12px;
  }

  .commerce-seo-page .qovali-methodology {
    width: calc(100% - 32px);
  }

  .commerce-seo-page .qovali-methodology__tab {
    min-height: 52px;
    padding: 8px 2px;
  }

  .commerce-seo-page .qovali-methodology__panels {
    padding-inline-end: 6px;
  }

  .commerce-seo-page .qovali-methodology__panel {
    width: calc(100% - 6px);
    padding: 16px;
  }

  .commerce-seo-page .qovali-methodology__visual {
    min-height: 150px;
  }

  .commerce-seo-page .qovali-methodology__image {
    max-height: 180px;
  }

  .commerce-seo-page .qovali-methodology__content {
    display: block;
  }

  .commerce-seo-page .qovali-methodology__heading-row,
  .commerce-seo-page .qovali-methodology__content > :is(h2, h3, h4, h5, h6, p, ul) {
    margin-bottom: 12px;
  }

  .commerce-seo-page .qovali-methodology__progress {
    gap: 6px;
  }
}

@media (max-width: 1000px) {
  .sticky-cta {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    inset-inline: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding-inline: 14px;
  }

  .sticky-cta-text {
    font-size: 14px;
  }

  .sticky-cta-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .sticky-cta[data-mobile="0"] {
    display: none !important;
  }
}

@media (min-width: 721px) {
  .sticky-cta[data-desktop="0"] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .sticky-cta .btn-sm {
    transition: none;
  }
}


/* Audited template defaults: preserve each content role and the saved block presets. */
body.page-id-72 #contact-page-title {
  font-size: var(--type-hero-marketing) !important;
  line-height: 1.2 !important;
  max-width: 24ch;
}
body.page-id-72 #contact-options-title,
.expert-seo-page :is(.expert-output-heading, .competition-heading) {
  font-size: var(--type-section-title) !important;
  line-height: 1.2 !important;
}
body.page-id-72 .qovali-company-hero { padding-block: var(--space-hero-marketing); }

/* Archive item titles are subordinate to the archive's single main heading. */
body:is(.post-type-archive-qovali_service, .category) main article {
  padding: 24px;
  margin-block: 24px;
  border: 2px solid var(--border-strong);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
body:is(.post-type-archive-qovali_service, .category) main article > .section-h2 {
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  line-height: 1.35 !important;
  margin-bottom: 12px;
}

.expert-seo-page .grid {
  gap: 20px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.expert-seo-page .grid .card {
  min-height: 0;
  padding: 24px;
  border: 3px solid var(--border-strong) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.expert-seo-page .grid .card:is(:hover, :focus-within) {
  background: var(--accent-pale);
}
.expert-seo-page .grid .card h3 { max-width: none; line-height: 1.3; }
.expert-seo-page .grid .card:is(:hover, :focus-within) :is(h3, p, li) {
  color: var(--text-primary);
}

/* Legal metadata must remain readable on either palette. */
.legal-meta { color: var(--text-secondary); }
.legal-body-inner :is(.legal-contact-box, blockquote) {
  border: 2px solid var(--border-strong);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  background: var(--bg-surface);
}
.service-single-media .service-single-image {
  border-radius: 0;
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Same title role, same scale across the remaining page families. */
body:is(.post-type-archive-qovali_service, .post-type-archive-qovali_industry, .category) main .section-heading > h1,
html body :is(#qovali-search-title, #qovali-404-title),
.legal-hero .legal-h1 {
  font-size: var(--type-page-title) !important;
  line-height: 1.2 !important;
}
html body.single-post #qovali-post-faq-title,
html body.serka-seo-page #serka-s5-title {
  font-size: var(--type-section-title) !important;
  line-height: 1.2 !important;
}

/* All four hero badges use the approved web-design badge's dark palette. */
html body :is(.hero, .commerce-hero) :is(.hero-badge, .qovali-hero-badge-style) {
  gap: 8px !important;
}
html[data-theme="dark"] body :is(.hero, .commerce-hero) :is(.hero-badge, .qovali-hero-badge-style) {
  background: rgba(20, 19, 26, .86) !important;
  color: #fff !important;
  border-color: #8b5cf6 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body :is(.hero, .commerce-hero) :is(.hero-badge, .qovali-hero-badge-style)::before {
  color: #c4b5fd !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body :is(.hero, .commerce-hero) :is(.hero-badge, .qovali-hero-badge-style) {
    background: rgba(20, 19, 26, .86) !important;
    color: #fff !important;
    border-color: #8b5cf6 !important;
    box-shadow: none !important;
  }
  :root:not([data-theme]) body :is(.hero, .commerce-hero) :is(.hero-badge, .qovali-hero-badge-style)::before {
    color: #c4b5fd !important;
  }
}
@media (max-width: 640px) {
  html body :is(.hero, .commerce-hero) :is(.hero-badge, .qovali-hero-badge-style) {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
  }
}