@charset "utf-8";
/* ==========================================================================
   KHALEEJI Bank (KHB) theme for the legacy eDinar public site.
   Mirrors the Next.js revamp (apps/epayment-web: tailwind.config.ts +
   globals.css): same semantic tokens, light/dark values, type, radii, shadows
   and component recipes, expressed as plain CSS for the Web Forms master.

   Loaded LAST by PaymentMaster.master, after bootstrap.css / style.css /
   media.css, and only overrides them; the legacy files stay untouched.
   Dark mode is class-based (`.dark` on <html>, set by JS/khb-theme.js).
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/khb/manrope-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ivy Mode";
  src: url("../fonts/khb/ivymode-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ivy Mode";
  src: url("../fonts/khb/ivymode-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Semantic tokens (identical to the revamp's globals.css) ----------
   Space-separated RGB triplets, used as rgb(var(--x)) / rgb(var(--x) / a). */
:root {
  color-scheme: light;

  --ink: 55 61 65;              /* charcoal-900 */
  --ink-muted: 115 119 122;     /* charcoal-600 */
  --surface: 255 255 255;
  --surface-alt: 235 236 236;   /* charcoal-50 */
  --border: 215 216 217;        /* charcoal-100 */
  --border-strong: 195 197 198; /* charcoal-200 */
  --primary: 115 155 190;       /* midblue-900 */
  --primary-hover: 129 165 196; /* midblue-800 */
  /* Primary button fill: the light-mode blue in both themes (not redefined under :root.dark). */
  --button-primary: 115 155 190;       /* midblue-900 */
  --button-primary-hover: 129 165 196; /* midblue-800 */

  /* Icon tile ink (revamp: text-midnight-800 / dark:text-midblue-500). */
  --icon-ink: 57 70 88;

  /* Transaction-status colours (functional, not brand). */
  --status-success: 31 122 77;  /* #1f7a4d */
  --status-danger: 179 38 30;   /* #b3261e */
  --field-error: 220 38 38;     /* red-600 */

  --font-sans: "Manrope", system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Ivy Mode", "Manrope", Georgia, serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --shadow-subtle: 0 1px 2px rgba(35, 50, 70, 0.04), 0 1px 1px rgba(35, 50, 70, 0.03);
  --shadow-card: 0 4px 12px rgba(35, 50, 70, 0.06), 0 2px 4px rgba(35, 50, 70, 0.04);
  --shadow-popover: 0 12px 32px rgba(35, 50, 70, 0.10), 0 4px 8px rgba(35, 50, 70, 0.06);
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);

  --container: 768px; /* revamp max-w-3xl */
}

:root.dark {
  color-scheme: dark;

  --ink: 235 236 236;           /* charcoal-50 */
  --ink-muted: 175 178 179;     /* charcoal-300 */
  --surface: 55 61 65;          /* charcoal-900 */
  --surface-alt: 75 80 84;      /* charcoal-800 */
  --border: 95 100 103;         /* charcoal-700 */
  --border-strong: 115 119 122; /* charcoal-600 */
  --primary: 143 175 203;       /* midblue-700 */
  --primary-hover: 185 205 222; /* midblue-400 */

  --icon-ink: 171 195 216;      /* midblue-500 */
  --field-error: 248 113 113;   /* red-400 */
}

/* ---------- Base ---------- */
html { background: rgb(var(--surface)); }

body.khb {
  margin: 0;
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sticky-footer shell, as in the revamp root layout. */
body.khb > form,
body.khb > .khb-shell { display: flex; flex-direction: column; min-height: 100vh; }

.khb-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

body.khb a { color: rgb(var(--primary)); }
body.khb a:hover, body.khb a:focus { color: rgb(var(--primary-hover)); text-decoration: none; }

body.khb hr { border-top-color: rgb(var(--border)); }
body.khb .text-muted { color: rgb(var(--ink-muted)); }

/* Focus ring (WCAG 2.1 AA); style.css strips link outlines, this restores one. */
body.khb a:focus-visible,
body.khb button:focus-visible,
body.khb input:focus-visible,
body.khb select:focus-visible,
body.khb textarea:focus-visible,
body.khb [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--surface)), 0 0 0 4px rgb(var(--primary));
}

/* ---------- Header (revamp BrandHeader) ---------- */
.khb-header {
  background: rgb(var(--surface));
  border-bottom: 1px solid rgb(var(--border));
}
.khb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.khb-header__actions { display: flex; align-items: center; gap: 8px; }

