/* GSCC premium - Track Application Status (Views/Home/TrackStatus.cshtml) */
.gpt-wrap { max-width: 52rem; margin: 0 auto; display: grid; gap: var(--gp-s5); }

.gpt-alert {
  display: flex; align-items: flex-start; gap: var(--gp-s3);
  padding: var(--gp-s3) var(--gp-s4);
  background: var(--gp-danger-tint); color: #7a1010;
  border: 1px solid #f3b4ae; border-radius: var(--gp-radius-sm);
  font-weight: 600; font-size: 0.9375rem;
}
.gpt-alert[hidden], .gpt-result[hidden] { display: none !important; }
.gpt-alert i { margin-top: 0.15rem; }
.gpt-alert span { flex: 1; }
.gpt-alert button {
  margin-left: auto; width: 2rem; height: 2rem; flex: none;
  border: 0; border-radius: var(--gp-radius-sm); background: transparent;
  color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.gpt-alert button:hover { background: rgba(186, 26, 26, 0.12); }
.gpt-alert button:focus-visible { outline: 3px solid var(--gp-accent); outline-offset: 2px; }

.gpt-card {
  background: var(--gp-card); border: 1px solid var(--gp-line);
  border-top: 4px solid var(--gp-accent);
  border-radius: var(--gp-radius); box-shadow: var(--gp-shadow);
  padding: var(--gp-s5);
}
.gpt-card__title { margin: 0 0 var(--gp-s1); font-family: var(--gp-font-head); font-size: 1.125rem; font-weight: 800; color: var(--gp-ink); }
.gpt-card__lead { margin: 0 0 var(--gp-s5); color: var(--gp-muted); font-size: 0.9375rem; }

.gpt-fields { display: grid; gap: var(--gp-s4); align-items: end; }
@media (min-width: 720px) { .gpt-fields { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.gpt-or {
  align-self: center; text-align: center; padding: 0.25rem 0.75rem;
  background: var(--gp-surface-mid); color: var(--gp-ink-2); border-radius: var(--gp-radius-pill);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
@media (min-width: 720px) { .gpt-or { margin-top: 1.75rem; } }

.gpt-input { position: relative; display: block; }
.gpt-input i { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--gp-primary-2); pointer-events: none; }
.gpt-input .gp-input { padding-left: 2.5rem; }

.gpt-captcha {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-s3);
  margin-top: var(--gp-s5); padding: var(--gp-s3) var(--gp-s4);
  background: var(--gp-surface-low); border: 1px solid var(--gp-line); border-radius: var(--gp-radius-sm);
}
.gpt-captcha__label { font-weight: 700; color: var(--gp-ink); font-size: 0.9375rem; }
.captcha-code {
  min-width: 7.5rem; padding: 0.5rem 0.75rem; text-align: center;
  font-family: "Courier New", ui-monospace, monospace; font-weight: 800; font-size: 1.125rem; letter-spacing: 0.3em;
  background: #fff; color: var(--gp-primary); border: 1.5px dashed var(--gp-primary-2); border-radius: var(--gp-radius-sm);
  user-select: none;
}
.captcha-refresh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 1px solid var(--gp-line-strong);
  border-radius: var(--gp-radius-sm); background: #fff; color: var(--gp-primary-2); cursor: pointer;
}
.captcha-refresh:hover { background: var(--gp-primary-tint); }
.captcha-refresh:focus-visible { outline: 3px solid var(--gp-accent); outline-offset: 2px; }
.gpt-captcha .gp-input { width: 10rem; max-width: 100%; text-transform: uppercase; }

.gpt-submit { margin-top: var(--gp-s5); }
.gpt-submit .spinner-border { width: 1rem; height: 1rem; border-width: 0.15em; }

/* result */
.gpt-result__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--gp-s3); margin-bottom: var(--gp-s5); }
.gpt-result__title { margin: var(--gp-s1) 0 0; font-family: var(--gp-font-head); font-size: 1.25rem; font-weight: 800; color: var(--gp-ink); word-break: break-word; }

.gpt-steps { list-style: none; margin: 0 0 var(--gp-s5); padding: 0; display: grid; gap: var(--gp-s2); }
@media (min-width: 720px) { .gpt-steps { grid-template-columns: repeat(4, 1fr); } }
.gpt-steps li {
  display: grid; gap: 0.125rem; justify-items: center; text-align: center;
  padding: var(--gp-s3) var(--gp-s2);
  background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-radius-sm);
  color: var(--gp-muted);
}
@media (max-width: 719px) {
  .gpt-steps li { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left; gap: var(--gp-s3); }
}
.gpt-steps .step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--gp-line); color: var(--gp-ink-2); font-size: 0.8125rem; font-weight: 800;
}
.gpt-steps li span:not(.step-no) { font-size: 0.8125rem; font-weight: 700; color: var(--gp-ink-2); }
.gpt-steps em { font-style: normal; font-size: 0.75rem; font-weight: 700; }
.gpt-steps li.done { background: var(--gp-success-tint); border-color: #9ad2b8; }
.gpt-steps li.done .step-no { background: var(--gp-primary-2); color: #fff; }
.gpt-steps li.done em { color: var(--gp-primary); }
.gpt-steps li.current { background: var(--gp-accent-tint); border-color: var(--gp-accent); box-shadow: 0 0 0 1px var(--gp-accent) inset; }
.gpt-steps li.current .step-no { background: var(--gp-accent); color: var(--gp-accent-ink); }
.gpt-steps li.current em { color: var(--gp-secondary); }

.gpt-details { margin: 0; display: grid; gap: var(--gp-s3); }
@media (min-width: 640px) { .gpt-details { grid-template-columns: 1fr 1fr; } }
.gpt-details > div { padding: var(--gp-s3) var(--gp-s4); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-radius-sm); }
.gpt-details dt { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gp-muted); }
.gpt-details dd { margin: 0.25rem 0 0; font-weight: 700; color: var(--gp-ink); word-break: break-word; }
.gpt-details .gpt-status-row { grid-column: 1 / -1; background: var(--gp-primary-tint); border-color: #b9ddcd; }

.gpt-help { margin: 0; font-size: 0.8125rem; color: var(--gp-muted); }

/* Email OTP step and the Search Another action */
.gpt-actions { display: flex; flex-wrap: wrap; gap: var(--gp-s3); margin-top: var(--gp-s5); }
.gpt-actions .gpt-submit { margin-top: 0; flex: 1 1 14rem; }
.gpt-actions .gpt-another { flex: 0 1 auto; }
.gpt-otp[hidden] { display: none; }
.gpt-otp { margin-top: var(--gp-s4); padding: var(--gp-s4); border: 1px solid var(--gp-border, #d7dee5); border-radius: var(--gp-radius, 0.5rem); background: var(--gp-surface-mid); }
.gpt-otp__hint { margin: 0 0 var(--gp-s3); color: var(--gp-ink-2); font-size: 0.9375rem; }