/* ==========================================================================
   Vizahub client CSS — styles for HTML-widget components and Elementor
   widget skin adjustments inside the generated page data.
   Loaded after the main child-theme style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FLAG BADGE
   -------------------------------------------------------------------------- */
.vh-flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--vh-primary);
  color: #fff;
  font-weight: 800;
  font-size: var(--vh-fs-sm);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.vh-flag-badge__img {
  width: 26px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.vh-flag-badge__label {
  display: none;
}

/* --------------------------------------------------------------------------
   1b. MAP TOOLTIP — flag inside hover bubble
   -------------------------------------------------------------------------- */
.vh-map-tt__row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.vh-map-tt__row .vh-map-tt__name {
  margin-bottom: 0;
  line-height: 1.2;
}

.vh-map-tt__flag {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   1c. COUNTRY DETAIL — flag inside breadcrumb
   -------------------------------------------------------------------------- */
.vh-breadcrumb-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  vertical-align: -2px;
  margin-right: 2px;
}

/* --------------------------------------------------------------------------
   2. CHIPS
   -------------------------------------------------------------------------- */
.vh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vh-space-2);
}
.vh-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-pill);
  background: var(--vh-surface);
  color: var(--vh-muted);
  font-size: var(--vh-fs-xs);
  font-weight: 700;
  line-height: 1.2;
}
.vh-chips--lg .vh-chip { padding: 10px 18px; font-size: var(--vh-fs-sm); }

/* --------------------------------------------------------------------------
   3. TICKS / BULLET LISTS
   -------------------------------------------------------------------------- */
.vh-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vh-space-2);
}
.vh-bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--vh-space-3);
  color: var(--vh-muted);
  font-size: var(--vh-fs-sm);
  line-height: 1.6;
}
.vh-bullets--lg li { font-size: var(--vh-fs-base); }
.vh-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--vh-primary-soft);
  color: var(--vh-primary);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. HERO VISUAL (homepage right card)
   -------------------------------------------------------------------------- */
.vh-hero-visual { position: relative; }
.vh-hero-visual__card {
  background: var(--vh-surface);
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-lg);
  box-shadow: var(--vh-shadow-lg);
  padding: var(--vh-space-6);
  max-width: 380px;
  margin-inline-start: auto;
}
.vh-hero-visual__head {
  display: flex;
  align-items: center;
  gap: var(--vh-space-4);
  padding-bottom: var(--vh-space-4);
  border-bottom: 1px dashed var(--vh-border-strong);
  margin-bottom: var(--vh-space-4);
}
.vh-hero-visual__head strong {
  display: block;
  font-size: var(--vh-fs-base);
  color: var(--vh-text);
}
.vh-hero-visual__head small {
  display: block;
  font-size: var(--vh-fs-xs);
  color: var(--vh-faint);
  margin-top: 2px;
}
.vh-hero-visual__row {
  display: flex;
  align-items: center;
  gap: var(--vh-space-3);
  padding: var(--vh-space-2) 0;
  font-size: var(--vh-fs-sm);
  font-weight: 600;
  color: var(--vh-muted);
}
.vh-hero-visual__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--vh-success);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.vh-hero-visual__foot {
  margin-top: var(--vh-space-4);
  padding-top: var(--vh-space-4);
  border-top: 1px dashed var(--vh-border-strong);
}
.vh-hero-visual__pill {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: var(--vh-radius-pill);
  background: var(--vh-primary-soft);
  color: var(--vh-primary);
  font-size: var(--vh-fs-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.vh-hero-visual__chip {
  position: absolute;
  inset-inline-start: 0;
  bottom: 24px;
  background: var(--vh-surface);
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-md);
  box-shadow: var(--vh-shadow-md);
  padding: var(--vh-space-3) var(--vh-space-4);
  max-width: 220px;
}
.vh-hero-visual__chip strong {
  display: block;
  font-size: var(--vh-fs-sm);
  color: var(--vh-text);
}
.vh-hero-visual__chip small {
  display: block;
  font-size: var(--vh-fs-xs);
  color: var(--vh-faint);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   5. COUNTRY TAB CONTENT (homepage tabs)
   -------------------------------------------------------------------------- */
.vh-tab-content { padding: var(--vh-space-2) 0; }
.vh-tab-content__head {
  display: flex;
  gap: var(--vh-space-4);
  align-items: flex-start;
  margin-bottom: var(--vh-space-5);
}
.vh-tab-content__head h4 {
  font-size: var(--vh-fs-xl);
  margin-bottom: var(--vh-space-1);
}
.vh-tab-content__head p {
  color: var(--vh-muted);
  font-size: var(--vh-fs-sm);
  margin: 0;
}
.vh-tab-content__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vh-space-6);
  margin-bottom: var(--vh-space-5);
}
.vh-tab-content__cols h5 {
  font-size: var(--vh-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vh-faint);
  margin-bottom: var(--vh-space-3);
}
.vh-tab-content__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vh-space-4);
  flex-wrap: wrap;
  padding-top: var(--vh-space-4);
  border-top: 1px solid var(--vh-border);
}
.vh-tab-note {
  margin: 0;
  color: var(--vh-muted);
  font-size: var(--vh-fs-sm);
  max-width: 560px;
}
.vh-tab-note strong { color: var(--vh-text); }

/* --------------------------------------------------------------------------
   6. LEGACY TABS WIDGET SKIN
   (generated data uses the classic `tabs` widget, not nested tabs)
   -------------------------------------------------------------------------- */
.vh-tabs .elementor-widget-tabs .elementor-tabs-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vh-space-2);
  margin-bottom: var(--vh-space-6);
  padding-bottom: var(--vh-space-4);
  border-bottom: 1px solid var(--vh-border);
}
.vh-tabs .elementor-widget-tabs .elementor-tab-title {
  border: 1px solid var(--vh-border);
  background: var(--vh-surface);
  color: var(--vh-muted);
  font-weight: 700;
  font-size: var(--vh-fs-sm);
  border-radius: var(--vh-radius-pill);
  padding: 10px 20px;
  cursor: pointer;
  transition: background var(--vh-t-fast), color var(--vh-t-fast), border-color var(--vh-t-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vh-tabs .elementor-widget-tabs .elementor-tab-title .vh-tab-flag {
  margin-inline-end: 0;
}
.vh-tabs .elementor-widget-tabs .elementor-tab-title:hover {
  border-color: var(--vh-primary);
  color: var(--vh-primary);
}
.vh-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active {
  background: var(--vh-primary);
  border-color: var(--vh-primary);
  color: #fff;
}
.vh-tabs .elementor-widget-tabs .elementor-tabs-content-wrapper {
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-md);
  background: var(--vh-surface);
}
.vh-tabs .elementor-widget-tabs .elementor-tab-content {
  padding: var(--vh-space-6);
  color: var(--vh-text);
}

/* --------------------------------------------------------------------------
   7. STEP LISTS (detail pages) + PROCESS CARDS (homepage)
   -------------------------------------------------------------------------- */
.vh-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--vh-space-3);
}
.vh-step-list .vh-step {
  display: flex;
  gap: var(--vh-space-4);
  align-items: flex-start;
  background: var(--vh-surface);
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-md);
  padding: var(--vh-space-4) var(--vh-space-5);
}
.vh-step-list .vh-step__num {
  margin-bottom: 0;
  flex-shrink: 0;
}
.vh-step-list .vh-step p {
  margin: 6px 0 0;
  color: var(--vh-muted);
  font-size: var(--vh-fs-sm);
  line-height: 1.6;
}
.vh-steps .vh-step {
  height: 100%;
}
.vh-steps .vh-step__num { margin-bottom: var(--vh-space-4); }