/* Per-theme lockup: charcoal in light, white in dark (no JS). */
.khb-lockup { display: inline-flex; align-items: center; }
.khb-lockup img { display: block; height: 40px; width: auto; }
.khb-lockup__dark { display: none !important; }
:root.dark .khb-lockup__light { display: none !important; }
:root.dark .khb-lockup__dark { display: block !important; }

.khb-chip {
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface-alt));
  color: rgb(var(--ink-muted));
  border-radius: var(--radius-md);
  padding: 4px 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.khb-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-md);
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  cursor: pointer;
  line-height: 0;
}
.khb-theme-toggle:hover { background: rgb(var(--surface-alt)); }
.khb-icon-sun { display: none; }
:root.dark .khb-icon-moon { display: none; }
:root.dark .khb-icon-sun { display: block; }

/* Legacy Home link (lnkHome), kept for the code-behind; compact secondary.
   .btn.khb-home outranks the .btn-info4 recipe declared further down. */
body.khb .btn.khb-home {
  margin: 0;
  min-width: 0;
  min-height: 0;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Main: brand stripe motif over surface-alt/60 ---------- */
.khb-main {
  position: relative;
  display: block;
  flex: 1 0 auto;
  background: rgb(var(--surface-alt) / 0.6);
  padding: 32px 0 48px;
}
.khb-main::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgb(var(--border)) 0px, rgb(var(--border)) 8.7px,
    transparent 8.7px, transparent 11.8px,
    rgb(var(--border)) 11.8px, rgb(var(--border)) 17px,
    transparent 17px, transparent 25.7px
  );
  opacity: 0.15;
  pointer-events: none;
}
:root.dark .khb-main::before { opacity: 0.12; }
.khb-main > * { position: relative; }
/* Contain Bootstrap 3 float columns. */
.khb-main .khb-container::after { content: ""; display: table; clear: both; }

/* ---------- Footer (revamp BrandFooter) ---------- */
.khb-footer {
  background: rgb(var(--surface));
  border-top: 1px solid rgb(var(--border));
  padding: 24px 0;
}
.khb-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.khb-footer__lockup { opacity: 0.7; }
.khb-footer__lockup img { height: 24px; }
.khb-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: rgb(var(--ink-muted));
}
body.khb .khb-footer__links a { color: rgb(var(--ink-muted)); }
body.khb .khb-footer__links a:hover { color: rgb(var(--primary)); }

/* ---------- Buttons: btn-info3 = .btn-primary, btn-info4 = .btn-secondary ---------- */
body.khb .btn {
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  box-shadow: none;
}

body.khb .btn-info3,
body.khb .btn-info4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin-top: 24px;
  margin-bottom: 8px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: normal;
  border-radius: var(--radius-md);
}
body.khb .btn-info3 {
  color: #fff;
  background-color: rgb(var(--button-primary));
  border: 1px solid rgb(var(--button-primary));
}
body.khb .btn-info3:hover,
body.khb .btn-info3:focus,
body.khb .btn-info3:active,
body.khb .btn-info3.active {
  color: #fff;
  background-color: rgb(var(--button-primary-hover));
  border-color: rgb(var(--button-primary-hover));
}
body.khb .btn-info4 {
  color: rgb(var(--ink));
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border-strong));
}
body.khb .btn-info4:hover,
body.khb .btn-info4:focus,
body.khb .btn-info4:active,
body.khb .btn-info4.active {
  color: rgb(var(--ink));
  background-color: rgb(var(--surface-alt));
  border-color: rgb(var(--border-strong));
}
body.khb .btn-info3.disabled, body.khb .btn-info3[disabled],
body.khb .btn-info4.disabled, body.khb .btn-info4[disabled],
body.khb fieldset[disabled] .btn-info3, body.khb fieldset[disabled] .btn-info4 {
  opacity: 0.6;
  pointer-events: none;
}
body.khb .btn-info3.disabled, body.khb .btn-info3[disabled] {
  background-color: rgb(var(--button-primary));
  border-color: rgb(var(--button-primary));
}
body.khb .btn-info4.disabled, body.khb .btn-info4[disabled] {
  background-color: rgb(var(--surface));
  border-color: rgb(var(--border-strong));
}

/* ---------- Headings / text ---------- */
body.khb h1, body.khb h2, body.khb h3 { color: rgb(var(--ink)); }

