/* ==========================================================================
   ClickOnVisa — Homepage Styles
   ========================================================================== */

:root {
  --navy: #0b2b52;
  --navy-dark: #081d38;
  --blue: #12386b;
  --blue-light: #eaf1fb;
  --gold: #d9a441;
  --gold-dark: #c1902f;
  --white: #ffffff;
  --bg-soft: #f5f8fc;
  --text-dark: #10233d;
  --text-muted: #64748b;
  --border: #e6ebf2;
  --green: #16a34a;
  --shadow-sm: 0 2px 10px rgba(11, 43, 82, 0.06);
  --shadow-md: 0 8px 30px rgba(11, 43, 82, 0.10);
  --shadow-lg: 0 16px 40px rgba(11, 43, 82, 0.14);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --container: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* overflow-x: clip (not hidden) — hidden with no overflow-y set forces the
   browser to compute overflow-y: auto here, which silently breaks
   position: sticky for every descendant (the header, the visa sidebar,
   etc.) since body becomes their scrolling container instead of the
   viewport. clip blocks horizontal overflow without that side effect. */
html { overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  max-width: 100vw;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; margin: 0; padding: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Base defaults for every inline icon in the site's icon set (includes/icons.php).
   Line-style icons: no fill, colored stroke that inherits from the current
   text color unless a more specific rule (like .icon below) overrides it. */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon {
  width: 22px;
  height: 22px;
  stroke: var(--navy);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* Any icon dropped into a button without its own sizing class (icon(name, ''))
   falls back to this instead of the SVG's huge intrinsic default size. */
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--blue); box-shadow: var(--shadow-md); }

.btn-gold { background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover { background: var(--gold-dark); box-shadow: var(--shadow-md); }

.btn-outline { background: var(--white); color: var(--navy); border-color: var(--border); }
.btn-outline:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }

.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }

.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* All visual chrome + the hide/show-on-scroll transform live on this inner
   bar. The outer .site-header stays untouched so its sticky positioning
   never breaks (transform on a sticky element itself un-sticks it in most
   browsers). */
.site-header-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}
/* Hidden while scrolling down past the top; slides back in on scroll-up
   or once back at the top of the page. */
.site-header-bar.is-hidden { transform: translateY(-100%); }
/* Thin gold-accent gradient line under the header — reads as a deliberate
   brand touch instead of a plain 1px divider. */
.site-header-bar::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--navy) 55%, var(--gold) 100%);
  opacity: 0.9;
}
.site-header-bar.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 76px;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Real logo artwork — kept crisp with no filters/opacity/shadow so the
   gold/navy gradient in the source file renders exactly as designed. */
.logo-img {
  height: 56px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.main-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dark);
  position: relative;
  padding: 6px 0;
}
.main-nav a:hover { color: var(--navy); }
.main-nav a.active { color: var(--navy); font-weight: 600; }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}
.has-dropdown { display: inline-flex; align-items: center; gap: 4px; }
.has-dropdown svg { width: 14px; height: 14px; stroke: currentColor; }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.whatsapp-fab {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #eafaf1;
  color: #21c15e;
  flex-shrink: 0;
}
.whatsapp-fab svg { width: 20px; height: 20px; }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger svg { width: 26px; height: 26px; stroke: var(--navy); }

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 10px 24px 18px;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { padding: 12px 0; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--border); }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav .mobile-apply { color: var(--gold-dark); font-weight: 700; }

/* ---------------- Hero ---------------- */
.hero { padding: 60px 0 70px; background: var(--white); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(217,164,65,0.12);
  border: 1px solid rgba(217,164,65,0.3);
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  margin: 0 0 20px;
}
.hero-eyebrow svg { width: 15px; height: 15px; stroke: var(--gold-dark); flex-shrink: 0; }
.hero-eyebrow-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.hero-eyebrow-dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  animation: hero-eyebrow-ping 2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes hero-eyebrow-ping {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow-dot::after { animation: none; }
}
.hero-title {
  font-size: 58px;
  line-height: 1.03;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 20px;
  letter-spacing: -1px;
}
.hero-title .accent { color: var(--gold); }
.hero-desc {
  font-size: 16.5px;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 0 30px;
}
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.trust-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.trust-item span { font-size: 13px; font-weight: 700; color: var(--text-dark); line-height: 1.3; }
.trust-item .icon-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.trust-item:hover .icon-circle { transform: scale(1.08); }
.trust-item .icon-circle .icon { width: 18px; height: 18px; stroke: var(--white); }
/* Alternate between the two brand colors only (navy / gold) — keeps the
   hero on-theme instead of the mixed rainbow used in the Trust Strip
   section further down the page. */
.trust-item:nth-child(odd) .icon-circle { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); }
.trust-item:nth-child(even) .icon-circle { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%); }

