/* ==========================================================================
   ReadyKits Kenya — Shared Stylesheet
   Brand colors: Navy #0d2c54, Red #e42130, Green (M-Pesa) #4caf00
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --rk-navy: #043577;
  --rk-navy-2: #073eb3;
  --rk-red: #e3032a;
  --rk-red-dark: #990a22;
  --rk-green: #3aa500;
  --rk-pink: #ffe9ec;
  --rk-blue-light: #eaf1fb;
  --rk-green-light: #eafaf0;
  --rk-gray-bg: #f6f8fb;
}

body {
  font-family: "Outfit", sans-serif;
  background: #fff;
  color: #1c2b3a;
}

a { text-decoration: none; }

/* ---------- Brand / Nav ---------- */
.rk-navbar {
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  padding: .65rem 0;
}
.rk-brand-logo {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--rk-red);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.1rem;
}
.rk-brand-text { line-height: 1.05; }
.rk-brand-text .main { font-weight: 800; color: var(--rk-navy); font-size: 1.15rem; }
.rk-brand-text .kenya { color: var(--rk-red); font-weight: 800; font-size: .72rem; letter-spacing: 1px; display:block; }
.rk-brand-text .sub { font-size: .62rem; color: #8a96a3; display:block; }

.rk-navbar .nav-link {
  color: #2c3e50; font-weight: 500; font-size: .93rem;
}
.rk-navbar .nav-link.active { color: var(--rk-red); font-weight: 700; }

.btn-rk-red {
  background: var(--rk-red); border-color: var(--rk-red); color: #fff; font-weight: 600;
}
.btn-rk-red:hover { background: var(--rk-red-dark); border-color: var(--rk-red-dark); color:#fff; }
.btn-outline-rk-navy {
  border-color: var(--rk-navy); color: var(--rk-navy); font-weight: 600;
}
.btn-outline-rk-navy:hover { background: var(--rk-navy); color: #fff; }
.text-rk-red { color: var(--rk-red) !important; }
.text-rk-navy { color: var(--rk-navy) !important; }
.bg-rk-navy { background: var(--rk-navy) !important; }
.bg-rk-blue-light { background: var(--rk-blue-light) !important; }
.bg-rk-pink { background: var(--rk-pink) !important; }
.bg-rk-green-light { background: var(--rk-green-light) !important; }

/* ---------- Hero ---------- */
.rk-hero { background: #fff; padding: 3rem 0 2rem; }
.rk-hero .eyebrow { letter-spacing: 2px; color: #9aa5b1; font-weight: 700; font-size: .78rem; }
.rk-hero h1 { font-weight: 800; color: var(--rk-navy); line-height: 1.1; }
.rk-hero h1 .accent { color: var(--rk-red); }

.rk-stats-bar { background: var(--rk-blue-light); border-radius: 14px; padding: 1.1rem 1.5rem; }
.rk-stats-bar .stat-icon { width:38px; height:38px; }

/* ---------- Cards ---------- */
.rk-cat-card {
  border-radius: 14px; padding: 1.25rem; height: 100%; transition: transform .15s ease, box-shadow .15s ease;
  border: 1px solid rgba(0,0,0,.04);
}
.rk-cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13,37,64,.08); }
.rk-cat-icon {
  width: 46px; height: 46px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}

.rk-kit-card { border: 1px solid #eceff3; border-radius: 12px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; background:#fff; }
.rk-kit-card:hover { box-shadow: 0 10px 22px rgba(13,37,64,.10); transform: translateY(-2px); }
.rk-kit-cover {
  height: 150px; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; font-weight:700; padding: .75rem;
  font-size: .95rem;
}
.rk-kit-price { color: var(--rk-red); font-weight: 800; }
.rk-badge-hot { position:absolute; top:8px; right:8px; }

.rk-testimonial-card { border-radius: 12px; border: 1px solid #eceff3; padding: 1.25rem; height: 100%; }
.rk-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--rk-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* ---------- Footer ---------- */
.rk-footer { background: var(--rk-navy); color: #cfd8e3; }
.rk-footer a { color: #cfd8e3; }
.rk-footer a:hover { color: #fff; }
.rk-footer h6 { color: #fff; font-weight: 700; }

/* ---------- Sticky mobile buy bar ---------- */
.rk-sticky-buy {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e5e9ee;
  padding: .6rem 1rem; z-index: 1030; box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  display: none;
}
@media (max-width: 767px) { .rk-sticky-buy.rk-show { display:flex; } }

/* ---------- Sidebar layouts (portal/admin/editor/investor) ---------- */
.rk-app-shell { display:flex; min-height: 100vh; }
.rk-sidebar {
  width: 260px; background: var(--rk-navy); color: #cfe0f5; flex-shrink:0; min-height:100vh;
  position: sticky; top:0; align-self:flex-start;
}
.rk-sidebar .brand { padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.rk-sidebar .rk-role-tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: #9fb6d3; padding: .2rem .6rem;
  background: rgba(255,255,255,.08); border-radius: 20px; display:inline-block; margin-top:.3rem;
}
.rk-sidebar .nav-link {
  color: #cfe0f5; padding: .6rem 1.25rem; font-size: .92rem; border-left: 3px solid transparent; display:flex; align-items:center; gap:.6rem;
}
.rk-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color:#fff; }
.rk-sidebar .nav-link.active { background: rgba(227,28,37,.18); border-left-color: var(--rk-red); color:#fff; font-weight:600; }
.rk-sidebar .nav-section-title { font-size: .68rem; text-transform: uppercase; color:#77899e; letter-spacing:1px; padding: 1rem 1.25rem .3rem; }
.rk-sidebar .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); margin-top: auto; }

.rk-main { flex: 1; min-width: 0; background: var(--rk-gray-bg); min-height: 100vh; }
.rk-topbar { background: #fff; border-bottom: 1px solid #e9edf2; padding: .85rem 1.5rem; display:flex; align-items:center; justify-content: space-between; }
.rk-content { padding: 1.5rem; }

.rk-kpi-card { background: #fff; border-radius: 12px; padding: 1.1rem 1.25rem; border: 1px solid #edf0f4; height: 100%; }
.rk-kpi-card .kpi-label { font-size: .8rem; color: #7a8899; font-weight: 600; }
.rk-kpi-card .kpi-value { font-size: 1.6rem; font-weight: 800; color: var(--rk-navy); }
.rk-kpi-card .kpi-delta.up { color: var(--rk-green); }
.rk-kpi-card .kpi-delta.down { color: var(--rk-red); }

.rk-panel { background:#fff; border-radius: 12px; border: 1px solid #edf0f4; }
.rk-panel .panel-header { padding: 1rem 1.25rem; border-bottom: 1px solid #edf0f4; font-weight: 700; color: var(--rk-navy); display:flex; align-items:center; justify-content:space-between; }
.rk-panel .panel-body { padding: 1.25rem; }

.table-rk thead th { font-size: .74rem; text-transform: uppercase; color: #7a8899; letter-spacing: .5px; border-bottom-width: 1px; }
.table-rk td, .table-rk th { vertical-align: middle; }

.rk-progress-thin { height: 8px; border-radius: 6px; }

.badge-soft-green { background: #e7f8ea; color: #1f8a3b; font-weight:600; }
.badge-soft-red { background: #fde9ea; color: var(--rk-red); font-weight:600; }
.badge-soft-amber { background: #fff5e0; color: #b5790a; font-weight:600; }
.badge-soft-blue { background: #e9f1fd; color: #1a5bb8; font-weight:600; }
.badge-soft-gray { background: #eef1f4; color: #5b6b7c; font-weight:600; }

.rk-badge-role {
  font-size: .7rem; padding: .25rem .6rem; border-radius: 20px; font-weight:700; letter-spacing:.4px;
}

.rk-quiz-option {
  border: 1px solid #dfe4ea; border-radius: 10px; padding: .75rem 1rem; cursor: pointer;
}
.rk-quiz-option.selected { border-color: var(--rk-red); background: var(--rk-pink); }

.rk-locked-preview {
  height: 130px; background: #eef1f5; border-radius: 8px; display:flex; align-items:center; justify-content:center; color:#8a96a3;
}

.rk-watermark-demo {
  border: 2px dashed #c9d3dd; border-radius: 10px; padding: 1.5rem; background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 40px, #f1f3f6 40px, #f1f3f6 80px);
  position: relative; text-align:center;
}
.rk-watermark-tag {
  position:absolute; bottom: 8px; right: 12px; font-size: .68rem; color:#9aa5b1; font-style: italic;
}

.cursor-pointer { cursor: pointer; }

@media (max-width: 991px) {
  .rk-sidebar { position: fixed; left: -260px; top:0; height: 100vh; z-index: 1050; transition: left .2s ease; }
  .rk-sidebar.show { left: 0; }
}