/*
 * Visa checker bar (.ev-vcb), eastvisa.co.il.
 *
 * Looks like the site, not like a separate widget (decision 11): the visual language
 * of the full visa checker and the site's own components, measured on the live site
 * on 18.09.2026 (card radius 20px with a soft blue shadow, fields with a 2px border
 * and a 12px radius, a pill button with the brand gradient, Rubik).
 *
 * Light only (decision 10): the site has no dark mode, so the bar has none either.
 *
 * The site styles every <button> globally (Hello reset, and the Elementor kit at
 * specificity 0,1,1 with a gradient, 25px 95px padding and a 15px radius). Every
 * button and control here uses at least two classes and sets its own background,
 * padding, border and radius, so nothing is inherited from those rules.
 *
 * The site's custom CSS also sets font-weight 400 !important on body, p, span, div,
 * a, li and button, so every weight here is !important too.
 *
 * Everything is scoped under .ev-vcb-*: no rule on html, body, :root, *, .visa-* or
 * .vss-* (the full checker must not change). Logical properties only (RTL).
 */

.ev-vcb-root {
  --vcb-primary: #2036A4;
  --vcb-primary-dark: #172785;
  --vcb-gradient: linear-gradient(135deg, #2036A4 0%, #172785 100%);
  --vcb-on-primary: #ffffff;
  --vcb-bg: #ffffff;
  --vcb-surface: #F6F7F9;
  --vcb-heading: #0F172A;
  --vcb-text: #1F2937;
  --vcb-muted: #4B5563;
  --vcb-field-border: rgba(17, 24, 39, 0.15);
  --vcb-line: #E9ECEF;
  --vcb-link: #2036A4;
  --vcb-focus: #2036A4;
  --vcb-active-bg: rgba(32, 54, 164, 0.08);
  --vcb-danger-bg: #FEF2F2;
  --vcb-danger-text: #A02533;
  --vcb-shadow: 0 10px 40px rgba(32, 54, 164, 0.1);
  --vcb-shadow-up: 0 -10px 40px rgba(32, 54, 164, 0.12);
  --vcb-button-shadow: 0 4px 15px rgba(32, 54, 164, 0.2);
  /* A layer over a white page (the result over the docked bar) */
  --vcb-shadow-layer: 0 20px 60px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.08);
  /* Visa checker palette: result status only (DS section 2, documented escape hatch) */
  --vcb-status-required: #FFEEAD;
  --vcb-status-free: #5FA886;
  --vcb-status-ink: #111827;
  --vcb-radius-card: 20px;
  --vcb-radius-field: 12px;
  --vcb-radius-pill: 50px;
  --vcb-font: "Rubik", "Heebo", system-ui, sans-serif;
  --vcb-control-h: 52px;
  --vcb-duration: 200ms;
  --vcb-duration-fast: 150ms;
  --vcb-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --vcb-ease-in: cubic-bezier(0.4, 0, 1, 1);

  font-family: var(--vcb-font);
  line-height: 1.6;
  text-align: start;
  color-scheme: light;
}

.ev-vcb-root *,
.ev-vcb-root *::before,
.ev-vcb-root *::after {
  box-sizing: border-box;
}

/* Visa pages (--fixed) render the bar at the end of the body: it is only ever seen
   docked at the bottom or inside the mobile sheet, never at its resting place. */
.ev-vcb-root--fixed > .ev-vcb:not(.is-docked) {
  display: none;
}

.ev-vcb-root .ev-btn span,
.ev-vcb-root .ev-vcb-collapsed__text {
  font-weight: inherit !important;
}

/* Our own display rules must never un-hide a [hidden] part (sheet, collapsed bar, result). */
.ev-vcb-root [hidden] {
  display: none !important;
}

.ev-vcb-root :focus-visible {
  outline: 3px solid var(--vcb-focus);
  outline-offset: 2px;
}

/* ---------- the bar ---------- */

.ev-vcb-root .ev-vcb {
  max-inline-size: 680px;
  margin: 0;
  padding: 16px;
  background: var(--vcb-bg);
  color: var(--vcb-text);
  border-radius: var(--vcb-radius-card);
  box-shadow: var(--vcb-shadow);
}

.ev-vcb-root .ev-vcb__title {
  margin: 0 0 8px;
  color: var(--vcb-heading);
  font-size: 18px;
  font-weight: 600 !important;
  line-height: 1.4;
}

