/* ============================================================
   KarmaOman Design System v1.0 — Single Source of Truth
   Brand Colors: Black #000000  /  Red Accent #C8102E  /  White #FFFFFF
   Font: Yekan (Local)
   ============================================================ */

/* ---------- 1. FONT FACE — Yekan (Local, No CDN) ---------- */
@font-face {
  font-family: 'Yekan';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Yekan-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Yekan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Yekan-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Yekan';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Yekan-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Yekan';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Yekan-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Yekan';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Yekan-Black.woff2') format('woff2');
}

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
  /* ===== BRAND ===== */
  --k-black:      #0B0F14;   /* Primary Brand (Premium Deep Black) */
  --k-black-2:    #111827;   /* Secondary Black for surfaces */
  --k-red:        #C8102E;   /* Accent Brand */
  --k-red-2:      #D7263D;   /* Accent hover */
  --k-red-hover:  #AA0D26;
  --k-white:      #FFFFFF;

  /* ===== NEUTRAL UI ===== */
  --k-bg:           #FFFFFF;
  --k-surface:      #F8F9FB;
  --k-surface-2:    #F1F3F6;
  --k-surface-3:    #E7EAEE;
  --k-border:       #E2E6EB;
  --k-border-2:     #CED3D9;

  --k-text:         #111827;   /* Primary Text */
  --k-text-2:       #4B5563;   /* Secondary Text */
  --k-text-muted:   #7C8594;   /* Muted Text */

  /* ===== SEMANTIC STATUS ===== */
  --k-success: #16A34A;
  --k-success-soft: rgba(22,163,74,.10);
  --k-warning: #D97706;
  --k-warning-soft: rgba(217,119,6,.12);
  --k-danger:  #DC2626;
  --k-danger-soft:  rgba(220,38,38,.10);
  --k-info:    #2563EB;
  --k-info-soft:    rgba(37,99,235,.10);
  --k-neutral: #64748B;
  --k-neutral-soft: rgba(100,116,139,.12);
  --k-indigo:  #4F46E5;
  --k-indigo-soft: rgba(79,70,229,.12);

  /* Accent Soft (brand red, low alpha) */
  --k-red-soft:    rgba(200,16,46,.08);
  --k-black-soft:  rgba(11,15,20,.05);

  /* ===== TYPOGRAPHY ===== */
  --k-font-sans: 'Yekan', Tahoma, Arial, sans-serif;
  --k-fs-h1: clamp(2rem, 3.4vw, 2.9rem);
  --k-fs-h2: clamp(1.6rem, 2.5vw, 2.2rem);
  --k-fs-h3: clamp(1.3rem, 2vw, 1.7rem);
  --k-fs-h4: clamp(1.1rem, 1.5vw, 1.35rem);
  --k-fs-body: 1rem;
  --k-fs-small: .88rem;
  --k-fs-caption: .78rem;
  --k-fs-xs: .72rem;
  --k-lh-tight: 1.25;
  --k-lh-snug:  1.55;
  --k-lh-relaxed: 1.85;

  /* ===== RADIUS ===== */
  --k-radius-xs: 4px;
  --k-radius-sm: 8px;
  --k-radius-md: 12px;
  --k-radius-lg: 18px;
  --k-radius-xl: 26px;
  --k-radius-pill: 999px;

  /* ===== SHADOWS — Minimal & Premium ===== */
  --k-shadow-xs: 0 1px 2px rgba(11,15,20,.05);
  --k-shadow-sm: 0 2px 10px rgba(11,15,20,.06);
  --k-shadow-md: 0 10px 28px rgba(11,15,20,.08);
  --k-shadow-lg: 0 22px 56px rgba(11,15,20,.10);
  --k-shadow-xl: 0 32px 80px rgba(11,15,20,.14);
  --k-shadow-focus: 0 0 0 3px rgba(200,16,46,.14);
  --k-shadow-focus-success: 0 0 0 3px rgba(22,163,74,.14);
  --k-shadow-focus-danger: 0 0 0 3px rgba(220,38,38,.14);

  /* ===== SPACING TOKENS ===== */
  --k-space-2xs: .25rem;
  --k-space-xs: .375rem;
  --k-space-sm: .75rem;
  --k-space-md: 1.25rem;
  --k-space-lg: 2.25rem;
  --k-space-xl: 3.75rem;
  --k-space-2xl: 5rem;
  --k-space-3xl: 6.5rem;
  --k-space-4xl: 8rem;

  /* ===== TRANSITION ===== */
  --k-tr-fast: 120ms cubic-bezier(.2,.7,.2,1);
  --k-tr-base: 240ms cubic-bezier(.2,.7,.2,1);
  --k-tr-slow: 420ms cubic-bezier(.2,.7,.2,1);

  /* ===== LAYOUT ===== */
  --k-header-h: 76px;
  --k-container-max: 1320px;
}

/* ---------- 3. GLOBAL RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: var(--k-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--k-lh-relaxed);
  background: var(--k-bg);
  color: var(--k-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  direction: rtl;
  -webkit-tap-highlight-color: rgba(200,16,46,0.10);
  scroll-behavior: smooth;
  word-break: keep-all;
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: normal;
}
body * {
  word-break: keep-all;
}
body .k-table thead th,
body .ka-table thead th {
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0;
}
body .k-table tbody .td-nowrap,
body .ka-table tbody .td-nowrap,
body .nowrap {
  white-space: nowrap;
}
::selection { background: rgba(200,16,46,0.14); color: var(--k-black); }
img { max-width: 100%; height: auto; display: block; }
hr { border-color: var(--k-border); }

/* ---------- 4. TYPOGRAPHY HIERARCHY ---------- */
.h1,.h2,.h3,.h4,.h5,.h6,
h1,h2,h3,h4,h5,h6 {
  font-family: var(--k-font-sans);
  color: var(--k-black);
  font-weight: 700;
  line-height: var(--k-lh-tight);
  margin: 0 0 .55em;
  letter-spacing: -.014em;
  position: relative;
}
h1,.h1 { font-size: var(--k-fs-h1); font-weight: 900; letter-spacing: -.022em; }
h2,.h2 { font-size: var(--k-fs-h2); font-weight: 800; letter-spacing: -.018em; }
h3,.h3 { font-size: var(--k-fs-h3); font-weight: 800; }
h4,.h4 { font-size: var(--k-fs-h4); font-weight: 700; }
h5,.h5 { font-size: 1.05rem; font-weight: 700; }
h6,.h6 { font-size: .95rem;  font-weight: 700; letter-spacing: 0; }

