/* Site header for pages outside the main layout (service detail pages, terms).
   Same look as the main site header; self-contained so it works with any page stylesheet. */
.vv-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid #E6E6EA; font-family: Inter, Arial, sans-serif; }
html[lang="ar"] .vv-header { font-family: Cairo, Arial, sans-serif; }
.vv-header-in { max-width: 1400px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vv-header-logo { display: flex; align-items: center; transition: transform 0.4s ease; }
.vv-header-logo:hover { transform: scale(1.05); }
.vv-header-logo img { height: 48px; width: auto; display: block; }
.vv-header-end { display: flex; align-items: center; gap: 20px; }
.vv-nav { display: flex; align-items: center; gap: 0.35rem; }
.vv-nav a { color: #000; font-weight: 600; font-size: 1rem; padding: 9px 16px; border-radius: 100px; text-decoration: none; transition: background-color 0.25s, color 0.25s; }
html[lang="ar"] .vv-nav a { font-weight: 700; font-size: 1.05rem; }
.vv-nav a:hover { background: #F4F4F6; color: #000; }
.vv-nav a.active { background: #F6EAF4; color: #A32890; }
.vv-nav a.vv-nav-cta { margin-inline-start: 0.5rem; background: #A32890; color: #fff; padding: 12px 24px; font-weight: 700; transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.vv-nav a.vv-nav-cta:hover { background: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 15px 30px rgba(163, 40, 144, 0.2); }
.vv-lang { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1.5px solid #E6E6EA; border-radius: 100px; background: #fff; white-space: nowrap; font-family: Inter, Arial, sans-serif; }
.vv-lang i { color: #9A9A9A; font-size: 0.9rem; }
.vv-lang a { color: #9A9A9A; font-size: 0.78rem; font-weight: 800; line-height: 1; text-decoration: none; transition: color 0.25s; }
.vv-lang a.active, .vv-lang a:hover { color: #A32890; }
.vv-lang span { color: #9A9A9A; font-size: 0.72rem; }
.vv-menu { display: none; background: none; border: 0; padding: 4px; font-size: 1.6rem; color: #000; cursor: pointer; }
@media (max-width: 860px) {
  .vv-header-in { position: relative; padding: 14px 16px; }
  .vv-header-logo img { height: 40px; }
  .vv-menu { display: block; }
  .vv-nav { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 16px; background: #fff; border-bottom: 1px solid #E6E6EA; border-radius: 0 0 16px 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); }
  .vv-nav.show { display: flex; }
  .vv-nav a.vv-nav-cta { margin: 8px 0 0; text-align: center; }
}