.ev-vcb__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.ev-vcb-root .ev-vcb__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
  margin: 0;
}

.ev-vcb__field--passport,
.ev-vcb__field--destination,
.ev-vcb__locked {
  /* Two fields side by side down to a 320px phone (Daniel: they wrapped with room to spare). */
  flex: 1 1 120px;
}

.ev-vcb__label {
  color: var(--vcb-muted);
  font-size: 15px;
  font-weight: 500 !important;
  line-height: 1.4;
}

.ev-vcb__locked {
  justify-content: flex-end;
}

.ev-vcb__locked-name {
  display: flex;
  align-items: center;
  min-block-size: var(--vcb-control-h);
  color: var(--vcb-primary);
  font-size: 20px;
  font-weight: 700 !important;
}

.ev-vcb-root .ev-vcb__control {
  inline-size: 100%;
  min-block-size: var(--vcb-control-h);
  margin: 0;
  padding-block: 12px;
  padding-inline: 16px;
  background: var(--vcb-bg);
  color: var(--vcb-heading);
  font-family: var(--vcb-font);
  font-size: 17px;
  line-height: 1.4;
  border: 2px solid var(--vcb-field-border);
  border-radius: var(--vcb-radius-field);
  box-shadow: none;
  transition: border-color var(--vcb-duration-fast) var(--vcb-ease-out);
}

.ev-vcb-root .ev-vcb__control:hover,
.ev-vcb-root .ev-vcb__control:focus {
  border-color: var(--vcb-primary);
}

.ev-vcb-root .ev-vcb__control[aria-invalid="true"] {
  border-color: var(--vcb-danger-text);
}

.ev-vcb-root .ev-vcb__error {
  margin: 0;
  color: var(--vcb-danger-text);
  font-size: 14px;
  line-height: 1.4;
}

/* The pill button of the site's visa checker */
.ev-vcb-root .ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: var(--vcb-control-h);
  min-inline-size: 120px;
  margin: 0;
  padding-block: 14px;
  padding-inline: 32px;
  background-color: var(--vcb-primary);
  background-image: var(--vcb-gradient);
  color: var(--vcb-on-primary) !important;
  font-family: var(--vcb-font);
  font-size: 16px;
  font-weight: 600 !important;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: var(--vcb-radius-pill);
  box-shadow: var(--vcb-button-shadow);
  cursor: pointer;
  transition: transform var(--vcb-duration-fast) var(--vcb-ease-out), box-shadow var(--vcb-duration-fast) var(--vcb-ease-out);
}

.ev-vcb-root .ev-btn:hover {
  background-color: var(--vcb-primary-dark);
  color: var(--vcb-on-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(32, 54, 164, 0.3);
}

.ev-vcb-root .ev-btn:active {
  transform: scale(0.98);
}

.ev-vcb-root .ev-vcb__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.ev-vcb-root .ev-vcb__submit[aria-disabled="true"] {
  cursor: progress;
}

.ev-vcb__submit.is-spinning svg {
  display: none;
}

.ev-vcb__submit.is-spinning::after {
  content: "";
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: ev-vcb-spin 800ms linear infinite;
}

@keyframes ev-vcb-spin {
  to {
    transform: rotate(360deg);
  }
}

.ev-vcb-root .ev-vcb__nojs {
  margin: 8px 0 0;
  color: var(--vcb-muted);
  font-size: 14px;
}

.ev-vcb-root .ev-vcb__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- passport combobox ---------- */

.ev-vcb-combo {
  position: relative;
}

.ev-vcb-root .ev-vcb-combo__list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 6px);
  z-index: 20;
  max-block-size: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--vcb-bg);
  border: 1px solid var(--vcb-line);
  border-radius: var(--vcb-radius-field);
  box-shadow: var(--vcb-shadow);
}

.ev-vcb-root .ev-vcb-combo__list.is-above {
  inset-block-start: auto;
  inset-block-end: calc(100% + 6px);
}

.ev-vcb-root .ev-vcb-combo__option {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  margin: 0;
  padding-inline: 12px;
  color: var(--vcb-heading);
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
}

.ev-vcb-root .ev-vcb-combo__option.is-active {
  background: var(--vcb-active-bg);
}

.ev-vcb-root .ev-vcb-combo__option[aria-selected="true"] {
  font-weight: 600 !important;
}