body.khb .header-h1,
body.khb .header-h5 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;               /* display-sm */
  line-height: 36px;
  letter-spacing: -0.005em;
  color: rgb(var(--ink));
}
body.khb .header-h1 { padding-top: 24px; padding-bottom: 4px; }

body.khb .header-h2 {           /* eyebrow */
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--ink-muted));
  padding-top: 4px;
  padding-bottom: 20px;
}
body.khb .header-h3 {           /* section-title, heading-sm */
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: rgb(var(--ink));
}
body.khb .header-h4 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: rgb(var(--ink-muted));
}
body.khb .notes-p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  color: rgb(var(--ink-muted));
}
body.khb .notes-p h1 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: rgb(var(--ink));
}

/* Landing: welcome line rendered as the revamp hero heading. */
body.khb .welcome-panel {
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: rgb(var(--ink));
  font-family: var(--font-display);
  font-size: 36px;               /* display-md */
  line-height: 44px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-align: center;
}

/* ---------- Cards ---------- */
/* .features wrapped everything in a grey slab; the revamp places cards
   directly on the patterned background, so it becomes a plain wrapper. */
body.khb .features {
  margin-top: 32px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* Icon tile (revamp: h-11 w-11 rounded-lg bg-primary/15, midnight-800 ink;
   dark: bg-primary/20, midblue-500 ink). */
.khb-icon-tile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: rgb(var(--primary) / 0.15);
  color: rgb(var(--icon-ink));
}
:root.dark .khb-icon-tile { background: rgb(var(--primary) / 0.2); }
.khb-icon-tile svg { width: 24px; height: 24px; }
.khb-icon-tile--sm { width: 32px; height: 32px; border-radius: var(--radius-md); }
.khb-icon-tile--sm svg { width: 18px; height: 18px; }

/* Landing service cards (revamp ServiceCard). The server ImageButton is a
   transparent hit area stretched over the card, so the postback is unchanged. */
.khb-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px) {
  .khb-services { grid-template-columns: 1fr 1fr; }
}
.khb-service {
  position: relative;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-subtle);
}
.khb-service:hover {
  border-color: rgb(var(--primary));
  box-shadow: var(--shadow-card);
}
.khb-service:focus-within {
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 2px rgb(var(--surface)), 0 0 0 4px rgb(var(--primary));
}
.khb-service__body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
}
.khb-service__text { display: block; }
.khb-service__title {
  display: block;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: rgb(var(--ink));
}
.khb-service__desc {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 22px;
  color: rgb(var(--ink-muted));
}
body.khb input.khb-service__hit {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  opacity: 0;
  cursor: pointer;
}
/* The card's :focus-within ring replaces the input's own ring. */
body.khb input.khb-service__hit:focus-visible { box-shadow: none; }

body.khb .home-panel3,
body.khb .home-panel4,
body.khb .animation {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-subtle);
}

/* ---------- Inner-page tabs + form card (revamp inquiry card) ---------- */
body.khb .nav-tabs { padding: 0 0 0 8px; border-bottom: 0; }
/* height/opacity: undo style.css (119px, 0.5) and media.css (69px). */
body.khb .nav-tabs > li > a {
  height: auto;
  margin-right: 4px;
  padding: 12px 16px;
  color: rgb(var(--ink-muted));
  background: rgb(var(--surface-alt));
  border: 1px solid rgb(var(--border));
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 1;
}
body.khb .nav-tabs > li > a:hover {
  color: rgb(var(--ink));
  background: rgb(var(--surface-alt));
  border-color: rgb(var(--border-strong));
}
.khb-tab { display: inline-flex; align-items: center; gap: 10px; }
.khb-tab__label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}
body.khb .nav-tabs > li:not(.active) .khb-icon-tile { background: transparent; color: rgb(var(--ink-muted)); }
body.khb .nav-tabs > li.active > a,
body.khb .nav-tabs > li.active > a:hover,
body.khb .nav-tabs > li.active > a:focus {
  /* style.css / media.css set height 120px / 70px on these hover/focus states. */
  height: auto;
  color: rgb(var(--ink));
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-bottom: 0;
  opacity: 1;
}
body.khb .tab-content > .tab-pane {
  position: relative;
  margin: -1px 0 0;
  padding: 0 8px 24px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-subtle);
}

/* ---------- Forms (revamp .field-label / .field-input) ---------- */
body.khb label,
body.khb .form-label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: rgb(var(--ink));
}
body.khb .form-label { margin-top: 16px; padding-bottom: 6px; }