/* --------------------------------------------------------------------------
   8. FOOTER SKIN (legal bar + columns)
   -------------------------------------------------------------------------- */
.vh-footer .elementor-column { padding: 0 var(--vh-space-4); }
.vh-footer-logo img { max-width: 150px; }
.vh-footer-text p {
  color: rgba(242, 241, 239, 0.7);
  font-size: var(--vh-fs-sm);
  margin-top: var(--vh-space-4);
}
.vh-footer p {
  color: rgba(242, 241, 239, 0.75);
  font-size: var(--vh-fs-sm);
  margin: 0 0 var(--vh-space-2);
}
.vh-footer-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.vh-footer-legal {
  margin: 0;
  padding-top: var(--vh-space-4);
  text-align: center;
  font-size: var(--vh-fs-xs);
}
.vh-footer-legal a {
  color: rgba(242, 241, 239, 0.7);
  font-weight: 600;
}
.vh-footer-legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   9. PAGE HEAD / SINGLE WRAP / FORM SECTION
   -------------------------------------------------------------------------- */
.vh-page-head { padding-block: var(--vh-space-8) var(--vh-space-5); }
.vh-breadcrumbs-zone .elementor-widget-shortcode { font-size: var(--vh-fs-xs); }
.vh-single-wrap .elementor-widget-theme-post-title h1 {
  font-size: var(--vh-fs-4xl);
  line-height: 1.15;
}
.vh-single-wrap .elementor-widget-theme-post-content > div > .elementor-widget-wrap > .elementor-element {
  margin-bottom: var(--vh-space-5);
}
/* Country page content: Elementor's per-post CSS (post-18/19/21/22/23/24.css)
   hardcodes #16171A on .elementor-icon-list-text and .elementor-accordion-title
   with high specificity. That color is invisible on the dark background, so
   override it with the theme text token. Scoped to dark mode so light mode
   keeps Elementor's intended dark text. */
html[data-theme="dark"] body.vh-single .elementor-widget-theme-post-content .elementor-widget-text-editor,
html[data-theme="dark"] body.vh-single .elementor-widget-theme-post-content .elementor-widget-text-editor p,
html[data-theme="dark"] body.vh-single .elementor-widget-theme-post-content .elementor-icon-list-text,
html[data-theme="dark"] body.vh-single .elementor-widget-theme-post-content .elementor-accordion-title {
  color: var(--vh-text) !important;
}
html[data-theme="dark"] body.vh-single .elementor-widget-theme-post-content .elementor-accordion-title:hover,
html[data-theme="dark"] body.vh-single .elementor-widget-theme-post-content .elementor-accordion-title.elementor-active {
  color: var(--vh-primary) !important;
}
html[data-theme="dark"] body.vh-single .elementor-widget-theme-post-content .elementor-icon-list-icon svg {
  fill: var(--vh-primary) !important;
}
/* Home hero: Elementor text-editor has an inline dark-red <strong> (#800000)
   that is invisible on the dark hero background. Force it to the text token
   in dark mode only. */
html[data-theme="dark"] body.home .vh-hero .elementor-widget-text-editor strong {
  color: var(--vh-text) !important;
}
.vh-form-section .elementor-form { margin-top: var(--vh-space-4); }

/* Rank Math breadcrumbs (rendered via shortcode widget) */
.rank-math-breadcrumb {
  font-size: var(--vh-fs-xs);
  color: var(--vh-muted);
  padding: var(--vh-space-2) 0;
}
.rank-math-breadcrumb a { color: var(--vh-muted); font-weight: 600; }
.rank-math-breadcrumb a:hover { color: var(--vh-primary); }
.rank-math-breadcrumb .separator { margin: 0 8px; color: var(--vh-faint); }
.rank-math-breadcrumb p { margin: 0; }

/* --------------------------------------------------------------------------
   10. ICON BOX SKIN INSIDE vh-card (Elementor markup adjustments)
   -------------------------------------------------------------------------- */