p       { margin: 0 0 1rem; color: var(--k-text-2); line-height: var(--k-lh-relaxed); }
.lead   { font-size: 1.15rem; color: var(--k-text); font-weight: 500; max-width: 62ch; line-height: 1.8; }
small, .small { font-size: var(--k-fs-small); color: var(--k-text-muted); font-weight: 500; }
.caption { font-size: var(--k-fs-caption); color: var(--k-text-muted); font-weight: 600; letter-spacing: .01em; }
.label,
.form-label {
  font-size: var(--k-fs-small);
  font-weight: 700;
  color: var(--k-black);
  display: inline-block;
  margin-bottom: .45rem;
  letter-spacing: .01em;
}
.text-strong { font-weight: 800; color: var(--k-black); }
.text-muted-custom { color: var(--k-text-muted) !important; }
.text-red-accent { color: var(--k-red) !important; }
.text-k-black   { color: var(--k-black) !important; }
.text-k-text    { color: var(--k-text) !important; }
.text-k-text-2  { color: var(--k-text-2) !important; }

/* ---------- 5. LINK SYSTEM ---------- */
a {
  color: var(--k-black);
  text-decoration: none;
  transition: color var(--k-tr-fast);
}
a:hover { color: var(--k-red); }
a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--k-shadow-focus); }

