/* =====================================================================
   E-Visa Multi-step CF7 Form — "Boarding Pass" visual system
   Palette anchored to brief: green #156b5a / white / yellow #dbeb2f
   Signature: die-cut boarding-pass summary card + ink-stamp step markers
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

.evisa-wrap {
  --ink: #12261f;
  --paper: #fffefb;
  --paper-alt: #f6f3e9;
  --green: #156b5a;
  --green-deep: #0c4a3d;
  --yellow: #dbeb2f;
  --sage: #7c8f89;
  --line: #e3ddc9;
  --line-strong: #cdc4a0;
  --error: #b3261e;
  --error-bg: #fdf1ef;
  --error-line: #f0c4bd;

  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink);
  background: var(--paper-alt);
  padding: 28px;
  border-radius: 20px;
  max-width: 1120px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}

.evisa-wrap *, .evisa-wrap *::before, .evisa-wrap *::after { box-sizing: border-box; }

.evisa-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}

.evisa-eyebrow-light { color: rgba(255,255,255,.85); }

/* ---------------------------------------------------------------
   Step indicator — balanced single-track design
   (one continuous track behind all circles + a fill line whose
   width/position JS computes from real circle centers, so it stays
   perfectly aligned no matter how long each step label is)
--------------------------------------------------------------- */
.evisa-steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin: 0 auto 34px;
  padding: 0 4px;
  max-width: 640px;
}

.evisa-steps-track,
.evisa-steps-track-fill {
  position: absolute;
  top: 20px;
  height: 2px;
  z-index: 0;
  transform: translateY(-50%);
}

.evisa-steps-track {
  left: 20px;
  right: 20px;
  background: var(--line);
}

.evisa-steps-track-fill {
  left: 20px;
  width: 0;
  background: var(--green);
  transition: width .35s ease;
}

.evisa-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.evisa-step-circle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  color: var(--sage);
  font-weight: 800;
  font-size: 14px;
  transition: all .3s ease;
  flex-shrink: 0;
}

.evisa-step-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sage);
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .evisa-step-label { font-size: 11px; white-space: normal; }
}

.evisa-step.active .evisa-step-circle {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(21,107,90,0.14);
}

.evisa-step.done .evisa-step-circle {
  background: var(--paper);
  border: 2px dashed var(--green);
  color: var(--green);
}

.evisa-step.active .evisa-step-label,
.evisa-step.done .evisa-step-label { color: var(--green-deep); }

/* ---------------------------------------------------------------
   Layout
--------------------------------------------------------------- */
.evisa-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 860px) {
  .evisa-body { grid-template-columns: 1fr; }
}

.evisa-card {
  background: var(--paper);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(12, 74, 61, 0.07);
  border: 1px solid var(--line);
}

@media (max-width: 600px) {
  .evisa-card { padding: 26px 22px; }
}

.evisa-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}

.evisa-subtitle {
  font-size: 14px;
  color: var(--sage);
  margin: 0 0 28px;
  max-width: 46ch;
}

.evisa-section {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-strong);
}

.evisa-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-deep);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.evisa-applicant-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.evisa-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .evisa-row { grid-template-columns: 1fr; }
}

/* Grid items default to min-width:auto, which lets long unbreakable
   content (e.g. a long file name in the upload field) grow the track
   wider than its 1fr share instead of truncating inside it. Force
   the item to actually respect the track width. */
.evisa-row > .evisa-field { min-width: 0; }

.evisa-field { margin-bottom: 18px; }

.evisa-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}

/* ---------------------------------------------------------------
   CF7 native inputs
--------------------------------------------------------------- */
.evisa-wrap input[type="text"],
.evisa-wrap input[type="number"],
.evisa-wrap input[type="email"],
.evisa-wrap input[type="tel"],
.evisa-wrap input[type="date"],
.evisa-wrap select,
.evisa-wrap textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 11px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.evisa-wrap input::placeholder { color: #a9a493; }

.evisa-wrap input:focus,
.evisa-wrap select:focus,
.evisa-wrap textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(21, 107, 90, 0.12);
}

.evisa-wrap span.wpcf7-form-control-wrap { display: block; }