.vh-card--icon.elementor-widget-icon-box .elementor-icon-box-icon,
.vh-card--icon .elementor-icon-box-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--vh-primary-soft);
  color: var(--vh-primary);
  margin-bottom: var(--vh-space-4);
}
.vh-card--icon.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon,
.vh-card--icon .elementor-icon-box-icon .elementor-icon {
  width: 52px;
  height: 52px;
  font-size: 24px;
}
.vh-card--icon.elementor-widget-icon-box .elementor-icon-box-title,
.vh-card--icon .elementor-icon-box-title { margin-bottom: var(--vh-space-2); }
.vh-card--icon.elementor-widget-icon-box .elementor-icon-box-description,
.vh-card--icon .elementor-icon-box-description {
  color: var(--vh-muted);
  font-size: var(--vh-fs-sm);
}
/* Position-left variant (trust strip) keeps the icon inline */
.vh-card--icon .elementor-icon-box-wrapper { gap: var(--vh-space-4); }
.vh-trust-strip .elementor-icon-box-icon { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10b. GOLDEN CARD BORDERS — Services + Why VIZAHUB cards
   -------------------------------------------------------------------------- */
.vh-card--icon.elementor-widget-icon-box,
.vh-card--icon.elementor-widget-icon-box.vh-card--why {
  border: 3px solid var(--vh-primary);
  border-radius: var(--vh-radius-md);
  background: var(--vh-surface);
  padding: var(--vh-space-5);
  transition: transform var(--vh-t-med) var(--vh-ease), box-shadow var(--vh-t-med) var(--vh-ease), border-color var(--vh-t-med);
}
.vh-card--icon.elementor-widget-icon-box:hover,
.vh-card--icon.elementor-widget-icon-box.vh-card--why:hover {
  transform: translateY(-4px);
  box-shadow: var(--vh-shadow-md);
  border-color: var(--vh-primary-dark);
}

/* --------------------------------------------------------------------------
   10c. WIDER WORKSPACE — Tabs + Services sections
   -------------------------------------------------------------------------- */
.vh-countries-section > .elementor-container,
.vh-services-section > .elementor-container,
.vh-why-section > .elementor-container {
  max-width: 1280px !important;
}

/* --------------------------------------------------------------------------
   10d. INTERACTIVE VISA WORLD MAP
   -------------------------------------------------------------------------- */
.vh-map-section { border-bottom: 1px solid var(--vh-border); }
.vh-map {
  background: var(--vh-surface);
  border: 3px solid var(--vh-primary);
  border-radius: var(--vh-radius-lg);
  padding: var(--vh-space-6);
  box-shadow: var(--vh-shadow-sm);
}
.vh-map__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vh-space-6);
  margin-bottom: var(--vh-space-6);
  flex-wrap: wrap;
}
.vh-map__text { flex: 1 1 420px; max-width: 640px; }
.vh-map__title {
  font-size: var(--vh-fs-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vh-ink);
  margin: 0 0 var(--vh-space-2);
}
.vh-map__sub { color: var(--vh-muted); margin: 0; font-size: var(--vh-fs-base); }
.vh-map__stats { display: flex; flex-direction: column; gap: var(--vh-space-2); min-width: 220px; }
.vh-map-stat {
  display: flex;
  align-items: center;
  gap: var(--vh-space-3);
  padding: var(--vh-space-2) var(--vh-space-4);
  border-radius: var(--vh-radius-sm);
  background: var(--vh-surface-raised, var(--vh-primary-soft));
  font-size: var(--vh-fs-sm);
  color: var(--vh-muted);
}
.vh-map-stat strong { font-size: var(--vh-fs-lg); color: var(--vh-ink); margin-inline-end: 2px; }
.vh-map-stat__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.vh-map-stat__dot--free    { background: #2e7d32; }
.vh-map-stat__dot--evisa   { background: #f57c00; }
.vh-map-stat__dot--required{ background: #c62828; }
.vh-map__canvas {
  position: relative;
  width: 100%;
  height: 460px;
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-md);
  overflow: hidden;
  background: linear-gradient(180deg, #f8f9fa, #eef0f3);
}
[data-theme="dark"] .vh-map__canvas {
  background: linear-gradient(180deg, #12161c, #0e1116);
}
#vh-world-map { width: 100%; height: 460px; }
.vh-map__canvas .jvectormap-container { width: 100% !important; height: 100% !important; }
.vh-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vh-space-4);
  justify-content: center;
  margin-top: var(--vh-space-5);
}
.vh-map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--vh-fs-xs);
  font-weight: 600;
  color: var(--vh-muted);
}
.vh-map-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.vh-map-legend__dot--free     { background: #2e7d32; }
.vh-map-legend__dot--evisa    { background: #f57c00; }
.vh-map-legend__dot--required { background: #c62828; }
.vh-map-legend__dot--home     { background: #C9A227; }
/* Region hover animation */
.jvectormap-region { transition: fill 0.25s ease, stroke 0.25s ease; cursor: pointer; }
.vh-map__canvas .jvectormap-tip {
  max-width: 260px;
}
.vh-map-tt__name { display: block; font-weight: 700; font-size: 13px; color: #fff; margin-bottom: 4px; }
.vh-map-tt__badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; margin-bottom: 4px; }
.vh-map-tt__badge--free     { background: rgba(46,125,50,0.25); color: #7bd389; }
.vh-map-tt__badge--evisa    { background: rgba(245,124,0,0.25); color: #ffb74d; }
.vh-map-tt__badge--required { background: rgba(198,40,40,0.25); color: #ef9a9a; }
.vh-map-tt__badge--none     { background: rgba(148,163,184,0.22); color: #cbd5e1; }
.vh-map-tt__badge--home     { background: rgba(201,162,39,0.25); color: #e8c955; }
.vh-map-tt__note { display: block; font-size: 11px; color: rgba(255,255,255,0.55); }

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .vh-map__head { flex-direction: column; }
  .vh-map__stats { flex-direction: row; flex-wrap: wrap; }
  .vh-map__canvas { height: 380px; }
  #vh-world-map { height: 380px; }
}
@media (max-width: 767px) {
  .vh-hero-visual__card { margin-inline-start: 0; max-width: 100%; }
  .vh-hero-visual__chip { position: static; margin-top: var(--vh-space-4); }
  .vh-tab-content__cols { grid-template-columns: 1fr; gap: var(--vh-space-4); }
}
/* --------------------------------------------------------------------------
    12. VISA MAP — STABLE COUNTRY POPUP
   -------------------------------------------------------------------------- */
.jvectormap-tip {
  z-index: 1300;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(18, 20, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}

.vh-map-pop {
  position: absolute;
  z-index: 1200;
  display: none;
  width: 260px;
  padding: 12px 30px 12px 14px;
  border-radius: 14px;
  background: rgba(18, 20, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow 0.2s, border-color 0.2s;
  font-family: inherit;
  text-align: left;
}
.vh-map-pop__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vh-map-pop__close:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}
.vh-map-pop.is-visible { display: flex; align-items: flex-start; gap: 12px; }
.vh-map-pop:hover, .vh-map-pop:focus-visible {
  border-color: #e8c955;
  box-shadow: 0 16px 40px rgba(232, 201, 85, 0.28);
  outline: none;
}
.vh-map-pop__flag img {
  display: block;
  width: 40px;
  height: 27px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.vh-map-pop__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vh-map-pop__name { font-weight: 800; font-size: 13px; }
.vh-map-pop__badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.vh-map-pop__badge--free { background: rgba(46, 125, 50, 0.25); color: #7bd389; }
.vh-map-pop__badge--evisa { background: rgba(245, 124, 0, 0.25); color: #ffb74d; }
.vh-map-pop__badge--required { background: rgba(198, 40, 40, 0.25); color: #ef9a9a; }
.vh-map-pop__badge--home { background: rgba(201, 162, 39, 0.25); color: #e8c955; }
.vh-map-pop__badge--none { background: rgba(255, 255, 255, 0.12); color: #cfd3dc; }
.vh-map-pop__note { color: rgba(255, 255, 255, 0.62); font-size: 11px; }
.vh-map-pop__cta { color: #e8c955; font-weight: 700; font-size: 11px; margin-top: 2px; }

@media (max-width: 767px) {
  .vh-hero-visual__card { padding: var(--vh-space-5); }
  .vh-tabs .elementor-widget-tabs .elementor-tab-content { padding: var(--vh-space-5); }
  .vh-tab-content__head { flex-direction: column; }
  .vh-tab-content__foot { align-items: flex-start; flex-direction: column; }
  .vh-step-list .vh-step { flex-direction: column; gap: var(--vh-space-2); }
  .vh-single-wrap .elementor-widget-theme-post-title h1 { font-size: var(--vh-fs-3xl); }
}

/* ==========================================================================
    13. HOME REDESIGN — blue accent -> dark yellow (Elementor global kit)
   ========================================================================== */
body.elementor-kit-4 {
  --e-global-color-primary: #C9A227;
  --e-global-color-accent:  #C9A227;
  /* Map the remaining Elementor system colors onto the theme tokens so every
     Elementor widget inherits readable light/dark text + neutral backgrounds
     instead of hard-coded black/white values falling back to browser defaults. */
  --e-global-color-secondary: var(--vh-muted);
  --e-global-color-text:      var(--vh-text);
  --e-global-color-background: var(--vh-surface);
}
html[data-theme="dark"] body.elementor-kit-4 {
  --e-global-color-primary: #E8C955;
  --e-global-color-accent:  #E8C955;
  --e-global-color-secondary: var(--vh-muted);
  --e-global-color-text:      var(--vh-text);
  --e-global-color-background: var(--vh-surface);
}

/* ==========================================================================
    14. HOME REDESIGN — 2-column row under the world map
   The section under the map renders a two-column layout: visa data on the
   left and a 300px sticky sidebar on the right. The grid lives on the
   Elementor container, not the section.
   ========================================================================== */
.vh-under-map > .elementor-container {
  max-width: 1280px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--vh-space-6);
  align-items: start;
}
.vh-under-map .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
}
.vh-under-map .vh-under-sidebar {
  position: sticky;
  top: 24px;
}
.vh-under-map .vh-under-sidebar .elementor-widget-shortcode { margin-bottom: 0; }
@media (max-width: 1200px) {
  .vh-under-map > .elementor-container { grid-template-columns: 1fr; }
  .vh-under-map .vh-under-sidebar { position: static; }
}

/* ---------- Home sidebar ---------- */
.vh-home-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--vh-space-5);
  min-width: 0;
}
.vh-home-card {
  background: var(--vh-surface);
  border: 3px solid var(--vh-primary);
  border-radius: var(--vh-radius-md);
  padding: var(--vh-space-5);
  transition: transform var(--vh-t-med) var(--vh-ease), box-shadow var(--vh-t-med) var(--vh-ease), border-color var(--vh-t-med);
}
.vh-home-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--vh-shadow-md);
  border-color: var(--vh-primary-dark);
}
.vh-home-card h3 {
  font-size: var(--vh-fs-lg);
  margin-bottom: var(--vh-space-3);
  color: var(--vh-text);
}
.vh-home-card p { color: var(--vh-muted); font-size: var(--vh-fs-sm); margin-bottom: 0; }
.vh-home-card__eyebrow {
  display: inline-block;
  font-size: var(--vh-fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vh-primary);
  margin-bottom: var(--vh-space-1);
}
.vh-home-card .vh-btn { margin-top: var(--vh-space-2); }

.vh-home-steps {
  list-style: none;
  margin: 0 0 var(--vh-space-4);
  padding: 0;
  counter-reset: vhhs;
}
.vh-home-steps li {
  position: relative;
  padding-inline-start: 40px;
  padding-block: var(--vh-space-2);
  color: var(--vh-muted);
  font-size: var(--vh-fs-sm);
  font-weight: 600;
  border-bottom: 1px dashed var(--vh-border);
}
.vh-home-steps li:last-child { border-bottom: 0; }
.vh-home-steps li::before {
  counter-increment: vhhs;
  content: counter(vhhs, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--vh-primary-soft);
  color: var(--vh-primary);
  font-size: var(--vh-fs-xs);
  font-weight: 800;
}

.vh-home-dests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vh-space-2);
}
.vh-home-dests a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--vh-space-2) var(--vh-space-3);
  border-radius: var(--vh-radius-sm);
  color: var(--vh-text);
  font-weight: 600;
  font-size: var(--vh-fs-sm);
  text-decoration: none;
  transition: background var(--vh-t-fast), color var(--vh-t-fast);
}
.vh-home-dests a:hover {
  background: var(--vh-primary-soft);
  color: var(--vh-primary);
}
.vh-home-dests img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.vh-home-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vh-space-2);
  font-size: var(--vh-fs-sm);
  color: var(--vh-muted);
}
.vh-home-contact li { display: flex; align-items: flex-start; gap: 8px; }
.vh-home-contact svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--vh-primary);
  flex-shrink: 0;
}
.vh-home-contact a {
  color: var(--vh-text);
  font-weight: 600;
  text-decoration: none;
}
.vh-home-contact a:hover { color: var(--vh-primary); }

/* ==========================================================================
    15. HOME REDESIGN — thick dark-yellow cards + hover shading
   ========================================================================== */
.vh-hero-visual__card,
.vh-trust-strip .elementor-column:has(.elementor-widget-icon-box),
.vh-services-section .elementor-column:has(.elementor-widget-icon-box),
.vh-why-section .elementor-column:has(.elementor-widget-icon-box),
.vh-steps-section .elementor-column:has(.vh-step__num),
.vh-countries-section .elementor-tabs-content-wrapper,
.vh-contact-card {
  border: 3px solid var(--vh-primary);
  border-radius: var(--vh-radius-md);
  background: var(--vh-surface);
  transition: transform var(--vh-t-med) var(--vh-ease), box-shadow var(--vh-t-med) var(--vh-ease), border-color var(--vh-t-med);
}
.vh-trust-strip .elementor-column:has(.elementor-widget-icon-box),
.vh-services-section .elementor-column:has(.elementor-widget-icon-box),
.vh-why-section .elementor-column:has(.elementor-widget-icon-box),
.vh-steps-section .elementor-column:has(.vh-step__num) {
  padding: var(--vh-space-5);
  height: 100%;
}
.vh-trust-strip .elementor-column:has(.elementor-widget-icon-box) .elementor-widget-wrap,
.vh-services-section .elementor-column:has(.elementor-widget-icon-box) .elementor-widget-wrap,
.vh-why-section .elementor-column:has(.elementor-widget-icon-box) .elementor-widget-wrap,
.vh-steps-section .elementor-column:has(.vh-step__num) .elementor-widget-wrap {
  padding: 0 !important;
}
.vh-trust-strip .elementor-column:has(.elementor-widget-icon-box):hover,
.vh-services-section .elementor-column:has(.elementor-widget-icon-box):hover,
.vh-why-section .elementor-column:has(.elementor-widget-icon-box):hover,
.vh-steps-section .elementor-column:has(.vh-step__num):hover,
.vh-countries-section .elementor-tabs-content-wrapper:hover,
.vh-hero-visual__card:hover,
.vh-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--vh-shadow-md);
  border-color: var(--vh-primary-dark);
}