/* ---------- 6. BUTTON SYSTEM ---------- */
.btn {
  font-family: var(--k-font-sans);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
  padding: .68rem 1.4rem;
  border-radius: var(--k-radius-md);
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  transition: all var(--k-tr-base);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: .005em;
  position: relative;
  overflow: visible;
}
.btn i, .btn svg { vertical-align: -1px; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.995); }
.btn:focus-visible {
  outline: 0;
  box-shadow: var(--k-shadow-focus);
}
.btn:disabled, .btn.disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Primary — Black (Premium) */
.btn-k-primary {
  background: var(--k-black);
  color: var(--k-white);
  border-color: var(--k-black);
  box-shadow: var(--k-shadow-xs), inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn-k-primary:hover,
.btn-k-primary:focus {
  background: #1F2937;
  border-color: #1F2937;
  color: var(--k-white);
  box-shadow: var(--k-shadow-sm);
}
.btn-k-primary:active { background: #0B0F14; }

/* Accent — Red */
.btn-k-accent {
  background: linear-gradient(180deg, var(--k-red-2) 0%, var(--k-red) 100%);
  color: var(--k-white);
  border-color: var(--k-red);
  box-shadow: 0 4px 14px rgba(200,16,46,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}
.btn-k-accent:hover,
.btn-k-accent:focus {
  background: linear-gradient(180deg, #EB2941 0%, var(--k-red-hover) 100%);
  border-color: var(--k-red-hover);
  color: var(--k-white);
  box-shadow: 0 8px 24px rgba(200,16,46,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
  transform: translateY(-1.5px);
}
.btn-k-accent:active { background: var(--k-red); transform: translateY(0) scale(.995); }

/* Secondary — Light Gray Surface */
.btn-k-secondary {
  background: var(--k-white);
  color: var(--k-black);
  border-color: var(--k-border-2);
  box-shadow: var(--k-shadow-xs);
}
.btn-k-secondary:hover,
.btn-k-secondary:focus {
  background: var(--k-surface);
  border-color: var(--k-black);
  color: var(--k-black);
  box-shadow: var(--k-shadow-sm);
}

/* Outline — Transparent, Black Border */
.btn-k-outline {
  background: transparent;
  color: var(--k-black);
  border: 1.7px solid var(--k-black);
}
.btn-k-outline:hover,
.btn-k-outline:focus {
  background: var(--k-black);
  color: var(--k-white);
  border-color: var(--k-black);
  box-shadow: var(--k-shadow-sm);
}

/* Danger — Admin destructive actions */
.btn-k-danger {
  background: var(--k-danger);
  color: var(--k-white);
  border-color: var(--k-danger);
  box-shadow: 0 4px 12px rgba(220,38,38,0.18);
}
.btn-k-danger:hover,
.btn-k-danger:focus {
  background: #B91C1C;
  border-color: #B91C1C;
  color: var(--k-white);
  box-shadow: 0 6px 18px rgba(220,38,38,0.24);
}
.btn-k-danger:focus-visible { box-shadow: var(--k-shadow-focus-danger); }

/* Ghost — Text only, no border, no bg */
.btn-k-ghost {
  background: transparent;
  color: var(--k-text-2);
  border-color: transparent;
}
.btn-k-ghost:hover,
.btn-k-ghost:focus {
  background: var(--k-black-soft);
  color: var(--k-black);
}

/* Success (extra) */
.btn-k-success {
  background: var(--k-success);
  color: #fff;
  border-color: var(--k-success);
  box-shadow: 0 4px 12px rgba(22,163,74,0.22);
}
.btn-k-success:hover, .btn-k-success:focus {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
  box-shadow: 0 6px 18px rgba(22,163,74,0.28);
}
.btn-k-success:focus-visible { box-shadow: var(--k-shadow-focus-success); }

/* Size variants */
.btn-sm { padding: .42rem .95rem; font-size: .85rem; border-radius: var(--k-radius-sm); letter-spacing: 0; }
.btn-lg { padding: .9rem 1.9rem; font-size: 1.05rem; border-radius: var(--k-radius-lg); }
.btn-xl { padding: 1rem 2.2rem; font-size: 1.1rem; border-radius: var(--k-radius-lg); }
.btn-block { width: 100%; }

/* Loading state */
.btn.is-loading {
  pointer-events: none;
  opacity: .82;
}
.btn.is-loading::before {
  content: '';
  width: 1rem; height: 1rem;
  border: 2.2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: k-spin 650ms linear infinite;
  display: inline-block;
  vertical-align: -2px;
  margin-inline-end: .5rem;
}
@keyframes k-spin { to { transform: rotate(360deg); } }

/* ---------- 7. BADGE SYSTEM (Premium Micro-components) ---------- */
.k-badge {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .28rem .7rem;
  font-size: var(--k-fs-caption);
  font-weight: 700;
  border-radius: var(--k-radius-pill);
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.k-badge i { font-size: .78rem; line-height: 1; }
.k-badge::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
  margin-inline-end: .22rem;
}
.k-badge-no-dot::before { display: none; }
.k-badge-red     { background: var(--k-red-soft);    color: var(--k-red);     border-color: rgba(200,16,46,0.18); }
.k-badge-black   { background: var(--k-black);       color: var(--k-white);   border-color: var(--k-black); }
.k-badge-black::before { background: var(--k-red); }
.k-badge-outline { border: 1.3px solid var(--k-border-2); color: var(--k-text-2); background: #fff; }
.k-badge-success { background: var(--k-success-soft); color: var(--k-success); border-color: rgba(22,163,74,0.18); }
.k-badge-warning { background: var(--k-warning-soft); color: var(--k-warning); border-color: rgba(217,119,6,0.20); }
.k-badge-danger  { background: var(--k-danger-soft);  color: var(--k-danger);  border-color: rgba(220,38,38,0.18); }
.k-badge-info    { background: var(--k-info-soft);    color: var(--k-info);    border-color: rgba(37,99,235,0.18); }
.k-badge-neutral { background: var(--k-neutral-soft); color: var(--k-neutral); border-color: rgba(100,116,139,0.18); }
.k-badge-indigo  { background: var(--k-indigo-soft);  color: var(--k-indigo);  border-color: rgba(79,70,229,0.18); }

/* ---------- 8. CARD SYSTEM — Premium, Minimal, Clean ---------- */
.k-card {
  background: var(--k-white);
  border: 1.3px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-xs);
  transition: all var(--k-tr-base);
  overflow: hidden;
  position: relative;
  padding: 1.75rem 1.85rem;
}
.k-card.p-0,
.k-card.has-hero-media {
  padding: 0;
}
.k-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 30%);
  opacity: 0.4;
}
.k-card > * { position: relative; z-index: 1; }
.k-card:hover {
  box-shadow: var(--k-shadow-md);
  border-color: #D5D9DF;
  transform: translateY(-2.5px);
}
.k-card-header {
  padding: 1.35rem 1.6rem;
  border-bottom: 1px solid var(--k-border);
  background: linear-gradient(180deg, var(--k-surface) 0%, #ffffff 100%);
}
.k-card-body { padding: 1.65rem; }
.k-card-footer {
  padding: 1.1rem 1.6rem;
  border-top: 1px solid var(--k-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--k-surface) 100%);
}

/* Section Title (for page headers) */
.k-section-head {
  margin-bottom: 2.3rem;
  position: relative;
}
.k-section-head .k-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--k-fs-small);
  font-weight: 800;
  color: var(--k-red);
  letter-spacing: .08em;
  margin-bottom: .6rem;
  text-transform: uppercase;
}
.k-section-head .k-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--k-red);
  border-radius: 2px;
  margin-inline-end: .2rem;
}
.k-section-head h2 {
  margin-bottom: .5rem;
}
.k-section-head p {
  margin: 0;
  max-width: 64ch;
  line-height: 1.9;
  color: var(--k-text-2);
}
.k-section-head-center { text-align: center; }
.k-section-head-center .k-eyebrow::after { margin-inline-start: .2rem; }
.k-section-head-center .k-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--k-red);
  border-radius: 2px;
}
.k-section-head-center p { margin-inline: auto; }

/* ---------- 9. FORM & INPUT SYSTEM ---------- */
.k-form .row { --bs-gutter-y: 1.1rem; }
.k-form > .row > [class*="col-"] + [class*="col-"] { margin-top: 0; }

.form-control,
.form-select,
.form-textarea,
textarea.k-input,
input[type="text"].k-input,
input[type="email"].k-input,
input[type="password"].k-input,
input[type="number"].k-input,
input[type="tel"].k-input,
input[type="url"].k-input,
input[type="date"].k-input,
input[type="search"].k-input,
select.k-input {
  font-family: var(--k-font-sans);
  font-size: .96rem;
  color: var(--k-text);
  background: var(--k-white);
  border: 1.5px solid var(--k-border);
  border-radius: var(--k-radius-md);
  padding: .85rem 1.05rem;
  line-height: 1.65;
  transition: all var(--k-tr-fast);
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(11,15,20,0.03);
  appearance: none;
  -webkit-appearance: none;
}
.form-control::placeholder,
.k-input::placeholder {
  color: #9BA3AF;
  font-weight: 500;
}
.form-control:hover,
.form-select:hover,
.k-input:hover { border-color: #C8CED6; box-shadow: inset 0 1px 2px rgba(11,15,20,0.05); }

.form-control:focus,
.form-select:focus,
.k-input:focus {
  border-color: var(--k-red);
  background: var(--k-white);
  box-shadow: var(--k-shadow-focus), inset 0 1px 2px rgba(200,16,46,0.04);
  outline: 0;
  color: var(--k-black);
}

.form-control:disabled,
.form-select:disabled,
.k-input:disabled,
.k-input[readonly] {
  background: var(--k-surface);
  color: var(--k-text-muted);
  cursor: not-allowed;
  border-color: var(--k-border);
  box-shadow: none;
}

/* Select custom arrow */
.form-select, select.k-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237C8594' viewBox='0 0 16 16'%3E%3Cpath d='M8 10.5 3 5.5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 14px;
  padding-left: 2.75rem !important;
}