/* ---------------------------------------------------------------
   Processing time — "fare cards"  (v1.3.1 — one-row layout, hardened)
   CF7 can render each option either as:
     <span class="wpcf7-list-item">
       <label><input type="radio"><span class="wpcf7-list-item-label">Text</span></label>
     </span>
   ...or (newer CF7 builds, for a11y) with the input as a SIBLING of
   <label> instead of nested inside it. Putting the card's border/
   padding/flex layout on the OUTER .wpcf7-list-item (rather than on
   <label>) means the card draws correctly — radio + title/subtitle
   + badge all on one row — no matter which markup variant CF7 (or a
   theme) outputs. Every layout-critical property below carries
   !important, since a generic theme rule like "form label{display:
   block}" would otherwise silently win and stack the dot above the
   card instead of beside it.
--------------------------------------------------------------- */
.evisa-fare-cards .wpcf7-form-control.wpcf7-radio {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
}

.evisa-fare-cards .wpcf7-list-item {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 !important;
  cursor: pointer;
  padding: 11px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font-weight: 600;
  font-size: 13px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.evisa-fare-cards .wpcf7-list-item:hover {
  border-color: var(--green);
}

.evisa-fare-cards .wpcf7-list-item:active {
  transform: scale(0.99);
}

/* If the input IS nested inside <label> (classic CF7 markup), the
   label itself must also be a full-width row — never a stacked
   block — so it doesn't reintroduce the "radio on its own line" bug
   from the inside. */
.evisa-fare-cards .wpcf7-list-item label {
  position: static;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

/* The radio stays real and visible — just restyled — so clicking it
   (or the card around it) always works, in every browser/theme.
   Smaller, thinner ring than before for a lighter, tidier look. */
.evisa-fare-cards input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1.75px solid var(--line-strong) !important;
  border-radius: 50% !important;
  background: var(--paper) !important;
  position: relative;
  cursor: pointer;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.evisa-fare-cards input[type="radio"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}

.evisa-fare-cards input[type="radio"]:checked {
  border-color: var(--green) !important;
  background: var(--green) !important;
  box-shadow: 0 0 0 4px rgba(21, 107, 90, 0.14);
}

.evisa-fare-cards input[type="radio"]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

.evisa-fare-cards input[type="radio"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Selected-card highlight: driven by :has() where supported, AND
   mirrored by a JS-toggled .is-checked class (added on every
   'change' event and on init) so the highlight still works even if
   :has() gets stripped by a CSS minifier/optimizer plugin. A thin
   accent bar on the left edge (::before) reinforces the selection
   without needing a heavy background fill. */
.evisa-fare-cards .wpcf7-list-item:has(input:checked),
.evisa-fare-cards .wpcf7-list-item.is-checked {
  border-color: var(--green);
  background: rgba(21, 107, 90, 0.05);
}

.evisa-fare-cards .wpcf7-list-item:has(input:checked)::before,
.evisa-fare-cards .wpcf7-list-item.is-checked::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--green);
}

.evisa-fare-cards .wpcf7-list-item-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
}

/* ---------------------------------------------------------------
   "Yes/No" toggle cards (v1.6.0) — dùng cho câu hỏi kiểu "Did you
   apply for Evisa already?" ở Step 1. Cùng ngôn ngữ thiết kế với
   .evisa-fare-cards (radio thật, được restyle) nhưng xếp NGANG
   2 cột thay vì xếp dọc từng dòng, vì đây chỉ có 2 lựa chọn.
--------------------------------------------------------------- */
.evisa-yesno-cards .wpcf7-form-control.wpcf7-radio {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 12px;
}

