/* vip.css (Clean VIP Edition)
   ✅ Load AFTER style.css
   ✅ Scoped: .theme-premium (safe overrides)
   ✅ Clean file: removed duplicates/conflicts
   ✅ Focus: HERO + search + premium UI + JOB ITEM VIP++
*/

/* =========================================================
   0) VIP TOKENS
========================================================= */
:root{
  --primary:#2563EB;
  --secondary:#1D4ED8;
  --brand3:#0EA5E9;

  --ink:#0B1220;
  --muted:#64748B;

  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#F8FAFC;
  --line:rgba(2,6,23,.08);

  --r-sm:14px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:34px;

  --sh-xs:0 8px 18px rgba(2,6,23,.06);
  --sh-sm:0 14px 34px rgba(2,6,23,.08);
  --sh-md:0 24px 70px rgba(2,6,23,.12);
  --sh-hi:0 34px 110px rgba(2,6,23,.16);

  --t-fast:.15s ease;
  --t-mid:.20s ease;
}

/* =========================================================
   1) BASE POLISH
========================================================= */
body.theme-premium,
.theme-premium body{
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 18% 6%, rgba(37,99,235,.09), transparent 60%),
    radial-gradient(900px 480px at 86% 16%, rgba(14,165,233,.07), transparent 60%),
    #ffffff;
}

.theme-premium h1,.theme-premium h2,.theme-premium h3,.theme-premium h4,.theme-premium h5{
  letter-spacing:-0.03em;
}
.theme-premium h1,.theme-premium .display-3{
  font-weight:950;
  letter-spacing:-0.06em;
}
.theme-premium :is(p, .text-muted){
  color:rgba(100,116,139,.92);
}

.theme-premium a{ text-decoration:none; }
.theme-premium a:hover{ text-decoration:none; }

/* =========================================================
   2) NAVBAR (glass)
========================================================= */
.theme-premium .navbar{
  background:rgba(248,250,252,.84) !important;
  border-bottom:1px solid rgba(2,6,23,.06);
  box-shadow:none !important;
  backdrop-filter:blur(12px);
}
@media (hover:none){
  .theme-premium .navbar{
    backdrop-filter:none;
    background:rgba(248,250,252,.98) !important;
  }
}
.theme-premium .navbar .navbar-brand h1{
  font-weight:950;
  letter-spacing:-0.06em;
}
.theme-premium .navbar-light .navbar-nav .nav-link{
  font-weight:850;
  opacity:.78;
}
.theme-premium .navbar-light .navbar-nav .nav-link:hover,
.theme-premium .navbar-light .navbar-nav .nav-link.active{
  opacity:1;
}

/* CTA in navbar (uses your .btn-nav-cta) */
.theme-premium .btn-nav-cta{
  box-shadow:0 18px 50px rgba(37,99,235,.28) !important;
  border-color:rgba(255,255,255,.14) !important;
}
.theme-premium .btn-nav-cta:hover{
  box-shadow:0 26px 70px rgba(37,99,235,.34) !important;
}

/* =========================================================
   3) GLOBAL CARDS (exclude .job-item to avoid conflicts)
========================================================= */
.theme-premium :is(.cardx, .post-item, .job-search-card){
  border-radius:var(--r-lg) !important;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--sh-sm);
  transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid), filter var(--t-mid);
}
.theme-premium :is(.cardx, .post-item):hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
  border-color:rgba(37,99,235,.14);
}

/* =========================================================
   4) BUTTONS
========================================================= */
.theme-premium .btn{
  border-radius:var(--r-md);
  font-weight:900;
  letter-spacing:-0.01em;
  transition:transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast), background var(--t-fast);
}
.theme-premium .btn-primary{
  border-color:transparent !important;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow:0 18px 44px rgba(37,99,235,.24);
}
.theme-premium .btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 26px 64px rgba(37,99,235,.30);
}
.theme-premium .btn-outline-secondary{
  border-color:rgba(2,6,23,.14) !important;
}

/* =========================================================
   5) FORMS
========================================================= */
.theme-premium :is(.form-control, .form-select){
  border-radius:var(--r-md) !important;
  border:1px solid rgba(2,6,23,.12);
  box-shadow:0 10px 22px rgba(2,6,23,.05);
  font-weight:650;
}
.theme-premium :is(.form-control, .form-select):focus{
  border-color:rgba(37,99,235,.32);
  box-shadow:0 0 0 .25rem rgba(37,99,235,.12), 0 16px 34px rgba(2,6,23,.06);
}

/* =========================================================
   6) HERO — MAKEOVER
========================================================= */
.theme-premium .hero-ui{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 12% 22%, rgba(37,99,235,.55), transparent 62%),
    radial-gradient(900px 520px at 84% 35%, rgba(14,165,233,.22), transparent 60%),
    radial-gradient(700px 420px at 70% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, #0B1633 0%, #071126 100%);
}

/* Noise + grid */
.theme-premium .hero-ui:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(800px 420px at 18% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 26px);
  opacity:.30;
  pointer-events:none;
  mix-blend-mode:overlay;
}

/* Glow orbs */
.theme-premium .hero-ui:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(260px 260px at 22% 18%, rgba(37,99,235,.35), transparent 60%),
    radial-gradient(240px 240px at 82% 30%, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(300px 300px at 60% 80%, rgba(37,99,235,.18), transparent 60%);
  filter:blur(6px);
  opacity:.85;
  pointer-events:none;
}

/* HERO shorter */
.theme-premium .hero-ui .container{
  position:relative;
  z-index:2;
  padding-top: 8px !important;
  padding-bottom: 28px !important;
}

.theme-premium .hero-badge{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 16px 40px rgba(2,6,23,.18);
}

.theme-premium .hero-title{ max-width:820px; }