.hero-media { position: relative; }
.hero-image {
  width: 100%;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

.status-card {
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 250px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.status-card h4 { margin: 0 0 12px; font-size: 15px; color: var(--navy); }
.status-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dark); margin-bottom: 8px;
  opacity: 0;
  animation: status-row-in 0.5s ease forwards;
}
.status-row:nth-child(2) { animation-delay: 0.4s; }
.status-row:nth-child(3) { animation-delay: 0.9s; }
.status-row svg { width: 16px; height: 16px; stroke: var(--green); flex-shrink: 0; }
.status-divider { border-top: 1px solid var(--border); margin: 12px 0; }
.status-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.status-value { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-dark); }
.status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; }
.status-dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #2563eb;
  animation: status-dot-ping 1.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes status-row-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes status-dot-ping {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .status-card, .status-row, .status-row svg, .status-dot::after { animation: none !important; opacity: 1 !important; }
}

/* ---------------- Visa Finder ---------------- */
.finder-wrap {
  margin-top: -8px;
  padding: 44px 0 56px;
  background:
    radial-gradient(circle at 12% 20%, rgba(217,164,65,0.10) 0%, transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(11,43,82,0.06) 0%, transparent 50%),
    var(--bg-soft);
}
.finder-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, var(--shadow-md));
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
}
.finder-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--navy) 55%, var(--gold) 100%);
}
.finder-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 700; color: var(--navy);
  margin: 0 0 22px;
}
.finder-title .icon { color: var(--gold); }
.finder-title .icon { width: 22px; height: 22px; }
.finder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.field select {
  width: 100%;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 14.5px;
  color: var(--text-dark);
  background: var(--bg-soft);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field select:focus { outline: none; border-color: var(--navy); background-color: var(--white); }
.finder-grid .btn { height: 48px; }

/* ---------------- Trust Strip ---------------- */
.trust-strip {
  position: relative;
  padding: 70px 0 88px;
  isolation: isolate;
  background: #eef2f6 url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=2070&auto=format&fit=crop") center/cover no-repeat;
}
/* Light navy/gold-tinted wash over the photo so it stays airy and legible,
   plus a fade to solid at the bottom so the photo blends smoothly into the
   white section below instead of cutting off in a hard rectangular edge. */
.trust-strip::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, var(--bg-soft) 96%),
    linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(234,241,251,0.82) 40%, rgba(245,248,252,0.9) 100%);
  z-index: -1;
}
/* Very faint dot-grid texture for a bit of depth */
.trust-strip::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(11,43,82,0.09) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: -1;
}
.trust-strip-divider-badge {
  position: absolute;
  left: 50%; bottom: -28px;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #fbbf24 100%);
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.6), 0 8px 20px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.trust-strip-divider-badge .icon { width: 24px; height: 24px; stroke: var(--navy-dark); }
.trust-strip-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 20px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 20px rgba(100,116,139,0.1);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.trust-strip-item:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.85);
  border-color: rgba(217,164,65,0.4);
  box-shadow: 0 20px 30px -10px rgba(100,116,139,0.2);
}
.trust-strip-item .icon-wrap {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(11,43,82,0.25);
  transition: transform 0.3s ease;
}
.trust-strip-item:hover .icon-wrap { transform: scale(1.08) rotate(2deg); }
.trust-strip-item .icon-wrap .icon { width: 28px; height: 28px; stroke: var(--white); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
/* Give each icon its own accent gradient so the row reads as four distinct
   ideas rather than four identical tiles. */
.trust-strip-item:nth-child(1) .icon-wrap { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); }
.trust-strip-item:nth-child(2) .icon-wrap { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%); }
.trust-strip-item:nth-child(3) .icon-wrap { background: linear-gradient(135deg, #0f9d58 0%, var(--green) 100%); }
.trust-strip-item:nth-child(4) .icon-wrap { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%); }
.trust-strip-item h4 { margin: 4px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-dark); }
.trust-strip-item p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 1024px) {
  .trust-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .trust-strip-item {
    flex-direction: row;
    text-align: left;
    align-items: center;
    padding: 20px 16px;
    gap: 14px;
  }
  .trust-strip-item .icon-wrap { width: 48px; height: 48px; }
  .trust-strip-item .icon-wrap .icon { width: 22px; height: 22px; }
  .trust-strip-item h4 { font-size: 15px; }
}

/* ---------------- Section heading ---------------- */
.section { padding: 80px 0; }
.section-bg-soft { background: var(--bg-soft); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 34px;
  gap: 20px;
}
.section-head h2 { font-size: 30px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.section-head p { margin: 0; color: var(--text-muted); font-size: 15px; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
/* Small centered accent rule under the heading, closing off the section
   header so it reads as a deliberate, finished block rather than plain text. */
.section-head.center h2 { position: relative; padding-bottom: 10px; margin-bottom: 18px; }
.section-head.center h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 64px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--navy) 100%);
}
.section-bg-navy .section-head.center h2::after { background: linear-gradient(90deg, var(--gold) 0%, rgba(255,255,255,0.5) 100%); }
#services .section-head.center h2::after { width: 220px; }