.evisa-yesno-cards .wpcf7-list-item {
  position: relative;
  display: flex !important;
  flex: 1 1 140px;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  margin: 0 !important;
  cursor: pointer;
  padding: 12px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font-weight: 600;
  font-size: 13px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.evisa-yesno-cards .wpcf7-list-item:hover { border-color: var(--green); }
.evisa-yesno-cards .wpcf7-list-item:active { transform: scale(0.99); }

.evisa-yesno-cards .wpcf7-list-item label {
  position: static;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  text-transform: capitalize;
}

.evisa-yesno-cards input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1.75px solid var(--line-strong) !important;
  border-radius: 50% !important;
  background: var(--paper) !important;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.evisa-yesno-cards input[type="radio"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}

.evisa-yesno-cards input[type="radio"]:checked {
  border-color: var(--green) !important;
  background: var(--green) !important;
  box-shadow: 0 0 0 4px rgba(21, 107, 90, 0.14);
}

.evisa-yesno-cards input[type="radio"]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

.evisa-yesno-cards input[type="radio"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.evisa-yesno-cards .wpcf7-list-item:has(input:checked),
.evisa-yesno-cards .wpcf7-list-item.is-checked {
  border-color: var(--green);
  background: rgba(21, 107, 90, 0.05);
}

/* Khối field theo nhánh yes/no (được JS ẩn/hiện tuỳ lựa chọn ở trên).
   Không cần style riêng gì đặc biệt — chỉ là 1 container để JS toggle
   display, các .evisa-field bên trong đã có style sẵn. */
.evisa-branch[data-evisa-branch] {
  margin: 0;
}

/* Title + subtitle sit on ONE row by default ("Standard Processing
   • 5-7 working days"); flex-wrap only drops the subtitle onto its
   own second line when the pair genuinely doesn't fit — e.g. a very
   long option label or a narrow mobile viewport. */
.evisa-fare-card-copy {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.evisa-fare-card-title {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.evisa-fare-card-subtitle {
  display: inline-flex;
  align-items: baseline;
  font-weight: 500;
  font-size: 11px;
  color: var(--sage);
  white-space: nowrap;
}

.evisa-fare-card-subtitle::before {
  content: '•';
  margin-right: 6px;
  font-size: 9px;
  opacity: .6;
}

.evisa-fare-card-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--yellow);
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Fee box — perforated "ticket stub" look
--------------------------------------------------------------- */
.evisa-fee-box {
  position: relative;
  border: 1.5px dashed var(--green);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 22px 0 26px;
  background: linear-gradient(135deg, rgba(219,235,47,0.14), rgba(21,107,90,0.05));
  overflow: hidden;
}

.evisa-fee-notch {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper-alt);
  top: 50%;
  transform: translateY(-50%);
}
.evisa-fee-notch-left { left: -10px; }
.evisa-fee-notch-right { right: -10px; }

.evisa-fee-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.evisa-fee-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green-deep);
}

.evisa-fee-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--green-deep);
}

.evisa-fee-desc {
  font-size: 12.5px;
  color: var(--sage);
  margin-top: 4px;
}

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
/* !important on the box-model/color properties below is intentional:
   the CF7 "Purchase"/"Send" button renders as a native
   <input type="submit">, and many WP themes / page builders ship a
   global "input[type=submit] { ... }" reset with its own specificity
   (sometimes its own !important) that otherwise silently wins over a
   plain class selector, leaving the button looking like the theme's
   default grey button instead of our design. */
.evisa-btn,
input.evisa-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  line-height: normal !important;
  letter-spacing: .01em;
  border-radius: 12px !important;
  padding: 15px 26px !important;
  cursor: pointer;
  border: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}

.evisa-btn:hover { filter: brightness(1.04); }
.evisa-btn:active { transform: translateY(1px); }

.evisa-btn-primary,
input.evisa-btn-primary {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(21, 107, 90, 0.3) !important;
}

.evisa-btn-primary:hover,
input.evisa-btn-primary:hover { box-shadow: 0 10px 26px rgba(21, 107, 90, 0.38) !important; }

.evisa-btn-outline,
input.evisa-btn-outline {
  background: var(--paper) !important;
  color: var(--green-deep) !important;
  border: 1.5px solid var(--line-strong) !important;
}

.evisa-btn-outline:hover,
input.evisa-btn-outline:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: rgba(21, 107, 90, 0.04) !important;
}

.evisa-btn-block { width: 100% !important; }

.evisa-btn-arrow {
  display: inline-flex;
  transition: transform .15s ease;
  font-size: 15px;
  line-height: 1;
}

