/* ============================================================
   Global Travel Records Portal — Stylesheet
   Pure CSS3. Modern blue & white professional portal look
   inspired by traditional account-services portals.
   ============================================================ */

:root {
  --orange:       rgb(255, 44, 0);
  --blue:      #1454b8;
  --blue-dark:   #0e3f8c;
  --blue-darker:  rgb(255, 44, 0);
  --blue-soft:   #2e6cd1;
  --blue-bg:     #eef3fb;   
  --blue-band:  rgb(255, 44, 0);  
  --blue-50:     #f3f7fd;
  --blue-100:    #dce8f7;
  --conditions-bg: #e6eef8;
  --warning-bg:  #fdf6dc;
  --warning-bd:  #e7d99a;
  --ink:         #1a1f2b;
  --ink-2:       #2b3447;
  --ink-3:       #54607a;
  --ink-4:       #8a93a7;
  --line:        #d8dee9;
  --line-2:      #c6cfdd;
  --white:       #ffffff;
  --bg:          #ffffff;
  --black:       #0b0c10;
  --black-2:     #15171d;
  --red:         #d33;
  --gray-soft:   #e9edf3;
  --gray-soft-2: #dadfe8;
  --content-max: 1240px;
  --shadow-sm:   0 1px 2px rgba(15,30,60,.06);
  --shadow-md:   0 6px 18px rgba(15,30,60,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0 auto;

  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.sep { margin: 0 6px; color: var(--ink-4); }
.req { color: var(--red); font-weight: 700; margin-left: 2px; }

/* ==============================
   LOGIN PAGE
   ============================== */
.page-login { background: var(--white); display: flex; flex-direction: column; min-height: 100vh; }

.login-topbar {
  background: var(--black);
  color: #fff;
}
.login-topbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  flex-direction: row;
  padding: 05px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-logo{
   width:280px;
    height:auto;
   object-fit:contain;
    display:block;
}


.portal-logo{
    height:auto;
    width:220px;
    object-fit:contain;
    display:block;
}
.brand-block { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-block:hover { text-decoration: none; }
.brand-block-dark { color: #fff; }
.brand-block-light { color: #fff;}

.brand-logo{
    width:32px;
    height:32px;
    object-fit:contain;
    display:block;
}
.brand-name-wrap { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-size: 28px; font-weight: 800; letter-spacing: -.5px;
  font-family: "Inter", system-ui, sans-serif;
}
.brand-mark-sup { font-size: 12px; vertical-align: super; margin-left: 2px; font-weight: 600; }
.brand-sub { font-size: 16px; font-weight: 400; opacity: .95; margin-top: 2px; }

.login-portal-tag {
  display: flex; align-items: center; gap: 14px;
  color: #fff;
}
.portal-icon { color: #5aa5ff; display: inline-flex; }
.portal-label { font-size: 20px; font-weight: 500; letter-spacing: .04em; color: #fff; }

.back-strip { background: var(--gray-soft); border-bottom: 1px solid var(--gray-soft-2); }
.back-strip-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px 32px;
}
.back-link {
  color: var(--orange); display: inline-flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 400;
}
.back-link:hover { text-decoration: underline; }
.back-link-icon { display: inline-flex; }

.login-main { flex: 1; padding: 56px 0 64px; }
.login-main-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 56px;
  align-items: start;
}
.col-divider { width: 1px; background: var(--gray-soft-2); justify-self: center; height: 100%; min-height: 380px; }
.login-col { max-width: 520px; }
.login-col-right { padding-left: 8px; }
.col-heading { font-size: 36px; font-weight: 400; color: var(--orange); margin: 0 0 22px; line-height: 1.15; }
.col-heading strong { font-weight: 800; color: var(--orange); }
.col-lede, .col-body { font-size: 16px; color: var(--ink); margin: 0 0 14px; }
.col-body { line-height: 1.7; }

.login-form { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }

.floating-field {
  position: relative;
  background: var(--gray-soft);
  border-radius: 10px;
  padding: 0;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.floating-field:focus-within {
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(20, 84, 184, .15);
}
.floating-field input {
  width: 100%;
  background: transparent;
  border: 0;
  font-size: 16px;
  color: var(--ink);
  padding: 26px 16px 10px;
  font-family: inherit;
  outline: none;
}
.floating-field label {
  position: absolute; left: 16px; top: 18px;
  color: var(--ink-3); font-size: 15px;
  pointer-events: none;
  transition: transform .15s ease, color .15s ease, font-size .15s ease;
  transform-origin: left top;
}
.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label {
  transform: translateY(-12px) scale(.78);
  color: var(--blue-dark);
  font-weight: 600;
}
.field-error { display: block; color: var(--red); font-size: 12px; padding: 4px 6px 0 16px; min-height: 14px; }

.inline-message { font-size: 14px; min-height: 18px; padding: 0 4px; color: var(--ink-2); }
.inline-message.error { color: var(--red); }
.inline-message.success { color: #1e7a2c; }

/* Pill buttons (login) */
.pill-btn {
  appearance: none; border: 0; cursor: pointer;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 12px;
  position: relative;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
  font-family: inherit;
  align-self: flex-start;
}
.pill-btn:hover { background: var(--red); box-shadow: 0 8px 18px rgba(20,84,184,.25); }
.pill-btn:active { transform: translateY(1px); }
.pill-btn:disabled { opacity: .7; cursor: not-allowed; }
.pill-btn .btn-label { line-height: 1; }
.pill-btn .pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #fff; }
.pill-btn .pill-icon-circle { background: transparent; }
.pill-btn-create { margin-top: 8px; }

.forgot-links { margin-top: 22px; font-size: 16px; color: var(--ink-3); }
.forgot-links a { color: var(--orange); }
.forgot-links .sep { margin: 0 8px; color: var(--ink); }

.login-footer { background: var(--blue-band); color: #fff; }
.login-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px 32px 22px;
}
.login-footer-nav { display: flex; flex-wrap: wrap; gap: 38px; }
.login-footer-nav a { color: #fff; font-size: 16px; font-weight: 500; }
.login-footer-nav a:hover { text-decoration: underline; }
.login-footer-rule { border: 0; border-top: 1px solid rgba(255,255,255,.45); margin: 22px 0 16px; }
.login-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; color: rgba(255,255,255,.95);
  flex-wrap: wrap; gap: 10px;
}
.lang-switch .sep { color: rgba(255,255,255,.9); }
.lang-switch strong { font-weight: 700; }

/* Spinner (login button) */
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
  display: none;
}
.pill-btn.is-loading .spinner, .sq-btn.is-loading .spinner { display: inline-block; }
.spinner-lg { width: 24px; height: 24px; border-width: 3px; border-color: rgba(20,84,184,.18); border-top-color: var(--blue); display:inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==============================
   APP LAYOUT (Dashboard / Verify / Result)
   ============================== */
.page-app { background: var(--white); min-height: 100vh; display: flex; flex-direction: column; }

.app-topbar { background: var(--blue); color: #fff; }
.app-topbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.app-topbar .brand-name { color: #fff; }
.app-topbar .brand-sub { color: #fff; opacity: .95; }
.topbar-link { color: #fff; font-size: 16px; font-weight: 500; }
.topbar-link:hover { text-decoration: underline; }

.crumbs-row { background: #fff; border-bottom: 1px solid var(--line); }
.crumbs-row-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 18px 32px;
  font-size: 16px;
  color: var(--ink-2);
}
.crumbs-row-inner a { color: var(--blue); font-weight: 600; }
.crumbs-row-inner .current { color: var(--ink-2); font-weight: 500; }
.crumbs-row-inner .sep { color: var(--ink-4); margin: 0 10px; }

.app-shell {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 0;
  width: 100%;
  flex: 1;
  padding: 0 32px 60px;
}
.app-sidebar {
  background: var(--blue-bg);
  padding: 30px 22px 30px 18px;
  border-right: 1px solid #e6ecf5;
  min-height: 600px;
}
.side-heading {
  color: var(--blue);
  font-size: 22px;
  font-weight: 700;
  margin: 6px 4px 22px;
}
.side-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.side-link {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  color: var(--ink-2);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.side-link .chev { color: var(--ink-4); font-size: 18px; }
.side-link:hover { background: rgba(20, 84, 184, .07); color: var(--blue-dark); }
.side-link-active {
  background: #d8e5f8;
  color: var(--blue-dark);
  font-weight: 700;
}
.side-link-active .chev { color: var(--blue); }

.app-content {
  padding: 30px 36px 30px 40px;
  min-width: 0;
}

.acting-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  background: #fff;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.acting-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acting-left strong { color: var(--blue); font-size: 16px; }
.acting-left span { color: var(--ink-3); font-size: 14px; }
.acting-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.acting-user { color: var(--ink-3); font-size: 14px; }
.acting-user strong { color: var(--ink); font-weight: 700; margin-left: 4px; }
.text-link {
  background: transparent; border: 0; color: var(--blue);
  font-weight: 700; font-size: 14px; cursor: pointer; padding: 0;
  font-family: inherit;
}
.text-link:hover { text-decoration: underline; }

.page-title {
  color: var(--blue);
  font-size: 30px;
  font-weight: 800;
  margin: 4px 0 14px;
  letter-spacing: -.2px;
}
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-title-link { color: var(--blue); font-weight: 600; font-size: 15px; }
.page-title-link:hover { text-decoration: underline; }
.page-lede { color: var(--ink-2); font-size: 16px; margin: 0 0 10px; }
.section-h2 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  margin: 28px 0 12px;
}
.section-h2-spaced { margin-top: 36px; }
.para { color: var(--ink-2); font-size: 16px; margin: 0 0 12px; }

/* Loading row */
.loading-row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-3);
  background: #fff;
}
.error-block {
  margin-top: 16px;
  padding: 14px 18px;
  background: #fff4f4;
  border: 1px solid #f4caca;
  color: #a31919;
  border-radius: 10px;
}

/* Details grid (record summary) */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  padding: 6px 0 18px;
}
.details-col { margin: 0; padding: 0; }
.details-col > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dashed transparent;
}
.details-col dt {
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 400;
}
.details-col dd {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  word-break: break-word;
}

/* Conditions box (blue tint) */
.conditions-card {
  background: var(--conditions-bg);
  border-radius: 6px;
  padding: 22px 26px 22px;
  margin: 18px 0 22px;
  color: var(--ink-2);
}
.conditions-title {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
}
.conditions-body {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
  white-space: pre-line;
}

/* Enquiry meta */
.enquiry-meta { margin: 16px 0 22px; padding: 0; }
.enquiry-meta > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 6px 0;
}
.enquiry-meta dt { color: var(--ink-2); font-size: 16px; font-weight: 400; }
.enquiry-meta dd { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; }

/* Warning box (yellow) */
.warning-card {
  background: var(--warning-bg);
  border: 1px solid var(--warning-bd);
  border-radius: 4px;
  padding: 16px 20px;
  color: var(--ink-2);
  font-size: 15px;
  margin: 10px 0 26px;
  line-height: 1.6;
}
.warning-card strong { color: var(--ink); }

/* Square (rectangular) primary/soft buttons (app pages) */
.sq-btn {
  appearance: none; border: 0;
  background: var(--blue); color: #fff;
  font-size: 16px; font-weight: 700;
  padding: 13px 22px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.sq-btn:hover { background: var(--blue-dark); text-decoration: none; color: #fff; }
.sq-btn:active { transform: translateY(1px); }
.sq-btn:disabled { opacity: .7; cursor: not-allowed; }
.sq-btn-primary { }
.sq-btn-soft { background: var(--gray-soft); color: var(--ink); }
.sq-btn-soft:hover { background: var(--gray-soft-2); color: var(--ink); }
.sq-btn-ghost {
  background: #fff; color: var(--blue);
  border: 1px solid var(--blue);
}
.sq-btn-ghost:hover { background: var(--blue-50); color: var(--blue-dark); }
.sq-btn-icon .sq-icon { display: inline-flex; align-items: center; justify-content: center; }
.sq-btn .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.result-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 24px; }
.page-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 6px; }

/* Page footer (in main column) */
.page-foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 4px 0;
}
.page-foot a { color: var(--blue); }
.page-foot .sep { color: var(--ink-4); margin: 0 8px; }

/* ==============================
   LABEL-FORM (verification page)
   ============================== */
.label-form { margin-top: 18px; max-width: 760px; }
.lf-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
  padding: 10px 0;
}
.lf-label {
  padding-top: 14px;
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
}
.lf-input {
  display: flex; flex-direction: column;
  max-width: 480px;
}
.lf-input input[type="text"],
.lf-input input[type="date"],
.lf-input select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.lf-input input:focus, .lf-input select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(20,84,184,.15);
}
.lf-input input[type="date"] { padding-right: 12px; min-height: 44px; }
.lf-select {
  position: relative;
}
.lf-select::after {
  content: "";
  position: absolute; right: 14px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.lf-input select { padding-right: 38px; }
.lf-row-consent .lf-consent { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.lf-consent input { width: 18px; height: 18px; accent-color: var(--blue); }
.lf-message {
  font-size: 14px;
  min-height: 18px;
  color: var(--ink-2);
  padding: 4px 0 4px 224px;
}
.lf-message.error { color: var(--red); }
.lf-message.success { color: #1e7a2c; }
.lf-row-submit { padding-top: 8px; }

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 1024px) {
  .login-main-inner { grid-template-columns: 1fr; }
  .col-divider { width: 100%; height: 1px; min-height: 0; margin: 8px 0; }
  .login-col-right { padding-left: 0; }
}
@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr; padding: 0 16px 40px; }
  .app-sidebar { min-height: 0; padding: 16px; border-right: 0; border-bottom: 1px solid #e6ecf5; }
  .side-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .app-content { padding: 22px 4px; }
  .details-grid { grid-template-columns: 1fr; gap: 0; }
  .details-col > div, .enquiry-meta > div { grid-template-columns: 1fr; }
  .lf-row { grid-template-columns: 1fr; gap: 6px; }
  .lf-label { padding-top: 0; }
  .lf-message { padding-left: 0; }
}
@media (max-width: 640px) {
  .login-topbar-inner { flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px 18px; }
  .login-main { padding: 32px 0 48px; }
  .login-main-inner { padding: 0 18px; gap: 32px; }
  .login-footer-inner { padding: 22px 18px 18px; }
  .login-footer-nav { gap: 18px; }
  .login-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .app-topbar-inner { padding: 16px 18px; }
  .crumbs-row-inner { padding: 14px 18px; font-size: 14px; }
  .brand-name { font-size: 22px; }
  .brand-sub { font-size: 14px; }
  .page-title { font-size: 24px; }
  .col-heading { font-size: 28px; }
  .side-nav { grid-template-columns: 1fr; }
  .result-actions, .page-actions { width: 100%; }
  .result-actions .sq-btn, .page-actions .sq-btn { flex: 1; justify-content: center; }
}

@media (max-width:768px){

    .header-logo{
        max-width:180px;
    }

    .portal-logo{
        max-width:140px;
    }

}

@media (max-width:480px){

    .header-logo{
        max-width:140px;
    }

    .portal-logo{
        max-width:110px;
    }

}