/* ---------------- Destinations ---------------- */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dest-card {
  position: relative;
  display: block;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dest-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.dest-thumb { position: absolute; inset: 0; overflow: hidden; }
.dest-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.dest-card:hover .dest-thumb img { transform: scale(1.08); }
.dest-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,29,56,0) 35%, rgba(8,29,56,0.55) 65%, rgba(8,29,56,0.92) 100%);
}
.dest-flag {
  position: absolute;
  left: 16px; top: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border: 2px solid var(--white);
  z-index: 2;
}
.dest-flag img { width: 100%; height: 100%; object-fit: cover; }
.dest-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 18px 22px;
  z-index: 2;
  text-align: center;
}
.dest-body h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--white); }
.dest-body .muted { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85); margin: 0 0 16px; }
.dest-meta { display: flex; align-items: center; justify-content: center; margin-bottom: 0; }
.dest-meta .price {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 13.5px;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.dest-link { display: none; }

/* ---------------- How it works ---------------- */
.section-bg-navy {
  background: var(--navy);
  background-image:
    radial-gradient(circle at 8% 15%, rgba(217,164,65,0.12) 0%, transparent 40%),
    radial-gradient(circle at 92% 85%, rgba(255,255,255,0.06) 0%, transparent 45%);
}
.section-bg-navy .section-head h2,
.section-bg-navy .section-head p { color: var(--white); }
.section-bg-navy .section-head p { color: rgba(255,255,255,0.65); }
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin-top: 40px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 34px; left: 8%; right: 8%;
  height: 2px;
  background-image: linear-gradient(to right, rgba(255,255,255,0.18) 60%, transparent 0%);
  background-size: 14px 2px;
  background-repeat: repeat-x;
}
.timeline-step { text-align: center; padding: 0 16px; position: relative; }
.timeline-step .step-circle {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}
.timeline-step:hover .step-circle { transform: translateY(-4px); background: rgba(217,164,65,0.15); }
.timeline-step .step-circle .icon { stroke: var(--gold); }
.timeline-step .step-num {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 11px;
  font-weight: 700;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.timeline-step h4 { margin: 0 0 6px; font-size: 16px; color: var(--white); }
.timeline-step p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.6); max-width: 220px; margin: 0 auto; }

/* Walking traveler — decorative figure that loops along the dashed
   timeline line to reinforce the "your visa journey" story. */
