/* Khutwa Design System — theme layer for the customer portal.
   Loaded LAST (after Color Admin, Kendo, custom.css). Tokens come from the
   Khutwa design system (tokens.json); overrides remap Bootstrap / Color Admin /
   Kendo to those tokens. */
/* Typeface: Helvetica Neue LT Arabic — one family for Arabic and Latin (Khutwa design system).
   Only the Roman master is shipped: 300 / 400 / 500 render from it and bold is synthesised by the browser.
   Add the true Light / Medium / Bold masters here when available. */
@font-face { font-family: "Helvetica Neue LT Arabic"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/HelveticaNeueLTArabic-Roman.woff2") format("woff2"), url("../fonts/HelveticaNeueLTArabic-Roman.woff") format("woff"), url("../fonts/HelveticaNeueLTArabic-Roman.ttf") format("truetype"); }
@font-face { font-family: "Helvetica Neue LT Arabic"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/HelveticaNeueLTArabic-Roman.woff2") format("woff2"), url("../fonts/HelveticaNeueLTArabic-Roman.woff") format("woff"), url("../fonts/HelveticaNeueLTArabic-Roman.ttf") format("truetype"); }
@font-face { font-family: "Helvetica Neue LT Arabic"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/HelveticaNeueLTArabic-Roman.woff2") format("woff2"), url("../fonts/HelveticaNeueLTArabic-Roman.woff") format("woff"), url("../fonts/HelveticaNeueLTArabic-Roman.ttf") format("truetype"); }

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --deep-olive-green: #2e3b22; --medium-olive: #556b3a; --champagne-gold: #c9a66b;
  --light-beige: #f2ede3; --warm-off-white: #faf8f4;
  --olive-900: #1c2515; --olive-800: #2e3b22; --olive-700: #3e4f2c; --olive-600: #556b3a;
  --olive-500: #6c8250; --olive-400: #8e9f75; --olive-300: #b4c09f; --olive-200: #d3dac5; --olive-100: #e9ede2;
  --gold-800: #8a6b36; --gold-700: #a9834a; --gold-600: #be945a; --gold-500: #c9a66b;
  --gold-400: #d8bb8c; --gold-300: #e5d0ae; --gold-200: #f0e3cc; --gold-100: #f8f1e5;
  --sand-300: #dcd2c0; --sand-200: #e7dfd1; --sand-100: #f2ede3; --sand-050: #faf8f4; --white: #ffffff;

  --text-primary: var(--olive-800); --text-secondary: var(--olive-600); --text-muted: #6b7360;
  --text-accent: var(--gold-800); --text-on-dark: var(--sand-050);
  --surface-page: var(--warm-off-white); --surface-card: var(--white); --surface-sunken: var(--light-beige);
  --surface-brand: var(--deep-olive-green); --surface-brand-soft: var(--olive-100);
  --border-subtle: var(--sand-200); --border-default: var(--sand-300); --border-strong: var(--olive-300);
  --border-accent: var(--gold-400); --focus-ring: var(--gold-500);
  --status-success: var(--medium-olive); --status-success-soft: var(--olive-100);
  --status-warning: var(--gold-700); --status-warning-soft: var(--gold-100);
  --status-danger: #8c3b2e; --status-danger-soft: #f6e6e2;
  --status-info: #3f5a63; --status-info-soft: #e6edef;

  --shadow-xs: 0 1px 2px rgba(46,59,34,.06); --shadow-sm: 0 2px 6px rgba(46,59,34,.07);
  --shadow-md: 0 8px 24px rgba(46,59,34,.08); --shadow-lg: 0 20px 48px rgba(46,59,34,.12);
  --shadow-gold-glow: 0 0 0 4px rgba(201,166,107,.28);
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --duration-fast: 140ms; --duration-base: 220ms;
  --control-h-md: 44px;
  --font-sans: "Helvetica Neue LT Arabic", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --font-arabic: var(--font-sans);
  --font-latin: var(--font-sans);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
  --fs-display: 58px; --fs-stat: 50px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px;
  --fs-lg: 18px; --fs-body: 16px; --fs-sm: 15px; --fs-xs: 13px; --fs-2xs: 11px;
  --lh-tight: 1.1; --lh-heading: 1.28; --lh-snug: 1.4; --lh-body: 1.7; --lh-loose: 1.8; --leading-display-ar: 1.4;
  --ls-tight: -0.02em; --ls-wide: 0.05em; --tracking-caps: 0.05em;

  /* ── Bootstrap 5 / Color Admin remap ── */
  --bs-primary: #2e3b22; --bs-primary-rgb: 46,59,34;
  --bs-secondary: #c9a66b; --bs-secondary-rgb: 201,166,107;
  --bs-success: #556b3a; --bs-success-rgb: 85,107,58;
  --bs-info: #3f5a63; --bs-info-rgb: 63,90,99;
  --bs-warning: #8a6b36; --bs-warning-rgb: 138,107,54;
  --bs-danger: #8c3b2e; --bs-danger-rgb: 140,59,46;
  --bs-body-bg: #faf8f4; --bs-body-bg-rgb: 250,248,244;
  --bs-body-color: #2e3b22; --bs-body-color-rgb: 46,59,34;
  --bs-link-color: #2e3b22; --bs-link-hover-color: #a9834a;
  --bs-border-color: #e7dfd1;
  --bs-body-font-family: var(--font-latin);
  --bs-body-font-size: .875rem;
  --bs-body-line-height: 1.7;
  --app-theme: #2e3b22; --app-theme-rgb: 46,59,34;
  --app-component-active-bg: #2e3b22;
  --app-header-bg: rgba(250,248,244,.9);
  --app-header-color: #2e3b22;
  --app-sidebar-bg: #ffffff;
  --app-sidebar-component-color: #2e3b22;
  --app-sidebar-component-color-rgb: 46,59,34;
}

/* Arabic: same family, generous leading */
html[lang="ar"], html[dir="rtl"], [dir="rtl"] body {
  --bs-body-font-family: var(--font-arabic);
  --bs-body-line-height: 1.8;
}
html[lang="ar"] body, html[dir="rtl"] body,
html[lang="ar"] .k-widget, html[dir="rtl"] .k-widget,
html[lang="ar"] .k-input, html[dir="rtl"] .k-input,
html[lang="ar"] .btn, html[dir="rtl"] .btn { font-family: var(--font-arabic); }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { line-height: var(--leading-display-ar); letter-spacing: 0; }

body { font-family: var(--bs-body-font-family); background: var(--surface-page) !important; color: var(--text-primary); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--olive-800); font-weight: var(--fw-medium); line-height: var(--lh-heading); }
h1, h2, .h1, .h2 { font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
h3, .h3 { font-weight: var(--fw-bold); line-height: var(--lh-snug); }
h4, .h4 { font-weight: var(--fw-regular); line-height: var(--lh-snug); }
a { color: var(--olive-700); transition: color var(--duration-base) var(--ease-standard); }
a:hover { color: var(--gold-700); }
.text-primary { color: var(--olive-800) !important; }
.text-success { color: var(--status-success) !important; }
.text-danger, .text-danger-700 { color: var(--status-danger) !important; }
.text-warning { color: var(--gold-800) !important; }
.text-info { color: var(--status-info) !important; }
.text-gray { color: var(--text-muted) !important; }
.text-orange, .text-orange-300 { color: var(--gold-800) !important; }
.bg-primary, .bg-backgreen, .bg-main-blue { background-color: var(--olive-800) !important; }
.bg-success { background-color: var(--status-success) !important; }
.bg-danger { background-color: var(--status-danger) !important; }
.bg-warning { background-color: var(--gold-500) !important; color: var(--olive-900) !important; }
.bg-light-orange, .bg-blue-light-bg { background: var(--olive-100) !important; }


/* ── Fonts: one family (Helvetica Neue LT Arabic) for Arabic and Latin, as in the design system ──
   Color Admin, Kendo and plugin CSS hardcode Open Sans / system fonts; icon fonts are left alone. */
body, input, select, textarea, button, optgroup,
.btn, .form-control, .form-select, .dropdown-menu, .modal, .popover, .tooltip, .toast,
.k-widget, .k-input, .k-picker, .k-button, .k-grid, .k-calendar, .k-list, .k-popup, .k-dialog, .k-window,
.swal-modal, .swal-text, .swal-button, .menu, .navbar,
html .nvtooltip, .nvd3 text, .note-editor.note-frame, .note-tooltip-content {
  font-family: var(--bs-body-font-family);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--bs-body-font-family); }
html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button,
html[lang="ar"] .dropdown-menu, html[lang="ar"] .modal, html[lang="ar"] .menu, html[lang="ar"] .navbar { font-family: var(--font-arabic); }
.icon-saudi_riyal, [class*="icon-saudi_riyal"] { font-family: 'saudi_riyal' !important; }

/* ── Color Admin colour helpers: blue / orange / teal → olive / gold ── */
:root {
  --bs-blue: #2e3b22; --bs-blue-rgb: 46,59,34;
  --bs-indigo: #3e4f2c; --bs-indigo-rgb: 62,79,44;
  --bs-purple: #3e4f2c; --bs-purple-rgb: 62,79,44;
  --bs-teal: #556b3a; --bs-teal-rgb: 85,107,58;
  --bs-cyan: #3f5a63; --bs-cyan-rgb: 63,90,99;
  --bs-green: #556b3a; --bs-green-rgb: 85,107,58;
  --bs-orange: #8a6b36; --bs-orange-rgb: 138,107,54;
  --bs-yellow: #c9a66b; --bs-yellow-rgb: 201,166,107;
  --bs-red: #8c3b2e; --bs-red-rgb: 140,59,46;
}
.bg-blue-100, .bg-blue-200 { background-color: var(--olive-300) !important; }
.bg-blue-300, .bg-blue-400, .bg-blue-500 { background-color: var(--olive-600) !important; }
.bg-blue-600, .bg-blue-700 { background-color: var(--olive-700) !important; }
.bg-blue-800, .bg-blue-900 { background-color: var(--olive-800) !important; }
.text-blue-100, .text-blue-200, .text-blue-300, .text-blue-400, .text-blue-500 { color: var(--olive-500) !important; }
.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900, .text-blue-navy { color: var(--olive-700) !important; }
.bg-orange { background-color: var(--gold-500) !important; color: var(--olive-900) !important; }
.bg-orange-light { background: var(--gold-100) !important; }

/* ── Type scale: design-system families and weights, app-density sizes ── */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }
html[lang="ar"] .btn { font-weight: 700; }

/* ── Buttons: pill, olive primary, gold secondary ── */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .btn:focus { box-shadow: var(--shadow-gold-glow) !important; outline: 0; }
.btn-primary {
  --bs-btn-bg: var(--olive-800); --bs-btn-border-color: var(--olive-800); --bs-btn-color: var(--sand-050);
  --bs-btn-hover-bg: var(--olive-700); --bs-btn-hover-border-color: var(--olive-700); --bs-btn-hover-color: var(--sand-050);
  --bs-btn-active-bg: var(--olive-900); --bs-btn-active-border-color: var(--olive-900); --bs-btn-active-color: var(--sand-050);
  --bs-btn-disabled-bg: var(--olive-200); --bs-btn-disabled-border-color: var(--olive-200); --bs-btn-disabled-color: var(--olive-600);
}
.btn-secondary, .btn-warning {
  --bs-btn-bg: var(--gold-500); --bs-btn-border-color: var(--gold-500); --bs-btn-color: var(--olive-900);
  --bs-btn-hover-bg: var(--gold-600); --bs-btn-hover-border-color: var(--gold-600); --bs-btn-hover-color: var(--olive-900);
  --bs-btn-active-bg: var(--gold-700); --bs-btn-active-border-color: var(--gold-700); --bs-btn-active-color: var(--olive-900);
}
.btn-success {
  --bs-btn-bg: var(--olive-600); --bs-btn-border-color: var(--olive-600); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--olive-700); --bs-btn-hover-border-color: var(--olive-700); --bs-btn-hover-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--status-danger); --bs-btn-border-color: var(--status-danger); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #73301f; --bs-btn-hover-border-color: #73301f; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #73301f; --bs-btn-active-border-color: #73301f;
}
.btn-light, .btn-default, .btn-outline-primary, .btn-outline-default {
  --bs-btn-bg: transparent; --bs-btn-color: var(--olive-800); --bs-btn-border-color: var(--olive-300);
  --bs-btn-hover-bg: var(--olive-100); --bs-btn-hover-color: var(--olive-800); --bs-btn-hover-border-color: var(--olive-400);
  --bs-btn-active-bg: var(--olive-100); --bs-btn-active-color: var(--olive-800); --bs-btn-active-border-color: var(--olive-400);
  background-color: var(--bs-btn-bg); border: 1px solid var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn-light:hover, .btn-default:hover, .btn-outline-primary:hover { background-color: var(--olive-100); color: var(--olive-800); }
.btn-link { color: var(--olive-700); }

/* ── Forms ── */
.form-control, .form-select, .input-group-text {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-card);
  color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
  border-color: var(--olive-700);
  box-shadow: var(--shadow-gold-glow);
  background-color: var(--surface-card);
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-sunken); }
.form-label, label { color: var(--olive-800); font-weight: 600; }
.form-check-input:checked { background-color: var(--olive-800); border-color: var(--olive-800); }
.form-check-input:focus { border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
.form-switch .form-check-input:checked { background-color: var(--olive-800); }
.invalid-feedback, .field-validation-error, .validation-summary-errors { color: var(--status-danger); }
.is-invalid, .input-validation-error { border-color: var(--status-danger) !important; }
.is-invalid:focus { box-shadow: 0 0 0 4px rgba(140,59,46,.18); }

/* ── Surfaces ── */
.card, .panel, .panel-inverse, .modal-content, .dropdown-menu, .accordion-item, .offcanvas {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.modal-content { box-shadow: var(--shadow-lg); border-radius: var(--radius-xl); }
.card-header, .panel-heading, .modal-header, .modal-footer, .accordion-button { background: transparent; border-color: var(--border-subtle); }
.accordion-button:not(.collapsed) { background: var(--olive-100); color: var(--olive-800); box-shadow: none; }
.accordion-button:focus { box-shadow: var(--shadow-gold-glow); border-color: var(--gold-400); }
hr { border-color: var(--border-subtle); opacity: 1; }
.note { border-inline-start: 3px solid var(--gold-500); background: var(--surface-accent-soft, var(--gold-100)); border-left-color: var(--gold-500); }
.table > :not(caption) > * > * { border-color: var(--border-subtle); }
.table thead th { background: var(--surface-sunken); color: var(--olive-800); }
.badge.bg-primary, .badge.bg-success { border-radius: var(--radius-pill); }
.alert { border-radius: var(--radius-md); }
.alert-success { background: var(--status-success-soft); border-color: var(--olive-300); color: var(--olive-800); }
.alert-danger  { background: var(--status-danger-soft); border-color: #e3c2ba; color: var(--status-danger); }
.alert-warning { background: var(--status-warning-soft); border-color: var(--gold-300); color: var(--olive-800); }
.alert-info    { background: var(--status-info-soft); border-color: #c4d3d8; color: var(--status-info); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: var(--olive-800); border-color: var(--gold-500); }
.nav-pills .nav-link.active { background: var(--olive-800); color: var(--sand-050); border-radius: var(--radius-pill); }
.page-link { color: var(--olive-800); }
.page-item.active .page-link { background: var(--olive-800); border-color: var(--olive-800); }
.progress-bar { background-color: var(--olive-600); }

/* ── Header / footer / sidebar ── */
/* Top bar: light frosted surface, brand lockup straight on the warm ground, fading gold hairline */
.app-header {
  background: rgba(250, 248, 244, .9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border-subtle); box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 6px 24px rgba(46,59,34,.05);
}
.app-header::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-400) 45%, var(--gold-400) 55%, transparent); pointer-events: none; }
.app-header .navbar-header { align-items: center; }
.app-header .navbar-brand { display: flex; align-items: center; flex: none; padding: 6px 16px; height: 66px; }
.app-header .navbar-brand img, .app-header .navbar-brand img[src*="khutwa/logo-lockup"] {
  height: 48px; max-height: 48px; width: auto; padding: 0; background: var(--surface-card); border-radius: 12px; box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-xs);
}
.app-header .navbar-nav .navbar-item .navbar-link,
.app-header .navbar-nav .navbar-item .navbar-link:hover { color: var(--olive-800); }
.app-header a:not(.btn):not(.navbar-brand):hover { color: var(--gold-800); }