body.khb .form-control {
  height: 48px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: rgb(var(--ink));
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border-strong));
  border-radius: var(--radius-md);
  box-shadow: none;
}
body.khb textarea.form-control { height: auto; }
body.khb .form-control::placeholder { color: rgb(var(--ink-muted) / 0.7); opacity: 1; }
body.khb .form-control:focus {
  border-color: rgb(var(--primary));
  outline: 0;
  box-shadow: 0 0 0 1px rgb(var(--primary));
}
body.khb .form-control[readonly],
body.khb .form-control[disabled] {
  background-color: rgb(var(--surface-alt));
  color: rgb(var(--ink));
}

/* Input groups (e.g. the "BH -**- KHCB" IBAN prefix, CAPTCHA refresh). */
body.khb .input-group-addon {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--ink-muted));
  background-color: rgb(var(--surface-alt));
  border: 1px solid rgb(var(--border-strong));
  border-radius: var(--radius-md);
}
body.khb a.input-group-addon:hover { color: rgb(var(--ink)); }
body.khb .input-group .form-control:first-child,
body.khb .input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.khb .input-group .form-control:last-child,
body.khb .input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Validation state toggled by the page scripts (valtxtAccount / valtbCode). */
body.khb .has-error .form-control,
body.khb .has-error .input-group-addon { border-color: rgb(var(--field-error)); }
body.khb .has-error .form-control:focus { box-shadow: 0 0 0 1px rgb(var(--field-error)); }
body.khb .has-error .input-group-addon { color: rgb(var(--field-error)); }
body.khb .help-block, body.khb .has-error .help-block { color: rgb(var(--field-error)); font-size: 12px; }

/* DevExpress CAPTCHA image: grey glyphs on transparent, so give it the revamp's
   CAPTCHA well, and keep it light in dark mode so it stays legible. */
body.khb .capatcha {
  display: inline-block;
  margin: 8px 0;
  padding: 4px 12px;
  background: rgb(235 236 236);
  border: 1px dashed rgb(195 197 198);
  border-radius: var(--radius-lg);
}

/* ---------- Alerts ---------- */
body.khb .alert {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  border: 1px solid;
  border-radius: var(--radius-lg);
}
body.khb .alert-danger {
  color: rgb(var(--field-error));
  background-color: rgb(var(--status-danger) / 0.08);
  border-color: rgb(var(--status-danger) / 0.3);
}
body.khb .alert-info {
  color: rgb(var(--ink));
  background-color: rgb(var(--primary) / 0.12);
  border-color: rgb(var(--primary) / 0.4);
}
body.khb .alert-success {
  color: rgb(var(--ink));
  background-color: rgb(var(--status-success) / 0.1);
  border-color: rgb(var(--status-success) / 0.35);
}

/* ---------- Result pages ---------- */
body.khb .sucess-header,
body.khb .failure-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
/* Round status badge like the revamp receipt, replacing the legacy
   success-icon.png / failure-icon.png (hidden; the aspx is unchanged). */
body.khb .sucess-icon img { display: none; }
body.khb .sucess-icon {
  float: none;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.7);
  background: rgb(255 255 255 / 0.16) no-repeat center / 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
body.khb .failure-header .sucess-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
body.khb .sucess-header { background-color: rgb(var(--status-success)); }
body.khb .failure-header { background-color: rgb(var(--status-danger)); }
body.khb .sucess-header-txt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
}

/* ---------- Modal ---------- */
body.khb .modal-content {
  color: rgb(var(--ink));
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-sans);
}
body.khb .modal-header, body.khb .modal-footer { border-color: rgb(var(--border)); }
/* JS/bootstrap.min.js is v4.3.1 but css/bootstrap.css is v3.3.0: v4 marks an open modal
   with .show, which the v3 CSS does not know, so it would stay transparent. */
body.khb .modal.fade.show { opacity: 1; }
body.khb .modal.show .modal-dialog { transform: none; }
body.khb .modal-backdrop { z-index: 1030; }
body.khb .modal-backdrop.show { opacity: 0.5; }
.khb-modal-lockup { display: flex; justify-content: flex-end; }
.khb-modal-lockup img { height: 24px; }