.walker {
  position: absolute;
  top: 0;
  left: 6%;
  width: 30px;
  height: 40px;
  z-index: 0;
  pointer-events: none;
  animation: walker-move 8s linear infinite;
}
.walker svg { width: 100%; height: 100%; overflow: visible; }
.walker line {
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.walker .w-head { fill: var(--gold); }
.walker .w-case { fill: var(--gold); }
.walker .w-body { stroke: rgba(255,255,255,0.85); }
.walker .w-figure { animation: walker-bob 0.6s ease-in-out infinite; }
.walker .w-leg-back { transform-origin: 0 0; animation: walker-swing-a 0.6s ease-in-out infinite; }
.walker .w-leg-front { transform-origin: 0 0; animation: walker-swing-b 0.6s ease-in-out infinite; }
.walker .w-arm-back { transform-origin: 0 0; animation: walker-swing-b 0.6s ease-in-out infinite; }
.walker .w-arm-front { transform-origin: 0 0; animation: walker-swing-a 0.6s ease-in-out infinite; }

@keyframes walker-move {
  0%   { left: 6%;  opacity: 0; }
  8%   { opacity: 1; }
  46%  { left: 49%; }
  92%  { opacity: 1; }
  100% { left: 88%; opacity: 0; }
}
@keyframes walker-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
@keyframes walker-swing-a {
  0%, 100% { transform: rotate(-24deg); }
  50%      { transform: rotate(24deg); }
}
@keyframes walker-swing-b {
  0%, 100% { transform: rotate(24deg); }
  50%      { transform: rotate(-24deg); }
}
@media (prefers-reduced-motion: reduce) {
  .walker { animation: none; left: 6%; opacity: 1; }
  .walker .w-figure, .walker .w-leg-back, .walker .w-leg-front, .walker .w-arm-back, .walker .w-arm-front { animation: none; }
}
@media (max-width: 960px) {
  .walker { display: none; }
}

/* ---------------- Services ---------------- */
.services-section { position: relative; overflow: hidden; isolation: isolate; }
/* Soft floating color orbs drifting behind the cards */
.services-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.services-orb--1 { width: 420px; height: 420px; background: radial-gradient(circle, var(--navy) 0%, transparent 70%); top: -14%; left: -8%; animation: services-orb-1 16s infinite; }
.services-orb--2 { width: 360px; height: 360px; background: radial-gradient(circle, var(--gold) 0%, transparent 70%); bottom: -12%; right: -6%; animation: services-orb-2 18s infinite; }
@keyframes services-orb-1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px,-25px) scale(1.12); }
}
@keyframes services-orb-2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-35px,20px) scale(1.1); }
}
.services-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  perspective: 1200px;
}
.service-card {
  position: relative;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
  opacity: 0;
  transform: translateY(28px) scale(0.97);
}
.service-card.is-visible { animation: service-card-reveal 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
@keyframes service-card-reveal { to { opacity: 1; transform: translateY(0) scale(1); } }
/* Shimmering gradient border that sweeps in on hover */
.service-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, rgba(217,164,65,0.5) 50%, rgba(11,43,82,0.4) 70%, transparent 100%);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: service-border-shimmer 4s linear infinite paused;
}
.service-card:hover::before { opacity: 1; animation-play-state: running; }
@keyframes service-border-shimmer { 0% { background-position: 0% 0%; } 100% { background-position: 300% 300%; } }
/* Soft glow that follows the cursor, driven by --mouse-x/--mouse-y set in main.js */
.service-card::after {
  content: "";
  position: absolute; inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(217,164,65,0.16) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.service-card:hover::after { opacity: 1; }
.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg);
  background: rgba(255,255,255,0.92);
}
.service-card .icon-wrap {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.service-card:hover .icon-wrap { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); transform: scale(1.08) rotate(-4deg); box-shadow: 0 8px 20px rgba(11,43,82,0.3); }
.service-card .icon-wrap .icon { width: 26px; height: 26px; stroke: var(--blue); transition: stroke 0.35s ease; }
.service-card:hover .icon-wrap .icon { stroke: var(--white); }
/* Pulse ring that fires outward from the icon on hover */
.icon-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 2px solid transparent;
  pointer-events: none;
}
.service-card:hover .icon-pulse-ring { animation: service-pulse-ring 0.9s ease-out; }
@keyframes service-pulse-ring {
  0%   { transform: scale(1);   opacity: 1; border-color: rgba(217,164,65,0.7); }
  100% { transform: scale(1.7); opacity: 0; border-color: transparent; }
}
.service-card h4 { position: relative; z-index: 1; margin: 0 0 5px; font-size: 15.5px; color: var(--text-dark); transition: color 0.3s ease; }
.service-card:hover h4 { color: var(--navy); }
.service-card p { position: relative; z-index: 1; margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
/* Faint oversized number watermark behind each card's content */
.service-card .card-number {
  position: absolute;
  top: 10px; right: 16px;
  font-size: 52px;
  font-weight: 800;
  color: rgba(11,43,82,0.045);
  letter-spacing: -0.03em;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  transition: color 0.4s ease, transform 0.4s ease;
}
.service-card:hover .card-number { color: rgba(217,164,65,0.14); transform: scale(1.06) translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card::before, .icon-pulse-ring, .services-orb { animation: none !important; transition: none !important; }
  .service-card { opacity: 1; transform: none; }
}

/* ---------------- Track section ---------------- */
.track-section { position: relative; overflow: hidden; }
.track-doodle {
  position: absolute;
  top: 50%;
  width: 220px;
  height: 420px;
  transform: translateY(-50%);
  color: var(--navy);
  opacity: 0.22;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  z-index: 0;
}
.track-doodle-left { left: -20px; }
.track-doodle-right { right: -20px; }
@media (max-width: 1240px) {
  .track-doodle { display: none; }
}

/* ---------------- Track panel ---------------- */
.track-panel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.track-panel:hover { transform: translateY(-2px); box-shadow: 0 30px 60px -14px rgba(11,43,82,0.18), 0 10px 24px -8px rgba(11,43,82,0.08); }
/* Decorative accent bar along the top (row layout) / left edge (column layout) */
.track-panel::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--navy) 55%, var(--gold) 100%);
  z-index: 2;
}
.track-illustration {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 36px 32px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.track-illustration::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(217,164,65,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
}
.track-illustration-badge {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 8px rgba(255,255,255,0.04), 0 0 0 20px rgba(255,255,255,0.02), 0 20px 40px rgba(0,0,0,0.3);
  animation: track-badge-float 3s ease-in-out infinite;
}
/* Radar-style pulse rings expanding outward — reads as "live tracking". */
.track-illustration-badge::before,
.track-illustration-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: 0;
  animation: track-radar-ping 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.track-illustration-badge::after { animation-delay: 1.3s; }
@keyframes track-radar-ping {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes track-badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.track-illustration-badge .icon { width: 40px; height: 40px; stroke: var(--gold); }

/* Mini animated progress path: a plane glides from "Submitted" to
   "Approved" on loop, visualizing the tracked application moving forward. */
.track-progress {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 4px;
}
.track-progress .tp-label { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.track-progress .tp-line {
  position: relative;
  flex: 1;
  height: 2px;
  background-image: linear-gradient(to right, var(--border) 60%, transparent 0%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
}
.track-progress .tp-badge {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(11,43,82,0.35);
  animation: tp-glide 14s ease-in-out infinite;
}
.track-progress .tp-badge .tp-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.track-progress .tp-badge svg { width: 15px; height: 15px; stroke: var(--gold); }
/* The ticket icon fades out and a white checkmark fades in right as the
   badge turns green, so it visibly reads as "arrived / approved" with
   good contrast against the green fill. */
.track-progress .tp-badge .tp-icon-ticket { animation: tp-icon-ticket 14s ease-in-out infinite; }
.track-progress .tp-badge .tp-icon-check { opacity: 0; animation: tp-icon-check 14s ease-in-out infinite; }
.track-progress .tp-badge .tp-icon-check svg { stroke: var(--white); }

/* Glides from Submitted to Approved, turns green and holds once it
   arrives (signaling completion), then fades out/in to reset for the
   next loop instead of visibly snapping back. */
@keyframes tp-glide {
  0%, 8%   { left: 0%; opacity: 1; background: var(--navy); box-shadow: 0 2px 6px rgba(11,43,82,0.35); }
  42%      { left: calc(100% - 26px); opacity: 1; background: var(--navy); box-shadow: 0 2px 6px rgba(11,43,82,0.35); }
  48%, 80% { left: calc(100% - 26px); opacity: 1; background: var(--green); box-shadow: 0 2px 6px rgba(22,163,74,0.4); }
  86%      { left: calc(100% - 26px); opacity: 0; background: var(--green); }
  88%      { left: 0%; opacity: 0; background: var(--navy); box-shadow: 0 2px 6px rgba(11,43,82,0.35); }
  94%, 100%{ left: 0%; opacity: 1; background: var(--navy); box-shadow: 0 2px 6px rgba(11,43,82,0.35); }
}
@keyframes tp-icon-ticket {
  0%, 40% { opacity: 1; }
  46%     { opacity: 0; }
  86%, 88%{ opacity: 0; }
  94%, 100%{ opacity: 1; }
}
@keyframes tp-icon-check {
  0%, 40% { opacity: 0; }
  46%, 80%{ opacity: 1; }
  86%, 100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .track-illustration-badge::before, .track-illustration-badge::after,
  .track-illustration-badge, .track-progress .tp-badge,
  .track-progress .tp-icon-ticket, .track-progress .tp-icon-check { animation: none; }
  .track-progress .tp-icon-check { opacity: 0; }
}
.track-copy { position: relative; z-index: 1; padding: 28px 32px 8px; }
.track-copy .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(217,164,65,0.12);
  padding: 7px 14px;
  border-radius: 50px;
  margin: 0 0 14px;
}
.track-copy .eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }
.track-copy h2 { font-size: 24px; font-weight: 800; color: var(--navy); margin: 0 0 6px; }
.track-copy p { margin: 0; color: var(--text-muted); font-size: 14.5px; }
.track-form { position: relative; z-index: 1; padding: 12px 32px 28px; }
.track-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.track-form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
.track-form input {
  width: 100%; height: 48px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 14px; font-size: 14px; background: var(--bg-soft); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.track-form input:hover { border-color: #c4b5da; background: var(--white); }
.track-form input:focus { outline: none; border-color: var(--navy); background: var(--white); box-shadow: 0 0 0 4px rgba(11,43,82,0.08); }
.track-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); margin-top: 16px; }
.track-secure .icon { width: 14px; height: 14px; stroke: var(--green); }

@media (min-width: 768px) {
  .track-panel { display: flex; align-items: stretch; }
  .track-illustration { flex: 0 0 200px; padding: 0 24px; }
  .track-panel::before { top: 0; left: 0; right: auto; bottom: 0; width: 5px; height: auto; }
  .track-content-wrapper { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .track-copy { text-align: left; padding: 26px 32px 4px; }
  .track-form { padding: 14px 32px 28px; }
}

/* ---------------- UAE banner ---------------- */
.uae-banner {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  padding: 0 50px;
  /* full-bleed: break out of .container to span the full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}
.uae-banner-content { max-width: 560px; margin: 0 auto 0 calc((100vw - var(--container)) / 2 + 24px); }
.uae-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.uae-banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: var(--navy-dark); }
.uae-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,29,56,0.86) 15%, rgba(8,29,56,0.55) 55%, rgba(8,29,56,0.25) 100%);
  z-index: 1;
}
.uae-banner-content { position: relative; z-index: 2; max-width: 560px; }
.uae-banner-content .eyebrow { color: #cfe0f7; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.uae-banner-content h2 { color: var(--white); font-size: 27px; line-height: 1.3; font-weight: 700; margin: 0 0 24px; }
.uae-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------- FAQ ---------------- */
.faq-layout { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: 40px; align-items: start; }
.faq-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 16px 0; font-size: 14.5px; font-weight: 600; color: var(--text-dark);
}
.faq-question svg { width: 18px; height: 18px; stroke: var(--navy); flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item.open .faq-question svg { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  font-size: 13.5px;
  color: var(--text-muted);
}
.faq-answer p { margin: 0 0 16px; }
.faq-item.open .faq-answer { max-height: 200px; }

.support-card {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 26px;
  text-align: left;
}
.support-card h3 { margin: 0 0 8px; font-size: 17px; color: var(--navy); }
.support-card p { margin: 0 0 18px; font-size: 13.5px; color: var(--text-muted); }
.btn-whatsapp { background: #21c15e; color: var(--white); width: 100%; }
.btn-whatsapp:hover { background: #1aa64f; }
.btn-whatsapp svg { width: 18px; height: 18px; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--navy); border-top: 1px solid var(--navy); padding: 64px 0 26px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}
/* The real logo artwork has an opaque white background (no transparent
   export available), so it sits on a small white card here instead of
   directly on the navy footer — reads as a deliberate badge rather than
   a stray white rectangle. */
.footer-logo {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.footer-logo-img { height: 46px; width: auto; display: block; }
.footer-brand p { font-size: 13.5px; color: rgba(255,255,255,0.7); margin: 14px 0 18px; max-width: 260px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
}
.footer-social a:hover { background: var(--gold); color: var(--navy-dark); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h5 { font-size: 14.5px; font-weight: 700; color: var(--white); margin: 0 0 16px; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { font-size: 13.5px; color: rgba(255,255,255,0.7); }
.footer-col a:hover { color: var(--gold); }
.footer-contact li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
.footer-contact svg { width: 16px; height: 16px; stroke: var(--gold); flex-shrink: 0; margin-top: 1px; }
.payment-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.payment-icons span {
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
  padding: 6px 10px; font-size: 11px; font-weight: 700; color: var(--white);
  background: rgba(255,255,255,0.08);
}
.secure-checkout { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.7); }
.secure-checkout svg { width: 14px; height: 14px; color: var(--green); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 22px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

/* ============================================================
   Country / Visa Listing page (country.php)
   ============================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  font-size: 13.5px;
  color: var(--text-muted);
}
.breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb svg.icon { width: 15px; height: 15px; color: var(--text-muted); }
.breadcrumb .sep { width: 14px; height: 14px; color: #b7c2d0; }
.breadcrumb .current { color: var(--text-dark); font-weight: 700; }

.country-hero {
  position: relative;
  overflow: hidden;
  height: 260px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
}
.country-hero-bg { position: absolute; inset: 0; z-index: 0; }
.country-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.country-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--white) 20%, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0.15) 75%);
}
.country-hero-content { position: relative; z-index: 1; padding: 36px 32px; width: 760px; max-width: 100%; flex-shrink: 0; box-sizing: border-box; }
.country-flag-badge { width: 46px; height: 32px; border-radius: 5px; overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.country-flag-badge img { width: 100%; height: 100%; object-fit: cover; }
.country-hero-content h1 { font-size: 34px; font-weight: 800; color: var(--navy); margin: 0 0 12px; }
.country-hero-content p { font-size: 14.5px; color: var(--text-muted); max-width: 520px; margin: 0 0 22px; }

.trust-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 12px;
  background: var(--white);
  border: 1px solid var(--blue-light);
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--text-dark);
  white-space: nowrap;
}
.trust-badge .icon { width: 18px; height: 18px; color: var(--blue); }

.visa-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.visa-list-header h2 { font-size: 22px; font-weight: 800; color: var(--navy); margin: 0; }
.sort-control { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); }
.sort-control select {
  height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 32px 0 12px; font-size: 13.5px; color: var(--text-dark); background: var(--white);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.visa-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.visa-card {
  display: grid;
  grid-template-columns: auto 1.5fr 1.6fr auto;
  align-items: center;
  gap: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.visa-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.visa-icon {
  width: 60px; height: 60px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.visa-icon svg { width: 28px; height: 28px; stroke: currentColor; }

.visa-info h3 { margin: 0 0 6px; font-size: 16.5px; color: var(--text-dark); }
.visa-badge {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  background: var(--blue-light); color: var(--blue);
  padding: 3px 10px; border-radius: 20px;
  margin-bottom: 8px;
}
.visa-info p { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 320px; }

.visa-attrs { display: flex; align-items: center; gap: 0; }
.visa-attr { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--border); }
.visa-attr:last-child { border-right: none; }
.visa-attr .icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.visa-attr-label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.visa-attr-value { font-size: 13.5px; font-weight: 700; color: var(--text-dark); }

.visa-price-wrap { text-align: right; }
.visa-price-label { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.visa-price { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 10px; white-space: nowrap; }
.visa-card .btn { width: 170px; height: 44px; }

.info-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--blue-light);
  border: 1px solid #d7e6f9;
  border-radius: var(--radius-md);
  padding: 20px 26px;
  margin-bottom: 30px;
}
.info-panel-left { display: flex; align-items: center; gap: 16px; }
.info-panel-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-panel-icon .icon { width: 20px; height: 20px; color: var(--blue); }
.info-panel h4 { margin: 0 0 3px; font-size: 15px; color: var(--navy); }
.info-panel p { margin: 0; font-size: 13.5px; color: var(--text-muted); }

@media (max-width: 960px) {
  .country-hero { height: auto; min-height: 220px; }
  .country-hero-content { width: 100%; padding: 28px; }
  .visa-card { grid-template-columns: 1fr; gap: 14px; }
  .visa-attrs { flex-wrap: wrap; gap: 10px; }
  .visa-attr { border-right: none; padding: 0 14px 0 0; }
  .visa-price-wrap { text-align: left; }
  .visa-card .btn { width: 100%; }
  .info-panel { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Visa Detail page (visa-detail.php)
   ============================================================ */

body.has-sticky-cta { padding-bottom: 92px; }

/* Sized/positioned to match the Dubai hero banner on country.php exactly:
   same 300px height, 16px radius, and right-to-left photo fade. */
.visa-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  height: 300px;
  background: #eef4f9;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-bottom: 24px;
}
.visa-hero-bg { position: absolute; inset: 0; z-index: 0; }
.visa-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.visa-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.95) 35%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0) 100%);
}

.visa-hero-content {
  position: relative; z-index: 1;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 40px;
  /* Fills its 1fr grid track (see .visa-hero above) up to a 700px cap,
     instead of a fixed 700px that forced the grid track — and the whole
     banner — to demand 700px + the price card's width even on viewports
     narrower than that. min-width: 0 lets it actually shrink in the grid. */
  width: 100%;
  max-width: 700px;
  min-width: 0;
  flex-shrink: 1;
  box-sizing: border-box;
  overflow-y: auto;
}
.visa-hero-icon {
  width: 80px; height: 80px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.visa-hero-icon svg { width: 36px; height: 36px; }
.visa-hero-text h1 { font-size: 32px; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.visa-hero-text .visa-badge { margin-bottom: 10px; }
.visa-hero-text > p { font-size: 15px; color: var(--text-muted); line-height: 1.6; max-width: 460px; margin: 8px 0 16px; }

.visa-hero-info { display: flex; flex-wrap: wrap; gap: 0; }
.visa-hero-info-item { display: flex; align-items: center; gap: 8px; padding: 0 18px 0 0; margin-right: 18px; border-right: 1px solid var(--border); }
.visa-hero-info-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.visa-hero-info-item .icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }

.visa-price-card {
  position: relative; z-index: 1;
  align-self: center;
  margin: 20px 30px 20px 0;
  width: 260px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.visa-price-card-label { font-size: 13px; color: var(--text-muted); }
.visa-price-card-value { font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 6px; white-space: nowrap; }

.breadcrumb .current { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabs */
.visa-tabs {
  display: flex;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.visa-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
}
.visa-tab:hover { color: var(--navy); background: var(--bg-soft); }
.visa-tab.active { color: var(--blue); background: var(--blue-light); }

/* Two-column layout */
.visa-layout { display: grid; grid-template-columns: 7fr 3fr; gap: 22px; align-items: start; margin-bottom: 40px; }
.visa-main { display: flex; flex-direction: column; gap: 20px; }
.visa-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 92px; }

.detail-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}
.detail-card h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.detail-card h2 .icon { width: 20px; height: 20px; color: var(--blue); }
.detail-card > p { font-size: 14.5px; color: var(--text-muted); margin: 0 0 18px; }
.detail-card p:last-child { margin-bottom: 0; }
.detail-card p a { color: var(--blue); font-weight: 600; }

.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.benefit-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-dark); }
.benefit-item .icon { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }

.inclusion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 20px; }
.inclusion-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dark); }
.inclusion-item .icon { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }

