/* ============================================================
   KamaiKart Design System — portable single-file stylesheet
   Drop into any Laravel/Blade/Livewire/Inertia project.
   Includes: fonts (Google CDN) + all design tokens + every
   component's styles as plain .kk-* classes (no React needed).
   ============================================================ */


/* ===== tokens/fonts.css ===== */
/* ============================================================
   KamaiKart — Webfonts
   Poppins (Latin display/UI) + Mukta (Devanagari + Latin body).
   Loaded from Google Fonts. Poppins lacks Devanagari glyphs, so
   any Devanagari falls through to Mukta automatically via the
   font stacks in typography.css.
   NOTE: served from Google Fonts CDN — see readme "Font hosting".
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Hind:wght@400;500;600;700&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   KamaiKart — Color tokens
   Base palette + semantic aliases. Derived from brand mockups.
   ============================================================ */
:root {
  /* ---- Navy (primary brand / trust) ---- */
  --navy-900: #06285A;   /* stat band, footer, deep headings */
  --navy-800: #0B336E;
  --navy-700: #103F86;
  --navy-600: #16489C;

  /* ---- Blue (interactive / primary action) ---- */
  --blue-700: #1A45B0;
  --blue-600: #1C4FC2;   /* primary buttons, links, active nav */
  --blue-500: #2E6FE0;
  --blue-200: #B9CDF4;
  --blue-100: #E7EFFC;   /* tinted surfaces */
  --blue-50:  #F3F7FE;

  /* ---- Orange (accent / CTA) ---- */
  --orange-700: #D9690F;
  --orange-600: #E8701A;
  --orange-500: #F47A1F;  /* main CTA */
  --orange-200: #F8C79B;
  --orange-100: #FCEBDC;
  --orange-50:  #FDF5EE;

  /* ---- Gold (Gold tier / highlights) ---- */
  --gold-600: #E0951A;
  --gold-500: #F5A21A;
  --gold-100: #FEF3D6;
  --gold-50:  #FEF9EC;

  /* ---- Tier identity ---- */
  --bronze-500: #C07A3E;
  --bronze-100: #F4E5D6;
  --bronze-card: #FCF4EF;
  --silver-500: #8A98AA;
  --silver-100: #E7ECF3;
  --silver-card: #F4F7FF;
  --gold-tier-500: #E8A21C;
  --gold-tier-100: #FAEAC2;
  --gold-card: #FEF8EC;

  /* ---- Semantic status ---- */
  --green-600: #168B49;
  --green-500: #1FA855;   /* success / verified / active / credited */
  --green-100: #E2F5EA;
  --red-600: #CF3030;
  --red-500: #E23B3B;     /* rejected / inactive / failed */
  --red-100: #FBE5E5;
  --amber-500: #E9A009;   /* pending */
  --amber-100: #FBEFCC;

  /* ---- "How it works" accent wheel ---- */
  --accent-blue:   #2E6FE0;
  --accent-green:  #2BA84A;
  --accent-orange: #F47A1F;
  --accent-purple: #7C4DD6;
  --accent-pink:   #E0457B;
  --accent-teal:   #16A89A;

  /* ---- Neutrals / ink ---- */
  --ink-900: #1A2438;   /* primary heading text */
  --ink-700: #334155;   /* body text */
  --ink-500: #64748B;   /* muted / secondary */
  --ink-400: #94A3B8;   /* placeholder / disabled */
  --ink-200: #CBD5E1;

  /* ---- Surfaces ---- */
  --surface-page: #F3F6FC;   /* app background */
  --surface-card: #FFFFFF;   /* cards, panels */
  --surface-sunken: #F7F9FD; /* table headers, insets */
  --surface-navy: #06285A;   /* dark bands, sidebars */

  /* ---- Borders / lines ---- */
  --border-subtle: #E5EAF2;
  --border-default: #D8E0EC;
  --border-strong: #C2CCDC;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-deep: var(--navy-900);
  --color-accent: var(--orange-500);
  --color-accent-hover: var(--orange-600);
  --color-success: var(--green-500);
  --color-danger: var(--red-500);
  --color-warning: var(--amber-500);

  --text-heading: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-dark: #FFFFFF;
  --text-on-primary: #FFFFFF;
  --text-on-accent: #FFFFFF;

  --link-color: var(--blue-600);

  --focus-ring: 0 0 0 3px rgba(28, 79, 194, 0.28);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   KamaiKart — Typography tokens
   Poppins for Latin headings/UI; Mukta carries Devanagari and
   doubles as the body face. Both scripts share one rhythm.
   ============================================================ */
:root {
  /* ---- Families ---- */
  /* Plus Jakarta Sans (Latin display/UI) + Inter (Latin body) +
     Hind (carries Devanagari; Latin faces lack Devanagari glyphs so
     Hindi text falls through to Hind automatically). */
  --font-heading: 'Plus Jakarta Sans', 'Hind', system-ui, sans-serif;
  --font-body:    'Inter', 'Hind', system-ui, sans-serif;
  /* Use --font-deva when a block is known to be Devanagari-only */
  --font-deva:    'Hind', system-ui, sans-serif;
  --font-num:     'Inter', system-ui, sans-serif; /* tabular numerals */

  /* ---- Weights ---- */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (fluid-friendly base 16px) ---- */
  --fs-display: 44px;   /* hero headlines */
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-lg: 17px;
  --fs-body: 15px;
  --fs-sm: 13.5px;
  --fs-xs: 12px;
  --fs-stat: 28px;      /* big numeric stat values */

  /* ---- Line heights ---- */
  --lh-tight: 1.15;   /* @kind font */
  --lh-snug: 1.3;     /* @kind font */
  --lh-normal: 1.55;  /* @kind font */
  --lh-relaxed: 1.7;  /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.01em;
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em;
  --ls-caps: 0.08em;
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   KamaiKart — Spacing scale (4px base)
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Semantic gaps */
  --gap-card: 24px;        /* padding inside cards */
  --gap-card-sm: 16px;
  --gap-section: 48px;     /* between page sections */
  --gap-field: 16px;       /* between form fields */
  --gap-inline: 8px;       /* icon-to-label, chips */

  /* Layout */
  --container-max: 1200px;
  --sidebar-w: 240px;
  --content-pad: 32px;
}


/* ===== tokens/radius.css ===== */
/* ============================================================
   KamaiKart — Radius tokens
   Rounded, friendly. Cards ~14px, buttons ~10px, pills full.
   ============================================================ */
:root {
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;    /* buttons, inputs */
  --radius-lg: 14px;    /* cards */
  --radius-xl: 20px;    /* large panels, hero cards */
  --radius-2xl: 28px;
  --radius-pill: 999px; /* badges, chips, avatars */
}


/* ===== tokens/shadows.css ===== */
/* ============================================================
   KamaiKart — Elevation / shadows
   Soft, low-spread blue-tinted shadows on a light surface.
   ============================================================ */
:root {
  --shadow-xs: 0 1px 2px rgba(16, 42, 92, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 42, 92, 0.08), 0 1px 2px rgba(16, 42, 92, 0.04);
  --shadow-card: 0 4px 16px rgba(16, 42, 92, 0.07);
  --shadow-md: 0 8px 24px rgba(16, 42, 92, 0.10);
  --shadow-lg: 0 16px 40px rgba(16, 42, 92, 0.14);
  --shadow-navy: 0 12px 30px rgba(6, 40, 90, 0.30);
  --shadow-accent: 0 8px 20px rgba(244, 122, 31, 0.30);

  /* focus / ring already in colors.css as --focus-ring */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   KamaiKart — Base element styles & helpers
   Light reset + sensible defaults wired to the tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button { font-family: var(--font-body); }

/* tabular numerals for stat/currency values */
.kk-num, .kk-amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* visually hidden */
.kk-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

::selection { background: var(--blue-200); color: var(--navy-900); }



/* ============================================================
   COMPONENTS
   ============================================================ */

/* ----- Button ----- */
.kk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:var(--fw-semibold);
  border:1.5px solid transparent;border-radius:var(--radius-md);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .05s ease;
  line-height:1;user-select:none;
}
.kk-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.kk-btn:active{transform:translateY(1px);}
.kk-btn--sm{font-size:var(--fs-sm);padding:8px 14px;}
.kk-btn--md{font-size:var(--fs-body);padding:11px 20px;}
.kk-btn--lg{font-size:var(--fs-lg);padding:14px 26px;}
.kk-btn--block{width:100%;}
.kk-btn--pill{border-radius:var(--radius-pill);}

.kk-btn--primary{background:var(--blue-600);color:#fff;}
.kk-btn--primary:hover{background:var(--blue-700);}
.kk-btn--accent{background:var(--orange-500);color:#fff;box-shadow:0 2px 8px rgba(244,122,31,.28);}
.kk-btn--accent:hover{background:var(--orange-600);}
.kk-btn--gold{background:var(--gold-500);color:#fff;}
.kk-btn--gold:hover{background:var(--gold-600);}
.kk-btn--secondary{background:#fff;color:var(--blue-600);border-color:var(--blue-200);}
.kk-btn--secondary:hover{background:var(--blue-50);border-color:var(--blue-600);}
.kk-btn--ghost{background:transparent;color:var(--ink-700);}
.kk-btn--ghost:hover{background:var(--blue-50);color:var(--blue-600);}
.kk-btn--danger{background:var(--red-500);color:#fff;}
.kk-btn--danger:hover{background:var(--red-600);}
.kk-btn--success{background:var(--green-500);color:#fff;}
.kk-btn--success:hover{background:var(--green-600);}

.kk-btn[disabled],.kk-btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;box-shadow:none;pointer-events:none;
}
.kk-btn svg{display:block;}

/* ----- Input ----- */
.kk-field{display:flex;flex-direction:column;gap:6px;}
.kk-field__label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-700);}
.kk-field__label .kk-req{color:var(--red-500);margin-left:2px;}
.kk-input-wrap{position:relative;display:flex;align-items:center;}
.kk-input{
  width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink-900);
  background:#fff;border:1.5px solid var(--border-default);border-radius:var(--radius-md);
  padding:11px 14px;transition:border-color .15s ease,box-shadow .15s ease;
}
.kk-input::placeholder{color:var(--ink-400);}
.kk-input:hover{border-color:var(--border-strong);}
.kk-input:focus{outline:none;border-color:var(--blue-600);box-shadow:var(--focus-ring);}
.kk-input--has-lead{padding-left:42px;}
.kk-input--has-trail{padding-right:42px;}
.kk-input__icon{position:absolute;display:flex;color:var(--ink-400);pointer-events:none;}
.kk-input__icon--lead{left:13px;}
.kk-input__icon--trail{right:13px;}
.kk-field--error .kk-input{border-color:var(--red-500);}
.kk-field--error .kk-input:focus{box-shadow:0 0 0 3px rgba(226,59,59,.22);}
.kk-input:disabled{background:var(--surface-sunken);color:var(--ink-400);cursor:not-allowed;}
.kk-field__hint{font-size:var(--fs-xs);color:var(--ink-500);}
.kk-field__hint--error{color:var(--red-500);}

/* ----- Select ----- */
.kk-select-wrap{position:relative;display:flex;align-items:center;}
.kk-select{
  width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink-900);
  background:#fff;border:1.5px solid var(--border-default);border-radius:var(--radius-md);
  padding:11px 38px 11px 14px;appearance:none;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.kk-select:hover{border-color:var(--border-strong);}
.kk-select:focus{outline:none;border-color:var(--blue-600);box-shadow:var(--focus-ring);}
.kk-select:disabled{background:var(--surface-sunken);color:var(--ink-400);cursor:not-allowed;}
.kk-select-wrap__chev{position:absolute;right:13px;pointer-events:none;color:var(--ink-500);display:flex;}
.kk-select[data-placeholder="true"]{color:var(--ink-400);}

/* ----- Checkbox ----- */
.kk-check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--fs-body);color:var(--ink-700);user-select:none;}
.kk-check input{position:absolute;opacity:0;width:0;height:0;}
.kk-check__box{
  flex:0 0 auto;width:20px;height:20px;border:1.5px solid var(--border-strong);
  border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease;margin-top:1px;color:#fff;
}
.kk-check__box svg{opacity:0;transform:scale(.6);transition:opacity .12s ease,transform .12s ease;}
.kk-check input:checked + .kk-check__box{background:var(--blue-600);border-color:var(--blue-600);}
.kk-check input:checked + .kk-check__box svg{opacity:1;transform:scale(1);}
.kk-check input:focus-visible + .kk-check__box{box-shadow:var(--focus-ring);}
.kk-check:hover .kk-check__box{border-color:var(--blue-600);}
.kk-check input:disabled ~ *{opacity:.5;}
.kk-check--accent input:checked + .kk-check__box{background:var(--orange-500);border-color:var(--orange-500);}

/* ----- OtpInput ----- */
.kk-otp{display:flex;gap:10px;}
.kk-otp__cell{
  width:48px;height:56px;text-align:center;font-family:var(--font-num);
  font-size:22px;font-weight:var(--fw-bold);color:var(--ink-900);
  border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.kk-otp__cell:focus{outline:none;border-color:var(--blue-600);box-shadow:var(--focus-ring);}
.kk-otp__cell--filled{border-color:var(--blue-600);background:var(--blue-50);}
@media (max-width:480px){.kk-otp{gap:7px;}.kk-otp__cell{width:42px;height:50px;font-size:19px;}}

/* ----- Card ----- */
.kk-card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  padding:var(--gap-card);
}
.kk-card--flat{box-shadow:none;}
.kk-card--pad-sm{padding:var(--gap-card-sm);}
.kk-card--pad-lg{padding:32px;}
.kk-card--hover{transition:box-shadow .18s ease,transform .18s ease;}
.kk-card--hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.kk-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.kk-card__title{font-family:var(--font-heading);font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--ink-900);}
.kk-card__sub{font-size:var(--fs-sm);color:var(--ink-500);margin-top:2px;}
.kk-card--accent-top{border-top:3px solid var(--blue-600);}