.ev-vcb-root .ev-vcb-combo__separator {
  block-size: 1px;
  margin-block: 4px;
  margin-inline: 8px;
  background: var(--vcb-line);
}

.ev-vcb-root .ev-vcb-combo__empty {
  padding-block: 10px;
  padding-inline: 12px;
  color: var(--vcb-muted);
  font-size: 14px;
}

/* ---------- result ---------- */

.ev-vcb-root .ev-vcb__result {
  margin-block-start: 12px;
}

.ev-vcb-root .ev-vcb-res {
  padding: 16px;
  background: var(--vcb-surface);
  color: var(--vcb-text);
  border-radius: 16px;
}

.ev-vcb-res__status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ev-vcb-res__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  color: var(--vcb-status-ink);
  background: var(--vcb-status-required);
  border-radius: 50%;
}

.ev-vcb-res--free .ev-vcb-res__icon {
  background: var(--vcb-status-free);
}

.ev-vcb-root .ev-vcb-res__title {
  margin: 0;
  color: var(--vcb-heading);
  font-size: 20px;
  font-weight: 700 !important;
  line-height: 1.4;
}

.ev-vcb-root .ev-vcb-res__passport {
  margin: 4px 0 0;
  color: var(--vcb-muted);
  font-size: 15px;
}

.ev-vcb-res__change-wrap {
  position: relative;
  display: inline-block;
}

/* Touch: the phone's picker sits invisibly over "another passport" (16px: no iOS zoom). */
.ev-vcb-root .ev-vcb-res__change-select {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

.ev-vcb-root .ev-vcb-res__change,
.ev-vcb-root .ev-vcb-res__action:not(.ev-btn) {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  margin: 0;
  padding-block: 0;
  padding-inline: 4px;
  background: none;
  background-image: none;
  color: var(--vcb-link);
  font-family: var(--vcb-font);
  font-size: 15px;
  font-weight: 500 !important;
  text-decoration: underline;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.ev-vcb-root .ev-vcb-res__facts {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
}

.ev-vcb-root .ev-vcb-res__fact {
  padding-block-start: 10px;
  border-block-start: 1px solid var(--vcb-line);
}

.ev-vcb-res__fact dt {
  color: var(--vcb-muted);
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 1.4;
}

.ev-vcb-res__fact dd {
  margin: 0;
  color: var(--vcb-heading);
  font-size: 16px;
}

.ev-vcb-root .ev-vcb-res__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-block-start: 16px;
}

.ev-vcb-res__secondary {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--vcb-link);
  font-weight: 500 !important;
  text-decoration: underline;
}

.ev-vcb-root .ev-vcb-res__message {
  margin: 0;
  color: var(--vcb-heading);
}

.ev-vcb-res--problem {
  background: var(--vcb-danger-bg);
}

.ev-vcb-res--problem .ev-vcb-res__message {
  color: var(--vcb-danger-text);
  font-weight: 500 !important;
}

.ev-vcb-res--problem .ev-btn,
.ev-vcb-res--empty .ev-vcb-res__action {
  margin-block-start: 12px;
}

.ev-vcb-root .ev-vcb-res__contact {
  margin: 8px 0 0;
  color: var(--vcb-muted);
  font-size: 14px;
}

.ev-vcb-sentinel {
  block-size: 0;
}

.ev-vcb-res__dismiss {
  display: none;
}

/* ---------- docked at the bottom (desktop, decision 3) ---------- */