/* Error state */
.invalid-feedback,
.k-form-error {
  font-size: var(--k-fs-small);
  color: var(--k-danger);
  font-weight: 600;
  margin-top: .35rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  line-height: 1.6;
}
.invalid-feedback::before,
.k-form-error::before {
  content: '!';
  display: inline-flex;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--k-danger);
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  align-items: center;
  justify-content: center;
  line-height: 14px;
  flex-shrink: 0;
  font-family: monospace;
}
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.k-input.is-invalid {
  border-color: var(--k-danger);
  background: rgba(220,38,38,.025);
  box-shadow: inset 0 1px 2px rgba(220,38,38,0.06);
}
.is-invalid:focus {
  box-shadow: var(--k-shadow-focus-danger), inset 0 1px 2px rgba(220,38,38,0.06);
}

/* Valid state */
.is-valid,
.form-control.is-valid {
  border-color: var(--k-success);
  background: rgba(22,163,74,0.02);
}
.is-valid:focus { box-shadow: var(--k-shadow-focus-success); }

/* Helper text under form fields */
.form-text, .k-form-hint {
  font-size: var(--k-fs-caption);
  color: var(--k-text-muted);
  margin-top: .35rem;
  line-height: 1.7;
  font-weight: 500;
}

/* Checkbox & Radio */
.form-check { padding-inline-start: 0; margin-bottom: .65rem; display: flex; align-items: center; gap: .6rem; }
.form-check .form-check-input {
  float: none;
  margin: 0;
  width: 1.18rem; height: 1.18rem;
  vertical-align: -3px;
  cursor: pointer;
  border-radius: var(--k-radius-xs);
  border: 1.5px solid var(--k-border-2);
  background-color: #fff;
  transition: all var(--k-tr-fast);
  flex-shrink: 0;
}
.form-check input[type=radio].form-check-input { border-radius: 50%; }
.form-check .form-check-input:checked {
  background-color: var(--k-red);
  border-color: var(--k-red);
}
.form-check .form-check-input:focus {
  box-shadow: var(--k-shadow-focus);
  border-color: var(--k-red);
}
.form-check-label {
  font-weight: 600;
  color: var(--k-text);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.6;
}
.form-check-inline { display: inline-flex; margin-inline-start: .75rem; margin-bottom: 0; }

/* File upload styling */
.input-group > .form-control,
.input-group > .form-select { border-radius: 0 var(--k-radius-md) var(--k-radius-md) 0; }
.input-group-text {
  background: var(--k-surface);
  border: 1.5px solid var(--k-border);
  color: var(--k-text-2);
  font-weight: 700;
  border-radius: var(--k-radius-md) 0 0 var(--k-radius-md);
  padding: .72rem 1rem;
  font-size: .95rem;
  gap: .4rem;
}
.input-group-text i { color: var(--k-red); }

/* Form Sections — for large Admin forms */
.k-form-section {
  background: var(--k-white);
  border: 1.3px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  padding: 1.7rem;
  margin-bottom: 1.3rem;
  box-shadow: var(--k-shadow-xs);
  position: relative;
}
.k-form-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 1.7rem; left: 1.7rem;
  height: 2px;
  background: linear-gradient(90deg, var(--k-red) 0%, transparent 100%);
  border-radius: 0 0 var(--k-radius-md) var(--k-radius-md);
  opacity: .18;
}
.k-form-section-title {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--k-black);
  margin: 0 0 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--k-border);
  letter-spacing: .01em;
}
.k-form-section-title .sec-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-red-soft);
  color: var(--k-red);
  border-radius: var(--k-radius-sm);
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ---------- 10. VEHICLE CARD — Core component Premium ---------- */
.k-vehicle-card {
  background: var(--k-white);
  border: 1.3px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  transition: all var(--k-tr-base);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--k-shadow-xs);
  position: relative;
}
.k-vehicle-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(200,16,46,0.05) 0%, transparent 100%);
  pointer-events: none;
}
.k-vehicle-card > * { position: relative; z-index: 1; }
.k-vehicle-card:hover {
  box-shadow: var(--k-shadow-md);
  border-color: #D5D9DF;
  transform: translateY(-3.5px);
}
.k-vc-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--k-surface-2);
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--k-surface) 0%, var(--k-surface-2) 100%);
}
.k-vc-media > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  display: block;
}
.k-vehicle-card:hover .k-vc-media > img { transform: scale(1.05); }
.k-vc-media .vc-ribbon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
}
.k-vc-media .vc-badge-left {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 3;
}
.k-vc-badges {
  position: absolute;
  inset: .85rem .85rem auto auto;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  z-index: 4;
  max-width: calc(100% - 1.7rem);
}
.k-vc-body {
  padding: 1.1rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1 1 auto;
}
.k-vc-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
}
.k-vc-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--k-black);
  margin: 0;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.k-vc-loc {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: var(--k-fs-small);
  color: var(--k-text-muted);
  font-weight: 500;
}
.k-vc-loc i { color: var(--k-red); font-size: .86rem; }
.k-vc-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: .6rem .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, var(--k-surface) 0%, var(--k-surface-2) 100%);
  border-radius: var(--k-radius-sm);
  margin: .1rem 0 .15rem;
  border: 1px solid var(--k-border);
}
.k-vc-spec,
.k-vc-specs > div {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--k-fs-caption);
  color: var(--k-text-2);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  min-width: 0;
}
.k-vc-spec i,
.k-vc-specs > div i { color: var(--k-text-muted); font-size: .84rem; flex-shrink: 0; }
.k-vc-spec span,
.k-vc-specs > div span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.k-vc-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .7rem;
  padding-top: .65rem;
  margin-top: auto;
  border-top: 1.5px dashed var(--k-border);
}
.k-vc-price .amount {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--k-red);
  letter-spacing: -.01em;
  position: relative;
}
.k-vc-price .amount .currency {
  font-size: .78rem;
  font-weight: 600;
  color: var(--k-text-muted);
  margin-inline-start: .3rem;
}
.k-vc-price .price-label {
  font-size: var(--k-fs-xs);
  color: var(--k-text-muted);
  font-weight: 700;
  letter-spacing: .06em;
}
.k-vc-cta {
  padding: 0 1.2rem 1.25rem;
  display: flex;
  gap: .5rem;
}
.k-vc-cta .btn { flex: 1; }