.evisa-btn:hover .evisa-btn-arrow-right { transform: translateX(3px); }
.evisa-btn:hover .evisa-btn-arrow-left { transform: translateX(-3px); }

.evisa-btn-group {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 30px;
}

.evisa-btn-back {
  flex: 0 0 auto;
  min-width: 128px;
}

.evisa-btn-submit-wrap {
  position: relative;
  flex: 1;
  display: flex;
}

.evisa-btn-submit-wrap input.evisa-btn-submit {
  width: 100% !important;
  /* extra right padding leaves room for the arrow icon overlay */
  padding-right: 42px !important;
  text-align: center !important;
}

.evisa-btn-submit-wrap .evisa-btn-arrow-right {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  pointer-events: none;
}

.evisa-btn-submit-wrap:hover .evisa-btn-arrow-right { transform: translateY(-50%) translateX(3px); }

@media (max-width: 480px) {
  .evisa-btn-group { flex-wrap: wrap; }
  .evisa-btn-back { flex: 1 1 100%; order: 2; }
  .evisa-btn-submit-wrap { flex: 1 1 100%; order: 1; }
}

/* Nicer resting/press states for BOTH buttons (v1.3.1): a slight lift
   on hover and a firmer press-down, so the pair feels tactile instead
   of flat. */
.evisa-btn:hover { transform: translateY(-1px); }
.evisa-btn:active { transform: translateY(1px) scale(0.99); }
.evisa-btn:disabled,
input.evisa-btn:disabled {
  opacity: .6 !important;
  cursor: not-allowed;
  filter: none !important;
  transform: none !important;
}

/* ---------------------------------------------------------------
   Fallback submit-button styling (v1.3.1)
   The "Purchase"/"Send" button is a native <input type="submit">.
   If it's ever missing the evisa-btn-* classes — a differently
   configured form, a theme/builder that strips extra classes on
   save — it must NEVER fall back to the theme's plain grey/black
   default. This scoped, high-specificity rule guarantees every CF7
   submit button inside .evisa-wrap keeps the on-brand look even
   without the explicit classes.
--------------------------------------------------------------- */
.evisa-wrap .wpcf7-form input[type="submit"],
.evisa-wrap .wpcf7-form button[type="submit"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: .01em !important;
  line-height: normal !important;
  border-radius: 12px !important;
  padding: 15px 26px !important;
  border: none !important;
  cursor: pointer !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%) !important;
  box-shadow: 0 8px 20px rgba(21, 107, 90, 0.3) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}

.evisa-wrap .wpcf7-form input[type="submit"]:hover,
.evisa-wrap .wpcf7-form button[type="submit"]:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 26px rgba(21, 107, 90, 0.38) !important;
  transform: translateY(-1px);
}

.evisa-wrap .wpcf7-form input[type="submit"]:active,
.evisa-wrap .wpcf7-form button[type="submit"]:active {
  transform: translateY(1px) scale(0.99);
}

/* CF7's own "submitting…" state (adds this class to the <form> while
   the AJAX request is in flight) — dim + spin so it's obvious the
   click registered instead of looking frozen. */
.wpcf7-form.submitting .wpcf7-submit {
  opacity: .75 !important;
  cursor: wait !important;
}

/* ---------------------------------------------------------------
   Custom alert modal (v1.3.1) — replaces window.alert() so
   validation messages match the boarding-pass visual language
   instead of popping up as an unstyled native browser dialog.
--------------------------------------------------------------- */
.evisa-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 38, 31, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}

.evisa-alert-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.evisa-alert-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border-radius: 16px;
  padding: 28px 26px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(18, 38, 31, 0.28);
  transform: translateY(10px) scale(0.97);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.evisa-alert-overlay.is-open .evisa-alert-box {
  transform: translateY(0) scale(1);
}

.evisa-alert-box:focus { outline: none; }

.evisa-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(219, 235, 47, 0.35);
  color: var(--green-deep);
  font-weight: 800;
  font-size: 20px;
  font-style: normal;
}

.evisa-alert-msg {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}

.evisa-alert-ok {
  min-width: 140px;
  padding: 12px 24px !important;
}

