:root{
  --inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --input-h: 64px;
  --input-radius: 14px;
  --row-gap: 32px;
  --card-border: #E5E7EB;
  --hover-bg: #F5F9FF;
  --selected-bg: #EEF6FF;
  --dropdown-shadow: 0 12px 40px rgba(2,6,23,.08);
  --dropdown-max-h: 380px;
  --transition: 0.25s ease;
}

/* Container adjustments (if you use the partial directly) */
.visa-card{ background:#fff; border-radius:18px; border:1px solid var(--card-border); box-shadow:0 10px 40px rgba(0,0,0,.08); padding:24px; }
.visa-row{ display:flex; gap:var(--row-gap); align-items:flex-end; }
.nat-col{ flex:0 0 45%; }
.dest-col{ flex:0 0 35%; }
.btn-col{ flex:0 0 20%; }

@media (max-width: 991px){
  .visa-row{ flex-direction:column; }
  .nat-col, .dest-col, .btn-col{ flex:1 1 100%; }
}

.field-label{ font-family:var(--inter); font-size:12px; font-weight:700; color:#475569; margin-bottom:8px; }

/* Select base appearance */
.visa-select{ height:var(--input-h); border-radius:var(--input-radius); font-family:var(--inter); font-size:16px; border:1px solid var(--card-border); padding-left:48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M10.5 20.5L20.5 10.5'/%3E%3C/circle/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:12px center; }
.visa-select:focus{ box-shadow:0 8px 26px rgba(6,78,203,.06); border-color:#cde6fb; }

/* Small padding so text doesn't collide with left flag area (tom-select will render flag inside control) */
.ts-control, .ts-control .item {
  font-family:var(--inter);
}

/* Control sizing to match input requirements */
.ts-control {
  min-height: var(--input-h);
  border-radius: var(--input-radius);
  border: 1px solid var(--card-border);
  padding-left: 12px;
  align-items: center;
}
.ts-control .control, .ts-control .items {
  min-height: var(--input-h);
}
.ts-control .dropdown-toggle {
  margin-right: 8px;
}

/* Tom Select dropdown styles */
.ts-dropdown{ border-radius:16px; box-shadow:var(--dropdown-shadow); border:1px solid var(--card-border); overflow:hidden; max-height:var(--dropdown-max-h); }
.ts-dropdown .ts-dropdown-content{ max-height:var(--dropdown-max-h); overflow:auto; scroll-behavior:smooth; }
.ts-dropdown .ts-option{ display:flex; align-items:center; gap:12px; height:48px; padding:8px 12px; transition:background var(--transition); }
.ts-dropdown .ts-option:hover{ background:var(--hover-bg); }
.ts-dropdown .ts-option.selected, .ts-dropdown .ts-option.ts-selected{ background:var(--selected-bg); }
.ts-dropdown .ts-option .flag{ width:34px; height:20px; display:inline-block; object-fit:cover; }
.ts-dropdown .ts-option .name{ font-weight:600; color:#0f172a; }

/* Item (selected entry) appearance */
.ts-control .item{ display:flex; align-items:center; gap:8px; padding:6px 8px; height:40px; border-radius:8px; }
.ts-control .item img{ width:20px; height:14px; object-fit:cover; }

/* Ensure placeholder appears like design */
.ts-control .placeholder{ color:#94a3b8; font-weight:600; }

/* Input inside control */
.ts-control input{ height:40px; font-size:16px; }

/* custom scrollbar */
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar{ width:10px; }
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb{ background:#e6eef7; border-radius:10px; }

/* Start button style (keeps alignment and size) */
.visa-start-btn{ height:var(--input-h); border-radius:14px; background:#66C7E8; border:0; color:#fff; font-weight:700; font-family:var(--inter); font-size:16px; transition:transform .18s ease, background var(--transition); }
.visa-start-btn:hover{ background:#4BB7DB; transform:translateY(-4px); box-shadow:0 12px 26px rgba(75,183,219,.16); }

.trust-row .trust-dot{ width:10px; height:10px; border-radius:50%; background:#06b64b; display:inline-block; }
.trust-text{ font-weight:600; color:#334155; }