/* Unified visa form theme
   Apply by adding class="visa-form-theme" to country application forms.
*/

#form1.visa-form-theme {
  --vf-card-radius: 0;
  --vf-input-radius: 6px;
  --vf-border: #cbd5e1;
  --vf-header-pad-y: 20px;
  --vf-header-pad-x: 32px;
  --vf-body-pad: 32px;
  --vf-font-body: 14px;
  --vf-font-label: 12px;
  --vf-field-gap: 6px;
  --vf-input-pad-x: 14px;
  --vf-select-pad-right: 36px;
}

/* Whole-form lock: use this class to force full India-like visual consistency */
#form1.visa-form-unified {
  --vf-label-color: var(--song-navy);
  --vf-input-bg: #ffffff;
}

#form1.visa-form-theme [id^="pagediv"] > .bg-white.border {
  border-radius: var(--vf-card-radius) !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

#form1.visa-form-unified [id^="pagediv"] > .bg-white.border {
  border-radius: 0 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

#form1.visa-form-theme [id^="pagediv"] > .bg-white.border > div:first-child {
  padding: var(--vf-header-pad-y) var(--vf-header-pad-x) !important;
  background: var(--song-navy) !important;
  border-bottom: 1px solid #d6dee7 !important;
}

#form1.visa-form-unified [id^="pagediv"] > .bg-white.border > div:first-child {
  background: var(--song-navy) !important;
  border-bottom: 1px solid #d6dee7 !important;
}

#form1.visa-form-theme [id^="pagediv"] > .bg-white.border > div:last-child {
  padding: var(--vf-body-pad) !important;
}

#form1.visa-form-theme [id^="pagediv"] > .bg-white.border > div:first-child h2,
#form1.visa-form-theme [id^="pagediv"] > .bg-white.border > div:first-child h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: #fff !important;
}

#form1.visa-form-unified [id^="pagediv"] > .bg-white.border > div:first-child h2,
#form1.visa-form-unified [id^="pagediv"] > .bg-white.border > div:first-child h3 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

#form1.visa-form-theme [id^="pagediv"] > .bg-white.border > div:first-child p {
  font-size: 12px !important;
  color: #c7d2e0 !important;
}

#form1.visa-form-theme [id^="pagediv"] > .bg-white.border > div:first-child i {
  color: var(--song-gold) !important;
}

#form1.visa-form-theme input[type="text"],
#form1.visa-form-theme input[type="email"],
#form1.visa-form-theme input[type="tel"],
#form1.visa-form-theme input[type="date"],
#form1.visa-form-theme input[type="number"],
#form1.visa-form-theme input[type="file"],
#form1.visa-form-theme select,
#form1.visa-form-theme textarea {
  width: 100%;
  min-height: 44px;
  border-radius: var(--vf-input-radius) !important;
  border: 1px solid var(--vf-border) !important;
  background: #fff;
  color: var(--song-navy);
  font-size: var(--vf-font-body);
  font-weight: 400;
  line-height: 1.45;
  padding-left: var(--vf-input-pad-x);
  padding-right: var(--vf-input-pad-x);
}

#form1.visa-form-unified [id^="pagediv"] input[type="text"],
#form1.visa-form-unified [id^="pagediv"] input[type="email"],
#form1.visa-form-unified [id^="pagediv"] input[type="tel"],
#form1.visa-form-unified [id^="pagediv"] input[type="date"],
#form1.visa-form-unified [id^="pagediv"] input[type="number"],
#form1.visa-form-unified [id^="pagediv"] textarea {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: var(--vf-input-bg) !important;
  color: var(--song-navy) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  padding: 0 14px !important;
}

#form1.visa-form-theme select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--vf-select-pad-right);
  font-weight: 500;
  background-color: #f8fafc;
  border-color: #d6dee7 !important;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.25 4.5L6 8.25L9.75 4.5' fill='none' stroke='%2364758b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#form1.visa-form-unified [id^="pagediv"] select {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 6px !important;
  border: 1px solid #d6dee7 !important;
  background-color: #f8fafc !important;
  color: var(--song-navy) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
}

#form1.visa-form-theme select:hover {
  border-color: #b8c7d8 !important;
  background-color: #fff;
}

#form1.visa-form-theme input:focus,
#form1.visa-form-theme select:focus,
#form1.visa-form-theme textarea:focus {
  outline: none;
  border-color: var(--song-gold) !important;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
}

#form1.visa-form-theme label {
  display: block;
  margin-bottom: 0;
  font-size: var(--vf-font-label);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--song-navy);
}