.theme-premium .hero-ui h1,
.theme-premium .hero-ui .display-3{
  color:#fff;
  text-shadow:0 18px 60px rgba(0,0,0,.35);
}
.theme-premium .hero-sub{
  color:rgba(255,255,255,.74) !important;
  font-weight:650;
}

.theme-premium .trust-chip{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

/* Hero panels */
.theme-premium .hero-panel{
  border-radius:var(--r-xl) !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 28px 90px rgba(2,6,23,.30) !important;
}
.theme-premium .panel-card{
  border-radius:22px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.theme-premium .panel-card:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.18) !important;
}

/* Search float position */
.theme-premium .hero-search-float{
  margin-top: 10px !important;
  z-index: 30;
}

/* Search card (glass) */
.theme-premium .job-search-card{
  border-radius:var(--r-xl) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(12px);
  box-shadow:0 30px 90px rgba(2,6,23,.16) !important;
  position:relative;
}

.theme-premium .job-search-card :is(.form-control, .form-select){
  border-radius:18px !important;
  border:1px solid rgba(2,6,23,.10) !important;
  box-shadow:0 12px 28px rgba(2,6,23,.06) !important;
  font-weight:700;
}
.theme-premium .job-search-card .btn-search{
  border-radius:18px !important;
  background:linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  box-shadow:0 22px 60px rgba(37,99,235,.26) !important;
}
.theme-premium .job-search-card .btn-search:hover{
  transform:translateY(-1px);
  box-shadow:0 30px 80px rgba(37,99,235,.32) !important;
}

@media (hover:none){
  .theme-premium .hero-panel,
  .theme-premium .job-search-card{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .theme-premium .job-search-card{
    background:rgba(255,255,255,.98) !important;
  }
}

/* Mobile carousel height */
@media (max-width:768px){
  .theme-premium .header-carousel .owl-carousel-item{
    min-height: 420px !important;
  }
}

/* =========================================================
   7) FILTER PILLS
========================================================= */
.theme-premium .nav.nav-pills .nav-link{
  border-radius:999px;
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  font-weight:900;
  color:rgba(2,6,23,.72);
  box-shadow:var(--sh-xs);
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.theme-premium .nav.nav-pills .nav-link:hover{
  transform:translateY(-1px);
  box-shadow:var(--sh-sm);
  border-color:rgba(2,6,23,.14);
}
.theme-premium .nav.nav-pills .nav-link.active{
  background:rgba(37,99,235,.08) !important;
  border-color:rgba(37,99,235,.22) !important;
  color:rgba(2,6,23,.92) !important;
}

/* =========================================================
   8) JOB DETAIL (side cards)
========================================================= */
.theme-premium .job-detail-page .bg-light.rounded{
  background:#fff !important;
  border:1px solid rgba(2,6,23,.08);
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-sm);
}
.theme-premium .job-detail-page h4,
.theme-premium .job-detail-page h3{
  font-weight:950;
  letter-spacing:-0.03em;
}

/* =========================================================
   9) JOB ITEM VIP++ (KEEP YOUR HTML .job-item)
========================================================= */
.theme-premium .job-item{
  border-radius: var(--r-xl) !important;
  border: 1px solid rgba(2,6,23,.08) !important;
  background: #fff !important;
  box-shadow: var(--sh-sm) !important;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
  display:flex;
  flex-direction:column;
}

.theme-premium .job-item:hover{
  transform: translateY(-4px);
  box-shadow: var(--sh-md) !important;
  border-color: rgba(37,99,235,.18) !important;
}

/* Logo (keeps .job-logo) */
.theme-premium .job-item .job-logo{
  width:56px !important;
  height:56px !important;
  object-fit:contain;
  border-radius:16px !important;
  background:#fff;
  padding:6px;
  border:1px solid rgba(2,6,23,.06) !important;
  box-shadow:0 6px 16px rgba(2,6,23,.08);
}

/* Title + company */
.theme-premium .job-item h5{
  font-weight:950;
  letter-spacing:-0.03em;
  margin-bottom:4px !important;
}
.theme-premium .job-item small.text-muted{
  font-weight:700;
  color:rgba(2,6,23,.60) !important;
}

/* Meta as chips */
.theme-premium .job-item .job-meta{
  display:flex !important;
  flex-wrap:wrap;
  gap:12px 14px;
  margin-top: 4px;
  color:rgba(2,6,23,.62);
  font-weight:700;
  font-size:.92rem;
}
.theme-premium .job-item .job-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(2,6,23,.03);
  border:1px solid rgba(2,6,23,.06);
  max-width:100%;
}

/* Salary pill (best-effort) */
.theme-premium .job-item .job-meta span:has(.fa-money-bill-alt){
  background:rgba(22,163,74,.10);
  border-color:rgba(22,163,74,.18);
  color:#16a34a;
  font-weight:900;
}
@supports not selector(:has(*)){
  .theme-premium .job-item .job-meta span:last-child{
    background:rgba(22,163,74,.10);
    border-color:rgba(22,163,74,.18);
    color:#16a34a;
    font-weight:900;
  }
}

/* Actions */
.theme-premium .job-item .job-actions{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(2,6,23,.06);
}
.theme-premium .job-item .job-detail-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color:var(--primary);
  transition: transform var(--t-fast);
}
.theme-premium .job-item .job-detail-link:hover{
  transform: translateX(3px);
}

/* =========================================================
   10) A11Y / REDUCED MOTION
========================================================= */
.theme-premium :where(a, button, .btn, .nav-link, .form-control, .form-select):focus-visible{
  outline:none;
  box-shadow:0 0 0 .25rem rgba(37,99,235,.18) !important;
}
@media (prefers-reduced-motion: reduce){
  .theme-premium *{ transition:none !important; }
}