/* Placeholder image fallback */
.k-img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--k-text-muted);
  background:
    repeating-linear-gradient(45deg, var(--k-surface) 0 12px, var(--k-surface-2) 12px 24px);
}
.k-img-placeholder i { font-size: 2.6rem; opacity: .5; }
.k-img-placeholder span { font-weight: 600; font-size: var(--k-fs-small); opacity: .7; }

/* ---------- 11. SECTION WRAPPERS ---------- */
.k-section { padding: var(--k-space-2xl) 0; position: relative; }
.k-section-sm { padding: var(--k-space-lg) 0; }
.k-section-surface { background: var(--k-surface); }
.k-section-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(200,16,46,0.045) 0%, transparent 46%),
    radial-gradient(circle at 88% 82%, rgba(37,99,235,0.035) 0%, transparent 46%);
  pointer-events: none;
}
.k-section-dark {
  background: var(--k-black);
  color: #fff;
}
.k-section-dark h1, .k-section-dark h2, .k-section-dark h3, .k-section-dark h4 { color: #fff; }
.k-section-dark p { color: rgba(255,255,255,0.72); }
.k-section-gradient {
  background:
    radial-gradient(ellipse at top right, rgba(200,16,46,0.10), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(11,15,20,0.04), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--k-surface) 100%);
}
.k-section-title-underline {
  width: 44px;
  height: 3px;
  background: var(--k-red);
  border-radius: var(--k-radius-pill);
  display: block;
  margin: -1.4rem auto 2.1rem;
}

/* ---------- 12. UTILITIES ---------- */
.k-divider {
  height: 1px; background: var(--k-border);
  margin: var(--k-space-md) 0;
  border: 0;
}
.k-divider-dashed {
  height: 0;
  border-top: 1.5px dashed var(--k-border);
  margin: var(--k-space-md) 0;
}
.k-accent-line {
  width: 44px; height: 3.5px;
  background: var(--k-red);
  border-radius: var(--k-radius-pill);
  display: inline-block;
  margin-bottom: .85rem;
  position: relative;
  overflow: hidden;
}
.k-accent-line::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--k-red-2));
}
.truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncate-2, .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.65;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.7;
}
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Container max-width lock */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: var(--k-container-max) !important;
}

/* ---------- 13. RESPONSIVE BREAKPOINT HELPERS ---------- */
@media (max-width: 1199.98px) {
  .k-section { padding: var(--k-space-xl) 0; }
  .k-vc-price .amount { font-size: 1.2rem; }
}
@media (max-width: 991.98px) {
  .k-section { padding: var(--k-space-3xl, 6rem) 0; }
  .k-section-head h2 { font-size: 1.8rem; }
  .k-vc-specs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem .65rem; padding: .8rem .9rem; }
  .k-card-body, .k-form-section { padding: 1.25rem; }
  .btn-lg { padding: .75rem 1.4rem; font-size: 1rem; }
}
@media (max-width: 767.98px) {
  html, body { font-size: 15.5px; }
  .k-section { padding: var(--k-space-lg) 0; }
  .k-vc-specs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem .6rem; padding: .75rem .85rem; }
  .k-card-body, .k-form-section, .k-card-header, .k-card-footer { padding: 1.1rem; }
  .k-card-header { padding: 1.1rem 1.2rem; }
  .k-card-footer { padding: .9rem 1.2rem; }
  .btn-lg { padding: .7rem 1.25rem; }
  .k-section-head { margin-bottom: 1.7rem; }
  .k-form-section { padding: 1.2rem; }
}
@media (max-width: 575.98px) {
  html, body { font-size: 15px; }
  .k-section { padding: 2rem 0; }
  .k-vc-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .5rem; padding: .7rem; }
  .k-vc-spec,
  .k-vc-specs > div { font-size: .78rem; gap: .3rem; }
  .k-vc-title { font-size: 1rem; }
  .k-vc-price .amount { font-size: 1.15rem; }
  .k-section-title-underline { margin-top: -1.1rem; margin-bottom: 1.6rem; }
  h1, .h1 { letter-spacing: -.012em; }
  .k-badge { padding: .24rem .6rem; font-size: var(--k-fs-xs); }
}

/* ---------- 14. VEHICLE DETAIL GALLERY ---------- */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: .75rem;
}
.gallery-thumbs .vc-thumb {
  cursor: pointer;
  transition: transform var(--k-tr-base), box-shadow var(--k-tr-base), border-color var(--k-tr-base), opacity var(--k-tr-fast);
  outline: none;
  border-radius: var(--k-radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--k-surface);
  aspect-ratio: 4 / 3;
}
.gallery-thumbs .vc-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: transform var(--k-tr-base);
}
.gallery-thumbs .vc-thumb:hover img { transform: scale(1.03); }
.gallery-thumbs .vc-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(11,15,20,0.10);
  border-color: var(--k-border-2);
}
.gallery-thumbs .vc-thumb.is-active {
  border-color: var(--k-red);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.18), 0 4px 14px rgba(200,16,46,0.16);
}
.gallery-thumbs .vc-thumb:focus-visible {
  border-color: var(--k-red) !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,0.22);
}
.vc-gallery-btn {
  transition: background var(--k-tr-fast), transform var(--k-tr-base), opacity var(--k-tr-fast);
  cursor: pointer;
  outline: none;
  background: var(--k-black);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(11,15,20,0.22);
}
.vc-gallery-btn:hover {
  background: var(--k-red) !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(200,16,46,0.30);
}
.vc-gallery-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(200,16,46,0.24), 0 8px 24px rgba(11,15,20,0.22);
}
.vc-gallery-main {
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  border: 1.3px solid var(--k-border);
  box-shadow: var(--k-shadow-xs);
  background: var(--k-surface-2);
  aspect-ratio: 16 / 10;
  position: relative;
}
.vc-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--k-tr-base); }
.vc-gallery-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,15,20,0) 60%, rgba(11,15,20,0.10) 100%);
  pointer-events: none;
}

