/* ============================================
   USA Visa Application System v2.0 - Frontend Styles
   Premium redesign: floating labels, stepper, searchable
   combobox, drag-drop uploads, success screen, a11y.
   All rules scoped under .visa-app-overlay / .visa-app-trigger-wrap
   to stay conflict-proof against the site's active theme.
   ============================================ */

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

:root {
  --visa-primary: #1c3f8a;
  --visa-primary-dark: #0b1f4d;
  --visa-primary-light: #2b5bd7;
  --visa-bg-soft: #f7f9fc;
  --visa-border: #dde2ec;
  --visa-text: #1a1a2e;
  --visa-text-muted: #6b7280;
  --visa-error: #c0392b;
  --visa-error-bg: #fdeceb;
  --visa-success: #1c7a3e;
  --visa-success-bg: #e8f7ee;
}

.visa-app-trigger-wrap {
  text-align: center;
  margin: 30px 0;
}

.visa-apply-btn {
  background: linear-gradient(135deg, var(--visa-primary-dark), var(--visa-primary-light));
  color: #fff;
  border: none;
  padding: 17px 46px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(11, 31, 77, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.visa-apply-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11, 31, 77, 0.32); }
.visa-apply-btn:focus-visible { outline: 3px solid rgba(43, 91, 215, 0.5); outline-offset: 2px; }

/* ---------- Reset layer: protects the form from theme CSS bleed ---------- */
.visa-app-overlay, .visa-app-overlay *, .visa-app-overlay *::before, .visa-app-overlay *::after {
  box-sizing: border-box !important;
  float: none !important;
  font-family: 'Inter', Arial, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.visa-app-overlay ul, .visa-app-overlay li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.visa-app-overlay *:focus-visible { outline: 2.5px solid var(--visa-primary-light) !important; outline-offset: 2px !important; }

/* ---------- Modal overlay ---------- */
.visa-app-overlay {
  display: none;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: rgba(8, 12, 26, 0.75);
  backdrop-filter: blur(2px);
  z-index: 999999 !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.visa-app-overlay.visa-show { display: flex !important; }

.visa-app-modal {
  background: #fff;
  width: 100%;
  max-width: 660px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 40px 46px 34px;
  position: relative;
  box-shadow: 0 25px 70px rgba(0,0,0,0.45);
}
.visa-app-modal::-webkit-scrollbar { width: 8px; }
.visa-app-modal::-webkit-scrollbar-thumb { background: #d8dde8; border-radius: 10px; }

.visa-app-close {
  position: absolute !important;
  top: 18px !important; right: 18px !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: #f2f4f8 !important;
  border: none !important;
  font-size: 18px !important;
  cursor: pointer;
  line-height: 1 !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease;
  z-index: 5;
}
.visa-app-close:hover { background: #e4e8f0 !important; }

.visa-app-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  color: var(--visa-text-muted) !important;
  margin: 0 0 18px 0 !important;
}

/* ---------- Stepper (circles) ---------- */
.visa-stepper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 20px !important;
  position: relative;
}
.visa-stepper::before {
  content: "";
  position: absolute;
  top: 14px; left: 6%; right: 6%;
  height: 2px;
  background: #e6e9f0;
  z-index: 0;
}
.visa-stepper-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 0 !important;
  position: relative;
  z-index: 1;
}
.visa-stepper-circle {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: #eef1f6 !important;
  color: #9aa1b1 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.visa-stepper-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #b0b5c2 !important;
  text-align: center;
}
.visa-stepper-item.is-active .visa-stepper-circle {
  background: linear-gradient(135deg, var(--visa-primary-dark), var(--visa-primary-light)) !important;
  color: #fff !important;
  transform: scale(1.12);
  box-shadow: 0 4px 10px rgba(28, 63, 138, 0.35);
}
.visa-stepper-item.is-active .visa-stepper-label { color: var(--visa-primary) !important; }
.visa-stepper-item.is-complete .visa-stepper-circle { background: var(--visa-primary) !important; color: #fff !important; }
.visa-stepper-item.is-complete .visa-stepper-label { color: var(--visa-text-muted) !important; }

@media (max-width: 640px) {
  .visa-stepper-label { display: none !important; }
  .visa-stepper-circle { width: 24px !important; height: 24px !important; font-size: 11px !important; }
}

/* ---------- Progress bar / text ---------- */
.visa-app-progress-wrap { margin-bottom: 26px !important; }
.visa-app-progress-text {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--visa-text-muted) !important;
  margin-bottom: 8px !important;
}
.visa-app-progress-bar { width: 100%; height: 6px; background: #eef1f6; border-radius: 10px; overflow: hidden; }
.visa-app-progress-fill {
  height: 100%;
  width: 14.28%;
  background: linear-gradient(90deg, var(--visa-primary-dark), var(--visa-primary-light));
  border-radius: 10px;
  transition: width 0.35s ease;
}

/* ---------- Steps ---------- */
.visa-step { display: none !important; }
.visa-step.active { display: block !important; animation: visaFadeIn 0.3s ease; }
@keyframes visaFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.visa-step h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--visa-primary-dark) !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #eef1f6 !important;
  line-height: 1.3 !important;
}