@media (prefers-reduced-motion: reduce) {
  .evisa-alert-overlay,
  .evisa-alert-box { transition: none; }
}

/* ---------------------------------------------------------------
   File upload — dashed "photo booth" frame
--------------------------------------------------------------- */
.evisa-upload-field { position: relative; }

.evisa-upload-box {
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-alt);
  transition: border-color .15s ease;
}

.evisa-upload-box:hover { border-color: var(--green); }

/* Small thumbnail sitting inline next to the "Chọn tệp" button and
   filename — replaces the old full-width 140px banner preview, which
   made a chosen photo look "blown up" instead of a compact file-picked
   indicator. Hidden until an image is actually chosen.
   v1.3: the frame is object-fit: contain (not cover) so the image
   keeps its real aspect ratio instead of being cropped to a square —
   it's shown at a smaller scale, but proportionally correct. */
.evisa-upload-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #ece7d6;
  border: 1px solid var(--line);
  display: none;
  align-items: center;
  justify-content: center;
}

.evisa-upload-thumb.has-image { display: flex; }

.evisa-upload-preview {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.evisa-upload-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  min-width: 0;
}

.evisa-upload-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* flex: 1 1 auto + min-width: 0 is what actually lets a flex child
   shrink below its content size — without min-width:0 the ellipsis
   below never kicks in and a long file name pushes the box wider
   instead of being cut off with "…". */
.evisa-upload-filename {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--sage);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide the native file input robustly (still present + focusable via
   the "Chọn tệp" button, which forwards the click to it in JS).
   position:absolute instead of display:none guards against any
   theme/page-builder CSS that might force it visible again. */
.evisa-upload-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Summary sidebar — die-cut "boarding pass" stub
--------------------------------------------------------------- */
.evisa-summary {
  position: relative;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 10px 40px rgba(12, 74, 61, 0.22);
  position: sticky;
  top: 20px;
  overflow: hidden;
}

.evisa-summary-title {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 18px;
  color: #fff;
}

.evisa-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.9);
}

.evisa-summary-row strong { color: #fff; font-weight: 700; }

.evisa-summary-tear {
  position: relative;
  height: 1px;
  margin: 16px -26px;
  border-top: 2px dashed rgba(255,255,255,.35);
}

.evisa-summary-notch {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper-alt);
  top: 156px;
}
.evisa-summary-notch-left { left: -11px; }
.evisa-summary-notch-right { right: -11px; }

.evisa-summary-total {
  font-size: 15px;
  align-items: center;
}

.evisa-summary-total strong {
  color: var(--green-deep);
  background: var(--yellow);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 17px;
}

.evisa-summary-note {
  font-size: 11px;
  color: rgba(255,255,255,.65);
  margin: 16px 0 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   Step 3 — success, ink visa stamp
   Từ 1.15.0 — chia 2 cột: .evisa-success-left (thông báo, nhỏ hơn) +
   .evisa-payment-box (thanh toán, lớn hơn), dồn về 1 cột trên mobile.
--------------------------------------------------------------- */
.evisa-success {
  background: var(--paper);
  border-radius: 20px;
  padding: 48px 36px;
  box-shadow: 0 10px 40px rgba(12, 74, 61, 0.07);
  border: 1px solid var(--line);
}

.evisa-success-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 40px;
  align-items: center;
}

@media (max-width: 760px) {
  .evisa-success {
    padding: 32px 22px;
  }

  .evisa-success-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Trên mobile, khối "You're all set" chỉ đóng vai trò báo hiệu ngắn
     gọn phía trên khối thanh toán (quan trọng hơn), nên thu nhỏ lại. */
  .evisa-success-stamp {
    width: 56px;
    height: 56px;
    font-size: 22px;
    border-width: 2px;
    margin: 0 auto 14px;
  }

  .evisa-success h2 {
    font-size: 19px;
    margin: 2px 0 6px;
  }

  .evisa-success p {
    font-size: 12.5px;
    max-width: none;
  }
}

.evisa-success-left {
  text-align: center;
}

.evisa-success-stamp {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px dashed var(--green);
  color: var(--green);
  font-size: 34px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  transform: rotate(-8deg);
}

