/* ================= Visa hero ================= */
/* Field notes, maps and a camera laid out on a chart — the paperwork-and-planning
   read that fits a visa desk. Shell, veil and grain come from the shared hero
   rule in flight-search.css. */
.visa-hero {
  --hero-photo: url("https://images.unsplash.com/photo-1488646953014-85cb44e25828?fm=jpg&q=72&w=1800&auto=format&fit=crop&ixlib=rb-4.1.0");
  --hero-photo-pos: center 44%;
  padding: 3.5rem 0 calc(var(--hero-card-overlap, 220px) + 2.5rem);
}

@media (max-width: 767.98px) {
  .visa-hero {
    padding-top: 3rem;
  }
}

.visa-search-wrapper {
  margin-top: calc(-1 * var(--hero-card-overlap, 220px));
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 5;
}

.visa-search-card {
  padding-bottom: 1.5rem;
}

/* Native <select> fields, styled to sit inside .field-box consistently with
   the button-triggered fields elsewhere on the site (Flights/Hotels) —
   plain selects are the right call here since there are only a handful of
   curated destinations/countries, not a live autocomplete search. */
.field-select {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  color: var(--brand-navy);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
}

.field-select:invalid {
  color: #8b95a5;
  font-weight: 500;
}

.visa-search-btn {
  border-radius: 3rem;
}

/* ================= Visa result card ================= */
.visa-result-section {
  margin-bottom: 1rem;
}

.visa-result-card {
  display: flex;
  gap: 0;
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.1);
  border: 1px solid #e3e8ef;
}

.visa-result-image {
  flex: 0 0 300px;
  background-size: cover;
  background-position: center;
}

.visa-result-body {
  flex: 1;
  padding: 2rem 2.25rem;
  min-width: 0;
}

.visa-result-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin: 0.35rem 0 0.25rem;
}

.visa-result-tagline {
  color: #566273;
  margin-bottom: 1.25rem;
}

.visa-result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  border-top: 1px dashed #d4dbe5;
  border-bottom: 1px dashed #d4dbe5;
}

.visa-result-grid .lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a96a6;
  margin-bottom: 0.2rem;
}

.visa-result-grid .val {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: #1b2430;
}

.visa-result-cta {
  text-decoration: none;
}

.visa-result-note {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: #8a96a6;
}

/* ================= Visa types (reuses .why-us-grid card shell) ================= */
.visa-types-section {
  padding-top: 1rem;
}

/* ================= Process steps ================= */
.visa-process-section {
  padding: 3rem 0;
}

.visa-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.visa-step {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.visa-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.85rem;
}

.visa-step strong {
  display: block;
  font-size: 1rem;
  color: #1b2430;
  margin-bottom: 0.4rem;
}

.visa-step p {
  font-size: 0.88rem;
  color: #566273;
  line-height: 1.5;
  margin: 0;
}

/* ================= Consultation form ================= */
.visa-consultation-section {
  padding: 1rem 0 4rem;
}

.visa-consultation-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  background: var(--brand-navy);
  border-radius: 1.5rem;
  padding: 3rem;
  color: #fff;
}

.visa-consultation-intro,
.visa-consultation-form {
  min-width: 0;
}

.visa-consultation-intro h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin: 0.4rem 0 0.75rem;
}

.visa-consultation-intro p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1.5rem;
}

.visa-consultation-intro .section-eyebrow {
  color: var(--brand-gold);
}

.visa-consultation-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.visa-consultation-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
}

.visa-consultation-points .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.visa-consultation-form {
  background: #fff;
  border-radius: 1.1rem;
  padding: 1.75rem;
}

.visa-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.visa-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.visa-form-field.wide {
  grid-column: 1 / -1;
}

.visa-form-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #566273;
}

.visa-form-field input,
.visa-form-field select,
.visa-form-field textarea {
  padding: 0.65rem 0.75rem;
  border: 1px solid #dde3ec;
  border-radius: 0.6rem;
  font-size: 0.92rem;
  font-family: inherit;
  color: #1b2430;
  resize: vertical;
}

.visa-form-field input:focus,
.visa-form-field select:focus,
.visa-form-field textarea:focus {
  outline: none;
  border-color: var(--brand-gold);
}

.visa-form-submit {
  width: 100%;
  justify-content: center;
  margin-top: 1.25rem;
}

.visa-form-success {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem;
  background: #e8f6ee;
  border-radius: 0.75rem;
  color: #127a44;
}

.visa-form-success .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.visa-form-success strong {
  display: block;
  margin-bottom: 0.25rem;
}

.visa-form-success p {
  margin: 0;
  font-size: 0.9rem;
  color: #1b2430;
}

@media (max-width: 991.98px) {
  .visa-result-card {
    flex-direction: column;
  }

  .visa-result-image {
    flex-basis: 180px;
  }

  .visa-result-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .visa-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .visa-consultation-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .visa-steps {
    grid-template-columns: 1fr;
  }

  .visa-form-grid {
    grid-template-columns: 1fr;
  }

  .visa-consultation-card {
    padding: 1.75rem;
    gap: 1.5rem;
  }
}

/* ===== destination typeahead =====
   dbo.Visas is expected to grow past a scrollable <select>, so the destination
   field is a combobox filtered server-side as the traveller types. */
.visa-country-field {
  position: relative;
}

.visa-country-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dde3ec;
  border-radius: 0.75rem;
  box-shadow: 0 18px 40px rgba(11, 31, 58, 0.16);
  padding: 0.3rem;
}

.visa-country-option {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0.55rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.visa-country-option:hover,
.visa-country-option.is-active {
  background: var(--brand-navy-soft, #eef1f6);
}

.visa-country-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-navy, #0b1f3a);
}

.visa-country-meta {
  font-size: 0.75rem;
  color: #8b95a5;
}

.visa-country-empty {
  padding: 0.75rem 0.7rem;
  font-size: 0.85rem;
  color: #8b95a5;
}

/* Shown when Search() could not resolve what was typed. */
.visa-search-error {
  margin-bottom: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.6rem;
  background: #fdf2f2;
  border: 1px solid #f5c6c6;
  color: #a33a3a;
  font-size: 0.85rem;
  font-weight: 600;
}

/* hero photo: phone-sized variant. The hero is this page's Largest Contentful Paint element, and the
   1800px crop is ~450 KB for a viewport a fifth as wide. Phones get a 760px
   version instead.

   This repeats the hero's own selector rather than overriding :root: the base
   rule sets --hero-photo on the hero element itself, and a property set on the
   element always beats one inherited from an ancestor, whatever the source
   order. */
@media (max-width: 767.98px) {
  .visa-hero {
    --hero-photo: url("https://images.unsplash.com/photo-1488646953014-85cb44e25828?fm=jpg&q=68&w=760&auto=format&fit=crop&ixlib=rb-4.1.0");
  }
}