/* ==========================================================================
    16. HOME REDESIGN — Choose Your Destination tabs skin + flags
   ========================================================================== */
.vh-countries-section .elementor-tabs-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vh-space-2);
  margin-bottom: var(--vh-space-6);
  padding-bottom: var(--vh-space-4);
  border-bottom: 1px solid var(--vh-border);
}
.vh-countries-section .elementor-tab-title {
  border: 1px solid var(--vh-border);
  background: var(--vh-surface);
  color: var(--vh-muted);
  font-weight: 700;
  font-size: var(--vh-fs-sm);
  border-radius: var(--vh-radius-pill);
  padding: 10px 20px;
  cursor: pointer;
  transition: background var(--vh-t-fast), color var(--vh-t-fast), border-color var(--vh-t-fast);
}
.vh-countries-section .elementor-tab-title:hover {
  border-color: var(--vh-primary);
  color: var(--vh-primary);
}
.vh-countries-section .elementor-tab-title.elementor-active {
  background: var(--vh-primary);
  border-color: var(--vh-primary);
  color: #fff;
}
.vh-countries-section .elementor-tab-title.elementor-active a,
.vh-countries-section .elementor-tab-title.elementor-active:hover { color: #fff; }
.vh-countries-section .elementor-tab-content { padding: var(--vh-space-6); color: var(--vh-text); }

.vh-tab-flag {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 8px;
  vertical-align: middle;
}
.vh-tab-flag img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
}
.vh-flag-badge--img {
  background: #fff !important;
  color: transparent !important;
  padding: 3px !important;
  border: 2px solid var(--vh-border-strong);
  border-radius: 6px !important;
  min-width: 0 !important;
}
.vh-flag-badge--img img {
  display: block;
  width: 36px;
  height: 24px;
  object-fit: cover;
  border-radius: 3px;
}
.vh-flag-badge--plain {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  height: auto !important;
}
.vh-flag-badge--plain img {
  display: block;
  width: 40px;
  height: 26px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.vh-flag-badge--plain--gcc img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: transparent;
}
.vh-flag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vh-space-3);
}
.vh-flag-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-pill);
  background: var(--vh-surface);
  font-weight: 700;
  font-size: var(--vh-fs-sm);
  color: var(--vh-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.vh-flag-strip__item img {
  width: 36px;
  height: 24px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.vh-card { position: relative; }
.vh-card .vh-card__link { position: static; }
.vh-card .vh-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (max-width: 767px) {
  .vh-countries-section .elementor-tab-content { padding: var(--vh-space-5); }
}

/* ==========================================================================
    17. HOME REDESIGN v2 — full-width hero + map, under-map grid, features
   ========================================================================== */

/* Home page content spans the full main area (no outer 300px rail) */
body.home .vh-main__grid { grid-template-columns: minmax(0, 1fr); }

/* Hero: break out of .vh-main__content and .vh-main to full viewport width */
body.home .vh-hero {
  width: 100vw;
  margin-inline-start: calc(-1 * (var(--vh-sidebar-w-collapsed) + var(--vh-space-6)));
}
body.vh-sidebar-active:not(.vh-sidebar-collapsed) body.home .vh-hero {
  margin-inline-start: calc(-1 * (var(--vh-sidebar-w) + var(--vh-space-6)));
}
body.home .vh-hero > .elementor-container {
  max-width: 1280px !important;
  margin-inline: auto;
  padding-inline: var(--vh-space-6);
}
@media (max-width: 1024px) {
  body.home .vh-hero {
    width: 100vw;
    margin-inline-start: calc(-1 * var(--vh-space-6));
  }
  body.home .vh-hero > .elementor-container {
    padding-inline: var(--vh-space-4);
  }
}
@media (max-width: 767px) {
  body.home .vh-hero {
    margin-inline-start: calc(-1 * var(--vh-space-4));
  }
  body.home .vh-hero > .elementor-container {
    padding-inline: var(--vh-space-3);
  }
  /* Kill the 96px top padding that Elementor sets on the hero section — it
     creates the white gap because the bg image is positioned at bottom-center
     without background-size:cover, so the top area shows the body background. */
  body.home .vh-hero {
    padding-top: 0 !important;
    background-size: cover !important;
  }
  /* Close any remaining spacing between header and hero */
  body.home .vh-main,
  body.home .vh-main__grid,
  body.home .vh-main__content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }
  body.home .elementor.elementor-10 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.home .elementor-location-header + .vh-main,
  body.home .elementor-location-header ~ .vh-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.home .elementor-location-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Country/service pages embed their own sidebar inside the content; the outer
   grid must not reserve the 300px rail column (leaving a blank gap). */
body.vh-single .vh-main__grid { grid-template-columns: minmax(0, 1fr); }

/* Wider hero + world map */
body.home .vh-hero > .elementor-container,
.vh-map-section > .elementor-container,
.vh-features > .elementor-container {
  max-width: 1280px !important;
}

/* ---------- Visa type rows (data column) ---------- */
.vh-visa-types {
  display: flex;
  flex-direction: column;
  gap: var(--vh-space-4);
}
.vh-visa-type {
  display: flex;
  align-items: center;
  gap: var(--vh-space-5);
  padding: var(--vh-space-5);
  border: 3px solid var(--vh-primary);
  border-radius: var(--vh-radius-md);
  background: var(--vh-surface);
  color: var(--vh-text);
  text-decoration: none !important;
  transition: transform var(--vh-t-med) var(--vh-ease), box-shadow var(--vh-t-med) var(--vh-ease), border-color var(--vh-t-med);
}
.vh-visa-type:hover {
  transform: translateY(-4px);
  box-shadow: var(--vh-shadow-md);
  border-color: var(--vh-primary-dark);
}
.vh-visa-type__badge {
  flex-shrink: 0;
  min-width: 170px;
  padding: 10px 16px;
  border-radius: var(--vh-radius-pill);
  background: var(--vh-primary-soft);
  color: var(--vh-primary);
  font-size: var(--vh-fs-sm);
  font-weight: 800;
  text-align: center;
}
.vh-visa-type__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vh-visa-type__name {
  font-size: var(--vh-fs-lg);
  font-weight: 800;
  color: var(--vh-text);
  line-height: 1.3;
}
.vh-visa-type__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--vh-fs-sm);
  font-weight: 600;
  color: var(--vh-muted);
}
.vh-visa-type__link svg { width: 14px; height: 14px; transition: transform var(--vh-t-fast); }
.vh-visa-type:hover .vh-visa-type__link { color: var(--vh-primary); }
.vh-visa-type:hover .vh-visa-type__link svg { transform: translateX(3px); }
html[dir="rtl"] .vh-visa-type:hover .vh-visa-type__link svg { transform: translateX(-3px); }
.vh-visa-type__count {
  flex-shrink: 0;
  font-size: var(--vh-fs-4xl);
  font-weight: 800;
  line-height: 1;
  color: var(--vh-primary);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.vh-visa-type__count small {
  display: block;
  font-size: var(--vh-fs-xs);
  font-weight: 700;
  color: var(--vh-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ---------- Features pane ("Built for Jordanian travellers") ---------- */
.vh-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vh-space-5);
}
.vh-feature {
  border: 3px solid var(--vh-primary);
  border-radius: var(--vh-radius-md);
  background: var(--vh-surface);
  padding: var(--vh-space-6) var(--vh-space-5);
  transition: transform var(--vh-t-med) var(--vh-ease), box-shadow var(--vh-t-med) var(--vh-ease), border-color var(--vh-t-med);
}
.vh-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--vh-shadow-md);
  border-color: var(--vh-primary-dark);
}
.vh-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--vh-primary-soft);
  font-size: 24px;
  margin-bottom: var(--vh-space-4);
}
.vh-feature h3 { font-size: var(--vh-fs-lg); margin-bottom: var(--vh-space-2); }
.vh-feature p { color: var(--vh-muted); font-size: var(--vh-fs-sm); margin: 0; line-height: 1.6; }