/* ----- StatCard ----- */
.kk-stat{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:18px 20px;
}
.kk-stat__icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.kk-stat__body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.kk-stat__label{font-size:var(--fs-sm);color:var(--ink-500);font-weight:var(--fw-medium);}
.kk-stat__value{font-family:var(--font-num);font-size:var(--fs-stat);font-weight:var(--fw-bold);color:var(--ink-900);line-height:1.1;letter-spacing:-.01em;}
.kk-stat__delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);margin-top:2px;}
.kk-stat__delta--up{color:var(--green-600);}
.kk-stat__delta--down{color:var(--red-600);}
.kk-stat--blue .kk-stat__icon{background:var(--accent-blue);}
.kk-stat--orange .kk-stat__icon{background:var(--accent-orange);}
.kk-stat--green .kk-stat__icon{background:var(--accent-green);}
.kk-stat--purple .kk-stat__icon{background:var(--accent-purple);}
.kk-stat--pink .kk-stat__icon{background:var(--accent-pink);}
.kk-stat--teal .kk-stat__icon{background:var(--accent-teal);}
.kk-stat--navy .kk-stat__icon{background:var(--navy-700);}
.kk-stat--tint.kk-stat--blue{background:var(--blue-50);border-color:var(--blue-100);}
.kk-stat--tint.kk-stat--orange{background:var(--orange-50);border-color:var(--orange-100);}
.kk-stat--tint.kk-stat--green{background:#EFFBF3;border-color:var(--green-100);}
.kk-stat--tint.kk-stat--purple{background:#F5F1FD;border-color:#E7DEF9;}

/* ----- Badge ----- */
.kk-badge{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);line-height:1;
  padding:5px 11px;border-radius:var(--radius-pill);white-space:nowrap;
  border:1px solid transparent;
}
.kk-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.kk-badge--lg{font-size:var(--fs-sm);padding:7px 14px;}

/* status (soft) */
.kk-badge--success{background:var(--green-100);color:var(--green-600);}
.kk-badge--danger{background:var(--red-100);color:var(--red-600);}
.kk-badge--warning{background:var(--amber-100);color:#9A6800;}
.kk-badge--info{background:var(--blue-100);color:var(--blue-700);}
.kk-badge--neutral{background:var(--surface-sunken);color:var(--ink-500);border-color:var(--border-default);}

/* membership tiers (solid, with sheen) */
.kk-badge--bronze{background:linear-gradient(135deg,#CD8B53,#A9682F);color:#fff;}
.kk-badge--silver{background:linear-gradient(135deg,#AAB6C5,#7E8D9E);color:#fff;}
.kk-badge--gold{background:linear-gradient(135deg,#F3B53C,#DB9412);color:#fff;}
.kk-badge--tier{padding:6px 13px;box-shadow:var(--shadow-xs);}

/* ----- Avatar ----- */
.kk-avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:var(--radius-pill);overflow:hidden;background:var(--blue-100);
  color:var(--blue-700);font-family:var(--font-heading);font-weight:var(--fw-bold);
  position:relative;
}
.kk-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.kk-avatar--ring{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue-200);}
.kk-avatar--ring-gold{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold-500);}

/* ----- Table ----- */
.kk-table-wrap{width:100%;overflow-x:auto;}
.kk-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);}
.kk-table thead th{
  text-align:left;font-weight:var(--fw-semibold);color:var(--ink-500);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-wide);
  background:var(--surface-sunken);padding:12px 16px;white-space:nowrap;
  border-bottom:1px solid var(--border-subtle);
}
.kk-table thead th:first-child{border-top-left-radius:var(--radius-sm);}
.kk-table thead th:last-child{border-top-right-radius:var(--radius-sm);}
.kk-table tbody td{
  padding:14px 16px;color:var(--ink-700);border-bottom:1px solid var(--border-subtle);
  vertical-align:middle;
}
.kk-table tbody tr:last-child td{border-bottom:none;}
.kk-table--hover tbody tr{transition:background .12s ease;}
.kk-table--hover tbody tr:hover{background:var(--blue-50);}
.kk-table--striped tbody tr:nth-child(even){background:var(--surface-sunken);}
.kk-table__num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);color:var(--ink-900);}
.kk-table td.kk-align-right,.kk-table th.kk-align-right{text-align:right;}
.kk-table td.kk-align-center,.kk-table th.kk-align-center{text-align:center;}

