/* Styling for pages that don't exist in the original theme (auth + application journey).
   Uses the real theme's brand color (#C60C0C) and fonts (Outfit/Roboto) for visual consistency
   with the header/footer, which are styled by the real theme's own stylesheet. */

.th-page-wrap { background: #f7f7f9; padding: 60px 20px 80px; font-family: 'Roboto', Arial, sans-serif; }
.th-journey-bg {
  background-image: url('/visa/assets/img/wheel-skyline.svg'), linear-gradient(#f7f7f9, #f7f7f9);
  background-repeat: no-repeat, no-repeat;
  background-position: right -60px top 40px, top;
  background-size: 320px auto, cover;
}
@media (max-width: 900px) { .th-journey-bg { background-image: linear-gradient(#f7f7f9, #f7f7f9); } }
.th-card {
  background: #fff; max-width: 460px; margin: 0 auto; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20,10,15,0.08); padding: 36px; border: 1px solid #eee;
}
.th-card.th-wide { max-width: 640px; }
@media (max-width: 480px) { .th-card { padding: 24px 18px; } }
.th-card h1 { font-family: 'Outfit', Arial, sans-serif; font-size: 24px; margin: 0 0 6px; color: #1c1f2a; }
.th-card .th-sub { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
.th-field { margin-bottom: 18px; }
.th-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #1c1f2a; }
.th-field .th-req { color: #C60C0C; margin-left: 2px; }
.th-field .th-sub-hint { display: block; font-size: 12px; color: #8a8f98; margin-top: 4px; }
.th-field input, .th-field select, .th-field textarea {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff;
}
.th-field input:focus, .th-field select:focus, .th-field textarea:focus {
  outline: none; border-color: #C60C0C; box-shadow: 0 0 0 3px rgba(198,12,12,0.12);
}
.th-password-wrap { position: relative; }
.th-password-wrap input { padding-right: 42px; }
.th-password-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #8a8f98; font-size: 15px; padding: 8px; line-height: 1; }
.th-password-toggle:hover { color: #C60C0C; }
.th-input-icon-wrap { position: relative; }
.th-mobile-row { display: flex; gap: 8px; }
.th-mobile-row .th-dial-wrap { flex: 0 0 190px; min-width: 0; }
.th-mobile-row input { flex: 1; min-width: 0; }
@media (max-width: 420px) {
  .th-mobile-row { flex-direction: column; }
  .th-mobile-row .th-dial-wrap { flex: 1 1 auto; }
}
.th-card-number-wrap input { padding-right: 128px; }
.th-cvv-wrap input { padding-right: 44px; }
.th-card-brands { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; pointer-events: none; }
.th-card-brands i { font-size: 19px; opacity: .22; filter: grayscale(1); transition: opacity .15s ease, filter .15s ease; }
.th-card-brands i.active { opacity: 1; filter: none; }
.th-cvv-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.th-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .th-row { grid-template-columns: 1fr; } }
.th-btn-block { width: 100%; text-align: center; display: block; border: none; cursor: pointer; }
.th-foot { text-align: center; font-size: 14px; color: #6b7280; margin-top: 16px; }
.th-foot a { color: #C60C0C; font-weight: 600; }
.th-alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 18px; }
.th-alert-error { background: #fdecea; color: #b3261e; border: 1px solid #f4c7c3; }
.th-alert-success { background: #eaf7ee; color: #1e7e34; border: 1px solid #c3e6cb; }
.th-alert-warning { background: #fff4e5; color: #b26a00; border: 1px solid #ffe0ad; }

/* application journey */
.th-steps { display: flex; justify-content: center; gap: 6px; margin-bottom: 30px; flex-wrap: wrap; }
.th-steps .th-step { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #a1a7ae; padding: 8px 12px; border-radius: 999px; }
.th-steps .th-step .th-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #e5e5e5; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #a1a7ae; }
.th-steps .th-step.active { color: #1c1f2a; }
.th-steps .th-step.active .th-dot { border-color: #C60C0C; color: #C60C0C; }
.th-steps .th-step.done .th-dot { background: #C60C0C; border-color: #C60C0C; color: #fff; }
.th-nav-row { display: flex; justify-content: space-between; margin-top: 26px; gap: 12px; flex-wrap: wrap; }
.th-nav-row > a, .th-nav-row > button { text-align: center; }
@media (max-width: 480px) { .th-nav-row { flex-direction: column; } .th-nav-row > a, .th-nav-row > button { width: 100%; } }
.th-radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.th-radio-row label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }

.th-doc-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px dashed #ddd; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.th-doc-item.uploaded { border-style: solid; border-color: #bfe3c0; background: #f4fbf5; }
.th-doc-item.th-field-error { border-style: solid; border-color: #C60C0C; background: #fdecea; }
.th-doc-item .th-doc-info { flex: 1 1 220px; min-width: 220px; }
.th-doc-item .th-doc-name { font-size: 14px; font-weight: 600; }
.th-doc-item .th-doc-hint { font-size: 12px; color: #8a8f98; }
.th-doc-item .th-doc-sub { font-size: 12px; color: #8a8f98; margin-top: 4px; max-width: 360px; }
.th-doc-item form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 260px; min-width: 0; max-width: 100%; }
.th-doc-item form input[type="file"] { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.th-doc-item form button { flex-shrink: 0; }
@media (max-width: 480px) { .th-doc-item form { flex: 1 1 100%; } .th-doc-item form input[type="file"] { flex-basis: 100%; } .th-doc-item form button { width: 100%; } }

.th-summary { border: 1px solid #eee; border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.th-summary div { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 14px; gap: 12px; flex-wrap: wrap; }
.th-summary div:nth-child(odd) { background: #f7f7f9; }
.th-summary .th-label { color: #8a8f98; flex-shrink: 0; }
.th-summary .th-value { font-weight: 600; text-align: right; word-break: break-word; min-width: 0; }
.th-value-flag { display: inline-flex; align-items: center; gap: 6px; }
.th-value-flag img { border-radius: 2px; }

.th-pay-total { display: flex; justify-content: space-between; align-items: center; background: #f7f7f9; border-radius: 10px; padding: 16px 18px; margin-bottom: 22px; }
.th-pay-total .th-amount { font-size: 26px; font-weight: 700; color: #C60C0C; }
.th-card-visual { border-radius: 14px; padding: 22px; color: #fff; margin-bottom: 22px; background: linear-gradient(135deg, #1c1f2a, #C60C0C); font-family: 'Courier New', monospace; }
.th-card-visual .th-num { font-size: 19px; letter-spacing: 2px; margin: 22px 0 16px; }
.th-card-visual .th-crow { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; opacity: 0.8; }

.th-pay-overlay { position: fixed; inset: 0; background: rgba(18,10,10,0.55); display: none; align-items: center; justify-content: center; z-index: 500; }
.th-pay-overlay.open { display: flex; }
.th-pay-modal { background: #fff; border-radius: 16px; padding: 40px 34px; text-align: center; max-width: 340px; }
.th-spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid #eee; border-top-color: #C60C0C; animation: th-spin 0.8s linear infinite; margin: 0 auto 18px; }
@keyframes th-spin { to { transform: rotate(360deg); } }
.th-pay-modal.success .th-spinner, .th-pay-modal.declined .th-spinner { display: none; }
.th-pay-modal .th-check { display: none; width: 54px; height: 54px; border-radius: 50%; background: #eaf7ee; color: #1e7e34; font-size: 26px; align-items: center; justify-content: center; margin: 0 auto 16px; }
.th-pay-modal.success .th-check { display: flex; }
.th-pay-modal .th-decline-icon { display: none; width: 54px; height: 54px; border-radius: 50%; background: #fdecea; color: #b3261e; font-size: 26px; align-items: center; justify-content: center; margin: 0 auto 16px; }
.th-pay-modal.declined .th-decline-icon { display: flex; }
.th-pay-modal .th-decline-actions { display: none; }
.th-pay-modal.declined .th-decline-actions { display: block; margin-top: 18px; }

.th-confirm-box { text-align: center; padding: 20px 0; }
.th-confirm-box .th-check-big { width: 74px; height: 74px; border-radius: 50%; background: #eaf7ee; color: #1e7e34; display: flex; align-items: center; justify-content: center; font-size: 34px; margin: 0 auto 18px; }

/* field-level validation ribbon */
.th-field-error input, .th-field-error select, .th-field-error textarea, .th-field-error .th-flagselect-toggle,
.th-flagselect-toggle.is-error {
  border-color: #C60C0C !important;
  background: #fdecea;
  box-shadow: 0 0 0 3px rgba(198,12,12,0.12);
}
.th-field-error label { color: #C60C0C; }

/* payment form: red outline only on error, no fill — stays until the field is corrected */
#payForm .th-field-error input {
  border: 2px solid #C60C0C !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* flag-image dropdown (replaces native <select> where flags are shown — emoji flags render as bare
   ISO letters on Windows, so real image flags are used instead) */
.th-flagselect { position: relative; }
.th-flagselect-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px; background: #fff;
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.th-flagselect-toggle-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-flagselect-toggle-flag { flex-shrink: 0; border-radius: 2px; }
.th-flagselect-caret { flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid #8a8f98; border-bottom: 2px solid #8a8f98; transform: rotate(45deg); margin-top: -4px; }
.th-flagselect.open .th-flagselect-toggle { border-color: #C60C0C; box-shadow: 0 0 0 3px rgba(198,12,12,0.12); }
.th-flagselect-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 12px 28px rgba(20,10,15,0.14); overflow: hidden; }
.th-flagselect.open .th-flagselect-menu { display: block; }
.th-flagselect-search { width: 100%; box-sizing: border-box; padding: 10px 14px; border: none; border-bottom: 1px solid #eee; font-size: 14px; font-family: inherit; }
.th-flagselect-search:focus { outline: none; }
.th-flagselect-list { list-style: none; margin: 0; padding: 6px 0; max-height: 220px; overflow-y: auto; }
.th-flagselect-list li { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 14px; cursor: pointer; }
.th-flagselect-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-flagselect-list li img { flex-shrink: 0; border-radius: 2px; }
.th-flagselect-list li:hover { background: #f7f7f9; }
.th-flagselect-list li.is-selected { background: #fdecea; font-weight: 600; }

/* group travel */
.th-group-section { background: #f7f7f9; border: 1px solid #eee; border-radius: 10px; padding: 16px 18px 4px; margin-bottom: 18px; }
.th-member-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding-top: 4px; border-top: 1px dashed #e2e2e5; margin-top: 10px; }
.th-member-row:first-child { border-top: none; margin-top: 0; }
@media (max-width: 700px) { .th-member-row { grid-template-columns: 1fr; } }

/* dashboard */
.th-dash-card { max-width: 760px; }
.th-dash-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.th-dash-header h1 { font-family: 'Outfit', Arial, sans-serif; font-size: 24px; margin: 0 0 4px; color: #1c1f2a; }
.th-pill { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 7px 14px; border-radius: 6px; white-space: nowrap; }
.th-pill-green { background: #1e7e34; color: #fff; }
.th-pill-progress { background: #fff4e5; color: #b26a00; border: 1px solid #ffe1b3; }
.th-dash-panel { margin-top: 28px; }
.th-dash-panel h2 { font-family: 'Outfit', Arial, sans-serif; font-size: 16px; margin: 0 0 12px; color: #1c1f2a; }