@media (max-width: 1024px) {
  .vh-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .vh-feature-grid { grid-template-columns: 1fr; }
  .vh-visa-type { flex-wrap: wrap; gap: var(--vh-space-3); }
  .vh-visa-type__badge { min-width: 0; }
  .vh-visa-type__body { flex: 1 1 100%; }
  .vh-visa-type__count { margin-inline-start: auto; }
}

/* ==========================================================================
    18. CONTACT CARD — WhatsApp / Messenger logo buttons (side by side)
   ========================================================================== */
.vh-contact-card__actions {
  flex-direction: row;
  align-items: stretch;
}
.vh-logo-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-sm);
  background: var(--vh-surface);
  transition: transform var(--vh-t-fast) var(--vh-ease), box-shadow var(--vh-t-fast) var(--vh-ease), border-color var(--vh-t-fast);
}
.vh-logo-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--vh-shadow-md);
  border-color: var(--vh-primary);
}
.vh-logo-btn img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* ==========================================================================
    18b. CONTACT CARD — Popular Destinations block (separate card)
   ========================================================================== */
.vh-dests-card {
  margin-top: var(--vh-space-5);
}
.vh-dests-card .vh-home-dests {
  margin-top: 0;
}
.vh-contact-card__dest {
  margin-top: var(--vh-space-4);
  padding-top: var(--vh-space-4);
  border-top: 1px dashed var(--vh-border-strong);
}
.vh-contact-card__dest-title {
  font-size: var(--vh-fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vh-primary);
  margin-bottom: var(--vh-space-3);
}