@media (min-width: 768px) {
  /* Under the mega menu panels and drawer (2147483644 and up) and the cookie banner. */
  .ev-vcb-root .ev-vcb.is-docked {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 98;
    max-inline-size: none;
    padding-block: 12px;
    padding-inline: max(16px, calc((100vw - 1140px) / 2));
    border-radius: 0;
    border-start-start-radius: var(--vcb-radius-card);
    border-start-end-radius: var(--vcb-radius-card);
    box-shadow: var(--vcb-shadow-up);
    animation: ev-vcb-rise var(--vcb-duration) var(--vcb-ease-out);
  }

  .ev-vcb.is-docked .ev-vcb__title {
    display: none;
  }

  /* One compact group in the middle, not spread across the whole screen. */
  .ev-vcb.is-docked .ev-vcb__fields {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .ev-vcb.is-docked .ev-vcb__field--passport {
    flex: 0 1 340px;
  }

  .ev-vcb.is-docked .ev-vcb__field--destination {
    flex: 0 1 300px;
  }

  .ev-vcb.is-docked .ev-vcb__locked {
    flex: 0 0 auto;
  }

  .ev-vcb.is-docked .ev-vcb__field,
  .ev-vcb.is-docked .ev-vcb__locked {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .ev-vcb.is-docked .ev-vcb__label {
    white-space: nowrap;
  }

  .ev-vcb-root .ev-vcb.is-docked .ev-vcb__control,
  .ev-vcb-root .ev-vcb.is-docked .ev-btn,
  .ev-vcb.is-docked .ev-vcb__locked-name {
    min-block-size: 48px;
  }

  /* At the bottom of the screen the passport list opens upwards. */
  .ev-vcb-root .ev-vcb.is-docked .ev-vcb-combo__list {
    inset-block-start: auto;
    inset-block-end: calc(100% + 6px);
  }

  /* The result opens as a layer above the docked bar. */
  .ev-vcb.is-docked .ev-vcb__result {
    position: absolute;
    inset-block-end: calc(100% + 12px);
    inset-inline-start: max(16px, calc((100vw - 1140px) / 2));
    inline-size: min(720px, calc(100vw - 32px));
    max-block-size: calc(100vh - 200px);
    margin: 0;
    overflow-y: auto;
    border: 1px solid var(--vcb-line);
    border-radius: var(--vcb-radius-card);
    box-shadow: var(--vcb-shadow-layer);
  }

  .ev-vcb-root .ev-vcb.is-docked.is-released {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--vcb-duration-fast) var(--vcb-ease-in), visibility 0s linear var(--vcb-duration-fast);
  }

  /* The collapsed bar and the sheet are mobile-only. */
  .ev-vcb-root .ev-vcb-collapsed,
  .ev-vcb-root .ev-vcb-sheet {
    display: none !important;
  }
}

@keyframes ev-vcb-rise {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

/* ---------- collapsed bar and sheet (mobile) ---------- */

.ev-vcb-root .ev-vcb-collapsed {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 98;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  inline-size: 100%;
  min-block-size: calc(56px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px));
  padding-inline: 20px;
  background: var(--vcb-bg);
  background-image: none;
  color: var(--vcb-heading);
  font-family: var(--vcb-font);
  font-size: 16px;
  font-weight: 600 !important;
  line-height: 1.4;
  text-align: start;
  border: 0;
  border-radius: 0;
  border-start-start-radius: var(--vcb-radius-card);
  border-start-end-radius: var(--vcb-radius-card);
  box-shadow: var(--vcb-shadow-up);
  cursor: pointer;
  animation: ev-vcb-rise var(--vcb-duration) var(--vcb-ease-out);
}

/* A thin brand line on top, like the site's cookie card: the docked desktop bar
   and the collapsed mobile bar, so neither melts into a white page. */
.ev-vcb-root .ev-vcb.is-docked::before,
.ev-vcb-root .ev-vcb-collapsed::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 24px;
  block-size: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #2036A4, #8C95FF);
}

/* A calculator in the brand gradient, so the bar reads as the visa checker at a glance. */
.ev-vcb-root .ev-vcb-collapsed__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  color: var(--vcb-on-primary);
  background-color: var(--vcb-primary);
  background-image: var(--vcb-gradient);
  border-radius: 50%;
  box-shadow: var(--vcb-button-shadow);
}

.ev-vcb-root .ev-vcb-collapsed__icon svg {
  inline-size: 22px;
  block-size: 22px;
  color: var(--vcb-on-primary);
  stroke: currentColor;
}

/* An up arrow at the far end: the bar opens a sheet upward. */
.ev-vcb-root .ev-vcb-collapsed__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--vcb-primary);
}

.ev-vcb-root .ev-vcb-collapsed__arrow svg {
  inline-size: 22px;
  block-size: 22px;
  stroke: currentColor;
}

.ev-vcb-collapsed__text {
  flex: 1 1 auto;
}

/* Floating buttons move above the bar at the bottom instead of hiding behind it.
   The individual `translate` property adds to their own `transform` instead of
   replacing it: UserWay places its button with a (0,3,0) transform rule. */