/* language switch: two individual buttons */
.app-header .lang-switcher { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.app-header .lang-switcher-icon { font-size: 15px; color: var(--gold-700); }
.app-header .lang-switcher-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 56px; height: 38px; padding: 0 16px; border: 1px solid var(--border-default); background: var(--surface-card); border-radius: var(--radius-pill); color: var(--olive-800); font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.app-header .lang-switcher-btn:not(.active):hover { border-color: var(--olive-700); background: var(--olive-100); }
.app-header .lang-switcher-btn.active { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--sand-050); box-shadow: var(--shadow-xs); }
.app-header .lang-switcher-btn:focus-visible { outline: 0; box-shadow: var(--shadow-gold-glow); }
.app-header .lang-switcher-btn[data-culture="ar"] { font-family: var(--font-arabic); font-size: 15px; }

/* phone: Sign In text link + Sign Up pill, burger in olive */
.app-header .navbar-header > a.text-white:not(.navbar-brand) { color: var(--olive-800) !important; font-size: 14px; font-weight: 600; padding: 8px 6px; white-space: nowrap; flex: none; }
.app-header .navbar-header > p.text-white { display: none !important; }
.app-header .navbar-header > a.text-white[data-url*="Register"], .app-header .navbar-header > a.text-white[href*="/Account/Register"] {
  color: var(--sand-050) !important; background: var(--surface-brand); padding: 9px 18px; border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); margin-inline-start: 4px;
}
.app-header .navbar-header > a.text-white[data-url*="Register"]:hover, .app-header .navbar-header > a.text-white[href*="/Account/Register"]:hover { background: var(--olive-700); color: var(--sand-050) !important; }
.app-header .navbar-mobile-toggler { border-radius: 12px; flex: none; }
@media (max-width: 767px) {
  .app-header .navbar-brand { padding: 6px 8px 6px 12px; }
  .app-header .navbar-brand img, .app-header .navbar-brand img[src*="khutwa/logo-lockup"] { height: 40px; max-height: 40px; border-radius: 10px; }
  .app-header .navbar-item { padding-inline: 4px !important; }
  .app-header .navbar-header > a.text-white:not(.navbar-brand) { font-size: 13px !important; padding: 8px 4px; }
  .app-header .navbar-header > a.text-white[data-url*="Register"], .app-header .navbar-header > a.text-white[href*="/Account/Register"] { padding: 8px 12px; }
  .app-header .lang-switcher { gap: 6px; }
  .app-header .lang-switcher-btn { min-width: 0; height: 34px; padding: 0 12px; font-size: 13px; }
  .app-header .navbar-mobile-toggler { padding: 8px; }
}
.app-header .navbar-mobile-toggler .icon-bar { background: var(--olive-800); }
.app-header .navbar-mobile-toggler:hover { background: var(--olive-100); opacity: 1; }
.app-footer { background: var(--olive-900); color: var(--sand-100); border-top: 2px solid var(--gold-500); }
.app-footer a { color: var(--sand-100); }
.app-footer a:hover { color: var(--gold-400); }
/* Sidebar: light panel, rounded menu rows with icon tiles, solid olive active pill */
.app-sidebar, .app-sidebar-bg { background: var(--surface-card); }
.app-sidebar-bg { border-inline-end: 1px solid var(--border-subtle); box-shadow: 6px 0 28px rgba(46,59,34,.04); }
[dir="rtl"] .app-sidebar-bg { box-shadow: -6px 0 28px rgba(46,59,34,.04); }
#sidebar .app-sidebar-content .menu { padding: 14px 12px 20px; }
#sidebar .menu .menu-item { margin-bottom: 4px; }
#sidebar .menu .menu-item > .menu-link {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 52px; border-radius: 16px;
  color: var(--olive-700); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; box-shadow: none; background: transparent;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
#sidebar .menu .menu-item > .menu-link:hover { background: var(--olive-100); color: var(--olive-800); }
#sidebar .menu .menu-item > .menu-link:active { transform: translateY(1px); }
#sidebar .menu .menu-item > .menu-link:focus-visible { outline: 0; box-shadow: var(--shadow-gold-glow); }
#sidebar .menu .menu-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 !important; padding: 0;
  border-radius: 12px; background: var(--surface-page); color: var(--olive-700); font-size: 15px; line-height: 1;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
#sidebar .menu .menu-icon i { margin: 0; color: inherit; }
#sidebar .menu .menu-item > .menu-link:hover .menu-icon { background: var(--surface-card); color: var(--olive-800); }
#sidebar .menu .menu-text { flex: 1; min-width: 0; color: inherit; font-weight: inherit; }
#sidebar .menu .menu-item.active > .menu-link { background: var(--surface-brand); color: var(--sand-050); box-shadow: var(--shadow-md); z-index: 1; }
#sidebar .menu .menu-item.active > .menu-link .menu-icon { background: rgba(250,248,244,.12); color: var(--gold-400); }
#sidebar .menu .menu-item.active > .menu-link .menu-text { font-weight: 700; }
#sidebar .menu .menu-badge, #sidebar .menu .menu-label { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--gold-100); color: var(--gold-800); font-size: 11px; font-weight: 700; }
#sidebar hr { margin: 8px 6px; border-color: var(--border-subtle); opacity: 1; }

/* profile card at the top */
#sidebar .widget-list.menu-item { margin: 0 0 8px; background: var(--surface-page) !important; border-radius: 18px !important; }
#sidebar .widget-list .menu-link { min-height: 0; padding: 12px !important; gap: 12px; border-radius: 18px; }
#sidebar .widget-list .menu-link:hover { background: var(--olive-100); }
#sidebar .widget-list-media { display: flex; flex: none; padding: 0 !important; margin: 0; }
#sidebar .widget-list-media i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-card) !important; box-shadow: 0 0 0 2px var(--gold-500); overflow: hidden; }
#sidebar .widget-list-media i img { width: 30px; padding: 0 !important; }
#sidebar .widget-list-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--olive-800) !important; overflow-wrap: anywhere; }