#form1.visa-form-unified [id^="pagediv"] label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--vf-label-color) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  opacity: 1 !important;
}

#form1.visa-form-unified [id^="pagediv"] > .bg-white.border.rounded-2xl,
#form1.visa-form-unified [id^="pagediv"] > .bg-white.border.rounded-xl {
  border-radius: 0 !important;
}

#form1.visa-form-unified [id^="pagediv"] input.rounded-xl,
#form1.visa-form-unified [id^="pagediv"] input.rounded,
#form1.visa-form-unified [id^="pagediv"] select.rounded-xl,
#form1.visa-form-unified [id^="pagediv"] select.rounded,
#form1.visa-form-unified [id^="pagediv"] textarea.rounded-xl,
#form1.visa-form-unified [id^="pagediv"] textarea.rounded {
  border-radius: 6px !important;
}

/* Legacy override guard: theme-tokens uses #form1 with radius:0 !important */
#form1.visa-form-unified input[type="text"],
#form1.visa-form-unified input[type="email"],
#form1.visa-form-unified input[type="tel"],
#form1.visa-form-unified input[type="date"],
#form1.visa-form-unified input[type="number"],
#form1.visa-form-unified select,
#form1.visa-form-unified textarea {
  border-radius: 6px !important;
}

#form1.visa-form-theme input[type="radio"],
#form1.visa-form-theme input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--song-gold);
}

#form1.visa-form-theme .space-y-2 {
  display: flex;
  flex-direction: column;
  gap: var(--vf-field-gap);
}

#form1.visa-form-theme .space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

/* Neutralize Bootstrap [class*="col-"] side gutters on legacy md-col-span-* wrappers.
   India form already does this; keep form1 pages aligned. */
#form1.visa-form-theme [class^="md-col-span-"],
#form1.visa-form-theme [class*=" md-col-span-"],
#form1.visa-form-theme [class^="md:col-span-"],
#form1.visa-form-theme [class*=" md:col-span-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#form1.visa-form-theme .h-px.bg-slate-100 {
  background: #e7e5e4 !important;
}

#form1.visa-form-theme #Button1,
#form1.visa-form-theme .btn-song {
  border-radius: 0 !important;
  min-height: 52px;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#form1.visa-form-theme #Button1 {
  background: var(--song-gold) !important;
  border-color: var(--song-gold) !important;
  color: #fff !important;
}

#form1.visa-form-theme #Button1:hover,
#form1.visa-form-theme .btn-song:hover {
  filter: brightness(0.96);
}

/* Step 2 nav buttons: match India CTA design exactly on form1 pages. */
#form1.visa-form-theme #pagediv2 #Button2,
#form1.visa-form-theme #pagediv2 #Button3 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: filter 0.2s ease, background-color 0.2s ease;
}

#form1.visa-form-theme #pagediv2 #Button2 {
  background: #e8ecf0 !important;
  color: var(--song-navy) !important;
}

#form1.visa-form-theme #pagediv2 #Button2:hover {
  background: #dfe5ea !important;
}

#form1.visa-form-theme #pagediv2 #Button3 {
  background: var(--song-gold) !important;
  color: #ffffff !important;
}

#form1.visa-form-theme #pagediv2 #Button3:hover {
  filter: brightness(0.95);
}

#form1.visa-form-theme #pagediv0 #bar {
  background: var(--song-gold) !important;
}

/* India-like step progress UI for form1-based country forms (Egypt/Thailand). */
#form1.visa-form-theme .steps-nav {
  display: flex;
  align-items: flex-start;
}

#form1.visa-form-theme .step-conn {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin-top: 1rem;
  transition: background 0.3s;
}

#form1.visa-form-theme .step-node.is-done + .step-conn {
  background: var(--song-gold);
}

#form1.visa-form-theme .step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

#form1.visa-form-theme .step-node-circle {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}

#form1.visa-form-theme .sn-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  transition: color 0.2s;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}

#form1.visa-form-theme .sn-check {
  display: none;
  font-size: 0.7rem;
  color: var(--song-navy);
}

#form1.visa-form-theme .step-node-label {
  display: none;
}

#form1.visa-form-theme #pagediv0 .flex.justify-end {
  display: none;
}

#form1.visa-form-theme .step-node.is-active .step-node-circle {
  background: var(--song-navy);
  border-color: var(--song-navy);
}

#form1.visa-form-theme .step-node.is-active .sn-num {
  color: #fff;
}

#form1.visa-form-theme .step-node.is-done .step-node-circle {
  background: var(--song-gold);
  border-color: var(--song-gold);
}