/* ==========================================================================
    18c. FOOTER — black background + yellow text (both day & night themes)
   ========================================================================== */
.vh-footer {
  background: #000000 !important;
}
.vh-footer .elementor-widget-theme-site-logo img { max-width: 220px; width: 100%; height: auto; }
@media (max-width: 767px) {
  .vh-footer .elementor-widget-theme-site-logo img { max-width: 140px; }
  .vh-footer img, .vh-footer__logo { max-width: 140px; }
}
.vh-footer,
.vh-footer-bar {
  background: #000000 !important;
  color: var(--vh-primary) !important;
}
.vh-footer h1, .vh-footer h2, .vh-footer h3, .vh-footer h4,
.vh-footer h5, .vh-footer h6,
.vh-footer .elementor-heading-title,
.vh-footer .elementor-text-editor,
.vh-footer p,
.vh-footer .vh-footer__disclaimer,
.vh-footer .vh-footer-legal,
.vh-footer .vh-footer-legal a,
.vh-footer .vh-footer__bar {
  color: var(--vh-primary) !important;
}
.vh-footer a { color: var(--vh-primary) !important; }
.vh-footer a:hover { color: #fff !important; }
.vh-footer-bar .elementor-widget-text-editor { color: var(--vh-primary) !important; }

/* ==========================================================================
    18d. CONTACT FORM — thick dark-yellow border around every field group
   ========================================================================== */
.vh-form .elementor-field-group {
  border: 3px solid var(--vh-primary);
  border-radius: var(--vh-radius-sm);
  padding: var(--vh-space-3);
  margin-bottom: var(--vh-space-4);
  background: var(--vh-surface);
}
.vh-form .elementor-field-group.elementor-field-type-hp_field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: none;
  padding: 0;
}
.vh-form .elementor-field-type-submit {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.vh-form .elementor-button {
  width: 100%;
}

/* ==========================================================================
    18e. CHATBOT — lightweight assistant widget
   ========================================================================== */
.vh-chat {
  position: fixed;
  z-index: 2147483000;
  bottom: 24px;
  inset-inline-end: 24px;
  font-family: var(--vh-font-en);
}
.vh-chat__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--vh-primary);
  background: var(--vh-primary);
  color: #fff;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--vh-shadow-lg);
  transition: transform var(--vh-t-fast) var(--vh-ease), background var(--vh-t-fast), border-color var(--vh-t-fast);
}
.vh-chat__launcher:hover {
  transform: translateY(-3px) scale(1.04);
  background: var(--vh-primary-dark);
  border-color: var(--vh-primary-dark);
}
.vh-chat__launcher-ico {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vh-chat__launcher svg { width: 26px; height: 26px; }
.vh-chat__launcher-close { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; }
.vh-chat.is-open .vh-chat__launcher-ico { display: none; }
.vh-chat.is-open .vh-chat__launcher-close { display: inline-flex; }
.vh-chat.is-open .vh-chat__launcher {
  background: var(--vh-surface);
  color: var(--vh-primary);
}
.vh-chat__panel {
  position: absolute;
  bottom: 76px;
  inset-inline-end: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--vh-surface);
  border: 3px solid var(--vh-primary);
  border-radius: var(--vh-radius-lg);
  box-shadow: var(--vh-shadow-lg);
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.vh-chat.is-open .vh-chat__panel {
  display: flex;
}
.vh-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--vh-primary);
  color: #fff;
}
.vh-chat__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
}
.vh-chat__head-text { flex: 1; min-width: 0; }
.vh-chat__head-text strong { display: block; font-size: var(--vh-fs-sm); }
.vh-chat__head-text small { display: block; font-size: var(--vh-fs-xs); opacity: 0.85; }
.vh-chat__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.vh-chat__close:hover { background: rgba(255, 255, 255, 0.32); }
.vh-chat__close svg { width: 18px; height: 18px; }
.vh-chat__body {
  flex: 1;
  min-height: 260px;
  max-height: 380px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--vh-bg);
}
.vh-chat__msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: var(--vh-fs-sm);
  line-height: 1.5;
}
.vh-chat__msg--bot {
  align-self: flex-start;
  background: var(--vh-surface-2);
  color: var(--vh-text);
  border-bottom-inline-start-radius: 4px;
}
.vh-chat__msg--user {
  align-self: flex-end;
  background: var(--vh-primary);
  color: #fff;
  border-bottom-inline-end-radius: 4px;
}
.vh-chat__msg-avatar {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-inline-end: 8px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.vh-chat__typing { display: inline-flex; gap: 4px; padding: 12px 16px; }
.vh-chat__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vh-primary);
  animation: vh-chat-blink 1.2s infinite both;
}
.vh-chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.vh-chat__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes vh-chat-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}
.vh-chat__replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vh-chat__reply {
  padding: 8px 14px;
  border: 1px solid var(--vh-primary);
  border-radius: var(--vh-radius-pill);
  background: var(--vh-surface);
  color: var(--vh-primary);
  font-size: var(--vh-fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--vh-t-fast), color var(--vh-t-fast);
}
.vh-chat__reply:hover {
  background: var(--vh-primary);
  color: #fff;
}
.vh-chat__form {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--vh-border);
  background: var(--vh-surface);
}
.vh-chat__input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--vh-border-strong);
  border-radius: var(--vh-radius-pill);
  background: var(--vh-bg);
  color: var(--vh-text);
  font-size: var(--vh-fs-sm);
  font-family: inherit;
}
.vh-chat__input:focus {
  outline: none;
  border-color: var(--vh-primary);
  box-shadow: var(--vh-focus-ring);
}
.vh-chat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--vh-primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--vh-t-fast);
}
.vh-chat__send:hover { background: var(--vh-primary-dark); }
.vh-chat__send svg { width: 18px; height: 18px; }
.vh-chat__foot {
  padding: 8px 16px;
  border-top: 1px solid var(--vh-border);
  background: var(--vh-surface-2);
  text-align: center;
}
.vh-chat__foot a {
  color: var(--vh-primary);
  font-size: var(--vh-fs-xs);
  font-weight: 700;
  text-decoration: none;
}
.vh-chat__foot a:hover { color: var(--vh-primary-dark); }
@media (max-width: 480px) {
  .vh-chat { bottom: 16px; inset-inline-end: 16px; }
  .vh-chat__panel { width: calc(100vw - 32px); bottom: 68px; }
}