/* ---------- 15. HELPER / UTILITY CLASSES ---------- */
.space-y-1 > * + * { margin-top: .3rem; }
.space-y-2 > * + * { margin-top: .6rem; }
.space-y-3 > * + * { margin-top: 1rem; }
.space-y-4 > * + * { margin-top: 1.5rem; }
.space-y-5 > * + * { margin-top: 2rem; }
.space-x-1 > * + * { margin-inline-start: .3rem; }
.space-x-2 > * + * { margin-inline-start: .6rem; }
.space-x-3 > * + * { margin-inline-start: 1rem; }
.space-x-4 > * + * { margin-inline-start: 1.5rem; }

.mt-05 { margin-top: 0.25rem !important; }
.w-35  { width: 35% !important; }
.min-h-240 { min-height: 240px; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.lh-13 { line-height: 1.3 !important; }
.lh-15 { line-height: 1.5 !important; }
.lh-20 { line-height: 2 !important; }
.p-lg-6 { padding: 3rem !important; }
.rounded-k-sm { border-radius: var(--k-radius-sm) !important; }
.rounded-k-md { border-radius: var(--k-radius-md) !important; }
.rounded-k-lg { border-radius: var(--k-radius-lg) !important; }
.rounded-k-xl { border-radius: var(--k-radius-xl) !important; }
.shadow-k-sm { box-shadow: var(--k-shadow-sm) !important; }
.shadow-k-md { box-shadow: var(--k-shadow-md) !important; }
.shadow-k-lg { box-shadow: var(--k-shadow-lg) !important; }

.max-width-40ch { max-width: 40ch; }
.max-width-50ch { max-width: 50ch; }
.max-width-60ch { max-width: 60ch; }
.max-width-70ch { max-width: 70ch; }

.btn-block { width: 100% !important; display: inline-flex; justify-content: center; align-items: center; }

/* Utility colors / surfaces */
.k-red-soft      { background: var(--k-red-soft); }
.k-black-soft    { background: var(--k-black-soft); }
.k-success-soft  { background: var(--k-success-soft); }
.k-info-soft     { background: var(--k-info-soft); }
.k-success       { color: var(--k-success); }
.k-red           { color: var(--k-red); }
.k-info          { color: var(--k-info); }
.k-warning       { color: var(--k-warning); }

.status-available   { color: #15803D; border-color: rgba(22,163,74,0.45) !important; background: var(--k-success-soft); }
.status-reserved    { color: #B45309; border-color: rgba(217,119,6,0.45) !important; background: var(--k-warning-soft); }
.status-sold        { color: #1D4ED8; border-color: rgba(37,99,235,0.45) !important; background: var(--k-info-soft); }
.status-maintenance { color: #B91C1C; border-color: rgba(220,38,38,0.45) !important; background: var(--k-danger-soft); }
.status-inactive    { color: #475569; border-color: rgba(100,116,139,0.45) !important; background: var(--k-neutral-soft); }

/* ---------- 16. EMPTY / LOADING / ERROR STATES ---------- */
.k-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
  gap: 1rem;
  border: 2px dashed var(--k-border);
  border-radius: var(--k-radius-lg);
  background: linear-gradient(180deg, #fff 0%, var(--k-surface) 100%);
}
.k-empty-state .es-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--k-surface-2);
  color: var(--k-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: .25rem;
  border: 1.5px dashed var(--k-border-2);
  box-shadow: inset 0 2px 8px rgba(11,15,20,0.03);
}
.k-empty-state h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--k-black);
}
.k-empty-state p {
  max-width: 52ch;
  margin: 0;
  color: var(--k-text-muted);
  font-size: .95rem;
  line-height: 1.9;
}
.k-empty-state .es-actions {
  margin-top: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

/* Skeleton / Loading pulse */
.k-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--k-surface);
  border-radius: var(--k-radius-sm);
}
.k-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: k-skeleton 1.4s ease-in-out infinite;
}
@keyframes k-skeleton { to { transform: translateX(100%); } }

/* Alert / Flash polish */
.k-alert, .flash {
  padding: 1.05rem 1.2rem 1.05rem 1.2rem;
  border-radius: var(--k-radius-md);
  margin: 1rem 0;
  border: 1.3px solid transparent;
  font-weight: 600;
  font-size: .94rem;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  position: relative;
}
.k-alert .ka-icon,
.flash .flash-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.6;
}
.k-alert-success, .flash-success {
  background: linear-gradient(180deg, #F0FDF4 0%, #ECFDF5 100%);
  color: #14532d;
  border-color: #86EFAC;
}
.k-alert-success .ka-icon, .flash-success .flash-icon { color: var(--k-success); }
.k-alert-error, .flash-error {
  background: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%);
  color: #7F1D1D;
  border-color: #FCA5A5;
}
.k-alert-error .ka-icon, .flash-error .flash-icon { color: var(--k-danger); }
.k-alert-info, .flash-info {
  background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
  color: #1E3A8A;
  border-color: #93C5FD;
}
.k-alert-info .ka-icon, .flash-info .flash-icon { color: var(--k-info); }
.k-alert-warning, .flash-warning {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  color: #78350F;
  border-color: #FCD34D;
}
.k-alert-warning .ka-icon, .flash-warning .flash-icon { color: var(--k-warning); }
.k-alert .ka-content, .flash .flash-content { flex: 1; }
.k-alert .ka-close-btn,
.flash .flash-close {
  border: 0; background: transparent; color: currentColor;
  opacity: .55; cursor: pointer; padding: 0 .25rem; border-radius: 4px;
  transition: opacity var(--k-tr-fast), background var(--k-tr-fast);
  flex-shrink: 0;
  line-height: 1;
}
.k-alert .ka-close-btn:hover,
.flash .flash-close:hover { opacity: 1; background: rgba(11,15,20,0.05); }