.visa-review-note {
  font-size: 13.5px !important;
  color: var(--visa-text-muted) !important;
  margin: 0 0 18px 0 !important;
  line-height: 1.5 !important;
}

/* ---------- Fields ---------- */
.visa-field { display: block !important; width: 100% !important; margin: 0 0 20px 0 !important; }

.visa-field > label {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--visa-text) !important;
  margin: 0 0 8px 0 !important;
}
.visa-req { color: var(--visa-error) !important; }

/* Shared base for all inputs/selects/textareas */
.visa-field input[type="text"],
.visa-field input[type="email"],
.visa-field input[type="date"],
.visa-field input[type="tel"],
.visa-field select,
.visa-field textarea,
.visa-combobox-input {
  display: block !important;
  width: 100% !important;
  padding: 15px !important;
  border: 1.5px solid var(--visa-border) !important;
  border-radius: 9px !important;
  font-size: 14.5px !important;
  color: var(--visa-text) !important;
  background: #fbfbfd !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.visa-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 40px !important;
}

.visa-field input:focus, .visa-field select:focus, .visa-field textarea:focus, .visa-combobox-input:focus {
  outline: none !important;
  border-color: var(--visa-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(28, 63, 138, 0.12) !important;
}

.visa-field textarea { min-height: 100px !important; resize: vertical !important; line-height: 1.5 !important; }

.visa-field input.visa-error, .visa-field select.visa-error, .visa-field textarea.visa-error, .visa-combobox-input.visa-error {
  border-color: var(--visa-error) !important;
  background: var(--visa-error-bg) !important;
}

.visa-error-msg {
  display: none;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--visa-error) !important;
  margin-top: 6px !important;
}
.visa-error-msg.is-visible { display: block !important; }

/* ---------- Floating labels (text / email / tel / date / textarea) ---------- */
.visa-input-wrap { position: relative !important; }

.visa-input-wrap input,
.visa-input-wrap textarea {
  padding-top: 21px !important;
  padding-bottom: 9px !important;
}
.visa-input-wrap textarea { padding-top: 24px !important; }

.visa-input-wrap label {
  position: absolute !important;
  left: 15px !important;
  top: 15px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #8a8f9c !important;
  margin: 0 !important;
  pointer-events: none;
  background: transparent;
  transform-origin: left top;
  transition: transform 0.15s ease, color 0.15s ease, top 0.15s ease;
}

.visa-input-wrap input:focus ~ label,
.visa-input-wrap input:not(:placeholder-shown) ~ label,
.visa-input-wrap textarea:focus ~ label,
.visa-input-wrap textarea:not(:placeholder-shown) ~ label {
  top: 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--visa-primary) !important;
}