.evisa-success h2 {
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  margin: 4px 0 10px;
}

.evisa-success p {
  color: var(--sage);
  max-width: 380px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   Payment box (QR code + chi tiết ngân hàng + PayPal ID) — Step 3,
   từ 1.13.0/1.14.0/1.15.0. Nội dung do admin tự khai báo ở Contact →
   E-Visa Payment, không hard-code trong CSS/markup. Ẩn hoàn toàn nếu
   admin chưa cấu hình gì (xem fillEvisaPaymentBox() trong
   evisa-script.js). Từ 1.15.0 — là cột PHẢI (lớn hơn) của
   .evisa-success-grid; ngân hàng và PayPal dùng chung 1 kiểu thẻ
   (.evisa-payment-detail) để nổi bật ngang nhau.
--------------------------------------------------------------- */
.evisa-payment-box {
  width: 100%;
  padding: 26px 24px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}

.evisa-payment-title {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.evisa-payment-subtitle {
  color: var(--sage);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 18px;
}

/* Từ 1.16.0 — QR (trái) và bank+PayPal (phải, .evisa-payment-side) chia
   làm 2 cột ngang hàng nhau; dồn về 1 cột (QR trên, chi tiết dưới) khi
   khối payment-box không đủ rộng (xem media query bên dưới). */
.evisa-payment-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.evisa-payment-qr {
  flex: 0 0 auto;
}

.evisa-payment-qr img {
  width: 176px;
  height: 176px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}

.evisa-payment-side {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 480px) {
  .evisa-payment-body {
    flex-direction: column;
    align-items: center;
  }

  .evisa-payment-side {
    width: 100%;
  }
}

/* Thẻ chi tiết dùng chung cho khối ngân hàng VÀ khối PayPal — cùng
   nền/viền/bo góc/đệm để 2 khối trông NGANG HÀNG nhau về mặt hình
   ảnh, không còn khối nào bị chìm hơn khối kia. */
.evisa-payment-detail {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 18px;
}

.evisa-payment-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  text-align: left;
}

.evisa-payment-detail-row:last-child {
  border-bottom: none;
}

.evisa-payment-detail-row span {
  color: var(--sage);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.evisa-payment-detail-row strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

/* PayPal dùng đúng chữ xanh thương hiệu cho giá trị để vẫn dễ nhận ra
   là PayPal dù chung khung thẻ với khối ngân hàng. */
.evisa-payment-paypal .evisa-payment-detail-row strong {
  color: var(--green-deep);
}

/* CF7's own default response box (v1.3.2 — hidden for this form).
   It lives OUTSIDE .evisa-wrap (CF7 appends .wpcf7-response-output
   as the last child of <form>, a sibling of our wrapper, not a
   descendant of it), so styling it via ".evisa-wrap .wpcf7-response-
   output" never actually reached it — it kept rendering as the
   browser's plain default box under the whole widget. We now have
   fully custom success (.evisa-success) AND error (.evisa-error-
   banner) screens/components, so the native box is just redundant
   noise and is hidden outright. evisa-script.js adds the
   "evisa-has-multistep" class to the outer .wpcf7 element so this
   only ever hides CF7's default output on OUR forms. */
.wpcf7.evisa-has-multistep .wpcf7-response-output {
  display: none !important;
}

/* ---------------------------------------------------------------
   Custom error banner (v1.3.2) — shown in place of CF7's default
   response box when validation fails, the mail fails to send, or
   the submission is flagged as spam. Sits above the active step
   panel so it's always visible without scrolling past the form.
--------------------------------------------------------------- */
.evisa-error-banner {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1.5px solid var(--error-line);
  border-radius: 12px;
  background: var(--error-bg);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

.evisa-error-banner.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.evisa-error-banner-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--error);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  font-style: normal;
}

.evisa-error-banner-body { flex: 1 1 auto; min-width: 0; }

.evisa-error-banner-title {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--error);
}

.evisa-error-banner-msg {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

.evisa-error-banner-close {
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--error);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  opacity: .7;
}

.evisa-error-banner-close:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .evisa-error-banner { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .evisa-wrap * { transition: none !important; }
}