/* ============================================================
   WORKRR v5 — Upwork-Inspired Modern UI
   Color palette: Upwork green + dark navy + clean whites
   ============================================================ */

:root {
  /* Brand */
  --wk-green: #14a800;
  --wk-green-dark: #108a00;
  --wk-green-light: #e7f7e3;
  --wk-green-glow: rgba(20, 168, 0, 0.15);

  /* Neutrals (Upwork-like) */
  --wk-ink: #001e00;
  --wk-text: #2c3e2d;
  --wk-text-muted: #5e6d55;
  --wk-text-light: #8a9889;
  --wk-bg: #ffffff;
  --wk-bg-soft: #f7faf7;
  --wk-bg-card: #ffffff;
  --wk-border: #e4ebe4;
  --wk-border-strong: #c8d2c8;

  /* Accents */
  --wk-amber: #f59e0b;
  --wk-amber-light: #fef3c7;
  --wk-blue: #1f57c3;
  --wk-blue-light: #e8f0ff;
  --wk-red: #d93025;
  --wk-red-light: #fde8e6;

  /* Shadows */
  --wk-shadow-sm: 0 1px 2px rgba(0, 30, 0, 0.06);
  --wk-shadow: 0 2px 12px rgba(0, 30, 0, 0.08);
  --wk-shadow-lg: 0 8px 32px rgba(0, 30, 0, 0.12);

  /* Radii */
  --wk-r-sm: 6px;
  --wk-r: 10px;
  --wk-r-lg: 16px;
  --wk-r-xl: 24px;

  /* Bootstrap overrides */
  --bs-body-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-color: var(--wk-text);
  --bs-body-bg: var(--wk-bg);
  --bs-primary: var(--wk-green);
  --bs-link-color: var(--wk-green-dark);
  --bs-link-hover-color: var(--wk-ink);
  --bs-border-color: var(--wk-border);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  color: var(--wk-text);
  background: var(--wk-bg);
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6, .fw-700 { font-weight: 700; color: var(--wk-ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; }

a { color: var(--wk-green-dark); text-decoration: none; transition: color .15s; }
a:hover { color: var(--wk-ink); }

.text-teal, .text-primary { color: var(--wk-green-dark) !important; }
.text-ink { color: var(--wk-ink) !important; }
.text-muted, .text-secondary { color: var(--wk-text-muted) !important; }
.bg-soft { background: var(--wk-bg-soft) !important; }

/* ============================================================
   PAGE LOADER
   ============================================================ */
.page-loader {
  position: fixed; inset: 0; background: #fff; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .3s;
}
.page-loader.hidden { opacity: 0; pointer-events: none; }
.loader-spinner {
  width: 48px; height: 48px; border: 4px solid var(--wk-green-light);
  border-top-color: var(--wk-green); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   NAVBAR — Upwork style: white, slim, clean
   ============================================================ */
.workrr-navbar {
  background: #fff;
  border-bottom: 1px solid var(--wk-border);
  padding: .65rem 0;
  box-shadow: var(--wk-shadow-sm);
}
.workrr-logo {
  display: flex; align-items: center; gap: .35rem;
  font-weight: 800; font-size: 1.5rem;
  color: var(--wk-green-dark) !important;
  letter-spacing: -.03em;
}
.workrr-logo .logo-text { color: var(--wk-green-dark); }
.workrr-logo .logo-badge {
  background: var(--wk-ink); color: #fff;
  font-size: .65rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: .05em;
}

.workrr-navbar .nav-link {
  color: var(--wk-text) !important;
  font-weight: 500;
  padding: .5rem 1rem !important;
  border-radius: var(--wk-r-sm);
  transition: all .15s;
}
.workrr-navbar .nav-link:hover { background: var(--wk-bg-soft); color: var(--wk-ink) !important; }
.workrr-navbar .nav-link.active { color: var(--wk-green-dark) !important; }

.dropdown-menu {
  border: 1px solid var(--wk-border);
  border-radius: var(--wk-r);
  box-shadow: var(--wk-shadow-lg);
  padding: .5rem;
  margin-top: .5rem !important;
}
.dropdown-item {
  border-radius: var(--wk-r-sm);
  padding: .55rem .75rem;
  font-weight: 500;
  color: var(--wk-text);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--wk-green-light); color: var(--wk-ink); }

.nav-search {
  border: 1px solid var(--wk-border-strong);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .9rem;
  background: #fff;
  min-width: 150px;
}

/* Notification badge */
.notif-pill {
  position: relative;
  background: transparent; border: none; color: var(--wk-text);
  padding: .4rem .55rem; border-radius: 50%;
}
.notif-pill:hover { background: var(--wk-bg-soft); }
.notif-pill .notif-count {
  position: absolute; top: 2px; right: 2px;
  background: var(--wk-red); color: #fff;
  font-size: .65rem; font-weight: 700;
  padding: 1px 5px; border-radius: 999px;
  min-width: 16px; text-align: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { font-weight: 600; border-radius: var(--wk-r-sm); padding: .55rem 1.25rem; transition: all .15s; }
.btn-lg { padding: .8rem 1.75rem; font-size: 1rem; border-radius: var(--wk-r); }
.btn-sm { padding: .35rem .85rem; font-size: .85rem; }

.btn-success, .btn-primary, .btn-teal {
  background: var(--wk-green); border-color: var(--wk-green); color: #fff;
}
.btn-success:hover, .btn-primary:hover, .btn-teal:hover {
  background: var(--wk-green-dark); border-color: var(--wk-green-dark); color: #fff;
  transform: translateY(-1px); box-shadow: 0 4px 12px var(--wk-green-glow);
}
.btn-outline-success, .btn-outline-primary {
  color: var(--wk-green-dark); border-color: var(--wk-green); background: transparent;
}
.btn-outline-success:hover { background: var(--wk-green); color: #fff; border-color: var(--wk-green); }

.btn-dark { background: var(--wk-ink); border-color: var(--wk-ink); }
.btn-dark:hover { background: #002a00; border-color: #002a00; }

.btn-light { background: var(--wk-bg-soft); border-color: var(--wk-border); color: var(--wk-text); }
.btn-light:hover { background: var(--wk-border); }

.btn-ghost {
  background: transparent; border: 1px solid var(--wk-border-strong);
  color: var(--wk-text);
}
.btn-ghost:hover { background: var(--wk-bg-soft); border-color: var(--wk-text-muted); }

/* ============================================================
   HERO — Upwork-style large search hero
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--wk-bg-soft) 0%, #fff 60%);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, var(--wk-green-glow), transparent 70%);
}
.hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 1rem; }
.hero .lead { font-size: 1.15rem; color: var(--wk-text-muted); max-width: 560px; }

.hero-search {
  background: #fff;
  border-radius: var(--wk-r-lg);
  box-shadow: var(--wk-shadow-lg);
  padding: .35rem;
  display: flex; align-items: center; gap: .25rem;
  border: 1px solid var(--wk-border);
}
.hero-search input, .hero-search select {
  border: none; padding: .9rem 1rem; flex: 1;
  font-size: 1rem; background: transparent;
  outline: none;
}
.hero-search button {
  border-radius: var(--wk-r) !important;
  padding: .9rem 1.75rem !important;
}

.hero-trust {
  display: flex; gap: 2rem; margin-top: 2.5rem;
  color: var(--wk-text-muted); font-size: .9rem; flex-wrap: wrap;
}
.hero-trust > div { display: flex; align-items: center; gap: .5rem; }
.hero-trust i { color: var(--wk-green); font-size: 1.1rem; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  border: 1px solid var(--wk-border);
  border-radius: var(--wk-r);
  background: var(--wk-bg-card);
  box-shadow: var(--wk-shadow-sm);
  transition: all .2s;
}
.card:hover { box-shadow: var(--wk-shadow); transform: translateY(-2px); }
.card-body { padding: 1.25rem; }

/* Gig card */
.gig-card { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.gig-card .gig-img-wrap {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: var(--wk-bg-soft);
}
.gig-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gig-card:hover img { transform: scale(1.04); }
.gig-card .gig-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.gig-card .seller-mini {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.gig-card .seller-mini img { width: 26px; height: 26px; border-radius: 50%; }
.gig-card .seller-mini span { font-size: .85rem; font-weight: 600; color: var(--wk-text); }
.gig-card h6 {
  font-size: .95rem; font-weight: 600; line-height: 1.4;
  color: var(--wk-ink); margin: .25rem 0 .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.gig-card h6 a { color: inherit; }
.gig-card h6 a:hover { color: var(--wk-green-dark); }
.gig-card .gig-rating { font-size: .85rem; margin-bottom: .25rem; }
.gig-card .gig-price {
  margin-top: auto; padding-top: .75rem;
  border-top: 1px solid var(--wk-border);
  font-size: .8rem; color: var(--wk-text-muted); text-align: right;
}
.gig-card .gig-price strong { font-size: 1.05rem; color: var(--wk-ink); display: block; }

.wishlist-btn {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,.95); border: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--wk-text-muted);
  box-shadow: var(--wk-shadow-sm); cursor: pointer;
  transition: all .15s; z-index: 2;
}
.wishlist-btn:hover { color: var(--wk-red); transform: scale(1.1); }
.wishlist-btn.active { color: var(--wk-red); }

.featured-ribbon {
  position: absolute; top: 10px; left: 10px;
  background: var(--wk-amber); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .05em;
  z-index: 2;
}

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.cat-card {
  background: #fff; border: 1px solid var(--wk-border);
  border-radius: var(--wk-r); padding: 1.5rem 1rem;
  text-align: center; transition: all .2s; cursor: pointer;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-decoration: none; color: var(--wk-text);
}
.cat-card:hover {
  border-color: var(--wk-green); background: var(--wk-green-light);
  transform: translateY(-4px); color: var(--wk-ink);
}
.cat-card i { font-size: 2.25rem; color: var(--wk-green-dark); margin-bottom: .75rem; }
.cat-card h6 { font-size: .9rem; font-weight: 600; margin: 0; color: inherit; }
.cat-card .cat-count { font-size: .75rem; color: var(--wk-text-muted); margin-top: .25rem; }

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section { padding: 4rem 0; }
.section-title { margin-bottom: 2.5rem; }
.section-title h2 { margin-bottom: .5rem; }
.section-title p { color: var(--wk-text-muted); margin: 0; }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
  border: 1px solid var(--wk-border-strong);
  border-radius: var(--wk-r-sm);
  padding: .65rem .85rem;
  font-size: .95rem;
  transition: all .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--wk-green);
  box-shadow: 0 0 0 3px var(--wk-green-glow);
}
.form-label { font-weight: 600; color: var(--wk-ink); margin-bottom: .35rem; font-size: .9rem; }
.input-group-text { background: var(--wk-bg-soft); border-color: var(--wk-border-strong); color: var(--wk-text-muted); }

.form-card {
  background: #fff; border-radius: var(--wk-r-lg);
  box-shadow: var(--wk-shadow); padding: 2rem;
  border: 1px solid var(--wk-border);
}

/* ============================================================
   BADGES
   ============================================================ */
.badge { font-weight: 600; padding: .35em .7em; border-radius: var(--wk-r-sm); font-size: .75em; }
.badge.bg-success { background: var(--wk-green) !important; }
.badge.bg-warning { background: var(--wk-amber) !important; color: #fff !important; }
.badge.bg-info { background: var(--wk-blue) !important; }
.badge.bg-light { background: var(--wk-bg-soft) !important; color: var(--wk-text) !important; border: 1px solid var(--wk-border); }

.badge-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--wk-green-light); color: var(--wk-green-dark);
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600;
}

/* ============================================================
   STARS
   ============================================================ */
.stars { white-space: nowrap; }
.stars i { font-size: .85rem; }
.text-warning { color: #f59e0b !important; }

/* ============================================================
   TABLES (clean Upwork style)
   ============================================================ */
.table { border-color: var(--wk-border); }
.table thead th {
  background: var(--wk-bg-soft);
  font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--wk-text-muted);
  border-bottom: 1px solid var(--wk-border);
  padding: .85rem 1rem;
}
.table tbody td { padding: .85rem 1rem; vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--wk-bg-soft); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { border: none; border-radius: var(--wk-r); padding: .85rem 1.1rem; }
.alert-success { background: var(--wk-green-light); color: var(--wk-green-dark); }
.alert-danger { background: var(--wk-red-light); color: var(--wk-red); }
.alert-warning { background: var(--wk-amber-light); color: #92400e; }
.alert-info { background: var(--wk-blue-light); color: var(--wk-blue); }

/* ============================================================
   SIDEBAR FILTERS
   ============================================================ */
.filter-sidebar {
  background: #fff; border: 1px solid var(--wk-border);
  border-radius: var(--wk-r); padding: 1.5rem;
  position: sticky; top: 90px;
}
.filter-sidebar h6 {
  font-size: .85rem; text-transform: uppercase;
  color: var(--wk-text-muted); letter-spacing: .05em;
  margin: 1.25rem 0 .75rem;
}
.filter-sidebar h6:first-child { margin-top: 0; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.stat-card {
  background: #fff; border: 1px solid var(--wk-border);
  border-radius: var(--wk-r); padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.stat-card .stat-icon {
  width: 48px; height: 48px; border-radius: var(--wk-r-sm);
  background: var(--wk-green-light); color: var(--wk-green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.stat-card.amber .stat-icon { background: var(--wk-amber-light); color: #92400e; }
.stat-card.blue .stat-icon { background: var(--wk-blue-light); color: var(--wk-blue); }
.stat-card.red .stat-icon { background: var(--wk-red-light); color: var(--wk-red); }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--wk-ink); line-height: 1; }
.stat-card .stat-label { font-size: .8rem; color: var(--wk-text-muted); margin-top: 4px; }

.dash-tabs {
  border-bottom: 1px solid var(--wk-border); margin-bottom: 1.5rem;
  display: flex; gap: .25rem; overflow-x: auto;
}
.dash-tabs a {
  padding: .85rem 1.25rem; color: var(--wk-text-muted);
  font-weight: 600; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.dash-tabs a.active, .dash-tabs a:hover {
  color: var(--wk-green-dark); border-bottom-color: var(--wk-green);
}

/* ============================================================
   CHAT (modern WhatsApp-ish)
   ============================================================ */
.chat-container {
  display: flex; flex-direction: column;
  height: 70vh; min-height: 400px;
  background: #fff; border-radius: var(--wk-r);
  border: 1px solid var(--wk-border); overflow: hidden;
}
.chat-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--wk-border);
  background: #fff; display: flex; align-items: center; gap: .75rem;
}
.chat-messages {
  flex: 1; overflow-y: auto; padding: 1.25rem;
  background: linear-gradient(180deg, #f7faf7, #fff);
  display: flex; flex-direction: column; gap: .5rem;
}
.chat-bubble {
  max-width: 70%; padding: .65rem 1rem;
  border-radius: var(--wk-r); font-size: .92rem;
  line-height: 1.4; word-wrap: break-word;
  box-shadow: var(--wk-shadow-sm);
}
.chat-bubble.theirs {
  background: #fff; border: 1px solid var(--wk-border);
  align-self: flex-start; border-bottom-left-radius: 4px;
}
.chat-bubble.mine {
  background: var(--wk-green); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.chat-bubble .chat-time {
  display: block; font-size: .7rem; opacity: .7; margin-top: 4px;
}
.chat-input {
  padding: .75rem;
  border-top: 1px solid var(--wk-border);
  background: #fff; display: flex; gap: .5rem;
}
.chat-input input {
  flex: 1; border: 1px solid var(--wk-border-strong);
  border-radius: 999px; padding: .65rem 1rem; outline: none;
}
.chat-input input:focus { border-color: var(--wk-green); }
.chat-input button {
  background: var(--wk-green); color: #fff; border: none;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   NOTIFICATIONS DROPDOWN
   ============================================================ */
.notif-dropdown {
  width: 360px; max-height: 480px; overflow-y: auto; padding: 0 !important;
}
.notif-item {
  padding: .85rem 1rem; border-bottom: 1px solid var(--wk-border);
  display: flex; gap: .75rem; cursor: pointer; transition: background .15s;
}
.notif-item:hover { background: var(--wk-bg-soft); }
.notif-item.unread { background: var(--wk-green-light); }
.notif-item .notif-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--wk-green-light); color: var(--wk-green-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notif-item .notif-body { flex: 1; min-width: 0; }
.notif-item .notif-title { font-weight: 600; font-size: .9rem; color: var(--wk-ink); margin: 0; }
.notif-item .notif-msg { font-size: .82rem; color: var(--wk-text-muted); margin: 2px 0 0; }
.notif-item .notif-time { font-size: .72rem; color: var(--wk-text-light); margin-top: 4px; }

/* ============================================================
   FOOTER
   ============================================================ */
.workrr-footer {
  background: var(--wk-ink); color: #b5c5b5;
  padding: 4rem 0 1.5rem;
  margin-top: 5rem;
}
.workrr-footer h6 {
  color: #fff; font-size: .9rem; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 1rem; font-weight: 700;
}
.workrr-footer a { color: #b5c5b5; display: block; padding: .25rem 0; font-size: .9rem; }
.workrr-footer a:hover { color: var(--wk-green); }
.footer-social a {
  display: inline-flex; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1); align-items: center; justify-content: center;
  margin-right: .5rem; padding: 0;
}
.footer-social a:hover { background: var(--wk-green); color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .85rem; color: #8aa68a;
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-banner {
  position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 480px;
  background: #fff; border-radius: var(--wk-r-lg);
  box-shadow: var(--wk-shadow-lg); padding: 1.25rem;
  z-index: 1050; display: none;
  border: 1px solid var(--wk-border);
}
.cookie-banner.show { display: block; }

/* ============================================================
   PROGRESS / RATING BARS
   ============================================================ */
.rating-bar { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.rating-bar .bar { flex: 1; height: 8px; background: var(--wk-border); border-radius: 4px; overflow: hidden; }
.rating-bar .bar-fill { height: 100%; background: var(--wk-amber); border-radius: 4px; }

/* ============================================================
   JOB CARDS (Upwork-style)
   ============================================================ */
.job-card {
  background: #fff; border: 1px solid var(--wk-border);
  border-radius: var(--wk-r); padding: 1.5rem;
  transition: all .2s;
}
.job-card:hover { border-color: var(--wk-green); }
.job-card h5 a { color: var(--wk-ink); font-weight: 600; }
.job-card h5 a:hover { color: var(--wk-green-dark); }
.job-card .job-meta {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; color: var(--wk-text-muted); margin-top: .5rem;
}
.job-card .job-meta strong { color: var(--wk-ink); }
.job-card .job-tags { margin-top: .75rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.job-card .job-tag {
  background: var(--wk-bg-soft); color: var(--wk-text);
  padding: .2rem .65rem; border-radius: 4px; font-size: .75rem;
}

/* ============================================================
   PROFILE / SELLER HERO
   ============================================================ */
.profile-hero {
  background: linear-gradient(135deg, var(--wk-ink) 0%, #003200 100%);
  color: #fff; padding: 3rem 0; margin-bottom: 2rem;
  border-radius: var(--wk-r-lg);
}
.profile-hero h1, .profile-hero h2 { color: #fff; }
.profile-hero img.avatar-lg {
  width: 120px; height: 120px; border-radius: 50%;
  border: 4px solid #fff; object-fit: cover;
}

/* ============================================================
   PRICING PACKAGES (basic/standard/premium)
   ============================================================ */
.package-tabs {
  display: flex; border: 1px solid var(--wk-border);
  border-radius: var(--wk-r); overflow: hidden; margin-bottom: 1rem;
}
.package-tabs button {
  flex: 1; padding: .75rem; background: #fff; border: none;
  font-weight: 600; color: var(--wk-text-muted);
  border-right: 1px solid var(--wk-border); transition: all .15s;
}
.package-tabs button:last-child { border-right: none; }
.package-tabs button.active { background: var(--wk-green); color: #fff; }
.package-pane {
  border: 1px solid var(--wk-border);
  border-radius: var(--wk-r); padding: 1.5rem;
  background: #fff;
}
.package-pane .pkg-price {
  font-size: 2rem; font-weight: 800; color: var(--wk-ink); margin-bottom: .5rem;
}
.package-pane ul { list-style: none; padding: 0; margin: 1rem 0; }
.package-pane li {
  padding: .35rem 0; font-size: .9rem;
  display: flex; align-items: start; gap: .5rem;
}
.package-pane li i { color: var(--wk-green); margin-top: 3px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hero { padding: 3rem 0; }
  .hero-search { flex-direction: column; padding: 1rem; gap: .5rem; }
  .hero-search input, .hero-search select { width: 100%; }
  .hero-search button { width: 100%; border-radius: var(--wk-r) !important; }
  .filter-sidebar { position: static; margin-bottom: 1.5rem; }
  .section { padding: 2.5rem 0; }
}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-sidebar {
  background: var(--wk-ink); color: #b5c5b5;
  min-height: 100vh; padding: 1.5rem 0;
}
.admin-sidebar .brand {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 1rem;
}
.admin-sidebar .brand h4 { color: #fff; font-size: 1.25rem; margin: 0; }
.admin-sidebar a {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.5rem; color: #b5c5b5; font-size: .92rem;
  border-left: 3px solid transparent;
}
.admin-sidebar a:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-sidebar a.active { color: #fff; border-left-color: var(--wk-green); background: rgba(20,168,0,.1); }
.admin-content { padding: 2rem; background: var(--wk-bg-soft); min-height: 100vh; }

/* ============================================================
   UTILITIES
   ============================================================ */
.cursor-pointer { cursor: pointer; }
.fs-7 { font-size: .85rem; }
.fs-8 { font-size: .75rem; }
.text-decoration-none-hover:hover { text-decoration: none; }
.divider-text {
  display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0;
  color: var(--wk-text-muted); font-size: .85rem;
}
.divider-text::before, .divider-text::after {
  content: ''; flex: 1; height: 1px; background: var(--wk-border);
}


/* WORKRR v5 production layer */
:root{--v5-bg:#f6f8fb;--v5-ink:#111827;--v5-muted:#64748b;--v5-line:#e5e7eb;--v5-card:#ffffff;--v5-green:#14a800;--v5-dark:#0f172a;--v5-red:#ef4444;--v5-amber:#f59e0b;--v5-blue:#2563eb;}
.admin-v5-body{background:var(--v5-bg)!important;font-family:'Plus Jakarta Sans',sans-serif;color:var(--v5-ink)}
.admin-main{padding:28px}.admin-divider{border-color:rgba(255,255,255,.12);margin:16px 12px}.admin-sidebar .nav-link span{white-space:nowrap}.admin-topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:blur(12px)}
.v5-card{background:var(--v5-card);border:1px solid var(--v5-line);border-radius:18px;box-shadow:0 12px 40px rgba(15,23,42,.06)}
.v5-card-header{padding:20px 24px;border-bottom:1px solid var(--v5-line);display:flex;align-items:center;justify-content:space-between;gap:12px}.v5-card-body{padding:24px}.v5-grid{display:grid;gap:18px}.v5-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.v5-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v5-stat{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--v5-line);border-radius:18px;padding:20px}.v5-stat .num{font-size:1.7rem;font-weight:800}.v5-stat .lbl{color:var(--v5-muted);font-size:.86rem}.v5-kpi-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#ecfdf5;color:var(--v5-green)}
.v5-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}.v5-tabs{display:flex;gap:8px;flex-wrap:wrap}.v5-tabs a{border:1px solid var(--v5-line);background:#fff;color:var(--v5-ink);padding:9px 13px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.86rem}.v5-tabs a.active{background:var(--v5-green);border-color:var(--v5-green);color:#fff}
.v5-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--v5-muted);background:#f8fafc}.v5-table td{vertical-align:middle}.v5-actions{display:flex;gap:6px;flex-wrap:wrap}.btn-v5{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:12px;background:var(--v5-green);color:#fff!important;padding:10px 14px;font-weight:800;text-decoration:none}.btn-v5-outline{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--v5-line);border-radius:12px;background:#fff;color:var(--v5-ink)!important;padding:9px 13px;font-weight:800;text-decoration:none}.btn-v5-danger{background:var(--v5-red)!important}.btn-v5-warning{background:var(--v5-amber)!important}.btn-v5-blue{background:var(--v5-blue)!important}
.payment-card-preview{border:1px solid var(--v5-line);border-radius:18px;padding:20px;background:linear-gradient(135deg,#111827,#334155);color:#fff}.stripe-field{height:48px;border:1px solid var(--v5-line);border-radius:12px;padding:12px;background:#fff}.gateway-option{border:1px solid var(--v5-line);border-radius:16px;padding:14px;background:#fff}.gateway-option.active{border-color:var(--v5-green);box-shadow:0 0 0 3px rgba(20,168,0,.12)}
.chat-shell{display:grid;grid-template-columns:320px 1fr;min-height:650px}.chat-list{border-right:1px solid var(--v5-line);overflow:auto}.chat-thread{display:flex;flex-direction:column}.chat-messages{flex:1;overflow:auto;padding:20px;background:#f8fafc}.chat-bubble{max-width:72%;padding:12px 14px;border-radius:16px;margin-bottom:10px;background:#fff;border:1px solid var(--v5-line)}.chat-bubble.me{margin-left:auto;background:#dcfce7;border-color:#bbf7d0}.empty-state{padding:56px 20px;text-align:center;background:#fff;border:1px dashed var(--v5-line);border-radius:18px}.module-card{height:100%;border:1px solid var(--v5-line);border-radius:18px;padding:18px;background:#fff}.module-card i{font-size:1.5rem;color:var(--v5-green)}
@media(max-width:992px){.v5-grid-4,.v5-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-shell{grid-template-columns:1fr}.chat-list{border-right:0;border-bottom:1px solid var(--v5-line);max-height:260px}}@media(max-width:576px){.v5-grid-4,.v5-grid-3{grid-template-columns:1fr}.admin-main{padding:16px}.v5-card-body{padding:18px}.chat-bubble{max-width:92%}}