/* ---------- 17. TABLES Premium ---------- */
.k-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  border: 1.3px solid var(--k-border);
  box-shadow: var(--k-shadow-xs);
}
.k-table thead th {
  background: linear-gradient(180deg, var(--k-surface) 0%, #fff 100%);
  padding: 1rem 1.3rem;
  font-size: var(--k-fs-small);
  font-weight: 800;
  color: var(--k-text-2);
  border-bottom: 1.5px solid var(--k-border);
  white-space: nowrap;
  letter-spacing: .02em;
  text-transform: none;
  text-align: right;
}
.k-table tbody td {
  padding: 1.05rem 1.3rem;
  font-size: .94rem;
  border-bottom: 1px solid var(--k-surface-2);
  vertical-align: middle;
  color: var(--k-text);
  text-align: right;
}
.k-table tbody tr:last-child td { border-bottom: none; }
.k-table tbody tr { transition: background var(--k-tr-fast); }
.k-table tbody tr:hover { background: linear-gradient(180deg, rgba(248,249,251,0.9) 0%, rgba(241,243,246,0.6) 100%); }
.k-table .td-monospace { font-family: 'Consolas', 'Courier New', monospace; font-weight: 700; font-size: .82rem; color: var(--k-text-muted); }
.k-table .td-strong { font-weight: 800; color: var(--k-black); }
.k-table .td-muted  { color: var(--k-text-muted); font-size: .86rem; font-weight: 500; }
.k-table .td-nowrap { white-space: nowrap; }
.k-table .td-avatar {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.k-table .td-avatar .avatar-sm {
  width: 36px; height: 36px;
  border-radius: var(--k-radius-sm);
  background: var(--k-black);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
  box-shadow: var(--k-shadow-xs);
}
.k-table .td-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.k-table .td-actions .btn-sm { padding: .35rem .6rem; font-size: .8rem; }
@media (max-width: 767.98px) {
  .k-table thead th { padding: .8rem 1rem; font-size: var(--k-fs-caption); }
  .k-table tbody td { padding: .85rem 1rem; font-size: .9rem; }
}

/* ---------- 18. BREADCRUMB Premium ---------- */
.breadcrumb {
  background: linear-gradient(180deg, var(--k-white) 0%, var(--k-surface) 100%);
  border: 1.3px solid var(--k-border);
  padding: .85rem 1.1rem;
  border-radius: var(--k-radius-md);
  font-size: .9rem;
  box-shadow: var(--k-shadow-xs);
  list-style: none;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.breadcrumb > li { display: inline-flex; align-items: center; }
.breadcrumb a { color: var(--k-text-2); font-weight: 600; transition: color var(--k-tr-fast); }
.breadcrumb a:hover { color: var(--k-red); }
.breadcrumb > li:not(:last-child)::after {
  content: '\2039';
  margin: 0 .55rem;
  color: var(--k-text-muted);
  font-size: 1rem;
  font-weight: 700;
}
.breadcrumb .active { color: var(--k-black); font-weight: 800; }
.breadcrumb .active::after { display: none; }

/* ---------- 19. PAGE TITLE BAR ---------- */
.page-title-bar {
  padding: 3.7rem 0 2.2rem;
  border-bottom: 1.3px solid var(--k-border);
  margin-bottom: 2.4rem;
  position: relative;
  background:
    linear-gradient(180deg, rgba(200,16,46,0.03) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--k-bg) 100%);
}
.page-title-bar::after {
  content: '';
  position: absolute;
  bottom: -1px; right: 0;
  width: 30%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--k-red));
  border-radius: 3px 0 0 3px;
  opacity: .6;
}
.page-title-bar .container { position: relative; }
.page-title-bar .page-title {
  font-size: 2.1rem;
  font-weight: 900;
  margin: 0 0 .5rem;
  letter-spacing: -.02em;
  color: var(--k-black);
  line-height: 1.2;
}
.page-title-bar .page-sub {
  color: var(--k-text-muted);
  margin: 0;
  max-width: 60ch;
  line-height: 1.9;
  font-size: 1rem;
  font-weight: 500;
}
.page-title-bar .ptb-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
@media (max-width: 767.98px) {
  .page-title-bar { padding: 2.3rem 0 1.5rem; margin-bottom: 1.5rem; }
  .page-title-bar .page-title { font-size: 1.5rem; }
}

/* ---------- 20. SCROLL REVEAL / PREMIUM SUBTLE ANIM (DISABLED — minimality) ---------- */
/* No extra animations. Keep minimal & premium. No over-motion. */