#form1.visa-form-theme .step-node.is-done .sn-num {
  display: none;
}

#form1.visa-form-theme .step-node.is-done .sn-check {
  display: block;
}

/* India-style processing/purpose block for form1 pages */
#form1.visa-form-theme .travel-speed-section .ts-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

#form1.visa-form-theme .travel-speed-section .ts-row-label {
  width: 110px;
  flex-shrink: 0;
  padding-top: 0.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--song-navy);
  opacity: 0.95;
}

#form1.visa-form-theme .travel-speed-section .ts-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#form1.visa-form-theme .travel-speed-section .ts-radio-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  cursor: pointer;
}

#form1.visa-form-theme .travel-speed-section .ts-radio-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--song-navy);
}

#form1.visa-form-theme .travel-speed-section .ts-summary {
  margin-top: 0.25rem;
  border: 1px solid #e2e8f0;
  background: #fdfbf7;
  border-radius: 8px;
  padding: 0.75rem 0.95rem;
}

#form1.visa-form-theme .travel-speed-section .ts-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0.36rem 0;
}

#form1.visa-form-theme .travel-speed-section .ts-summary-row + .ts-summary-row {
  border-top: 1px dashed #e2e8f0;
}

#form1.visa-form-theme .travel-speed-section .ts-summary-key {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  min-width: 130px;
}

#form1.visa-form-theme .travel-speed-section .ts-summary-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--song-navy);
  text-align: left;
}

#form1.visa-form-theme .travel-speed-section #visafee.ts-summary-val {
  color: #16a34a;
}

/* Match India divider rhythm inside processing/purpose card. */
#form1.visa-form-theme .travel-speed-section .h-px.bg-slate-100 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* India-style billing person/company radio row */
#form1.visa-form-theme .billing-type-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

#form1.visa-form-theme .billing-type-row > div {
  width: auto !important;
  flex: 0 1 auto;
}

/* Conflict-safe lock for Step 2 billing radio row (mirrors India spacing/flow). */
#form1.visa-form-theme #pagediv2 .billing-unified .billing-type-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  column-gap: 2rem !important;
  row-gap: 2rem !important;
}

#form1.visa-form-theme #pagediv2 .billing-unified .billing-type-row > div {
  width: auto !important;
  flex: 0 1 auto !important;
}

#form1.visa-form-theme .billing-type-row label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--song-navy);
}

/* India-like card shell for Step 2 wrappers on form1 pages. */
#form1.visa-form-theme .india-step-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

#form1.visa-form-theme .india-step-card-head {
  background: var(--song-navy) !important;
  border-bottom: 1px solid #d6dee7 !important;
  padding: var(--vf-header-pad-y) var(--vf-header-pad-x) !important;
}

#form1.visa-form-theme .india-step-card-head h2,
#form1.visa-form-theme .india-step-card-head h3 {
  margin: 0;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: #ffffff !important;
}

#form1.visa-form-theme .india-step-card-body {
  padding: var(--vf-body-pad) !important;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* India billing rhythm for reusable billing partial (Egypt/Thailand only). */
#form1.visa-form-theme #pagediv2 .billing-unified {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#form1.visa-form-theme #pagediv2 .billing-unified .grid.gap-4 {
  column-gap: 16px;
  row-gap: 0;
}

#form1.visa-form-theme #pagediv2 .billing-unified .mb-4.space-y-2 {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vf-field-gap);
}

#form1.visa-form-theme #pagediv2 .billing-unified .space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#form1.visa-form-theme #pagediv2 .billing-unified label {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 0;
}

#form1.visa-form-theme #pagediv2 .billing-type-row .flex.items-center > label {
  color: #1a2c42 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#form1.visa-form-theme #pagediv2 #inlineRadio2 + label {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

/* India-like rhythm for later steps: keep blocks and field groups visually consistent. */
#form1.visa-form-theme #pagediv3 .grid,
#form1.visa-form-theme #pagediv4 .grid,
#form1.visa-form-theme #pagediv5 .grid,
#form1.visa-form-theme #pagediv6 .grid {
  row-gap: 16px !important;
  column-gap: 16px !important;
}

#form1.visa-form-theme #pagediv3 .grid + .grid,
#form1.visa-form-theme #pagediv4 .grid + .grid,
#form1.visa-form-theme #pagediv5 .grid + .grid,
#form1.visa-form-theme #pagediv6 .grid + .grid {
  margin-top: 1.25rem;
}