/* --------------------------------------------------------------------------
   18b. SCHENGEN — member-state flag grid
   -------------------------------------------------------------------------- */
.vh-schengen-wrap {
  margin-top: var(--vh-space-5);
}
.vh-schengen-flags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.vh-schengen-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--vh-surface);
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-sm);
  font-size: var(--vh-fs-sm);
  font-weight: 600;
  color: var(--vh-text);
  transition: border-color var(--vh-t-fast), transform var(--vh-t-fast);
}
.vh-schengen-flag:hover {
  border-color: var(--vh-primary);
  transform: translateY(-1px);
}
.vh-schengen-flag img {
  width: 30px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

/* ==========================================================================
    19. CONTENT SURFACE BORDERS (day) + DARK-MODE VISIBILITY FIXES
    ========================================================================== */
/* Day (light) mode: sections are borderless; only cards/content blocks keep
   the thin black border + shadow so the layout is clean but cards stand out. */
html:not([data-theme="dark"]) .vh-section,
html:not([data-theme="dark"]) .vh-page-head,
html:not([data-theme="dark"]) .elementor-section {
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
html:not([data-theme="dark"]) .vh-section > .elementor-container { border-radius: 0; }
html:not([data-theme="dark"]) .vh-page-head > .elementor-container { border-radius: 0; }

/* Cards (content blocks + Elementor icon boxes used as cards) — day only */
html:not([data-theme="dark"]) .vh-card,
html:not([data-theme="dark"]) .vh-contact-card,
html:not([data-theme="dark"]) .vh-home-card,
html:not([data-theme="dark"]) .vh-section .elementor-icon-box-wrapper:not(.vh-trust-strip .elementor-icon-box-wrapper),
html:not([data-theme="dark"]) .vh-single-wrap .elementor-icon-box-wrapper {
  background-color: var(--vh-surface);
  border: 1px solid var(--vh-ink);
  border-radius: var(--vh-radius-md);
  box-shadow: var(--vh-shadow-md);
}

/* Tabs — solid black tab borders in day mode */
html:not([data-theme="dark"]) .vh-tabs .elementor-tab-title,
html:not([data-theme="dark"]) .vh-tabs .e-n-tab-title,
html:not([data-theme="dark"]) .vh-faq .elementor-accordion-item {
  border-color: var(--vh-ink);
}
html:not([data-theme="dark"]) .vh-faq .elementor-accordion-item { border: 1px solid var(--vh-ink); }

/* Day (light) mode: thicken all headings so they stand out clearly */
html:not([data-theme="dark"]) .vh-site h1,
html:not([data-theme="dark"]) .vh-site h2,
html:not([data-theme="dark"]) .vh-site h3,
html:not([data-theme="dark"]) .vh-site h4,
html:not([data-theme="dark"]) .elementor-heading-title {
  font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   Dark mode: force every content section back onto the dark surface and give
   it a readable border, so any Elementor hard-coded light/cream background
   (#F7F4F3, #fff, etc.) does not leave an invisible white block.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .vh-section,
html[data-theme="dark"] .vh-page-head {
  background-color: var(--vh-surface) !important;
  border: 1px solid var(--vh-border-strong);
  border-radius: var(--vh-radius-md);
}
html[data-theme="dark"] .vh-card,
html[data-theme="dark"] .vh-contact-card,
html[data-theme="dark"] .vh-home-card,
html[data-theme="dark"] .vh-section .elementor-icon-box-wrapper,
html[data-theme="dark"] .vh-single-wrap .elementor-icon-box-wrapper {
  background-color: var(--vh-surface);
  border-color: var(--vh-border-strong);
}

/* Elementor hard-codes near-black (#16171A) text on icon-list items — on a
   dark background that is "black lettering on black background". Use the theme
   text token in night mode. */
html[data-theme="dark"] .elementor-icon-list-text,
html[data-theme="dark"] .elementor-icon-list-text a {
  color: var(--vh-text) !important;
}

/* Elementor text widgets sometimes hard-code #fff / #FFFFFF which then reads
   as invisible white-on-white. Ensure widget body text falls back to the theme
   token in night mode on the content surfaces. */
html[data-theme="dark"] .vh-section .elementor-widget-text-editor,
html[data-theme="dark"] .vh-section .elementor-icon-box-description,
html[data-theme="dark"] .vh-single-wrap .elementor-widget-text-editor {
  color: var(--vh-text) !important;
}

/* ==========================================================================
   20. FOOTER UNIFICATION — shared by WordPress pages and static country pages
   Both load vh-client.css; only static pages also load css/style.css, so the
   canonical rules live here (css/style.css mirrors them) and win everywhere.
   ========================================================================== */
.vh-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: var(--vh-space-8) !important;
  padding-bottom: var(--vh-space-5) !important;
}
.vh-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vh-space-3);
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 1.5rem;
}
/* The WordPress footer emits a bare <img> (often width="1"); the static
   footer uses .vh-footer__logo. Style both identically so the logo renders at
   a controlled size in every context instead of 1px or full-column width. */
.vh-footer img,
.vh-footer__logo {
  max-width: 220px;
  width: auto !important;
  height: auto;
}
.vh-footer__disclaimer {
  text-align: center;
  max-width: 720px;
  margin: 0;
  font-size: var(--vh-fs-xs);
  line-height: 1.7;
}
.vh-footer-legal {
  text-align: center;
  font-size: var(--vh-fs-xs);
}
.vh-footer-legal a { color: var(--vh-primary) !important; }
.vh-footer-legal a:hover { color: #fff !important; }
.vh-footer-bar {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0;
  padding: var(--vh-space-4) 1.5rem;
  font-size: var(--vh-fs-xs);
  width: 100%;
}
.vh-footer-bar p { margin: 0; }

/* ==========================================================================
   21. START YOUR APPLICATION CTA — scale the sidebar/drawer image to 70%
   ========================================================================== */
.vh-cta--img img {
  width: 70% !important;
  height: auto;
}

/* ==========================================================================
   22. CONSULTATION FORM (Visa Consultation + Contact Us pages)
   Curved-corner frame, yellow titles, black field text, yellow submit button.
   Scoped to the "Send a Message" form wherever it appears.
   ========================================================================== */
form[name*="Send a Message"] {
  border: 3px solid var(--vh-primary) !important;
  border-radius: var(--vh-radius-lg) !important;
  background: var(--vh-surface) !important;
  padding: var(--vh-space-5) !important;
}
form[name*="Send a Message"] .elementor-field-group {
  margin-bottom: var(--vh-space-4) !important;
}
form[name*="Send a Message"] .elementor-field-label {
  color: var(--vh-primary) !important;
  font-weight: 700 !important;
}
form[name*="Send a Message"] .elementor-field-textual,
form[name*="Send a Message"] .elementor-field-textual input,
form[name*="Send a Message"] .elementor-field-textual textarea,
form[name*="Send a Message"] .elementor-field-textual select {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid var(--vh-border-strong) !important;
  border-radius: var(--vh-radius-sm) !important;
}
/* Curved corners around the input area itself */
form[name*="Send a Message"] .elementor-form-fields-wrapper {
  border-radius: var(--vh-radius-md);
}
/* Send Message button: yellow background, black text */
form[name*="Send a Message"] .elementor-button[type="submit"] {
  background: var(--vh-primary) !important;
  color: #000 !important;
  font-weight: 700 !important;
}
form[name*="Send a Message"] .elementor-button[type="submit"]:hover {
  background: var(--vh-primary-dark) !important;
  color: #000 !important;
}
/* Honeypot: hide the field (spam trap, invisible to humans) */
form[name*="Send a Message"] .elementor-field-type-hp_field {
  display: none !important;
}

/* ==========================================================================
   23. ABOUT US HERO IMAGE (top of the page)
   ========================================================================== */
.vh-about-hero {
  margin-bottom: var(--vh-space-6);
}
.vh-about-hero img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius-lg);
  box-shadow: var(--vh-shadow-md);
}