/* ---------- 21. GALLERY RESPONSIVE ---------- */
@media (max-width: 1199.98px) {
  .gallery-thumbs { grid-template-columns: repeat(5, 1fr); gap: 0.45rem; }
}
@media (max-width: 991.98px) {
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
  .p-lg-6 { padding: 2rem !important; }
}
@media (max-width: 767.98px) {
  .gallery-thumbs { grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
  .p-lg-6 { padding: 1.5rem !important; }
  .vc-gallery-btn { width: 36px; height: 36px; }
}
@media (max-width: 575.98px) {
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
}

/* ---------- 22. BLOG POST CARD Premium ---------- */
.k-blog-card {
  background: #fff;
  border: 1.3px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  box-shadow: var(--k-shadow-xs);
  transition: all var(--k-tr-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.k-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--k-shadow-md);
  border-color: #D5D9DF;
}
.k-blog-card .bc-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--k-surface-2);
  position: relative;
}
.k-blog-card .bc-media img {
  width: 100%; height: 100%; object-fit: cover; transition: transform var(--k-tr-slow);
}
.k-blog-card:hover .bc-media img { transform: scale(1.04); }
.k-blog-card .bc-badge {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
}
.k-blog-card .bc-body { padding: 1.2rem 1.2rem 1.35rem; display: flex; flex-direction: column; flex: 1; gap: .65rem; }
.k-blog-card .bc-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .45rem 1rem;
  font-size: var(--k-fs-xs);
  color: var(--k-text-muted);
  font-weight: 600;
  letter-spacing: .02em;
}
.k-blog-card .bc-meta i { color: var(--k-red); font-size: .85rem; }
.k-blog-card .bc-title {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--k-black);
  margin: 0;
  letter-spacing: -.01em;
}
.k-blog-card .bc-excerpt {
  font-size: .9rem;
  color: var(--k-text-2);
  line-height: 1.8;
  margin: 0;
  flex: 1;
}
.k-blog-card .bc-footer {
  padding: 0 1.2rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
}
.k-blog-card .bc-footer .read-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 800;
  font-size: .88rem;
  color: var(--k-red);
  transition: all var(--k-tr-fast);
}
.k-blog-card .bc-footer .read-more:hover {
  color: var(--k-black);
  gap: .55rem;
}
.k-blog-card .bc-footer .bc-read-time {
  font-size: var(--k-fs-xs);
  color: var(--k-text-muted);
  font-weight: 700;
  letter-spacing: .06em;
}

/* ---------- 23. FILTER BAR Premium ---------- */
.filter-bar {
  padding: 1.5rem 1.6rem;
  background: linear-gradient(180deg, var(--k-white) 0%, var(--k-surface) 100%);
  border: 1.3px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-xs);
  margin-bottom: 1.75rem;
  position: relative;
}
.filter-bar::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--k-red), rgba(200,16,46,0.35), var(--k-black));
  border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0;
  opacity: .5;
}
.filter-bar .fb-title {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--k-black);
  margin-bottom: .9rem;
}
.filter-bar .fb-title i { color: var(--k-red); font-size: 1.1rem; }
.filter-bar .fb-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--k-border);
}
.filter-bar .fb-actions .btn { min-width: 120px; }

/* ---------- 24. PAGINATION Premium ---------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  list-style: none;
  margin: 2.5rem 0 0;
}
.pagination .page-link {
  min-width: 42px;
  height: 42px;
  padding: 0 .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--k-radius-sm);
  border: 1.3px solid var(--k-border);
  background: #fff;
  color: var(--k-text-2);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: all var(--k-tr-fast);
  box-shadow: var(--k-shadow-xs);
  text-decoration: none;
  line-height: 1;
}
.pagination .page-link:hover:not(.disabled):not(.active) {
  border-color: var(--k-red);
  color: var(--k-red);
  transform: translateY(-1px);
  box-shadow: var(--k-shadow-sm);
  background: #fff;
}
.pagination .page-link.active {
  background: linear-gradient(180deg, var(--k-red-2) 0%, var(--k-red) 100%);
  color: #fff;
  border-color: var(--k-red);
  box-shadow: 0 5px 16px rgba(200,16,46,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
}
.pagination .page-link.disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  background: var(--k-surface);
}
.pagination .page-link i { font-size: .85rem; }


/* Track request tracking number display (SALE-10001, PART-xxxxx, RENT-xxxxx) */
.track-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  direction: ltr !important;
  display: inline-block;
  unicode-bidi: plaintext;
  background: rgba(22, 163, 74, 0.08);
  color: #166534;
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid rgba(22, 163, 74, 0.25);
  font-weight: 700;
  letter-spacing: .3px;
  margin: 0 3px;
}

/* ---------- File Dropzone (parts-request, multi-upload) ---------- */
.k-dropzone {
  position: relative;
  display: block;
  width: 100%;
  min-height: 220px;
  border: 2.2px dashed #c7d2fe;
  background: linear-gradient(135deg, rgba(238,242,255,0.55) 0%, rgba(248,250,252,0.9) 100%);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  cursor: pointer;
  transition: all .22s ease;
  overflow: hidden;
  isolation: isolate;
}
.k-dropzone:hover {
  border-color: var(--k-red);
  background: linear-gradient(135deg, rgba(200,16,46,0.05) 0%, rgba(255,247,237,0.9) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}
.k-dropzone.k-dz-active {
  border-color: var(--k-red);
  background: linear-gradient(135deg, rgba(200,16,46,0.10) 0%, rgba(254,226,226,0.95) 100%);
  box-shadow: 0 18px 40px rgba(200,16,46,0.18);
  transform: scale(1.01);
}
.k-dropzone-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.k-dz-icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid rgba(99,102,241,0.22);
  box-shadow: 0 10px 24px rgba(99,102,241,0.12);
}
.k-dz-icon i { font-size: 2rem; }
.k-dropzone:hover .k-dz-icon { border-color: rgba(200,16,46,0.3); }
.k-dropzone.k-dz-active .k-dz-icon {
  border-color: rgba(200,16,46,0.45);
  transform: translateY(-2px);
}
.k-dz-title {
  font-size: 1.1rem;
  color: var(--k-text);
  letter-spacing: .15px;
}
.k-dz-sub {
  font-size: .88rem;
  line-height: 1.9;
}
.k-dz-filename {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #fff;
  border: 1.5px solid rgba(22, 163, 74, 0.3);
  color: #15803d;
  padding: .6rem 1.1rem;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.12);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-dz-filename i { font-size: 1.15rem; flex-shrink: 0; }
.k-dz-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
}
.k-dz-input:focus-visible + .k-dropzone-inner .k-dz-icon {
  outline: 3px solid rgba(200,16,46,0.35);
  outline-offset: 4px;
}