#form1.visa-form-theme #pagediv3 .mb-4.space-y-2,
#form1.visa-form-theme #pagediv4 .mb-4.space-y-2,
#form1.visa-form-theme #pagediv5 .mb-4.space-y-2,
#form1.visa-form-theme #pagediv6 .mb-4.space-y-2 {
  margin-bottom: 0 !important;
}

#form1.visa-form-theme #pagediv3 .h-px.bg-slate-100,
#form1.visa-form-theme #pagediv4 .h-px.bg-slate-100,
#form1.visa-form-theme #pagediv5 .h-px.bg-slate-100,
#form1.visa-form-theme #pagediv6 .h-px.bg-slate-100 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

#form1.visa-form-theme #pagediv3 h2,
#form1.visa-form-theme #pagediv3 h3,
#form1.visa-form-theme #pagediv4 h2,
#form1.visa-form-theme #pagediv4 h3,
#form1.visa-form-theme #pagediv5 h2,
#form1.visa-form-theme #pagediv5 h3,
#form1.visa-form-theme #pagediv6 h2,
#form1.visa-form-theme #pagediv6 h3 {
  letter-spacing: normal;
}

@media (max-width: 767px) {
  #form1.visa-form-theme .travel-speed-section .ts-row {
    flex-direction: column;
    gap: 0.65rem;
  }

  #form1.visa-form-theme .travel-speed-section .ts-row-label {
    width: auto;
    padding-top: 0;
  }
}

/* Grid compatibility: mirror India-form fallback for md:col-span-* utilities.
   Some Tailwind builds omit specific md:col-span-* classes used in legacy Razor markup. */
@media (min-width: 768px) {
  #form1.visa-form-theme .md-grid-cols-12,
  #form1.visa-form-theme .md\:grid-cols-12,
  #form1.visa-form-theme [class~="md:grid-cols-12"] {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  #form1.visa-form-theme .md-col-span-1,
  #form1.visa-form-theme .md\:col-span-1,
  #form1.visa-form-theme [class~="md:col-span-1"] { grid-column: span 1 / span 1 !important; }
  #form1.visa-form-theme .md-col-span-2,
  #form1.visa-form-theme .md\:col-span-2,
  #form1.visa-form-theme [class~="md:col-span-2"] { grid-column: span 2 / span 2 !important; }
  #form1.visa-form-theme .md-col-span-3,
  #form1.visa-form-theme .md\:col-span-3,
  #form1.visa-form-theme [class~="md:col-span-3"] { grid-column: span 3 / span 3 !important; }
  #form1.visa-form-theme .md-col-span-4,
  #form1.visa-form-theme .md\:col-span-4,
  #form1.visa-form-theme [class~="md:col-span-4"] { grid-column: span 4 / span 4 !important; }
  #form1.visa-form-theme .md-col-span-5,
  #form1.visa-form-theme .md\:col-span-5,
  #form1.visa-form-theme [class~="md:col-span-5"] { grid-column: span 5 / span 5 !important; }
  #form1.visa-form-theme .md-col-span-6,
  #form1.visa-form-theme .md\:col-span-6,
  #form1.visa-form-theme [class~="md:col-span-6"] { grid-column: span 6 / span 6 !important; }
  #form1.visa-form-theme .md-col-span-7,
  #form1.visa-form-theme .md\:col-span-7,
  #form1.visa-form-theme [class~="md:col-span-7"] { grid-column: span 7 / span 7 !important; }
  #form1.visa-form-theme .md-col-span-8,
  #form1.visa-form-theme .md\:col-span-8,
  #form1.visa-form-theme [class~="md:col-span-8"] { grid-column: span 8 / span 8 !important; }
  #form1.visa-form-theme .md-col-span-9,
  #form1.visa-form-theme .md\:col-span-9,
  #form1.visa-form-theme [class~="md:col-span-9"] { grid-column: span 9 / span 9 !important; }
  #form1.visa-form-theme .md-col-span-10,
  #form1.visa-form-theme .md\:col-span-10,
  #form1.visa-form-theme [class~="md:col-span-10"] { grid-column: span 10 / span 10 !important; }
  #form1.visa-form-theme .md-col-span-11,
  #form1.visa-form-theme .md\:col-span-11,
  #form1.visa-form-theme [class~="md:col-span-11"] { grid-column: span 11 / span 11 !important; }
  #form1.visa-form-theme .md-col-span-12,
  #form1.visa-form-theme .md\:col-span-12,
  #form1.visa-form-theme [class~="md:col-span-12"] { grid-column: span 12 / span 12 !important; }
}