.notes-list { margin: 0; padding-left: 18px; }
.notes-list li { font-size: 13.5px; color: var(--text-muted); margin-bottom: 8px; }
.notes-list li:last-child { margin-bottom: 0; }

.sidebar-title { font-size: 16px; }
.summary-list { margin: 0; }
.summary-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.summary-row dt { font-size: 13px; color: var(--text-muted); margin: 0; }
.summary-row dd { font-size: 13.5px; font-weight: 700; color: var(--text-dark); margin: 0; text-align: right; white-space: nowrap; }

.need-help-card {
  background: #fdf6e8;
  border: 1px solid #f3e3b8;
}
.need-help-card > .icon { width: 26px; height: 26px; color: var(--gold-dark); margin-bottom: 10px; }
.need-help-card h3 { color: var(--navy); }

/* Sticky application bar */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  overflow: hidden;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 30px rgba(15, 45, 90, 0.08);
  /* Hidden until the in-page price card (.visa-price-card, up in the hero)
     scrolls out of view — see the IntersectionObserver in visa-detail.php.
     Being visible from page load meant this bar sat directly under the
     price card's own "Apply Now" button whenever both were on screen at
     once (which is most of the time on a short mobile viewport), reading
     as an overlapping duplicate CTA rather than two separate things. */
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 14px 24px;
  overflow: hidden;
}
.sticky-cta-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-shrink: 1; overflow: hidden; }
.sticky-cta-name strong, .sticky-cta-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-cta-name strong { font-size: 14.5px; color: var(--navy); }
.sticky-cta-name span { font-size: 12.5px; color: var(--text-muted); }
.sticky-cta-attr { display: flex; align-items: center; gap: 8px; padding-right: 18px; border-right: 1px solid var(--border); }
.sticky-cta-attr .icon { width: 17px; height: 17px; color: var(--text-muted); }
.sticky-cta-price { margin-left: auto; text-align: right; }
.sticky-cta-price-value { font-size: 17px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.sticky-cta .btn { flex-shrink: 0; }

@media (max-width: 1100px) {
  .sticky-cta-attr:nth-child(4) { display: none; }
}

@media (max-width: 960px) {
  /* The desktop hero is one grid whose absolutely-positioned background
     image covers the full stacked height (banner + text + price card) —
     fine when the price card sits beside the text in a single 300px-tall
     row, but on mobile everything stacks into one tall column, so the
     image stretches to cover all of it and the gradient wash has faded to
     fully transparent by the time you reach the price card: it ends up
     sitting directly on raw photo instead of a card on a page. Switching
     to a plain block layout with a capped-height image banner keeps the
     photo as a strip up top and puts all the text + the price card on a
     solid white background below it, like a normal mobile page. */
  .visa-hero { display: block; height: auto; background: var(--white); }
  .visa-hero-bg { position: relative; inset: auto; height: 190px; }
  .visa-hero-bg::after { background: linear-gradient(to bottom, rgba(255,255,255,0) 60%, rgba(255,255,255,0.95) 100%); }
  .visa-hero-content { max-width: 100%; flex-direction: column; padding: 20px 24px 24px; }
  .visa-price-card { width: auto; margin: 0 24px 24px; align-self: stretch; }
  .visa-layout { grid-template-columns: 1fr; }
  .visa-sidebar { position: static; }
  .benefit-grid, .inclusion-grid { grid-template-columns: repeat(2, 1fr); }
  .sticky-cta-attr:nth-child(2), .sticky-cta-attr:nth-child(3) { display: none; }
  .sticky-cta-name span { display: none; }

  /* Info row (Validity/Processing/Entry Type/Refundable): the desktop
     version is one line of items separated by right-borders. Once it
     wraps to two lines on mobile, whichever item lands at the end of a
     row keeps a dangling border-right with nothing to its right. A 2-col
     grid with its own gap avoids that instead of relying on wrapped
     borders. */
  .visa-hero-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .visa-hero-info-item { border-right: none; margin-right: 0; padding-right: 0; }

  /* Breadcrumb: flex items were shrinking and wrapping their own text
     internally (e.g. "United Arab Emirates" breaking into 3 lines) while
     staying on the same visual row as neighbors, producing a staggered
     mess. Wrapping whole crumbs onto their own line, and truncating any
     single crumb that's still too wide for one line, keeps each one a
     tidy single-line unit. */
  .breadcrumb { flex-wrap: wrap; row-gap: 6px; padding: 14px 0; }
  .breadcrumb a, .breadcrumb .current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
}

@media (max-width: 640px) {
  body.has-sticky-cta { padding-bottom: 74px; }
  .visa-hero-icon { width: 72px; height: 72px; }
  .visa-hero-icon svg { width: 32px; height: 32px; }
  .visa-hero-text h1 { font-size: 22px; }
  .benefit-grid, .inclusion-grid { grid-template-columns: 1fr 1fr; }
  .sticky-cta-inner { padding: 10px 18px; gap: 12px; }
  .sticky-cta-name { min-width: 0; }
  .sticky-cta .btn { height: 42px; padding: 0 16px; font-size: 13.5px; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .destination-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 960px) {
  .main-nav { display: none; }
  .hamburger { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 42px; }
  .hero-media { order: -1; margin-bottom: 10px;}
  .finder-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 30px; }
  .timeline::before { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); perspective: none; }
  .services-orb { display: none; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-col { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Mobile header: keep just the logo, WhatsApp icon and hamburger visible
     so Track Application / Apply Now text buttons don't overflow the header. */
  .header-actions a.btn { display: none !important; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .hero { padding: 34px 0 46px; }
  .hero-title { font-size: 34px; }
  .hero-trust { grid-template-columns: 1fr 1fr; }
  .status-card { position: static; width: 100%; margin-top: 16px; }
  .finder-card { padding: 20px; }
  .finder-grid { grid-template-columns: 1fr; }
  .destination-grid { grid-template-columns: repeat(2, 1fr); }
  .dest-card { height: 320px; }
  .dest-body h3 { font-size: 18px; }
  .section { padding: 56px 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card { padding: 20px 18px 18px; gap: 14px; }
  .service-card .card-number { font-size: 38px; top: 8px; right: 12px; }
  .service-card .icon-wrap { width: 44px; height: 44px; border-radius: 12px; }
  .service-card .icon-wrap .icon { width: 22px; height: 22px; }
  .track-illustration-badge { width: 68px; height: 68px; }
  .track-illustration-badge .icon { width: 30px; height: 30px; }
  .track-copy h2 { font-size: 20px; }
  .track-form-grid { grid-template-columns: 1fr; }
  .uae-banner { padding: 30px; min-height: auto; }
  .uae-banner-content { margin-left: 0; }
  .uae-banner-content h2 { font-size: 22px; }
  .country-hero-content { padding: 22px; max-width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}