/* collapse button */
.app-sidebar .app-sidebar-minify-btn {
  margin: 10px 4px 0 !important; padding: 9px 12px !important; border-radius: 12px !important; background: var(--surface-sunken) !important; color: var(--olive-700);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.app-sidebar .app-sidebar-minify-btn:hover, .app-sidebar .app-sidebar-minify-btn:focus { background: var(--olive-100) !important; }
.app-sidebar .app-sidebar-minify-btn i { color: var(--olive-700); }
[dir="rtl"] .app-sidebar .app-sidebar-minify-btn i { transform: scaleX(-1); }

/* collapsed rail (60px): centred icon tiles, avatar only */
.app-sidebar-minified #sidebar .app-sidebar-content .menu { padding: 14px 6px 20px; }
.app-sidebar-minified #sidebar .menu .menu-item > .menu-link { padding: 8px 0; justify-content: center; gap: 0; border-radius: 14px; }
.app-sidebar-minified #sidebar .widget-list.menu-item { background: transparent !important; }
.app-sidebar-minified #sidebar .widget-list .menu-link { padding: 4px 0 !important; justify-content: center; }
.app-sidebar-minified #sidebar .widget-list .menu-link:hover { background: transparent; }
.app-sidebar-minified #sidebar .widget-list-media i { width: 40px; height: 40px; }
.app-sidebar-minified .app-sidebar .app-sidebar-minify-btn { margin: 10px auto 0 !important; display: flex; width: 40px; justify-content: center; }

/* phone: logo block, backdrop */
.app-sidebar .navbar-brand { padding: 8px 12px 0; }
.app-sidebar .navbar-brand img { height: 40px !important; padding: 0 !important; border-radius: 10px; box-shadow: 0 0 0 1px var(--border-subtle); }
.app-sidebar-mobile-backdrop { background: rgba(28, 37, 21, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#content, .app-content { background: transparent; }

/* ── Kendo UI (default theme orange/grey → olive/gold) ── */
.k-widget, .k-input, .k-picker, .k-button, .k-grid, .k-calendar { font-family: var(--bs-body-font-family); }
.k-button-solid-primary, .k-primary {
  background-color: var(--olive-800); border-color: var(--olive-800); color: var(--sand-050);
  border-radius: var(--radius-pill);
}
.k-button-solid-primary:hover, .k-primary:hover { background-color: var(--olive-700); border-color: var(--olive-700); }
.k-input, .k-picker, .k-widget.k-input { border-radius: var(--radius-sm); border-color: var(--border-default); }
.k-input:focus-within, .k-picker:focus-within, .k-focus { border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
.k-calendar td.k-selected .k-link, .k-calendar td.k-state-selected .k-link,
.k-selected, .k-state-selected { background-color: var(--olive-800); color: var(--sand-050); border-color: var(--olive-800); }
.k-calendar td.k-today .k-link, .k-calendar .k-today { color: var(--gold-700); }
.k-calendar td:hover .k-link, .k-list-item:hover, .k-item:hover { background-color: var(--olive-100); color: var(--olive-800); }
.k-grid-header, th.k-header, .k-table-th { background: var(--surface-sunken); color: var(--olive-800); border-color: var(--border-subtle); }
.k-pager-wrap .k-link.k-selected, .k-pager-wrap .k-link.k-state-selected { background-color: var(--olive-800); color: var(--sand-050); }
.k-link, a.k-link { color: var(--olive-800); }
.k-loading-color { background-color: rgba(250,248,244,.8); }
.k-progressbar .k-selected, .k-progress-status-wrap { background-color: var(--olive-600); }
.k-upload .k-upload-button { border-radius: var(--radius-pill); }

/* ── SweetAlert ── */
.swal-modal { border-radius: var(--radius-xl); font-family: var(--bs-body-font-family); }
.swal-title { color: var(--olive-800); }
.swal-button { background-color: var(--olive-800); border-radius: var(--radius-pill); }
.swal-button:not([disabled]):hover { background-color: var(--olive-700); }
.swal-button--cancel { background-color: var(--sand-100); color: var(--olive-800); }
.swal-button--danger { background-color: var(--status-danger); }
.swal-button:focus { box-shadow: var(--shadow-gold-glow); }

/* ── Pace / loader ── */
.pace .pace-progress { background: var(--gold-500); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Logo lockup is an opaque raster on warm off-white: give it a soft plate on dark grounds */
img[src*="khutwa/logo-lockup"] { background: var(--surface-page); border-radius: var(--radius-md); padding: 2px 8px; width: auto; max-height: 90px; object-fit: contain; }

/* ══ Landing / welcome panel (LandingPage component, shown beside login & register) ══ */
.news-feed:is(#left-panel, .kl-auth-feed) {
  background-color: var(--surface-page) !important;
  background-image: linear-gradient(rgba(250,248,244,.82), rgba(250,248,244,.82)), url("../img/khutwa/pattern-tile.png");
  background-size: auto, 420px auto;
  border-inline-end: 1px solid var(--border-subtle) !important;
}
.kl-landing { max-width: 960px; margin-inline: auto; padding: 32px 40px 24px; }

.kl-hero {
  position: relative; text-align: center;
  padding: 40px 32px 32px; margin-bottom: 28px;
  background: var(--surface-brand); color: var(--text-on-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.kl-hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/khutwa/pattern-tile.png") center / 420px auto;
  opacity: .07; mix-blend-mode: screen; pointer-events: none;
}
.kl-hero > * { position: relative; }
.kl-hero-logos { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.kl-hero-logos img { background: var(--surface-page); border-radius: var(--radius-md); padding: 4px 12px; }
.kl-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-latin); font-weight: var(--fw-medium); font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-400);
}
html[lang="ar"] .kl-eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }
.kl-eyebrow span:first-child, .kl-eyebrow span:last-child { color: var(--gold-500); }
.kl-hero-title { color: var(--sand-050) !important; font-size: 2rem; font-weight: var(--fw-light); letter-spacing: var(--ls-tight); margin: 14px 0 8px; }
html[lang="ar"] .kl-hero-title { line-height: 1.4; }
.kl-hero-sub { color: var(--olive-200); font-size: 1rem; max-width: 560px; margin: 0 auto; }
html[lang="ar"] .kl-hero-sub { line-height: 1.8; }
.kl-rule { height: 2px; width: 220px; max-width: 60%; margin: 24px auto 0; background: linear-gradient(90deg, transparent, var(--gold-400) 45%, var(--gold-400) 55%, transparent); }

.kl-feature {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.kl-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-accent); }
.kl-feature-icon {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--surface-brand-soft); color: var(--olive-700); font-size: 18px;
}
.kl-feature:hover .kl-feature-icon { background: var(--surface-brand); color: var(--gold-400); }
.kl-feature-title { font-size: .9375rem; font-weight: 600; color: var(--olive-800); line-height: 1.5; }

/* Offers + eligibility (existing markup, restyled) */
.kl-landing h4 { font-size: 1.125rem; margin: 8px 0 12px; }
.kl-landing .card.bg-main-blue { border: 0; border-radius: var(--radius-lg); background: var(--surface-brand) !important; overflow: visible; }
.kl-landing .card.bg-main-blue a { color: var(--gold-400); text-decoration: underline; }
.kl-landing .card.shadow-sm { border-radius: var(--radius-lg); overflow: hidden; }
.kl-landing .table thead.bg-primary th { background: var(--surface-brand); color: var(--sand-050); border-color: var(--olive-700); font-weight: 600; }
.kl-landing .table td { vertical-align: middle; }
.kl-landing .btn { padding-inline: 24px; }

@media (max-width: 767px) {
  .kl-landing { padding: 16px 12px; }
  .kl-hero { padding: 28px 18px 24px; border-radius: var(--radius-lg); }
  .kl-hero-title { font-size: 1.5rem; }
}

/* Login / register form panel — light sheet, same eyebrow / title / gold-rule language as the hero */
:is(#right-panel .register-container, .register-container.kl-auth) {
  background: var(--surface-card) !important; position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  border-inline-start: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  padding-inline: 28px;
}
:is(#right-panel .register-container, .register-container.kl-auth)::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--gold-500);
}
:is(#right-panel, .kl-auth) .card-panel-set { margin-block: auto; background: transparent; padding: 16px 0; border-radius: 0; box-shadow: none; border: 0; }
.kl-form-head { margin-bottom: 22px; }
.kl-eyebrow-dark { justify-content: flex-start; color: var(--gold-700); }
.kl-eyebrow-dark span:first-child, .kl-eyebrow-dark span:last-child { color: var(--gold-500); }
.kl-form-title { font-size: 1.75rem; font-weight: var(--fw-light); letter-spacing: var(--ls-tight); margin: 8px 0 0; color: var(--olive-800); }
.kl-rule-start { margin: 14px 0 0; width: 72px; height: 3px; border-radius: 2px; background: var(--gold-500); }
:is(#right-panel, .kl-auth) label { font-size: 13px; color: var(--olive-800) !important; font-weight: 600; margin-bottom: 6px; }
:is(#right-panel, .kl-auth) .form-control, :is(#right-panel, .kl-auth) .input-group-text {
  min-height: 48px; padding: 8px 14px; font-size: 14px;
  background: var(--surface-page); border-color: var(--border-default); border-radius: var(--radius-sm);
}
:is(#right-panel, .kl-auth) .input-group > .form-control:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
:is(#right-panel, .kl-auth) .input-group > .form-control:last-child { border-radius: var(--radius-sm); }
:is(#right-panel, .kl-auth) .input-group > .input-group-append .input-group-text { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer; min-width: 52px; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard); }
[dir="rtl"] :is(#right-panel, .kl-auth) .input-group > .input-group-append .input-group-text { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
:is(#right-panel, .kl-auth) .input-group > .input-group-append .input-group-text:hover { background: var(--olive-100); }
:is(#right-panel, .kl-auth) .input-group > .input-group-append .input-group-text,
:is(#right-panel, .kl-auth) .input-group > .input-group-prepend .input-group-text { background: var(--surface-sunken); color: var(--olive-600); }
:is(#right-panel, .kl-auth) .form-control:hover:not(:focus):not(:disabled) { border-color: var(--olive-400); }
:is(#right-panel, .kl-auth) .form-control:focus { background: var(--surface-card); border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
/* captcha: image + refresh on one line, code input on its own line below */
:is(#right-panel, .kl-auth) .row:has(#img-captcha) { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
:is(#right-panel, .kl-auth) .row:has(#img-captcha) > label { flex: 0 0 100%; margin: 0; padding: 0 !important; }
:is(#right-panel, .kl-auth) .row:has(#img-captcha) > [class*="col-"] { flex: 0 0 100%; width: 100%; max-width: 100%; padding: 0 !important; margin: 0; }
:is(#right-panel, .kl-auth) .row:has(#img-captcha) .input-group { flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0 !important; }
:is(#right-panel, .kl-auth) #img-captcha {
  flex: 1 1 auto; min-width: 0; width: auto; height: 56px; padding: 4px 10px; object-fit: contain;
  background: var(--surface-card); border: 1px solid var(--border-default) !important; border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; border-inline-end: 0 !important;
}
[dir="rtl"] :is(#right-panel, .kl-auth) #img-captcha { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
:is(#right-panel, .kl-auth) .row:has(#img-captcha) .input-group-prepend { flex: none; display: flex; }
:is(#right-panel, .kl-auth) .row:has(#img-captcha) .input-group-prepend .input-group-text {
  width: 56px; height: 100%; justify-content: center; padding: 0; cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; transition: background-color var(--duration-fast) var(--ease-standard);
}
[dir="rtl"] :is(#right-panel, .kl-auth) .row:has(#img-captcha) .input-group-prepend .input-group-text { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
:is(#right-panel, .kl-auth) .row:has(#img-captcha) .input-group-prepend .input-group-text:hover { background: var(--olive-100); }
:is(#right-panel, .kl-auth) #InputCaptchaCode { width: 100%; }
:is(#right-panel, .kl-auth) a:focus-visible, :is(#right-panel, .kl-auth) button:focus-visible, :is(#right-panel, .kl-auth) .input-group-text:focus-visible { outline: 0; box-shadow: var(--shadow-gold-glow); border-radius: var(--radius-sm); }
:is(#right-panel, .kl-auth) #login2:focus-visible { border-radius: var(--radius-pill); }
:is(#right-panel, .kl-auth) #login2:disabled { opacity: .55; box-shadow: none; }
/* browser autofill: keep the field on-brand instead of the default blue tint */
:is(#right-panel, .kl-auth) input:-webkit-autofill, :is(#right-panel, .kl-auth) input:-webkit-autofill:hover, :is(#right-panel, .kl-auth) input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-page) inset; box-shadow: 0 0 0 1000px var(--surface-page) inset;
  -webkit-text-fill-color: var(--olive-800); caret-color: var(--olive-800); transition: background-color 9999s ease-out;
}
:is(#right-panel, .kl-auth) #login2 { height: 50px; border-radius: var(--radius-pill); font-size: 15px; letter-spacing: .02em; box-shadow: var(--shadow-sm); }
:is(#right-panel, .kl-auth) #login2:hover { box-shadow: var(--shadow-md); }
:is(#right-panel, .kl-auth) a:not(.eligible-button-text) { color: var(--olive-700); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-400); }
:is(#right-panel, .kl-auth) a:not(.eligible-button-text):hover { color: var(--gold-800); border-bottom-color: var(--gold-700); }
:is(#right-panel, .kl-auth) hr { border-color: var(--border-subtle); opacity: 1; margin: 18px 0; }
:is(#right-panel, .kl-auth) .eligible-button-bg {
  background: transparent; border: 1.5px solid var(--gold-500); border-radius: var(--radius-pill);
  padding: 11px 14px; justify-content: center; transition: background-color var(--duration-base) var(--ease-standard);
}
:is(#right-panel, .kl-auth) .eligible-button-text { color: var(--olive-800) !important; }
:is(#right-panel, .kl-auth) .eligible-button-text:hover .eligible-button-bg { background: var(--gold-100); }
:is(#right-panel, .kl-auth) .text-gray-600 { color: var(--text-muted) !important; }
@media (max-width: 767px) { :is(#right-panel .register-container, .register-container.kl-auth) { padding-inline: 18px; justify-content: flex-start; } :is(#right-panel, .kl-auth) .card-panel-set { margin-block: 0; padding-top: 8px; } }

/* ── Sign up (Register): controls beyond the shared login panel ── */
:is(#right-panel, .kl-auth) .kl-form .mb-10px { margin-bottom: 16px !important; }
:is(#right-panel, .kl-auth) .fa-info-circle { color: var(--olive-500) !important; font-size: 13px; cursor: pointer; }
:is(#right-panel, .kl-auth) .fa-info-circle:hover { color: var(--olive-800) !important; }
/* Kendo date picker, matched to the other inputs */
:is(#right-panel, .kl-auth) .k-datepicker.form-control {
  display: flex; align-items: stretch; height: 48px; min-height: 48px; padding: 0 !important; overflow: hidden;
  background: var(--surface-page); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
:is(#right-panel, .kl-auth) .k-datepicker.form-control:hover:not(:focus-within) { border-color: var(--olive-400); }
:is(#right-panel, .kl-auth) .k-datepicker.form-control:focus-within { background: var(--surface-card); border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
:is(#right-panel, .kl-auth) .k-datepicker input, :is(#right-panel, .kl-auth) .k-datepicker .k-input-inner {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; font-size: 14px; color: var(--text-primary) !important;
}
:is(#right-panel, .kl-auth) .k-datepicker .k-input-button {
  flex: none; width: 52px; height: 100%; padding: 0; border: 0; border-inline-start: 1px solid var(--border-default); border-radius: 0;
  background: var(--surface-sunken); color: var(--olive-700);
}
:is(#right-panel, .kl-auth) .k-datepicker .k-input-button:hover { background: var(--olive-100); }
:is(#right-panel, .kl-auth) .k-invalid-msg, :is(#right-panel, .kl-auth) .k-form-error { color: var(--status-danger); font-size: 12px; font-weight: 600; margin-top: 4px; }
/* consent checkboxes */
:is(#right-panel, .kl-auth) .form-check-inline { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; }
:is(#right-panel, .kl-auth) .form-check-inline .form-check-input {
  flex: none; float: none; width: 20px; height: 20px; margin: 2px 0 0;
  background-color: var(--surface-card); border: 1.5px solid var(--olive-300); border-radius: 6px;
}
:is(#right-panel, .kl-auth) .form-check-inline .form-check-input:checked { background-color: var(--olive-800); border-color: var(--olive-800); }
:is(#right-panel, .kl-auth) .form-check-label { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--text-secondary) !important; cursor: pointer; }
/* primary action */
:is(#right-panel, .kl-auth) .btn-primary.btn-lg { height: 50px; border-radius: var(--radius-pill); font-size: 15px; letter-spacing: .02em; box-shadow: var(--shadow-sm); }
:is(#right-panel, .kl-auth) .btn-primary.btn-lg:hover:not(:disabled) { box-shadow: var(--shadow-md); }
:is(#right-panel, .kl-auth) .btn-primary.btn-lg:disabled { box-shadow: none; cursor: not-allowed; }
/* Nafath verification dialog */
#modal-dialog-nafath .modal-content { background: transparent; border: 0; box-shadow: none; }
#modal-dialog-nafath .card { border: 0; border-radius: var(--radius-xl); border-top: 4px solid var(--gold-500); box-shadow: var(--shadow-lg); overflow: hidden; }
#modal-dialog-nafath .card-body { padding: 32px 28px 28px; }
#modal-dialog-nafath .fs-35px {
  display: flex; align-items: center; justify-content: center; width: 96px !important; height: 96px !important; line-height: 1 !important;
  border: 0 !important; border-radius: 50% !important; background: var(--surface-brand); color: var(--gold-400) !important;
  font-size: 2.25rem; font-weight: 700; box-shadow: 0 0 0 6px var(--olive-100);
}
#modal-dialog-nafath .btn-default { min-width: 160px; height: 46px; }

/* ══ OTP / verification popups (login code, contract consent, asset delivery) ══
   Pure styling: scoped to modals that contain the OTP fields, no markup or script changes. */
.modal-content:has(#otp, #otpInput) {
  border: 0; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); border-top: 4px solid var(--gold-500);
}
.modal-content:has(#otp, #otpInput) .modal-header {
  position: relative; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 32px 28px 8px; border-bottom: 0;
}
.modal-content:has(#otp, #otpInput) .modal-header::before {
  content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 24px;
  width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px; border-radius: var(--radius-pill);
  background: var(--surface-brand); color: var(--gold-400); box-shadow: 0 0 0 6px var(--olive-100);
}
.modal-content:has(#otp, #otpInput) .modal-title { font-size: 1.375rem; font-weight: 700; color: var(--olive-800); line-height: 1.4; }
.modal-content:has(#otp, #otpInput) .modal-header .btn-close { position: absolute; top: 16px; inset-inline-end: 16px; opacity: .55; }
.modal-content:has(#otp, #otpInput) .modal-header .btn-close:hover { opacity: 1; }
.modal-content:has(#otp, #otpInput) .modal-body { padding: 8px 28px 8px; text-align: center; }
.modal-content:has(#otp, #otpInput) .modal-body p { color: var(--text-muted); font-size: .9375rem; margin-bottom: 8px; }

/* digit boxes: fluid square-ish tiles that fit 4 or 6 digits on any width */
.modal-content:has(#otp) .container.height-100 { height: auto; padding: 0; }
.modal-content:has(#otp) .container.height-100 .position-relative, .modal-content:has(#otp) .container.height-100 .p-2 { width: 100%; }
.modal-content:has(#otp) .container.height-100 .p-2 { padding: 0 !important; }
.modal-content:has(#otp) .modal-body { padding-bottom: 0; }
.modal-content:has(#otp) .modal-footer { padding-top: 12px; }
#otp.inputs { direction: ltr; gap: 10px; flex-wrap: nowrap; justify-content: center; width: 100%; margin-top: 12px !important; }
#otp.inputs .otpDigit, #otp.inputs input {
  flex: 0 1 44px; min-width: 0; width: 44px; height: 52px; align-self: center; margin: 0 !important; padding: 0;
  font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--olive-800); text-align: center; font-family: var(--font-latin);
  background: var(--surface-card); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); caret-color: var(--gold-700); -moz-appearance: textfield; appearance: textfield;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
#otp.inputs input::-webkit-outer-spin-button, #otp.inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#otp.inputs .otpDigit:hover, #otp.inputs input:hover { border-color: var(--border-strong); }
#otp.inputs .otpDigit:focus, #otp.inputs input:focus {
  border: 1.5px solid var(--olive-800) !important; box-shadow: var(--shadow-gold-glow); outline: 0; transform: none;
}
@media (max-width: 400px) { #otp.inputs { gap: 8px; } #otp.inputs .otpDigit, #otp.inputs input { height: 46px; font-size: 1.125rem; } }

/* single-field variant (contract consent) */
#otpInput.form-control {
  height: 58px; max-width: 280px; margin: 8px auto 0; text-align: center; direction: ltr;
  font-family: var(--font-latin); font-size: 1.5rem; font-weight: 700; letter-spacing: .5em; padding-inline-start: calc(.5em + 12px);
  background: var(--surface-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
#otpInput.form-control:focus { background: var(--surface-card); border: 1.5px solid var(--olive-700) !important; box-shadow: var(--shadow-gold-glow); }
#otpInput.form-control::placeholder { letter-spacing: 0; font-size: .875rem; font-weight: 500; }

.modal-content:has(#otp, #otpInput) #otpError p { color: var(--status-danger); margin: 6px 0 0; line-height: 1.2; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.modal-content:has(#otp, #otpInput) .form-check { text-align: start; margin-top: 14px; padding: 10px 12px 10px 2.25em; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.modal-content:has(#otp, #otpInput) .form-check .form-check-input { margin-inline-start: -1.75em; }
.modal-content:has(#otp, #otpInput) .modal-body ol { text-align: start; color: var(--text-secondary); font-size: .875rem; }

/* footer */
.modal-content:has(#otp, #otpInput) .modal-footer {
  flex-direction: column; align-items: stretch; justify-content: center; gap: 10px;
  padding: 16px 28px 28px; border-top: 0; text-align: center;
}
.modal-content:has(#otp, #otpInput) .modal-footer .btn { width: 100%; height: 48px; margin: 0 !important; font-size: 15px; }
.modal-content:has(#otp, #otpInput) .modal-footer .btn-primary { box-shadow: var(--shadow-sm); order: 1; }
.modal-content:has(#otp, #otpInput) .modal-footer .btn-default { order: 2; }
.modal-content:has(#otp, #otpInput) .modal-footer .btn-primary:disabled { box-shadow: none; }
.modal-content:has(#otp, #otpInput) .modal-footer .btn-default { border-color: transparent; color: var(--text-secondary); }
.modal-content:has(#otp, #otpInput) .modal-footer > div { color: var(--text-muted); font-size: .9375rem; }
.modal-content:has(#otp, #otpInput) .modal-footer a { color: var(--olive-700); font-weight: 700; border-bottom: 1px solid var(--gold-400); text-decoration: none; }
.modal-content:has(#otp, #otpInput) .modal-footer a:hover { color: var(--gold-800); }
.login-opt-container { align-self: center; padding: 4px 14px; border-radius: var(--radius-pill); background: var(--status-danger-soft); color: var(--status-danger) !important; font-size: .875rem; }

@media (max-width: 400px) {
  #otp.inputs { gap: 6px; }
  #otp.inputs .otpDigit, #otp.inputs input { width: 42px; height: 52px; font-size: 1.25rem; }
  .modal-content:has(#otp, #otpInput) .modal-body, .modal-content:has(#otp, #otpInput) .modal-footer { padding-inline: 18px; }
}

/* ══ Loading spinner: brand ring around the Khutwa mark (replaces loader.gif) ══
   showLoader()/hideLoader() still toggle #loader.loaded; Kendo widget masks share the same classes. */
.app-loader { background-color: rgba(250, 248, 244, .3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.k-loading-mask .k-loading-image { background-image: none !important; }
.k-loading-mask .k-loading-image::before,
.k-loading-mask .k-loading-image::after { content: ""; position: absolute; top: 50%; inset-inline-start: 50%; pointer-events: none; }
.k-loading-mask .k-loading-image::before {
  width: 30px; height: 26px; margin: -13px 0 0 -15px;
  background: url("../img/khutwa/logo-mark.png") center / contain no-repeat;
}
[dir="rtl"] .k-loading-mask .k-loading-image::before { margin: -13px -15px 0 0; }
.k-loading-mask .k-loading-image::after {
  width: 64px; height: 64px; margin: -32px 0 0 -32px; box-sizing: border-box;
  border: 3px solid var(--olive-200); border-top-color: var(--gold-500); border-inline-end-color: var(--olive-700);
  border-radius: 50%; background: rgba(255, 255, 255, .9); z-index: -1;
  box-shadow: var(--shadow-md);
  animation: kl-spin .9s linear infinite;
}
[dir="rtl"] .k-loading-mask .k-loading-image::after { margin: -32px -32px 0 0; }
.k-loading-mask .k-loading-image { z-index: 2; }
#loanListContainer .k-loading-image::before, #loanListContainer .k-loading-image::after { display: none; }
@keyframes kl-spin { to { transform: rotate(360deg); } }
@keyframes kl-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .k-loading-mask .k-loading-image::after { animation: kl-pulse 1.6s ease-in-out infinite !important; animation-duration: 1.6s !important; border-top-color: var(--gold-500); }
}

/* ══ My Loans (Loan/List) — presentation only; the Kendo templates and scripts are untouched ══ */
/* greeting + status tiles */
:root { --kl-shadow-card: 0 0 0 1px rgba(46,59,34,.07), 0 1px 2px rgba(46,59,34,.04), 0 6px 20px rgba(46,59,34,.07); --kl-shadow-lift: 0 0 0 1px rgba(46,59,34,.08), 0 2px 4px rgba(46,59,34,.05), 0 16px 40px rgba(46,59,34,.14); }
/* the layout sets an inline white background on #content; give the loan list the warm page ground so white cards read as cards */
#content:has(#starterDiv) { background-color: var(--surface-page) !important; }
#starterDiv.row { margin: 8px 0 28px; }
#starterDiv > .kl-profile { padding: 8px 12px; background: transparent; }
#starterDiv .kl-profile > .d-flex { gap: 8px; }
.kl-avatar { flex: none; display: block; width: 76px; height: 76px; padding: 0; overflow: hidden; border-radius: 50%; background: var(--olive-100); box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 5px var(--gold-500), var(--kl-shadow-card); }
.kl-avatar img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.kl-profile .flex-1 { min-width: 0; padding-inline-start: 20px !important; }
.kl-profile-hi { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--text-muted); }
.kl-profile-name { margin: 0 0 8px; font-size: 1.75rem; font-weight: var(--fw-light); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--olive-800); overflow-wrap: break-word; }
html[lang="ar"] .kl-profile-name { line-height: var(--leading-display-ar); letter-spacing: 0; }
.kl-profile-id {
  display: inline-block; margin: 0; padding: 3px 12px; border-radius: var(--radius-pill);
  background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-default);
  color: var(--olive-700) !important; font-family: var(--font-latin); font-size: 12px; font-weight: 600; letter-spacing: .08em; direction: ltr;
}
.kl-profile .btn-primary { margin: 0 !important; height: 46px; padding-inline: 22px !important; box-shadow: var(--shadow-md); white-space: nowrap; font-size: 14px; }
.kl-profile .btn-primary:hover { box-shadow: var(--kl-shadow-lift); transform: translateY(-1px); }
.kl-list-eyebrow { display: none !important; }

#loanListContainer { background: transparent !important; }
#loanListContainer .panel, #loanListContainer .panel-heading, #loanListContainer .tab-overflow { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#loanListContainer .prev-button, #loanListContainer .next-button { display: none !important; }
/* Color Admin's .tab-overflow is overflow:hidden, which crops the tiles' shadows and hover lift */
#loanListContainer, #loanListContainer .panel, #loanListContainer .panel-heading, #loanListContainer .tab-overflow, #loanListContainer .tab-content, #loanListContainer .tab-pane { overflow: visible !important; }
#loanListContainer .tab-overflow { padding: 4px 4px 12px; margin: -4px -4px 0; border-radius: 0; }
#loanListContainer .nav-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; border: 0; background: transparent; width: 100%;
}
#loanListContainer .nav-tabs .nav-item { margin: 0; }
#loanListContainer .nav-tabs .nav-link {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon count" "icon label"; align-items: center; column-gap: 14px; row-gap: 0;
  height: 100%; padding: 18px 20px; border: 0 !important; border-radius: var(--radius-lg); text-align: start;
  background: var(--surface-card); color: var(--olive-800); box-shadow: var(--kl-shadow-card);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
#loanListContainer .nav-tabs .nav-link:hover { transform: translateY(-2px); box-shadow: var(--kl-shadow-lift); }
.kl-tab-icon { grid-area: icon; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--surface-brand-soft); color: var(--olive-700); font-size: 18px; transition: inherit; }
.kl-tab-count { grid-area: count; align-self: end; font-family: var(--font-latin); font-size: 1.875rem; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -.02em; }
.kl-tab-label { grid-area: label; align-self: start; font-size: 13px; font-weight: 600; color: var(--text-muted); transition: inherit; }
#loanListContainer .nav-tabs .nav-link.active { background: var(--surface-brand) !important; color: var(--sand-050) !important; box-shadow: var(--kl-shadow-lift); }
#loanListContainer .nav-tabs .nav-link.active .kl-tab-icon { background: rgba(250,248,244,.12); color: var(--gold-400); }
#loanListContainer .nav-tabs .nav-link.active .kl-tab-label { color: var(--olive-200); }
#loanListContainer .nav-tabs .nav-link:focus-visible { box-shadow: var(--shadow-gold-glow); outline: 0; }

/* search */
#loanListContainer .tab-pane > .col-md-12 { width: 100%; padding: 0; margin-bottom: 0 !important; text-align: start !important; }
/* Search is hidden for now — delete this one rule to bring it back (markup and script are intact). */
#loanListContainer .kl-search-row { display: none !important; }
#loanListContainer .tab-pane > .kl-loan-list, #loanListContainer .tab-pane > div[id$="grid"] { margin-top: 20px; }
#loanListContainer .kl-search-row { justify-content: flex-start !important; margin: 28px 0 20px !important; }
#loanListContainer .kl-search-row > div { flex: 0 1 480px; width: min(100%, 480px) !important; max-width: 100%; }
#loanListContainer .kl-search-row > div {
  padding: 4px !important; background: var(--surface-card) !important; border: 1px solid var(--border-default); border-radius: var(--radius-pill) !important; box-shadow: none !important;
  transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
#loanListContainer .kl-search-row > div:focus-within { border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow) !important; }
#loanListContainer .input-icons { position: relative; flex-wrap: nowrap; align-items: center; }
#loanListContainer .input-icons .form-control { border: 0 !important; box-shadow: none !important; background: transparent !important; font-size: 14px !important; padding-inline: 16px 40px; height: 38px; }
#loanListContainer .input-icons .icons {
  right: 112px !important; left: auto !important; top: 50%; transform: translateY(-50%); margin: 0 !important;
  width: 26px; height: 26px; padding: 0; line-height: 26px; border-radius: 50%; color: var(--text-muted); font-size: 12px;
}
[dir="rtl"] #loanListContainer .input-icons .icons { right: auto !important; left: 112px !important; }
#loanListContainer .input-icons .icons:hover { background: var(--olive-100); color: var(--olive-800); }
#loanListContainer .search-input.btn {
  border: 0; border-radius: var(--radius-pill) !important; background: var(--surface-brand); color: var(--sand-050);
  font-size: 13px !important; padding: 8px 18px; height: 38px; flex: none;
}
#loanListContainer .search-input.btn:hover { background: var(--olive-700); color: var(--sand-050); }

/* loan cards — rendered by the plain-JS control in loanList.js */
.kl-loan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; padding-block: 4px 8px; }
.kl-loan {
  display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 22px;
  background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--kl-shadow-card);
  animation: kl-loan-in var(--duration-slow) var(--ease-out-soft, ease-out) both;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.kl-loan:hover { transform: translateY(-4px); box-shadow: var(--kl-shadow-lift); }
@keyframes kl-loan-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kl-loan-head { display: flex; align-items: center; gap: 14px; }
.kl-loan-logo { flex: none; width: 48px; height: 48px; padding: 6px; object-fit: contain; background: var(--surface-page); border-radius: 14px; }
.kl-loan-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kl-loan-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--olive-800); overflow-wrap: anywhere; }
.kl-loan-partner { font-size: 12px; color: var(--text-muted); }
.kl-loan-status { display: flex; }
.kl-status { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 14px 6px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.kl-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kl-status-gold { background: var(--gold-100); color: var(--gold-800); }
.kl-status-olive { background: var(--olive-100); color: var(--olive-700); }
.kl-status-grey { background: var(--sand-100); color: var(--olive-700); }
.kl-status-red { background: var(--status-danger-soft); color: var(--status-danger); }
.kl-loan-amount { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface-page); }
.kl-loan-label, .kl-loan-meta-item dt { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.kl-loan-value { font-family: var(--font-latin); font-size: 1.75rem; font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -.02em; color: var(--olive-800); direction: ltr; text-align: start; }
.kl-loan-value .icon-saudi_riyal { color: var(--gold-700); }
.kl-loan-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.kl-loan-meta-item { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kl-loan-meta-item dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--olive-800); overflow-wrap: anywhere; }
.kl-loan-no { font-family: var(--font-latin); font-weight: 700; color: var(--olive-800); }
a.kl-loan-no { color: var(--olive-700); border-bottom: 1.5px solid var(--gold-400); text-decoration: none; }
a.kl-loan-no:hover { color: var(--gold-800); }
.kl-loan-link { text-decoration: none; }
a.kl-loan-link:hover .kl-status { filter: brightness(.96); }
.kl-loan-badge { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: var(--radius-sm); background: var(--olive-100); color: var(--olive-800); font-size: 12.5px; font-weight: 700; }
.kl-loan-foot { margin-top: auto; }
.kl-loan-cta.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px;
  border: 0; border-radius: var(--radius-md); background: var(--surface-brand-soft); color: var(--olive-800); font-size: 14px; font-weight: 700;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.kl-loan-cta.btn i { font-size: 12px; transition: transform var(--duration-base) var(--ease-standard); }
[dir="rtl"] .kl-loan-cta.btn i { transform: scaleX(-1); }
.kl-loan-cta.btn:hover { background: var(--surface-brand); color: var(--sand-050); }
.kl-loan-cta.btn:hover i { transform: translateX(4px); color: var(--gold-400); }
[dir="rtl"] .kl-loan-cta.btn:hover i { transform: scaleX(-1) translateX(4px); }
@media (prefers-reduced-motion: reduce) { .kl-loan { animation: none; } }

/* "Show more" (added by loanList.js under each tab's cards) */
.kl-showmore { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 8px; }
.kl-showmore-btn.btn {
  min-width: 200px; height: 46px; padding-inline: 28px; border: 1.5px solid var(--gold-500); border-radius: var(--radius-pill);
  background: transparent; color: var(--olive-800); font-weight: 700; font-size: 14px;
}
.kl-showmore-btn.btn::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; margin-inline-start: 10px; color: var(--gold-700); }
.kl-showmore-btn.btn:hover { background: var(--gold-100); border-color: var(--gold-600); color: var(--olive-800); }
.kl-showmore-count { margin: 0; font-family: var(--font-latin); font-size: 12px; letter-spacing: .06em; color: var(--text-muted); direction: ltr; }

/* empty states */
.kl-empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-bottom: 16px;
  border-radius: 50%; background: var(--surface-brand-soft); color: var(--olive-700); font-size: 38px; box-shadow: 0 0 0 10px var(--surface-page), 0 0 0 11px var(--border-subtle);
}
.kl-empty { padding: 40px 12px; }
.kl-empty-text { font-size: 1.0625rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 20px !important; }
.kl-empty-title { font-size: 1.25rem; margin: 0; color: var(--olive-800); }
.no-data-template .text-center { padding: 36px 0 12px; }

@media (max-width: 767px) {
  #starterDiv > .kl-profile { padding: 4px 0; }
  #starterDiv .kl-profile > .d-flex { flex-wrap: wrap; row-gap: 14px; }
  #starterDiv .kl-profile .flex-1 { flex: 1 1 0; }
  #starterDiv .kl-profile .flex-end { flex: 0 0 100%; padding: 0 !important; }
  #starterDiv .kl-profile .flex-end .btn { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 !important; }
  #loanListContainer .kl-search-row { margin: 20px 0 16px !important; }
  #loanListContainer .kl-search-row > div { flex-basis: 100%; width: 100% !important; }
  .kl-loan-list { grid-template-columns: 1fr; gap: 16px; }
  .kl-loan { padding: 18px; }
  #loanListContainer .nav-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #loanListContainer .nav-tabs .nav-link { padding: 14px 16px; column-gap: 12px; }
  .kl-tab-icon { width: 40px; height: 40px; }
  .kl-tab-count { font-size: 1.5rem; }
  .kl-profile-name { font-size: 1.5rem; }
  .kl-avatar { width: 60px; height: 60px; }
}

/* ══ Marketing landing (/Landing) — hero, tabs, product cards, calculators, services ══ */
.kw-landing { background: var(--surface-page); color: var(--text-primary); overflow-x: clip; }
.kw-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 24px; }
.kw-landing :is(h1, h2, h3, h4) { margin: 0; }
.kw-landing em { font-style: normal; color: var(--gold-700); }
.kw-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: var(--fw-medium); font-size: var(--fs-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-400);
}
.kw-eyebrow span:first-child, .kw-eyebrow span:last-child { color: var(--gold-500); }
.kw-eyebrow-dark { justify-content: flex-start; color: var(--gold-800); }
html[lang="ar"] .kw-eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }
.kw-rule { height: 2px; width: 220px; max-width: 60%; margin: 22px auto 0; background: linear-gradient(90deg, transparent, var(--gold-400) 45%, var(--gold-400) 55%, transparent); }
.kw-rule-dark { margin-top: 16px; width: 120px; }

/* hero */
.kw-hero {
  position: relative; text-align: center; color: var(--text-on-dark); background: var(--surface-brand);
  padding: 112px 0 56px; border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); overflow: hidden;
}
.kw-hero::before { content: ""; position: absolute; inset: 0; background: url("../img/khutwa/pattern-tile.png") center / 420px auto; opacity: .07; mix-blend-mode: screen; pointer-events: none; }
.kw-hero::after { content: ""; position: absolute; inset-inline: 0; top: -40%; height: 90%; background: radial-gradient(60% 60% at 50% 50%, rgba(201,166,107,.18), transparent 70%); pointer-events: none; }
.kw-hero > * { position: relative; z-index: 1; }
.kw-hero-title { color: var(--sand-050) !important; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 18px auto 14px !important; max-width: 760px; }
.kw-hero-title strong { font-weight: var(--fw-medium); color: var(--gold-400); }
html[lang="ar"] .kw-hero-title { line-height: 1.4; }
.kw-hero-sub { color: var(--olive-200); font-size: 1.0625rem; max-width: 560px; margin: 0 auto; }
.kw-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.kw-hero-actions .btn { padding-inline: 32px; }
.kw-hero .btn-outline-light { --bs-btn-color: var(--sand-050); --bs-btn-border-color: rgba(250,248,244,.4); --bs-btn-hover-bg: rgba(250,248,244,.1); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--gold-400); background: transparent; border: 1px solid var(--bs-btn-border-color); color: var(--bs-btn-color); }
.kw-hero .btn-outline-light:hover { background: rgba(250,248,244,.1); color: #fff; border-color: var(--gold-400); }
.kw-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 720px; margin: 44px auto 0; padding: 0; }
.kw-stats li { padding: 16px 12px; border-radius: var(--radius-lg); background: rgba(250,248,244,.06); border: 1px solid rgba(250,248,244,.12); backdrop-filter: blur(6px); }
.kw-stat-value { display: block; font-size: 1.5rem; font-weight: var(--fw-medium); color: var(--sand-050); line-height: 1.2; direction: ltr; unicode-bidi: isolate; }
.kw-stat-value small { font-size: inherit; color: var(--gold-400); }
.kw-stat-label { display: block; margin-top: 4px; font-size: 12px; color: var(--olive-200); }

/* segmented tab bar */
.kw-tabs-wrap { position: sticky; top: 0; z-index: 20; padding: 18px 0 0; margin-top: -26px; pointer-events: none; }
.kw-tabs-wrap .kw-container { display: flex; justify-content: center; }
.kw-tabs {
  pointer-events: auto; display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
}
.kw-tabs::-webkit-scrollbar { display: none; }
.kw-tabs .nav-link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 11px 22px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: .9375rem; color: var(--olive-700); background: transparent; border: 0;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.kw-tabs .nav-link i { font-size: 14px; color: var(--gold-700); }
.kw-tabs .nav-link:hover { background: var(--olive-100); }
.kw-tabs .nav-link.active { background: var(--surface-brand); color: var(--sand-050); }
.kw-tabs .nav-link.active i { color: var(--gold-400); }
.kw-tabs .nav-link:focus-visible { box-shadow: var(--shadow-gold-glow); outline: 0; }

/* sections */
.kw-section { padding: 72px 0 8px; }
.kw-section-tabs { padding-top: 48px; }
.kw-section:last-of-type { padding-bottom: 72px; }
.kw-section-head { text-align: center; margin-bottom: 36px; }
.kw-title { font-size: clamp(1.5rem, 3.4vw, 2.25rem); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); color: var(--olive-800); }
.kw-section-head .kw-rule { margin-inline: auto; }
.kw-icon {
  flex: none; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--surface-brand-soft); color: var(--olive-700); font-size: 20px;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.kw-icon-gold { background: rgba(201,166,107,.16); color: var(--gold-400); }

/* product cards */
.kw-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kw-product {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: start; width: 100%;
  padding: 26px 24px 22px; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface-card); border: 0; border-radius: var(--radius-xl); box-shadow: var(--kl-shadow-card, var(--shadow-sm));
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.kw-product:hover { transform: translateY(-4px); box-shadow: var(--kl-shadow-lift, var(--shadow-lg)); }
.kw-product:hover .kw-icon, .kw-product.is-active .kw-icon { background: var(--surface-brand); color: var(--gold-400); }
.kw-product.is-active { box-shadow: 0 0 0 2px var(--gold-500), var(--kl-shadow-lift, var(--shadow-lg)); }
.kw-product:focus-visible { outline: 0; box-shadow: var(--shadow-gold-glow), var(--shadow-md); }
.kw-product-name { margin-top: 8px; font-size: 1.125rem; font-weight: 700; color: var(--olive-800); line-height: 1.35; }
.kw-product-blurb { font-size: .9375rem; color: var(--text-muted); line-height: 1.6; flex: 1; }
.kw-product-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .875rem; font-weight: 600; color: var(--gold-800); }
.kw-product-cta i { transition: transform var(--duration-base) var(--ease-standard); }
.kw-product:hover .kw-product-cta i { transform: translateX(4px); }
[dir="rtl"] .kw-product-cta i { transform: scaleX(-1); }
[dir="rtl"] .kw-product:hover .kw-product-cta i { transform: scaleX(-1) translateX(4px); }

/* detail panel */
.kw-detail { margin-top: 32px; padding: 32px; scroll-margin-top: 96px; background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); border: 1px solid var(--border-subtle); }
.kw-detail[hidden] { display: none; }
.kw-detail.is-in { animation: kw-rise var(--duration-base) var(--ease-standard); }
@keyframes kw-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.kw-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.kw-detail-title { margin-top: 6px !important; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
.kw-detail-text { color: var(--text-secondary); max-width: 780px; line-height: 1.8; margin-bottom: 24px; }
.kw-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kw-list-card { padding: 22px; border-radius: var(--radius-lg); background: var(--surface-page); border: 1px solid var(--border-subtle); }
.kw-list-card h4 { margin-bottom: 14px !important; font-size: 1rem; font-weight: 700; color: var(--olive-800); }
.kw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kw-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: var(--text-secondary); }
.kw-checks li i { margin-top: 4px; color: var(--gold-700); font-size: 14px; flex: none; }
.kw-steps { list-style: none; counter-reset: kw; margin: 0; padding: 0; display: grid; gap: 12px; }
.kw-steps li { counter-increment: kw; display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: var(--text-secondary); }
.kw-steps li::before {
  content: counter(kw); flex: none; width: 26px; height: 26px; margin-top: -1px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-brand); color: var(--gold-400); font-size: 12px; font-weight: 700;
}

/* calculator + eligibility panels */
.kw-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.kw-form { padding: 32px; background: var(--surface-card); border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.kw-field { margin-bottom: 20px; }
.kw-field label { display: block; margin-bottom: 8px; font-size: .875rem; }
.kw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kw-input { display: flex; align-items: stretch; height: var(--control-h-md); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.kw-input:focus-within { border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
.kw-input > span { display: inline-flex; align-items: center; padding-inline: 14px; background: var(--surface-sunken); color: var(--olive-700); font-size: .8125rem; font-weight: 600; }
.kw-input > span:first-child { border-inline-end: 1px solid var(--border-subtle); }
.kw-input > span:last-child { border-inline-start: 1px solid var(--border-subtle); }
.kw-input > span:only-child { border: 0; }
.kw-input input { flex: 1; min-width: 0; border: 0; outline: 0; padding-inline: 14px; background: transparent; color: var(--text-primary); font: inherit; }
.kw-input input::placeholder { color: var(--text-muted); }
.kw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.kw-slider { margin-bottom: 26px; }
.kw-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kw-slider-head label { margin: 0; font-size: .9375rem; }
.kw-slider-head output { padding: 4px 14px; border-radius: var(--radius-pill); background: var(--gold-100); border: 1px solid var(--gold-300); color: var(--gold-800); font-weight: 700; font-size: .9375rem; direction: ltr; unicode-bidi: isolate; }
.kw-range { --kw-fill: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 0; border-radius: var(--radius-pill); outline: 0; cursor: pointer;
  background: linear-gradient(to right, var(--olive-700) var(--kw-fill), var(--olive-100) var(--kw-fill)); }
[dir="rtl"] .kw-range { background: linear-gradient(to left, var(--olive-700) var(--kw-fill), var(--olive-100) var(--kw-fill)); }
.kw-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-card); border: 3px solid var(--gold-500); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-fast); }
.kw-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-card); border: 3px solid var(--gold-500); box-shadow: var(--shadow-sm); }
.kw-range:focus-visible::-webkit-slider-thumb, .kw-range:hover::-webkit-slider-thumb { box-shadow: var(--shadow-gold-glow); }
.kw-range:focus-visible::-moz-range-thumb, .kw-range:hover::-moz-range-thumb { box-shadow: var(--shadow-gold-glow); }
.kw-slider-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-muted); direction: ltr; }
.kw-note { margin: 4px 0 0; font-size: .8125rem; color: var(--text-muted); }

.kw-result {
  position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 36px 28px;
  background: var(--surface-brand); color: var(--text-on-dark); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden;
}
.kw-result::before { content: ""; position: absolute; inset: 0; background: url("../img/khutwa/pattern-tile.png") center / 420px auto; opacity: .07; mix-blend-mode: screen; pointer-events: none; }
.kw-result > * { position: relative; }
.kw-result-label { font-size: .875rem; font-weight: 600; color: var(--gold-400); letter-spacing: var(--tracking-caps); }
.kw-result-value { margin-top: 10px; font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: var(--fw-light); line-height: 1.1; color: var(--sand-050); direction: ltr; unicode-bidi: isolate; }
.kw-result-value small { margin-inline-start: 8px; font-size: 1rem; font-weight: 600; color: var(--gold-400); }
.kw-result-sub { margin-top: 10px; font-size: .875rem; color: var(--olive-200); }
.kw-rows { list-style: none; margin: 22px 0 0; padding: 0; text-align: start; }
.kw-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: .875rem; color: var(--olive-200); border-bottom: 1px solid rgba(250,248,244,.1); }
.kw-rows li:last-child { border-bottom: 0; }
.kw-rows b { font-size: 1.0625rem; font-weight: 700; color: var(--sand-050); direction: ltr; unicode-bidi: isolate; }

/* reasons */
.kw-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kw-reason { padding: 26px 24px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.kw-reason:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-accent); }
.kw-reason:hover .kw-icon { background: var(--surface-brand); color: var(--gold-400); }
.kw-reason h3 { margin: 18px 0 8px !important; font-size: 1.0625rem; font-weight: 700; }
.kw-reason p { margin: 0; font-size: .9375rem; color: var(--text-muted); line-height: 1.65; }

/* "covered" band */
.kw-band { position: relative; overflow: hidden; text-align: center; padding: 56px 40px; background: var(--surface-brand); color: var(--text-on-dark); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.kw-band::before { content: ""; position: absolute; inset: 0; background: url("../img/khutwa/pattern-tile.png") center / 420px auto; opacity: .07; mix-blend-mode: screen; pointer-events: none; }
.kw-band > * { position: relative; }
.kw-band-title { margin-top: 14px !important; color: var(--sand-050) !important; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
.kw-band-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; text-align: start; }
.kw-band-item { padding: 28px; border-radius: var(--radius-lg); background: rgba(250,248,244,.06); border: 1px solid rgba(250,248,244,.12); }
.kw-band-item h3 { margin: 18px 0 8px !important; color: var(--sand-050) !important; font-size: 1.25rem; font-weight: 500; }
.kw-band-item p { margin: 0; color: var(--olive-200); line-height: 1.7; }

/* services */
.kw-service { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; padding: 28px 0; }
.kw-service:nth-of-type(even) .kw-service-art { order: -1; }
.kw-service-title { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); line-height: 1.3; }
.kw-service-body p { margin: 14px 0 18px; color: var(--text-secondary); line-height: 1.8; }
.kw-service-art { display: flex; align-items: center; justify-content: center; padding: 28px; border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.kw-service-art img { width: 100%; max-width: 340px; max-height: 300px; object-fit: contain; }

@media (max-width: 991px) {
  .kw-products, .kw-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kw-lists { grid-template-columns: 1fr; }
  .kw-panel { grid-template-columns: 1fr; }
  .kw-service { gap: 28px; }
}
@media (max-width: 767px) {
  .kw-container { padding-inline: 16px; }
  .kw-hero { padding: 96px 0 48px; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
  .kw-hero-actions .btn { flex: 1 1 100%; }
  .kw-stats { gap: 8px; margin-top: 32px; }
  .kw-stat-value { font-size: 1.125rem; }
  .kw-tabs { justify-content: flex-start; }
  .kw-tabs .nav-link { padding: 10px 16px; font-size: .875rem; }
  .kw-section { padding-top: 52px; }
  .kw-products, .kw-reasons, .kw-band-grid { grid-template-columns: 1fr; }
  .kw-detail, .kw-form { padding: 22px 18px; }
  .kw-field-row { grid-template-columns: 1fr; gap: 0; }
  .kw-band { padding: 40px 18px; border-radius: var(--radius-lg); }
  .kw-service { grid-template-columns: 1fr; padding: 16px 0; }
  .kw-service:nth-of-type(even) .kw-service-art { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kw-product, .kw-reason, .kw-detail.is-in { transition: none; animation: none; }
  .kw-product:hover, .kw-reason:hover { transform: none; }
}
/* signed-out visitors: borrow .app-content only for its sidebar offset (collapsed + mobile aware) */
.kw-landing.kw-content { padding: 0; min-height: 100vh; }

/* ══ Vendor eligibility table (LandingPage component): Saudi / Non-Saudi tabs ══ */
.kl-elig-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.kl-landing .kl-elig-head h4 { margin: 0; }
.kl-elig-tabs { display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 5px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); }
.kl-elig-tabs .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 0; border-radius: var(--radius-pill); background: transparent; font-weight: 600; font-size: .875rem; color: var(--olive-700); white-space: nowrap; transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.kl-elig-tabs .nav-link:hover { background: var(--olive-100); }
.kl-elig-tabs .nav-link.active { background: var(--surface-brand); color: var(--sand-050); }
.kl-elig-tabs .nav-link:focus-visible { box-shadow: var(--shadow-gold-glow); outline: 0; }
.kl-elig-count { min-width: 22px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--olive-100); color: var(--olive-700); font-size: 12px; text-align: center; }
.kl-elig-tabs .active .kl-elig-count { background: rgba(250,248,244,.16); color: var(--gold-300); }
.kl-elig-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--kl-shadow-card, var(--shadow-sm)); overflow: hidden; }
.kl-elig-table { width: 100%; border-collapse: collapse; }
.kl-elig-table thead th { padding: 14px 16px; background: var(--surface-brand); color: var(--sand-050); font-size: .8125rem; font-weight: 600; text-align: start; vertical-align: bottom; line-height: 1.4; }
.kl-elig-table tbody :is(th, td) { padding: 16px; font-size: .9375rem; color: var(--text-secondary); text-align: start; border-top: 1px solid var(--border-subtle); vertical-align: middle; font-weight: 400; }
.kl-elig-table tbody tr:first-child :is(th, td) { border-top: 0; }
.kl-elig-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.kl-elig-table tbody tr:hover { background: var(--gold-100); }
.kl-elig-table td { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .kl-elig-table td { text-align: right; }
.kl-elig-sector { color: var(--olive-800) !important; font-weight: 700 !important; }
.kl-elig-sector::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 10px; border-radius: 50%; background: var(--gold-500); }
.kl-elig-pill { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--gold-100); border: 1px solid var(--gold-300); color: var(--gold-800); font-weight: 600; font-size: .875rem; }

@media (max-width: 767px) {
  .kl-elig-head { flex-direction: column; align-items: stretch; }
  .kl-elig-tabs { display: flex; }
  .kl-elig-tabs .nav-item { flex: 1; }
  .kl-elig-tabs .nav-link { width: 100%; justify-content: center; }
  .kl-elig-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .kl-elig-table thead { display: none; }
  .kl-elig-table, .kl-elig-table tbody, .kl-elig-table tr { display: block; width: 100%; }
  .kl-elig-table tbody tr { margin-bottom: 14px; padding: 6px 16px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--kl-shadow-card, var(--shadow-sm)); }
  .kl-elig-table tbody :is(th, td) { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border-subtle); }
  .kl-elig-table tbody :is(th, td):first-child { border-top: 0; }
  .kl-elig-table tbody :is(th, td)::before { content: attr(data-title); color: var(--text-muted); font-size: .8125rem; font-weight: 600; }
  .kl-elig-sector::before { margin: 0; width: auto; height: auto; border-radius: 0; background: none; color: var(--text-muted) !important; font-weight: 600; }
  .kl-elig-table td { white-space: normal; text-align: end; }
}

/* welcome panel on phones: Sign In / Sign Up sit side by side at equal width */
.kl-landing-auth { display: flex; gap: 12px; }
.kl-landing-auth .btn { flex: 1 1 0; margin: 0 !important; padding-inline: 12px !important; font-size: 1rem !important; }

/* ══ Profile (Settings/Profile) — presentation only; ids and profile.js hooks are untouched ══ */
#content:has(.kp-page) { background-color: var(--surface-page) !important; }
.kp-page { max-width: 1100px; }
.kp-page .kl-eyebrow-dark { margin: 4px 0 14px; }
.kp-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding: 24px; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--kl-shadow-card); }
.kp-hero-text { flex: 1; min-width: 0; }
.kp-hero-name { margin: 0 0 4px; font-size: 1.75rem; font-weight: var(--fw-light); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--olive-800); overflow-wrap: anywhere; }
.kp-hero-name-ar { margin: 0; font-size: 1.0625rem; color: var(--text-muted); }
html[lang="ar"] .kp-hero-name { line-height: var(--leading-display-ar); letter-spacing: 0; }
.kp-hero-id { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kp-card { border: 0; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--kl-shadow-card); overflow: hidden; }
.kp-body { padding: 8px 24px 12px; }
.kp-section-title { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 18px; padding: 16px 0 14px; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--olive-800); font-size: 1rem; font-weight: 700; }
.kp-section-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--gold-500); }
.kp-label { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.kp-value { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--olive-800); overflow-wrap: anywhere; }
.kp-page .kp-card .col-6 { padding-bottom: 4px; }
.kp-page .link-primary { color: var(--olive-700) !important; font-weight: 600; text-underline-offset: 3px; }
.kp-page .link-primary:hover { color: var(--gold-700) !important; }
.kp-page #addAddressForm .form-control { height: var(--control-h-md); border-radius: var(--radius-md); }
.kp-page #btnSave { height: 44px; padding-inline: 28px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); }
@media (max-width: 767px) {
  .kp-hero { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .kp-hero-id { flex-basis: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .kp-hero-name { font-size: 1.375rem; }
  .kp-body { padding: 4px 16px 8px; }
}

/* ══ Change password (Settings/ChangePassword) — presentation only ══ */
.kp-pw { max-width: 1000px; margin-inline: auto; }
.kp-pw .kl-eyebrow-dark { margin-bottom: 20px; }
.kp-pw-art { max-width: 340px; }
.kp-pw-body { padding: 32px; }
.kp-pw-title { margin: 0 0 12px; font-size: 1.5rem; font-weight: var(--fw-light); letter-spacing: var(--ls-tight); color: var(--olive-800); }
html[lang="ar"] .kp-pw-title { letter-spacing: 0; }
.kp-pw label { margin-bottom: 6px; font-size: 13px; }
.kp-pw .form-group { margin-bottom: 16px; }
.kp-pw .input-group { flex-wrap: nowrap; }
.kp-pw .input-group > .form-control:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.kp-pw .input-group > .input-group-append .input-group-text { height: 100%; min-width: 52px; justify-content: center; cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-sunken); color: var(--olive-600); transition: background-color var(--duration-fast) var(--ease-standard); }
[dir="rtl"] .kp-pw .input-group > .input-group-append .input-group-text { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.kp-pw .input-group > .input-group-append .input-group-text:hover { background: var(--olive-100); }
.kp-pw #btnSubmit { height: 46px; margin-top: 8px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); font-weight: 700; }
@media (max-width: 575px) { .kp-pw-body { padding: 22px 18px; } }

/* ══ Loan application (Loan/Apply) — presentation only; ids and applyLoan.js hooks are untouched ══ */
#content:has(.ka-page) { background-color: var(--surface-page) !important; }
.ka-page { max-width: 1180px; margin-inline: auto; }
.ka-page .kl-eyebrow-dark { margin: 4px 0 10px; }
.ka-title { margin: 0 0 12px; font-size: 1.75rem; font-weight: var(--fw-light); letter-spacing: var(--ls-tight); color: var(--olive-800); }
html[lang="ar"] .ka-title { letter-spacing: 0; }
.ka-key { background: var(--surface-card); border-radius: var(--radius-xl); padding: 28px 22px 14px; margin-bottom: 20px; box-shadow: var(--kl-shadow-card); position: relative; overflow: hidden; }
.ka-page .form-label { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--olive-800); }
.ka-page .form-control:not(.k-input), .ka-page .form-select { height: var(--control-h-md); border-radius: var(--radius-md); }
.ka-page .form-control:disabled { background: var(--surface-sunken); color: var(--text-muted); }
.ka-acc { border: 0 !important; border-radius: var(--radius-xl) !important; background: var(--surface-card); box-shadow: var(--kl-shadow-card); overflow: hidden; }
.ka-acc-btn { padding: 16px 22px; font-size: 1rem; font-weight: 700; color: var(--olive-800) !important; background: transparent !important; box-shadow: none !important; gap: 10px; }
.ka-acc-btn::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--gold-400); flex: none; }
.ka-acc-btn:not(.collapsed) { border-bottom: 1px solid var(--border-subtle); }
.ka-acc-body { padding: 14px 22px 10px; background: transparent; }
.ka-page .table thead.bg-primary { background: var(--olive-100) !important; }
.ka-page .table thead.bg-primary th { background: transparent; color: var(--olive-800); font-size: 12px; font-weight: 700; }
.ka-page .input-group > .btn-white { border: 1px solid var(--border-default, var(--border-subtle)); background: var(--surface-sunken); color: var(--olive-700); height: var(--control-h-md); min-width: 40px; }
.ka-page .form-check-input:checked { background-color: var(--olive-600); border-color: var(--olive-600); }
.ka-actions { margin-top: 8px; padding: 18px 22px; background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--kl-shadow-card); }
.ka-actions .btn { height: 46px; border-radius: var(--radius-pill); padding-inline: 28px; font-weight: 700; }
.ka-actions .btn-primary { box-shadow: var(--shadow-md); }
.ka-actions .col-md-6:last-child { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 767px) {
  .ka-key, .ka-acc-body, .ka-actions { padding-inline: 16px; }
  .ka-acc-btn { padding: 14px 16px; }
  .ka-actions .col-md-6:last-child { margin-top: 12px; justify-content: stretch; }
  .ka-actions .col-md-6:last-child .btn { flex: 1; }
  .ka-title { font-size: 1.5rem; }
}

/* Loan application — one control language: native, input-group and Kendo widgets share height, radius and focus */
.ka-page .input-group { flex-wrap: nowrap; }
.ka-page .input-group > .form-control { border-radius: var(--radius-md) !important; }
.ka-page .input-group > .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.ka-page .form-control:not(.k-input), .ka-page .form-select:not(.k-input) { border: 1px solid var(--border-default); background-color: var(--surface-card); padding-inline: 14px; box-shadow: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ka-page .form-control:hover:not(:focus):not(:disabled), .ka-page .form-select:hover:not(:focus):not(:disabled) { border-color: var(--olive-400); }
.ka-page .form-control:focus, .ka-page .form-select:focus { border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
/* Kendo ComboBox: the wrapper inherits .form-select, so make it the single bordered box and strip the inner one */
.ka-page .k-combobox, .ka-page .k-dropdownlist, .ka-page .k-datepicker, .ka-page .k-dropdown { display: flex; align-items: stretch; width: 100%; height: var(--control-h-md); padding: 0 !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; background: var(--surface-card) !important; background-image: none !important; box-shadow: none; overflow: hidden; }
.ka-page .k-combobox:hover, .ka-page .k-dropdownlist:hover, .ka-page .k-datepicker:hover { border-color: var(--olive-400) !important; }
.ka-page .k-combobox:focus-within, .ka-page .k-dropdownlist:focus-within, .ka-page .k-datepicker:focus-within, .ka-page .k-combobox.k-focus { border-color: var(--olive-700) !important; box-shadow: var(--shadow-gold-glow); }
.ka-page .k-combobox.k-invalid, .ka-page .k-combobox.k-invalid .k-input-inner { border-color: var(--bs-danger, #b3261e) !important; }
.ka-page .k-combobox .k-input-inner, .ka-page .k-combobox input.k-input, .ka-page .k-dropdownlist .k-input-inner, .ka-page .k-datepicker .k-input-inner { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 14px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--olive-900, var(--olive-800)); }
.ka-page .k-combobox .k-input-button, .ka-page .k-dropdownlist .k-input-button, .ka-page .k-datepicker .k-input-button { flex: none; width: 40px; height: 100%; border: 0 !important; border-radius: 0 !important; background: var(--surface-sunken) !important; color: var(--olive-700); }
.ka-page .k-combobox .k-input-button:hover, .ka-page .k-datepicker .k-input-button:hover { background: var(--olive-100) !important; }
.ka-page .k-combobox .k-input-inner::placeholder { color: var(--text-muted); }
.ka-page .form-control.k-input.k-upload, .ka-page .k-upload { border-radius: var(--radius-md); }
.ka-page #lblRange { font-size: 12px; color: var(--text-muted); }

/* Loan application — Back is a quiet outlined pill, Continue the filled primary */
.ka-actions #btnBack { display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; background: transparent; border: 1.5px solid var(--olive-700); color: var(--olive-800); box-shadow: none; }
.ka-actions #btnBack:hover { background: var(--olive-100); border-color: var(--olive-800); color: var(--olive-800); }
.ka-actions #btnBack:focus-visible { outline: 0; box-shadow: var(--shadow-gold-glow); }
.ka-actions #btnContinue { margin: 0 !important; }
.ka-actions #btnContinue:disabled { opacity: .45; box-shadow: none; }

/* Loan application popups — Kendo windows and dropdown lists are appended to <body>, so they are styled globally */
.k-overlay { background: var(--olive-900, #1f2418); opacity: .55; }
.k-window { border: 0; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-xl, 0 24px 60px rgba(31,36,24,.28)); overflow: hidden; max-width: calc(100vw - 24px); }
.k-window-titlebar { padding: 18px 22px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--border-subtle); color: var(--olive-800); }
.k-window-title { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 700; color: var(--olive-800); }
.k-window-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--gold-400); flex: none; }
.k-window-titlebar .k-window-action, .k-window-titlebar .k-button { border-radius: var(--radius-pill); color: var(--olive-700); background: transparent; border: 0; }
.k-window-titlebar .k-window-action:hover, .k-window-titlebar .k-button:hover { background: var(--olive-100); color: var(--olive-800); }
.k-window-content { padding: 20px 22px 22px; background: transparent; }
.k-window-content .form-label, .k-window-content label { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--olive-800); }
.k-window-content .k-textbox, .k-window-content .k-numerictextbox, .k-window-content .k-datepicker, .k-window-content .k-combobox, .k-window-content .k-dropdownlist, .k-window-content .form-select { display: flex; width: 100%; height: var(--control-h-md); border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; background: var(--surface-card) !important; background-image: none; box-shadow: none; overflow: hidden; }
.k-window-content :is(.k-textbox, .k-numerictextbox, .k-datepicker, .k-combobox, .k-dropdownlist):hover { border-color: var(--olive-400) !important; }
.k-window-content :is(.k-textbox, .k-numerictextbox, .k-datepicker, .k-combobox, .k-dropdownlist, .form-select):focus-within { border-color: var(--olive-700) !important; box-shadow: var(--shadow-gold-glow); }
.k-window-content :is(.k-textbox, .k-numerictextbox, .k-datepicker, .k-combobox, .k-dropdownlist) .k-input-inner { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 14px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.k-window-content .k-input-button, .k-window-content .k-spinner-increase, .k-window-content .k-spinner-decrease { border: 0 !important; border-radius: 0 !important; background: var(--surface-sunken) !important; color: var(--olive-700); }
.k-window-content .k-invalid { border-color: var(--bs-danger, #b3261e) !important; }
.k-window-content .k-form-error, .k-window-content .k-invalid-msg { display: block; margin-top: 4px; font-size: 12px; color: var(--bs-danger, #b3261e); }
.k-window-content .k-upload { border: 1.5px dashed var(--olive-300); border-radius: var(--radius-md); background: var(--surface-sunken); padding: 8px; }
.k-window-content .k-upload .k-upload-button { height: 36px; padding-inline: 18px; background: var(--olive-800); border-color: var(--olive-800); color: #fff; }
.k-window-content .k-upload .k-upload-button:hover { background: var(--olive-700); }
.k-window-content .k-upload-files { border: 0; }
.k-window-content .btn { height: 44px; border-radius: var(--radius-pill); padding-inline: 28px; font-weight: 700; }
.k-window-content .btn-warning, .k-window-content .btn-primary { background: var(--olive-800); border-color: var(--olive-800); color: #fff; box-shadow: var(--shadow-md); }
.k-window-content .btn-warning:hover, .k-window-content .btn-primary:hover { background: var(--olive-700); border-color: var(--olive-700); color: #fff; }
#employmentConsentWindow .modal-footer { padding: 14px 0 0; border: 0; justify-content: flex-end; }
#employmentConsentWindow hr { border-color: var(--border-subtle); opacity: 1; }
/* dropdown / combobox / datepicker popups */
.k-animation-container .k-popup { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-lg, 0 12px 32px rgba(31,36,24,.16)); overflow: hidden; }
.k-popup .k-list-item { padding: 10px 14px; color: var(--olive-800); }
.k-popup .k-list-item.k-selected { background: var(--olive-100); color: var(--olive-800); font-weight: 700; }
.k-popup .k-list-item.k-focus, .k-popup .k-list-item:hover { background: var(--olive-100); }
.k-popup .k-calendar .k-calendar-td.k-selected .k-link, .k-popup .k-calendar .k-selected .k-link { background: var(--olive-800); color: #fff; border-radius: var(--radius-sm); }
.k-popup .k-calendar .k-today .k-link { color: var(--gold-700); font-weight: 700; }
/* bootstrap consent modal */
#fullConsentModal .modal-content { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl, 0 24px 60px rgba(31,36,24,.28)); overflow: hidden; }
#fullConsentModal .modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-subtle); }
#fullConsentModal .modal-title { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 700; color: var(--olive-800); }
#fullConsentModal .modal-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--gold-400); flex: none; }
#fullConsentModal .modal-body { padding: 18px 22px; color: var(--text-secondary); }
#fullConsentModal .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border-subtle); }
#fullConsentModal .btn-primary { height: 44px; padding-inline: 28px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); font-weight: 700; }
@media (max-width: 575px) { .k-window { width: calc(100vw - 24px) !important; left: 12px !important; } .k-window-content { padding: 16px; } }

/* ══ Offer selection (Loan/OfferSelection) — presentation only; ids and offer.js hooks are untouched ══ */
#content:has(.ko-page) { background-color: var(--surface-page) !important; }
.ko-page { max-width: 1180px; margin-inline: auto; }
.ko-hero { padding: 26px 22px; margin-bottom: 16px; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--kl-shadow-card); position: relative; overflow: hidden; }
.ko-hero::before, .ka-key::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gold-400); }
.ko-hero .kl-eyebrow-dark { margin: 0 0 12px; justify-content: center; }
.ko-hero-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: 1.5rem; font-weight: var(--fw-light); color: var(--olive-800); letter-spacing: var(--ls-tight); }
html[lang="ar"] .ko-hero-title { letter-spacing: 0; }
.ko-amount { font-weight: 700; color: var(--gold-700); }
.ko-edit { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--olive-100); color: var(--olive-800); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.ko-edit:hover { background: var(--olive-800); color: #fff; }
.ko-note { padding: 14px 18px; margin-bottom: 18px; border-radius: var(--radius-lg); background: var(--olive-100); border-inline-start: 4px solid var(--gold-400); color: var(--olive-800); }
.ko-note ul { margin: 0 !important; display: grid; gap: 6px; }
.ko-note li { position: relative; padding-inline-start: 28px; line-height: 1.7; }

.ko-note i { position: absolute; inset-inline-start: 0; top: 5px; color: var(--gold-700) !important; }
.ko-section-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: 1.125rem; font-weight: 700; color: var(--olive-800); }
.ko-section-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--gold-400); }
.ko-promo { padding: 12px 18px; margin-bottom: 10px; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--olive-800), var(--olive-700)); color: var(--sand-050, #faf8f4); }
.ko-promo ul { margin: 0; }
.ko-promo-link { color: var(--gold-300, var(--gold-400)) !important; font-weight: 700; text-underline-offset: 3px; }
.ko-promo-link:hover { color: #fff !important; }
.ko-divider { flex: 0 0 auto; width: calc(100% - var(--bs-gutter-x, 1.5rem)); height: 1px; margin: 10px auto 4px; background: var(--border-subtle); }
/* offer cards */
.ko-page .row > [class*="col-lg-4"] { display: flex; }
.ko-page .row > [class*="col-lg-4"] > div:first-child { flex: 0 0 0; width: 0; }
.ko-page .row > [class*="col-lg-4"] > div:last-child { flex: 1 1 auto; min-width: 0; }
.ko-card { position: relative; border: 0; border-radius: 24px; background: var(--surface-card); box-shadow: var(--kl-shadow-card); overflow: hidden; cursor: pointer; transition: transform var(--duration-base, .2s) var(--ease-standard), box-shadow var(--duration-base, .2s) var(--ease-standard); }
.ko-card:hover { transform: translateY(-4px); box-shadow: var(--kl-shadow-lift); }
.ko-card-in { display: flex; flex-direction: column; padding: 0; background: transparent; }
/* header band */
.ko-card-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; margin: -0px; background: linear-gradient(135deg, var(--olive-800), var(--olive-700)); color: #fff; overflow: hidden; transition: background var(--duration-base, .2s) var(--ease-standard); }
.ko-card-head::after { content: ""; position: absolute; inset-inline-end: -28px; top: -40px; width: 120px; height: 120px; border-radius: 50%; border: 22px solid rgba(255,255,255,.07); pointer-events: none; }
.ko-tenure-wrap { display: flex; align-items: baseline; gap: 8px; }
.ko-tenure { margin: 0; font-size: 2.75rem; line-height: 1; font-weight: 300; letter-spacing: -.03em; color: #fff; }
.ko-tenure-unit { font-size: .9375rem; font-weight: 600; color: var(--gold-300, var(--gold-400)); text-transform: uppercase; letter-spacing: .08em; }
html[lang="ar"] .ko-tenure { letter-spacing: 0; } html[lang="ar"] .ko-tenure-unit { letter-spacing: 0; text-transform: none; }
/* custom round tick */
.ko-check { appearance: none; -webkit-appearance: none; position: relative; z-index: 1; flex: none; width: 30px; height: 30px; margin: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: transparent; cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); }
.ko-check::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 13px; border: solid var(--olive-900, #1f2418); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform var(--duration-fast) var(--ease-standard); }
.ko-check:checked { background: var(--gold-400); border-color: var(--gold-400); box-shadow: 0 0 0 5px rgba(212,175,95,.3); }
.ko-check:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.ko-check:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
.ko-main { padding: 0 0 8px; }
.ko-main > .ko-row { margin-inline: 24px; padding: 8px 0; }
.ko-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
html[lang="ar"] .ko-label { text-transform: none; letter-spacing: 0; }
.ko-pay { text-align: center; padding: 22px 0 18px; margin: 0 24px 10px; border-bottom: 1px solid var(--border-subtle); }
.ko-pay-value { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; color: var(--olive-800); }
.ko-pay-new { font-size: 2.125rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.ko-pay-old { font-size: .875rem; color: var(--text-muted); text-decoration: line-through; }
.ko-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.ko-row strong { font-size: 1rem; font-weight: 700; color: var(--olive-800); }
/* max eligibility footer with a usage meter */
.ko-max { margin-top: auto; padding: 16px 24px 20px; background: var(--surface-sunken); }
.ko-max .ko-row strong { font-size: .9375rem; font-weight: 600; color: var(--olive-700); }
.ko-max-label { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 700; color: var(--gold-700); text-transform: uppercase; letter-spacing: .08em; }
html[lang="ar"] .ko-max-label { text-transform: none; letter-spacing: 0; }
.ko-meter { height: 6px; margin-bottom: 12px; border-radius: 3px; background: var(--olive-100); overflow: hidden; }
.ko-meter span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-400), var(--gold-700)); }
html[dir="rtl"] .ko-meter span { margin-inline-start: auto; }
/* selected */
.ko-card:has(.chkOfferCard:checked) { box-shadow: 0 0 0 3px var(--gold-400), var(--kl-shadow-lift); transform: translateY(-4px); }
.ko-card:has(.chkOfferCard:checked) .ko-card-head { background: linear-gradient(135deg, var(--olive-900, #1f2418), var(--olive-800)); }
/* ineligible */
.ko-page .carddisable { opacity: .55; filter: grayscale(1); }
.ko-page .carddisable .ko-card { box-shadow: none; border: 1px dashed var(--olive-300); }
.ko-page .carddisable .ko-card-head { background: var(--olive-300); }
.ko-page .offer { inset-block-start: 6px; inset-inline-end: 6px; inset-inline-start: auto !important; z-index: 2; }
html[dir="rtl"] .ko-page .offer { left: auto !important; }
/* actions */
.ko-actions { margin-top: 16px; padding: 18px 12px; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--kl-shadow-card); align-items: center; }
.ko-actions .btn { height: 46px; border-radius: var(--radius-pill); padding-inline: 28px; font-weight: 700; }
.ko-actions .btn-primary { box-shadow: var(--shadow-md); }
.ko-actions .btn-primary:disabled { opacity: .45; box-shadow: none; }
@media (max-width: 575px) {
  .ko-hero-title { font-size: 1.25rem; }
  .ko-actions .col-6 { flex: 0 0 100%; justify-content: stretch !important; margin-bottom: 8px; }
  .ko-actions .col-6 .btn, .ko-actions .col-6 span { flex: 1; }
  .ko-actions .col-6:last-child { order: -1; }
}

/* ══ Loan status (stepper + stage summary) — shared by every loan step; markup hooks unchanged ══ */
.ks-stepper { overflow: visible; padding: 6px 0 4px; }
.ks-stepper .nav.nav-wizards-3 { display: flex; flex-wrap: nowrap; overflow: visible; margin: 0 0 14px !important; padding: 0; }
.ks-stepper .nav-item { position: relative; flex: 1 1 0; min-width: 0; padding: 0; text-align: center; }
.ks-stepper .nav-link { position: static; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 4px; pointer-events: none; background: transparent; }
.ks-stepper .nav-link::before, .ks-stepper .nav-link::after { content: none !important; display: none !important; }
.ks-stepper .nav.nav-wizards-3 .nav-item .nav-link .nav-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 !important; border-radius: 50%; border: 2px solid var(--olive-200, var(--border-default)); background: var(--surface-card); color: transparent; font-size: 15px; font-weight: 800; box-shadow: none !important; transition: all var(--duration-base, .2s) var(--ease-standard); }
.ks-stepper .nav.nav-wizards-3 .nav-item .nav-link .nav-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--olive-200, var(--border-default)); }
/* finished steps: olive disc with a tick */
.ks-stepper .nav.nav-wizards-3 .nav-item .nav-link.active .nav-dot { background: var(--olive-800); border-color: var(--olive-800); }
.ks-stepper .nav.nav-wizards-3 .nav-item .nav-link.active .nav-dot::before { width: 7px; height: 12px; margin-top: -3px; border-radius: 0; background: none; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* current step: the last active one — gold ring and a pulse dot instead of a tick */
.ks-stepper .nav.nav-wizards-3 .nav-item:not(:has(+ .nav-item .nav-link.active)) .nav-link.active .nav-dot { background: var(--surface-card); border-color: var(--olive-800); box-shadow: 0 0 0 5px rgba(212,175,95,.35) !important; }
.ks-stepper .nav.nav-wizards-3 .nav-item:not(:has(+ .nav-item .nav-link.active)) .nav-link.active .nav-dot::before { width: 12px; height: 12px; margin: 0; border: 0; border-radius: 50%; background: var(--olive-800); transform: none; }
.ks-stepper .nav-title { font-size: 13px; font-weight: 600; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
.ks-stepper .nav-link.active .nav-title { color: var(--olive-800); font-weight: 700; }
/* connectors between dots */
.ks-stepper .nav-item:not(:last-child)::after { content: ""; position: absolute; top: 16px; inset-inline-start: calc(50% + 24px); width: calc(100% - 48px); height: 2px; border-radius: 1px; background: var(--olive-100); }
.ks-stepper .nav-item:has(+ .nav-item .nav-link.active)::after { background: var(--olive-800); }
.ks-stepper .nav-item:has(.nav-link.active):not(:has(+ .nav-item .nav-link.active)):not(:last-child)::after { background: linear-gradient(90deg, var(--olive-800), var(--olive-100)); }
[dir="rtl"] .ks-stepper .nav-item:has(.nav-link.active):not(:has(+ .nav-item .nav-link.active)):not(:last-child)::after { background: linear-gradient(270deg, var(--olive-800), var(--olive-100)); }
@media (max-width: 575px) { .ks-stepper .nav-title { font-size: 11px; } .ks-stepper .nav.nav-wizards-3 .nav-item .nav-link .nav-dot { width: 28px; height: 28px; } .ks-stepper .nav-item:not(:last-child)::after { top: 13px; inset-inline-start: calc(50% + 20px); width: calc(100% - 40px); } }
/* stage summary */
.ks-summary { position: relative; margin-bottom: 8px; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--kl-shadow-card); overflow: hidden; }
.ks-summary::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, var(--gold-400), var(--gold-700)); }
.ks-body { padding: 14px 24px 6px; }
.ks-field { padding-block: 8px; }
.ks-field:not(:first-child) { border-inline-start: 1px solid var(--border-subtle); padding-inline-start: 22px; }
.ks-label { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; }
html[lang="ar"] .ks-label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ks-value { margin: 0; font-size: 1rem; font-weight: 700; color: var(--olive-800); overflow-wrap: anywhere; }
.ks-value a { color: var(--olive-700); text-underline-offset: 3px; }
.ks-stage { display: inline-flex; align-items: center; gap: 8px; }
.ks-stage::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(212,175,95,.25); }
@media (max-width: 767px) { .ks-body { padding: 10px 16px 2px; } .ks-field:not(:first-child) { border-inline-start: 0; padding-inline-start: calc(var(--bs-gutter-x, 1.5rem) * .5); } }

/* Offer selection modals — edit requested amount / reject comment */
:is(#changeAmountModal, #LoanRejectModal) .modal-content { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl, 0 24px 60px rgba(31,36,24,.28)); overflow: hidden; }
:is(#changeAmountModal, #LoanRejectModal) .modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-subtle); }
:is(#changeAmountModal, #LoanRejectModal) .modal-title { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 700; color: var(--olive-800); }
:is(#changeAmountModal, #LoanRejectModal) .modal-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--gold-400); flex: none; }
:is(#changeAmountModal, #LoanRejectModal) .btn-close { opacity: .6; border-radius: var(--radius-pill); }
:is(#changeAmountModal, #LoanRejectModal) .modal-body { padding: 20px 22px 8px; color: var(--text-secondary); }
:is(#changeAmountModal, #LoanRejectModal) .modal-footer { padding: 14px 22px 20px; border: 0; gap: 8px; justify-content: flex-end; }
:is(#changeAmountModal, #LoanRejectModal) .modal-footer .btn { height: 44px; margin: 0; padding-inline: 26px; border-radius: var(--radius-pill); font-weight: 700; }
:is(#changeAmountModal, #LoanRejectModal) .modal-footer .btn-primary { box-shadow: var(--shadow-md); }
.ko-modal-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--olive-800); }
#changeAmountModal .input-group { flex-wrap: nowrap; margin: 0 !important; }
#changeAmountModal #updatedAmount { height: 52px; padding-inline: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md) !important; font-size: 1.25rem; font-weight: 700; color: var(--olive-800); background: var(--surface-card); }
#changeAmountModal #updatedAmount:focus, .ko-textarea:focus { border-color: var(--olive-700); box-shadow: var(--shadow-gold-glow); }
#changeAmountModal #lblRange { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--gold-700); }
#changeAmountModal .modal-body > div[style] { text-align: start !important; }
.ko-textarea { min-height: 130px; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md) !important; background: var(--surface-card); resize: none; }
#LoanRejectModal .modal-footer { padding-inline: 0; }
#LoanRejectModal #commentsErrMessage { color: var(--bs-danger, #b3261e); font-size: 12px; }

/* Saudi Riyal symbol — per the official guideline it is set at the same size and weight as the numerals beside it,
   sitting on the same baseline with a small gap. Utility font-size classes (fs-10px, fs-13px …) must not shrink it. */
.icon-saudi_riyal, [class*="icon-saudi_riyal"] { font-size: 1em !important; font-weight: inherit; font-style: normal; line-height: 1; display: inline-block; vertical-align: -0.1em; margin-inline-end: .08em; text-decoration: none; }
.icon-saudi_riyal::before { font-size: inherit; }

/* ---- Offer decision (Loan/OfferDecision) ---- */
.kd-card { border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--kl-shadow-card); overflow: hidden; }
.kd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px; background: linear-gradient(135deg, var(--olive-800), var(--olive-700)); color: #fff; }
.kd-kicker { display: inline-block; margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300, var(--gold-400)); }
.kd-pay-label { font-size: 13px; opacity: .8; }
.kd-pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 4px; }
.kd-pay-new { font-size: 2.5rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.kd-pay-old { font-size: 1rem; opacity: .65; text-decoration: line-through; }
.kd-badge { width: 56px; flex: none; }
.kd-list { margin: 0; padding: 6px 28px; }
.kd-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--border-subtle); }
.kd-item:last-child { border-bottom: 0; }
.kd-item dt { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.kd-item dd { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--olive-800); text-align: end; }
.kd-strong { font-size: 1.25rem !important; font-weight: 800 !important; }
.kd-old { margin-inline-end: 10px; font-size: .875rem; font-weight: 400; color: var(--text-muted); text-decoration: line-through; }
.kd-consent { display: flex; flex-direction: column; gap: 10px; padding: 18px 28px 22px; background: var(--surface-sunken); }
.kd-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--olive-800); cursor: pointer; }
.kd-check .form-check-input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; float: none; cursor: pointer; }
@media (max-width: 575.98px) {
  .kd-head, .kd-list, .kd-consent { padding-inline: 18px; }
  .kd-pay-new { font-size: 2rem; }
  .ko-actions .btn { padding-inline: 18px; }
}

/* ---- Congratulations (Loan/Congratulations) ---- */
.kc-hero { position: relative; overflow: hidden; margin-bottom: 22px; padding: 36px 22px 28px; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--olive-800), var(--olive-700)); color: #fff; text-align: center; box-shadow: var(--kl-shadow-card); }
.kc-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gold-400); }
.kc-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: var(--gold-400); color: var(--olive-800); font-size: 1.6rem; box-shadow: 0 0 0 8px rgba(255,255,255,.12); }
.kc-title { margin: 0 0 6px; font-size: 1.75rem; font-weight: 700; color: #fff; }
.kc-sub { margin: 0; font-size: 1rem; opacity: .85; }
.kc-amount { margin: 10px 0 6px; font-size: 3rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--gold-300, var(--gold-400)); }
.kc-eligible { margin: 0 0 6px; font-size: 1rem; opacity: .9; }
.kc-appid { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 8px 8px 18px; border-radius: var(--radius-pill); background: rgba(255,255,255,.12); font-size: 13px; }
.kc-appid strong { padding: 5px 14px; border-radius: var(--radius-pill); background: #fff; color: var(--olive-800); font-size: 14px; letter-spacing: .04em; }
.kc-step-card { padding: 22px 24px; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--kl-shadow-card); }
.kc-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.kc-step-head img { width: 36px; height: 36px; }
.kc-step-head h5 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--olive-800); }
.kc-steps { margin: 0; padding: 0; list-style: none; counter-reset: kc; }
.kc-steps li { position: relative; margin-bottom: 12px; padding-inline-start: 40px; min-height: 28px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); counter-increment: kc; }
.kc-steps li:last-child { margin-bottom: 0; }
.kc-steps li::before { content: counter(kc); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--olive-100); color: var(--olive-800); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 575.98px) { .kc-amount { font-size: 2.25rem; } .kc-title { font-size: 1.4rem; } }