/* "Send E-mail Receipt" modal (ResponseTrue): undo the floated grid columns inside it. */
body.khb #myModal .modal-dialog { width: auto; max-width: 480px; margin: 12vh auto 0; padding: 0 16px; }
body.khb #myModal [class*="col-"] { float: none; width: auto; left: auto; right: auto; padding: 0; }
/* style.css fixes .modal-header at 110px and .modal-body at min-height 300px. */
body.khb #myModal .modal-header { height: auto; padding: 20px 24px; }
body.khb #myModal .modal-header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.khb #myModalLabel { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; color: rgb(var(--ink)); }
body.khb #myModal .modal-body { min-height: 0; padding: 24px; }
body.khb #myModal .modal-body > div:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
body.khb #myModal .modal-body > div:last-child .btn { margin: 0; }

/* ---------- Success page actions (ResponseTrue) ---------- */
body.khb .khb-receipt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 24px;
}
body.khb .khb-receipt-actions .btn { margin: 0; }

/* ---------- Status pages without the master (Error, TimeOutError) ---------- */
.khb-status {
  max-width: 560px;
  margin: 48px auto;
  padding: 40px 32px 32px;
  text-align: center;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.khb-status__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(var(--primary) / 0.15);
  color: rgb(var(--icon-ink));
}
:root.dark .khb-status__badge { background: rgb(var(--primary) / 0.2); }
.khb-status__badge--danger,
:root.dark .khb-status__badge--danger {
  background: rgb(var(--status-danger) / 0.12);
  color: rgb(var(--field-error));
}
body.khb .khb-status__title {
  margin: 20px 0 8px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  text-transform: none;
}
.khb-status__text { margin: 0 0 20px; color: rgb(var(--ink-muted)); }
body.khb .khb-status__note { margin: 0 0 24px; text-align: left; }
body.khb .khb-status .khb-receipt-actions { margin: 0; }
.khb-status__meta {
  margin: 24px 0 0;
  font-size: 13px;
  color: rgb(var(--ink-muted));
}

/* ---------- Motion (respect reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.khb .btn,
  body.khb .form-control,
  body.khb .nav-tabs > li > a,
  .khb-theme-toggle,
  .khb-footer__links a,
  .khb-service {
    transition: color 0.2s var(--ease-brand), background-color 0.2s var(--ease-brand),
      border-color 0.2s var(--ease-brand), box-shadow 0.2s var(--ease-brand),
      opacity 0.2s var(--ease-brand);
  }
}

/* ---------- Small screens (overrides media.css) ---------- */
@media (max-width: 768px) {
  .khb-lockup img { height: 32px; }
  .khb-footer__lockup img { height: 20px; }
  .khb-main { padding-top: 24px; }
  body.khb .welcome-panel { font-size: 28px; line-height: 36px; }
  body.khb .header-h1 { font-size: 24px; line-height: 32px; }
  .khb-services { margin-top: 24px; }
  .khb-status { margin: 24px auto; padding: 32px 20px 24px; }
  body.khb .khb-status__title { font-size: 26px; line-height: 34px; }
}
@media (max-width: 480px) {
  /* Two equal tabs that share the width; labels may wrap. */
  body.khb .nav-tabs { display: flex; padding-left: 0; }
  body.khb .nav-tabs > li { float: none; flex: 1 1 0; min-width: 0; }
  body.khb .nav-tabs > li > a,
  body.khb .nav-tabs > li.active > a,
  body.khb .nav-tabs > li.active > a:hover,
  body.khb .nav-tabs > li.active > a:focus { height: 100%; padding: 10px 12px; }
  .khb-tab { gap: 8px; }
  .khb-tab__label { font-size: 13px; line-height: 18px; }
}
@media (max-width: 420px) {
  .khb-chip { display: none; }
}

/* ---------- Print: always light, no chrome ---------- */
@media print {
  :root.dark {
    color-scheme: light;
    --ink: 55 61 65;
    --ink-muted: 115 119 122;
    --surface: 255 255 255;
    --surface-alt: 235 236 236;
    --border: 215 216 217;
    --border-strong: 195 197 198;
    --primary: 115 155 190;
    --primary-hover: 129 165 196;
    --icon-ink: 57 70 88;
    --field-error: 220 38 38;
  }
  .khb-main::before,
  .khb-header__actions,
  .khb-footer,
  .khb-receipt-actions,
  #emailerr,
  .modal,
  .modal-backdrop { display: none !important; }
  html, body.khb, .khb-main { background: #fff !important; }
  /* Paper is white: always print the charcoal lockup, even when the screen is in dark mode. */
  :root.dark .khb-lockup__light { display: block !important; }
  :root.dark .khb-lockup__dark { display: none !important; }
}