/* ==========================================================================
    24. HOME HERO — drop the black background overlay + the buttons under the text
    The hero text (badge / H1 / lead copy) and the start-app visual stay; only the
    Elementor background overlay div and the two button widgets are hidden.
    ========================================================================== */
body.home .vh-hero > .elementor-background-overlay,
body.home .vh-hero .elementor-widget-button,
body.home .vh-hero .elementor-button {
  display: none !important;
}

/* Home hero text: force black in day mode */
html:not([data-theme="dark"]) body.home .vh-hero,
html:not([data-theme="dark"]) body.home .vh-hero h1,
html:not([data-theme="dark"]) body.home .vh-hero h2,
html:not([data-theme="dark"]) body.home .vh-hero h3,
html:not([data-theme="dark"]) body.home .vh-hero p,
html:not([data-theme="dark"]) body.home .vh-hero span,
html:not([data-theme="dark"]) body.home .vh-hero li,
html:not([data-theme="dark"]) body.home .vh-hero ul,
html:not([data-theme="dark"]) body.home .vh-hero .elementor-heading-title,
html:not([data-theme="dark"]) body.home .vh-hero .elementor-widget-text-editor,
html:not([data-theme="dark"]) body.home .vh-hero .elementor-widget-text-editor p,
html:not([data-theme="dark"]) body.home .vh-hero .vh-hero-bullets,
html:not([data-theme="dark"]) body.home .vh-hero .vh-hero-bullets * {
  color: #000 !important;
}

/* ==========================================================================
    25. CONTACT PAGE — Human Check security question (math, per page load)
    ========================================================================== */
.vh-human-check__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.vh-hc-question {
  color: var(--vh-ink, #111827);
  font-weight: 600;
}
.vh-human-check input[name="human_check"] {
  margin-inline-start: .5rem;
  padding: .45rem .6rem;
  border: 2px solid var(--vh-primary, #C9A227);
  border-radius: var(--vh-radius-sm, .375rem);
  font-size: 1rem;
  width: 90px;
}
html[data-theme="dark"] .vh-hc-question { color: var(--vh-text, #e5e7eb); }

/* ==========================================================================
    26. MOBILE — kill white gap between topbar header and first content
    ========================================================================== */
@media (max-width: 1024px) {
  /* Nuclear: remove all spacing from the entire header template tree */
  header.elementor-location-header,
  header.elementor-location-header .elementor-section,
  header.elementor-location-header .elementor-column,
  header.elementor-location-header .elementor-column-gap-no > .elementor-container,
  header.elementor-location-header .elementor-widget-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* The <main> wrapper and the Elementor page wrapper must have zero top spacing */
  .vh-main,
  .vh-main__grid,
  .vh-main__content,
  .elementor.elementor-10 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }
  /* Force the topbar to sit flush */
  .vh-topbar {
    margin: 0 !important;
    padding: 0 !important;
  }
}