/* ----- Tabs ----- */
.kk-tabs{display:flex;align-items:center;gap:4px;}
.kk-tabs--line{border-bottom:1px solid var(--border-subtle);gap:8px;}
.kk-tabs--pill{background:var(--surface-sunken);padding:4px;border-radius:var(--radius-md);gap:2px;}

.kk-tab{
  appearance:none;border:none;background:none;cursor:pointer;font-family:var(--font-body);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--ink-500);
  display:inline-flex;align-items:center;gap:7px;transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.kk-tab__count{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);color:var(--ink-500);
}

/* line style */
.kk-tabs--line .kk-tab{padding:11px 4px;border-bottom:2.5px solid transparent;margin-bottom:-1px;}
.kk-tabs--line .kk-tab:hover{color:var(--ink-700);}
.kk-tabs--line .kk-tab[aria-selected="true"]{color:var(--blue-600);border-bottom-color:var(--blue-600);}
.kk-tabs--line .kk-tab[aria-selected="true"] .kk-tab__count{background:var(--blue-100);color:var(--blue-700);}

/* pill style */
.kk-tabs--pill .kk-tab{padding:8px 16px;border-radius:var(--radius-sm);}
.kk-tabs--pill .kk-tab:hover{color:var(--ink-700);}
.kk-tabs--pill .kk-tab[aria-selected="true"]{background:#fff;color:var(--blue-600);box-shadow:var(--shadow-xs);}

/* ----- SidebarNav ----- */
.kk-snav{display:flex;flex-direction:column;gap:3px;}
.kk-snav__item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 14px;border-radius:var(--radius-md);cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-medium);
  color:rgba(255,255,255,.75);background:none;border:none;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.kk-snav__item:hover{background:rgba(255,255,255,.10);color:#fff;text-decoration:none;}
.kk-snav__item[aria-current="page"]{background:var(--blue-600);color:#fff;font-weight:var(--fw-semibold);box-shadow:var(--shadow-sm);}
.kk-snav__ico{flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.kk-snav__label{flex:1;min-width:0;}
.kk-snav__badge{font-size:var(--fs-xs);font-weight:var(--fw-bold);background:var(--orange-500);color:#fff;border-radius:var(--radius-pill);padding:1px 7px;}

/* light variant on white surfaces */
.kk-snav--light .kk-snav__item{color:var(--ink-500);}
.kk-snav--light .kk-snav__item:hover{background:var(--blue-50);color:var(--ink-900);}
.kk-snav--light .kk-snav__item[aria-current="page"]{background:var(--blue-50);color:var(--blue-700);box-shadow:none;}

/* ----- Modal ----- */
.kk-modal__overlay{
  position:fixed;inset:0;background:rgba(10,24,52,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;
  animation:kk-fade .18s ease;
}
.kk-modal{
  background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  width:100%;max-width:var(--kk-modal-w,460px);max-height:90vh;overflow:auto;
  animation:kk-pop .2s cubic-bezier(.2,.8,.3,1.2);
}
.kk-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 0;}
.kk-modal__title{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--ink-900);}
.kk-modal__sub{font-size:var(--fs-sm);color:var(--ink-500);margin-top:4px;}
.kk-modal__close{
  flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-md);border:none;cursor:pointer;
  background:var(--surface-sunken);color:var(--ink-500);display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.kk-modal__close:hover{background:var(--red-100);color:var(--red-600);}
.kk-modal__body{padding:18px 24px;}
.kk-modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:4px 24px 22px;}
@keyframes kk-fade{from{opacity:0;}to{opacity:1;}}
@keyframes kk-pop{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}

/* ----- Logo ----- */
.kk-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1;}
.kk-logo__mark{flex:0 0 auto;display:block;}
.kk-logo__text{display:flex;flex-direction:column;gap:2px;}
.kk-logo__word{font-family:var(--font-heading);font-weight:var(--fw-bold);letter-spacing:-.01em;}
.kk-logo__word .kk-logo__a{color:var(--navy-900);}
.kk-logo__word .kk-logo__b{color:var(--orange-500);}
.kk-logo--on-dark .kk-logo__a{color:#fff;}
.kk-logo__tag{font-family:var(--font-body);font-weight:var(--fw-medium);color:var(--ink-500);}
.kk-logo--on-dark .kk-logo__tag{color:rgba(255,255,255,.7);}

/* ----- MembershipCard ----- */
.kk-mcard{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--radius-xl);
  padding:22px 24px;background:linear-gradient(135deg,#0B3470 0%,#06285A 55%,#0A2A5E 100%);
  box-shadow:var(--shadow-navy);min-height:188px;display:flex;flex-direction:column;justify-content:space-between;
}
.kk-mcard::after{
  content:"";position:absolute;right:-40px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,122,31,.30),transparent 65%);pointer-events:none;
}
.kk-mcard--silver{background:linear-gradient(135deg,#46566B,#2C3950);}
.kk-mcard--gold{background:linear-gradient(135deg,#13407F,#06285A);}
.kk-mcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:1;}
.kk-mcard__brand{font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:var(--fs-h4);}
.kk-mcard__brand b{color:var(--orange-500);font-weight:var(--fw-bold);}
.kk-mcard__chip{width:38px;height:28px;border-radius:6px;background:linear-gradient(135deg,#F5CE7A,#D9A341);margin-top:14px;}
.kk-mcard__name{font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:1.1;position:relative;z-index:1;}
.kk-mcard__row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;position:relative;z-index:1;}
.kk-mcard__meta-label{font-size:var(--fs-xs);color:rgba(255,255,255,.6);letter-spacing:var(--ls-wide);text-transform:uppercase;}
.kk-mcard__meta-value{font-family:var(--font-num);font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:.04em;}
.kk-mcard__valid{font-size:var(--fs-xs);color:rgba(255,255,255,.7);}