.ev-vcb-has-dock .whatsapp-sticky,
.ev-vcb-has-dock .userway_buttons_wrapper,
.ev-vcb-has-dock .grecaptcha-badge {
  translate: 0 calc(-1 * var(--ev-vcb-bar-h, 64px));
  transition: translate 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Above WhatsApp (1000000), under the mega menu (2147483644 and up). */
.ev-vcb-root .ev-vcb-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ev-vcb-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: ev-vcb-fade var(--vcb-duration) var(--vcb-ease-out);
}

.ev-vcb-root .ev-vcb-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-block-size: 85vh;
  max-block-size: 85dvh;
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--vcb-bg);
  color: var(--vcb-text);
  border-start-start-radius: var(--vcb-radius-card);
  border-start-end-radius: var(--vcb-radius-card);
  animation: ev-vcb-sheet-in 300ms var(--vcb-ease-out);
}

.ev-vcb-root .ev-vcb-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block: 8px;
  padding-inline: 20px 8px;
  border-block-end: 1px solid var(--vcb-line);
}

.ev-vcb-root .ev-vcb-sheet__title {
  margin: 0;
  color: var(--vcb-heading);
  font-family: var(--vcb-font);
  font-size: 18px;
  font-weight: 700 !important;
  line-height: 1.4;
}

.ev-vcb-root .ev-vcb-sheet__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  margin: 0;
  padding: 0;
  background: none;
  background-image: none;
  color: var(--vcb-heading);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

.ev-vcb-root .ev-vcb-sheet__body {
  padding: 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ev-vcb-root .ev-vcb-sheet .ev-vcb {
  max-inline-size: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.ev-vcb-root .ev-vcb-sheet .ev-vcb-combo__list {
  position: static;
  max-block-size: 220px;
  margin-block-start: 4px;
  box-shadow: none;
}

.ev-vcb-sheet .ev-vcb-res__actions {
  position: sticky;
  inset-block-end: -16px;
  margin-inline: -16px;
  margin-block-end: -16px;
  padding: 12px 16px;
  background: var(--vcb-surface);
  border-block-start: 1px solid var(--vcb-line);
}

@keyframes ev-vcb-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ev-vcb-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

/* ---------- small screens ---------- */

@media (max-width: 767px) {
  .ev-vcb-root .ev-btn {
    inline-size: 100%;
  }

  .ev-vcb-res__actions .ev-btn {
    flex: 1 1 100%;
  }
}

/* ---------- result popup (result="popup": the homepage hero) ---------- */

.ev-vcb-root .ev-vcb-modal {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ev-vcb-root .ev-vcb-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: ev-vcb-fade var(--vcb-duration) var(--vcb-ease-out);
}

.ev-vcb-root .ev-vcb-modal__panel {
  position: relative;
  inline-size: min(560px, 100%);
  max-block-size: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--vcb-bg);
  color: var(--vcb-text);
  border-radius: var(--vcb-radius-card);
  box-shadow: var(--vcb-shadow);
  outline: 0;
  animation: ev-vcb-pop var(--vcb-duration) var(--vcb-ease-out);
}

.ev-vcb-root .ev-vcb-modal__backdrop,
.ev-vcb-root .ev-vcb-modal__panel {
  transition: opacity var(--vcb-duration-fast) var(--vcb-ease-out);
}

/* The phone's passport picker is open over "another passport": the popup fades away behind it. */
.ev-vcb-root .ev-vcb-modal.is-picking .ev-vcb-modal__backdrop,
.ev-vcb-root .ev-vcb-modal.is-picking .ev-vcb-modal__panel {
  opacity: 0;
}

.ev-vcb-root .ev-vcb-modal .ev-vcb__result {
  margin: 0;
}

@keyframes ev-vcb-fade {
  from {
    opacity: 0;
  }
}

@keyframes ev-vcb-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

/* The X: on the result layer over the docked bar, and in the popup. */
.ev-vcb-root .ev-vcb.is-docked .ev-vcb-res,
.ev-vcb-root .ev-vcb-modal .ev-vcb-res {
  position: relative;
  background: var(--vcb-bg);
  padding-inline-end: 56px;
}

.ev-vcb-root .ev-vcb.is-docked .ev-vcb-res__dismiss,
.ev-vcb-root .ev-vcb-modal .ev-vcb-res__dismiss {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  margin: 0;
  padding: 0;
  background: none;
  background-image: none;
  color: var(--vcb-heading);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .ev-vcb-root,
  .ev-vcb-root *,
  .ev-vcb-root *::before,
  .ev-vcb-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}