/* ---------- Searchable combobox (nationality / country / phone code) ---------- */
.visa-combobox-wrap { position: relative !important; }
.visa-combobox-input { padding-right: 38px !important; cursor: text; }
.visa-combobox-caret {
  position: absolute !important;
  right: 14px !important; top: 50% !important;
  width: 16px !important; height: 16px !important;
  transform: translateY(-50%) !important;
  color: #8a8f9c !important;
  pointer-events: none;
}
.visa-combobox-list {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important; right: 0 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  background: #fff !important;
  border: 1.5px solid var(--visa-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
  z-index: 20 !important;
  padding: 6px !important;
}
.visa-combobox-list[hidden] { display: none !important; }
.visa-combobox-option {
  padding: 10px 12px !important;
  font-size: 14px !important;
  border-radius: 7px !important;
  cursor: pointer;
  color: var(--visa-text) !important;
}
.visa-combobox-option.is-highlighted, .visa-combobox-option:hover { background: var(--visa-bg-soft) !important; }
.visa-combobox-option.is-selected { background: rgba(28, 63, 138, 0.08) !important; font-weight: 700 !important; }
.visa-combobox-empty { padding: 12px !important; font-size: 13px !important; color: var(--visa-text-muted) !important; text-align: center; }

/* ---------- Phone group ---------- */
.visa-phone-group { display: flex !important; gap: 10px !important; width: 100% !important; align-items: flex-start !important; }
.visa-phone-group .visa-combobox { flex: 0 0 130px !important; width: 130px !important; margin-bottom: 0 !important; }
.visa-phone-group .visa-combobox label { display: none !important; }
.visa-phone-number-field { flex: 1 1 auto !important; margin-bottom: 0 !important; }

@media (max-width: 480px) {
  .visa-phone-group { flex-wrap: wrap !important; }
  .visa-phone-group .visa-combobox { flex: 1 1 100% !important; width: 100% !important; }
}

/* ---------- Checkbox (Declaration) ---------- */
.visa-checkbox-field label {
  font-weight: 500 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: var(--visa-bg-soft);
  border: 1.5px solid #e5e9f2;
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 14px !important;
}
.visa-checkbox-field input[type="checkbox"] {
  margin-top: 3px !important;
  width: 18px !important; height: 18px !important;
  accent-color: var(--visa-primary);
  flex-shrink: 0;
}

/* ---------- Honeypot (hidden from real users, only bots see/fill it) ---------- */
.visa-hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

/* ---------- Conditional explanation fields ---------- */
.visa-conditional-field {
  background: var(--visa-bg-soft);
  border-left: 3px solid var(--visa-primary);
  padding: 14px 16px 2px 16px !important;
  border-radius: 8px;
  margin-top: -8px !important;
}

/* ---------- File upload (drag & drop) ---------- */
.visa-upload-box {
  position: relative !important;
  border: 1.75px dashed var(--visa-border) !important;
  border-radius: 12px !important;
  background: #fbfbfd !important;
  padding: 22px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 92px;
}
.visa-upload-box:hover, .visa-upload-box:focus-visible { border-color: var(--visa-primary-light) !important; background: #f5f8ff !important; }
.visa-upload-box.is-dragover { border-color: var(--visa-primary) !important; background: rgba(28, 63, 138, 0.06) !important; }
.visa-upload-box.has-file { border-style: solid !important; border-color: var(--visa-success) !important; background: var(--visa-success-bg) !important; }

.visa-upload-input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  width: 100% !important; height: 100% !important;
  cursor: pointer;
}

.visa-upload-empty, .visa-upload-filled {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: center;
  pointer-events: none;
}
.visa-upload-filled { flex-direction: row !important; gap: 10px !important; }
.visa-upload-empty svg { width: 26px !important; height: 26px !important; color: #9aa1b1 !important; }
.visa-upload-filled svg { width: 22px !important; height: 22px !important; color: var(--visa-success) !important; flex-shrink: 0; }

.visa-upload-text { font-size: 13.5px !important; font-weight: 600 !important; color: var(--visa-text) !important; }
.visa-upload-hint { font-size: 11.5px !important; color: var(--visa-text-muted) !important; }
.visa-upload-filename { font-size: 13.5px !important; font-weight: 600 !important; color: var(--visa-text) !important; word-break: break-all; }

.visa-upload-remove {
  pointer-events: auto !important;
  background: #fff !important;
  border: 1px solid #d8dde8 !important;
  color: #666 !important;
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important;
  font-size: 15px !important;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3;
  position: relative;
}
.visa-upload-remove:hover { background: #fef4f4 !important; color: var(--visa-error) !important; }

/* ---------- Navigation buttons ---------- */
.visa-app-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 26px !important;
  gap: 12px !important;
}

.visa-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 14px 28px !important;
  border: none !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.visa-btn svg { width: 16px !important; height: 16px !important; }

.visa-btn-prev { background: #eef1f6 !important; color: #333 !important; margin-right: auto !important; }
.visa-btn-prev:hover { background: #e3e7ee !important; }

.visa-btn-next, .visa-btn-submit {
  background: linear-gradient(135deg, var(--visa-primary-dark), var(--visa-primary-light)) !important;
  color: #fff !important;
  margin-left: auto !important;
  box-shadow: 0 8px 18px rgba(11, 31, 77, 0.25);
}
.visa-btn-next:hover, .visa-btn-submit:hover { transform: translateY(-1px); }
.visa-btn:disabled { opacity: 0.7 !important; cursor: not-allowed !important; transform: none !important; }

/* This selector wins over ".visa-btn { display:inline-flex !important }" because
   ".visa-btn.visa-btn-hidden" has higher specificity - so JS toggling this class
   always reliably shows/hides nav buttons regardless of stylesheet order. */
.visa-btn.visa-btn-hidden { display: none !important; }

.visa-btn-spinner {
  display: none;
  width: 15px !important; height: 15px !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: visaSpin 0.7s linear infinite;
}
.visa-btn-submit.is-loading .visa-btn-spinner { display: inline-block !important; }
.visa-btn-submit.is-loading .visa-btn-text { opacity: 0.85; }
@keyframes visaSpin { to { transform: rotate(360deg); } }

/* ---------- Powered by ---------- */
.visa-powered-by {
  text-align: center !important;
  margin-top: 20px !important;
  padding-top: 14px !important;
  border-top: 1px solid #eef1f6 !important;
  font-size: 11.5px !important;
  color: #a5abb8 !important;
  letter-spacing: 0.3px !important;
}
.visa-powered-by strong { color: var(--visa-text-muted) !important; font-weight: 700 !important; }

/* ---------- Message box ---------- */
.visa-app-message {
  display: none;
  margin-top: 16px !important;
  padding: 13px 16px !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
.visa-msg-error { display: block !important; background: var(--visa-error-bg) !important; color: var(--visa-error) !important; border: 1px solid #f6c9c5 !important; }
.visa-msg-success { display: block !important; background: var(--visa-success-bg) !important; color: var(--visa-success) !important; border: 1px solid #bfe8cd !important; }

/* ---------- Success screen ---------- */
.visa-app-modal.is-success .visa-app-header,
.visa-app-modal.is-success .visa-app-form { display: none !important; }

.visa-app-success {
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  padding: 10px 6px 4px !important;
}
.visa-app-modal.is-success .visa-app-success { display: flex !important; }

.visa-success-icon svg { width: 74px !important; height: 74px !important; }
.visa-success-icon circle {
  stroke: var(--visa-success) !important;
  stroke-width: 3 !important;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: visaCircle 0.5s ease-out forwards;
}
.visa-success-icon path {
  stroke: var(--visa-success) !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: visaCheck 0.35s 0.4s ease-out forwards;
}
@keyframes visaCircle { to { stroke-dashoffset: 0; } }
@keyframes visaCheck { to { stroke-dashoffset: 0; } }

.visa-app-success h3 { font-size: 21px !important; font-weight: 800 !important; color: var(--visa-primary-dark) !important; margin: 18px 0 8px !important; }
.visa-app-success p { font-size: 14px !important; color: var(--visa-text-muted) !important; line-height: 1.6 !important; max-width: 420px; margin: 0 0 22px !important; }

.visa-success-id-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--visa-bg-soft) !important;
  border: 1.5px solid #e5e9f2 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 26px !important;
  flex-wrap: wrap;
  justify-content: center;
}
.visa-success-id-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; color: var(--visa-text-muted) !important; }
.visa-success-id-value { font-size: 15px !important; font-weight: 800 !important; color: var(--visa-primary-dark) !important; }
.visa-success-copy-btn {
  background: #fff !important;
  border: 1.5px solid var(--visa-border) !important;
  border-radius: 7px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--visa-primary) !important;
  cursor: pointer;
}
.visa-success-copy-btn:hover { background: var(--visa-bg-soft) !important; }

.visa-btn-close-success {
  background: linear-gradient(135deg, var(--visa-primary-dark), var(--visa-primary-light)) !important;
  color: #fff !important;
  padding: 13px 40px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .visa-app-modal { padding: 26px 20px 24px; max-height: 95vh; border-radius: 14px; }
  .visa-step h3 { font-size: 17.5px !important; }
  .visa-btn { padding: 13px 18px !important; font-size: 14px !important; }
  .visa-app-nav { gap: 8px !important; }
}