/* ══════════════════════════════════════════════
   RumahHelp — styles.css (fixed & production-ready)
   ══════════════════════════════════════════════ */

/* === RESET & BASE === */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#FAFAF7;color:#1A1A2E}
:root{
  --teal:#0B6E6E;
  --teal2:#0D8F8F;
  --teal-lt:#E6F4F4;
  --gold:#C8922A;
  --border:#E5E0D8;
  --muted:#6B7280;
  --shadow:0 4px 20px rgba(0,0,0,0.07);
  --shadow2:0 8px 40px rgba(0,0,0,0.11)
}

/* === SKIP TO CONTENT (a11y) === */
.skip-link{
  position:absolute;top:-100%;left:50%;transform:translateX(-50%);
  background:var(--teal);color:white;padding:12px 24px;border-radius:0 0 8px 8px;
  z-index:9999;font-weight:700;text-decoration:none;transition:top 0.2s
}
.skip-link:focus{top:0}

/* === TOPBAR === */
.topbar{background:var(--teal);padding:8px 48px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,0.8);flex-wrap:wrap}
.topbar a{color:white;text-decoration:none}

/* === NAV === */
nav{position:sticky;top:0;background:rgba(250,250,247,0.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 48px;height:70px;display:flex;align-items:center;justify-content:space-between;z-index:100;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none}
.logo-icon{width:42px;height:42px;background:var(--teal);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.logo-name{font-size:21px;font-weight:800;color:var(--teal)}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:500;cursor:pointer;transition:color 0.2s}
.nav-links a:hover,.nav-links a:focus{color:var(--teal);outline:none}
.nav-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* === HAMBURGER MENU (mobile) === */
.hamburger{
  display:none;width:40px;height:40px;background:none;border:1.5px solid var(--border);
  border-radius:8px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  position:relative;z-index:201
}
.hamburger span{display:block;width:20px;height:2px;background:#1A1A2E;border-radius:2px;transition:all 0.3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(250,250,247,0.98);backdrop-filter:blur(20px);
  z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  opacity:0;transition:opacity 0.3s
}
.mobile-menu.open{display:flex;opacity:1}
.mobile-menu a{
  font-size:20px;font-weight:700;color:#1A1A2E;text-decoration:none;
  padding:12px 32px;border-radius:12px;transition:all 0.2s;cursor:pointer
}
.mobile-menu a:hover,.mobile-menu a:focus{background:var(--teal-lt);color:var(--teal)}
.mobile-menu .mobile-auth{display:flex;gap:12px;margin-top:16px}

/* === BUTTONS === */
.btn-ghost{padding:9px 20px;border-radius:8px;border:1.5px solid var(--border);background:transparent;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-ghost:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.btn-main{padding:9px 22px;border-radius:8px;background:var(--teal);border:none;color:white;font-weight:700;cursor:pointer;transition:all 0.2s}
.btn-main:hover{background:var(--teal2)}
.btn-main:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang-btn{padding:7px 14px;border-radius:8px;border:1.5px solid var(--teal);background:transparent;color:var(--teal);font-weight:700;cursor:pointer;font-size:12px}
.google-btn{width:100%;padding:12px;border:1.5px solid var(--border);border-radius:10px;background:white;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:14px;cursor:pointer;margin-bottom:4px}
.or-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:13px}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* === HERO === */
.hero{max-width:1160px;margin:0 auto;padding:80px 48px 60px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center}
.hero-title{font-size:52px;font-weight:900;line-height:1.06;margin-bottom:18px}
.hero-title em{color:var(--teal);font-style:normal}
.hero-sub{font-size:16px;color:var(--muted);margin-bottom:36px;line-height:1.7}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-cta{padding:15px 32px;background:var(--teal);border:none;color:white;font-weight:700;border-radius:10px;cursor:pointer;font-size:16px;transition:all 0.2s}
.btn-cta:hover{background:var(--teal2);transform:translateY(-1px)}
.btn-cta:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-cta2{padding:15px 28px;border:2px solid var(--border);background:white;font-weight:600;border-radius:10px;cursor:pointer;transition:all 0.2s}
.btn-cta2:hover{border-color:var(--teal);color:var(--teal)}
.hero-stats{display:flex;gap:24px;margin-top:28px;padding-top:28px;border-top:1px solid var(--border);flex-wrap:wrap}
.stat-n{font-size:26px;font-weight:900;color:var(--teal)}
.stat-l{font-size:12px;color:var(--muted)}
.hero-panel{background:white;border-radius:24px;border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow2)}
.panel-body{padding:20px}
.service-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.pill{padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;border:1.5px solid var(--border);background:white;cursor:pointer;transition:all 0.2s}
.pill:hover{border-color:var(--teal);background:var(--teal-lt)}

/* === BANNER === */
.banner{background:var(--teal);padding:16px 48px;display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.banner-item{color:rgba(255,255,255,0.85);font-size:13px}
.banner-item strong{color:white}

/* === SECTIONS === */
.section-wrap{padding:90px 48px}
.section-inner{max-width:1160px;margin:0 auto}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.section-title{font-size:40px;font-weight:900;margin:12px 0}
.section-sub{font-size:16px;color:var(--muted);margin-bottom:48px}

/* === SERVICES GRID === */
.services-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.svc-card{background:white;padding:24px 16px;border-radius:20px;border:1.5px solid var(--border);text-align:center;cursor:pointer;transition:all 0.2s}
.svc-card:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:var(--shadow2)}
.svc-icon{font-size:36px;margin-bottom:10px}
.svc-name{font-size:13px;font-weight:800}
.svc-price{font-size:11px;color:var(--muted);margin-top:6px}

/* === HOW IT WORKS === */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.how-card{background:white;padding:32px 24px;border-radius:20px;border:1.5px solid var(--border)}
.how-num{font-family:Georgia,serif;font-size:56px;font-weight:900;color:var(--teal-lt);line-height:1}
.how-icon{font-size:32px;margin:12px 0}
.how-title{font-size:17px;font-weight:800;margin-bottom:8px}
.how-desc{font-size:14px;color:var(--muted);line-height:1.6}

/* === HELPERS & JOBS GRID === */
.helpers-grid,.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.h-card,.job-card{background:white;border:1.5px solid var(--border);border-radius:20px;overflow:hidden;transition:all 0.2s}
.h-card:hover,.job-card:hover{border-color:var(--teal);box-shadow:var(--shadow2);transform:translateY(-2px)}
.h-hd{padding:18px;background:linear-gradient(135deg,var(--teal-lt),white);display:flex;gap:12px;align-items:center}
.h-av{width:56px;height:56px;background:white;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;position:relative;overflow:hidden;flex-shrink:0}
.h-dot{position:absolute;bottom:-3px;right:-3px;width:13px;height:13px;border-radius:50%;border:2px solid white}
.d-on{background:#27AE60}.d-bz{background:#F59E0B}
.h-nm{font-weight:800;font-size:15px}
.h-rl{font-size:12px;color:var(--muted);margin:2px 0}
.h-stars{color:#F5A623;font-size:12px}
.h-skills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.h-sk{padding:3px 9px;background:var(--teal-lt);color:var(--teal);border-radius:20px;font-size:11px;font-weight:600}
.h-rate{font-size:20px;font-weight:900;color:var(--teal)}
.h-meta{display:flex;justify-content:space-between;align-items:center}
.h-ft,.job-ft{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px}
.btn-bk{flex:1;padding:10px;background:var(--teal);border:none;color:white;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px;transition:all 0.2s}
.btn-bk:hover{background:var(--teal2)}
.btn-bk:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-vw{padding:10px 14px;border:1.5px solid var(--border);background:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px;transition:all 0.2s}
.btn-vw:hover{border-color:var(--teal);color:var(--teal)}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;margin-left:8px}
.badge.new{background:#dbeafe;color:#1d4ed8}
.badge.urgent{background:#fee2e2;color:#991b1b}
.browse-controls{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}

/* === POST JOB CTA SECTION === */
.post-wrap{background:linear-gradient(135deg,var(--teal),#074A4A);padding:90px 48px}
.post-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.post-left .section-title{color:white}
.post-left .section-sub{color:rgba(255,255,255,0.6);margin-bottom:28px}
.trust-items{display:flex;flex-direction:column;gap:14px}
.trust-item{display:flex;gap:12px;align-items:center}
.trust-ic{width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.trust-txt{font-size:13px;color:rgba(255,255,255,0.7);line-height:1.5}
.post-form{background:white;padding:32px;border-radius:24px;box-shadow:var(--shadow2)}

/* === TESTIMONIALS === */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi-card{background:white;padding:32px 24px;border-radius:20px;border:1.5px solid var(--border)}
.testi-stars{color:#F5A623;font-size:18px;margin-bottom:10px}
.testi-text{font-size:14px;line-height:1.7;color:#374151;margin-bottom:18px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:10px}
.testi-avatar{width:40px;height:40px;background:var(--teal-lt);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}
.testi-name{font-weight:700;font-size:14px}
.testi-loc{font-size:12px;color:var(--muted)}

/* === FAQ === */
.faq-section{background:white}
.faq-item{background:#FAFAF7;border:1.5px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;padding:18px 20px;background:none;border:none;text-align:left;font-weight:700;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:14px}
.faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s;font-size:14px;color:var(--muted);line-height:1.7}
.faq-a.open{max-height:300px;padding:0 20px 18px}

/* === DASHBOARD === */
.dashboard-container{background:white;border-radius:24px;padding:24px;margin:32px 48px;border:1px solid var(--border);box-shadow:var(--shadow)}
.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.dashboard-tabs{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:20px;overflow-x:auto;padding-bottom:0}
.dash-tab{padding:10px 16px;background:none;border:none;font-weight:600;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;font-size:13px;transition:all 0.2s}
.dash-tab:hover{color:var(--teal)}
.dash-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.dash-tab:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.dash-card{background:var(--teal-lt);padding:16px;border-radius:14px;margin-bottom:12px;border:1px solid var(--border)}
.verified-badge{background:#27AE60;color:white;padding:3px 10px;border-radius:20px;font-size:11px;display:inline-block;margin-left:6px;font-weight:700}

/* === MODAL === */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:200;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:white;border-radius:24px;padding:32px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.modal-close{position:absolute;top:14px;right:18px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);z-index:1}
.modal-close:focus-visible{outline:2px solid var(--teal);border-radius:4px}
.modal-title{font-size:24px;font-weight:900;margin-bottom:6px}
.modal-sub{font-size:13px;color:var(--muted);margin-bottom:20px}
.policy-text{font-size:14px;line-height:1.7;color:#374151}
.policy-text h4{margin:16px 0 8px;color:#1A1A2E}
.policy-text ul{margin:8px 0 8px 20px}
.policy-text li{margin-bottom:4px}

/* === FORMS === */
.f-field{margin-bottom:14px}
.f-label{font-size:11px;font-weight:700;text-transform:uppercase;display:block;margin-bottom:6px;color:#374151}
.f-input,.f-select,.f-textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--teal-lt);font-family:inherit;outline:none;font-size:14px;transition:border-color 0.2s}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--teal)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f-submit{width:100%;padding:14px;background:var(--teal);border:none;color:white;font-weight:700;border-radius:10px;cursor:pointer;margin-top:6px;font-size:15px;transition:all 0.2s;position:relative}
.f-submit:hover{background:var(--teal2)}
.f-submit:disabled{opacity:0.6;cursor:not-allowed}
.f-submit:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.upload-zone{border:2px dashed var(--border);border-radius:16px;padding:32px;text-align:center;cursor:pointer;background:var(--teal-lt);transition:all 0.2s}
.upload-zone:hover{border-color:var(--teal);background:white}

/* === VERIFICATION STEPS === */
.step-dot{width:28px;height:28px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted)}
.step-dot.active{background:var(--teal);color:white}
.step-dot.done{background:#059669;color:white}
.step-dot.done::after{content:'✓'}

/* === LOADING SPINNER === */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.6s linear infinite;vertical-align:middle;margin-right:8px}
.spinner-dark{border:2px solid rgba(0,0,0,0.1);border-top-color:var(--teal)}
@keyframes spin{to{transform:rotate(360deg)}}

/* === TOAST === */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--teal);color:white;padding:12px 28px;border-radius:100px;display:none;z-index:9999;font-size:14px;box-shadow:var(--shadow2);max-width:90vw;text-align:center;font-weight:600;opacity:0;transition:opacity 0.3s,transform 0.3s}
.toast.show{display:block;opacity:1;transform:translateX(-50%) translateY(0)}

/* === FOOTER === */
footer{background:#0A1A1A;padding:56px 48px 28px;color:rgba(255,255,255,0.4)}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footer-logo{font-size:22px;font-weight:800;color:white;margin-bottom:10px}
.footer-desc{font-size:13px;line-height:1.7;max-width:240px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:1px;margin-bottom:14px;color:rgba(255,255,255,0.5);text-transform:uppercase}
.footer-col a{display:block;color:rgba(255,255,255,0.4);text-decoration:none;margin-bottom:10px;cursor:pointer;font-size:14px;transition:color 0.2s}
.footer-col a:hover{color:rgba(255,255,255,0.8)}

/* === WHATSAPP FLOAT === */
.wa-float{position:fixed;bottom:30px;right:30px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;text-decoration:none;box-shadow:0 4px 16px rgba(37,211,102,0.45);z-index:150;transition:transform 0.2s}
.wa-float:hover{transform:scale(1.1)}

/* === RESPONSIVE: TABLET === */
@media(max-width:960px){
  .topbar{display:none}
  nav{padding:0 20px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero{grid-template-columns:1fr;padding:40px 20px}
  .hero-panel{display:none}
  .hero-title{font-size:36px}
  .how-grid,.testi-grid{grid-template-columns:1fr}
  .helpers-grid,.jobs-grid{grid-template-columns:1fr 1fr}
  .post-inner{grid-template-columns:1fr;gap:40px}
  .dashboard-container{margin:16px}
  .footer-inner{grid-template-columns:1fr 1fr}
  .section-wrap{padding:60px 24px}
  .post-wrap{padding:60px 24px}
  .services-grid{grid-template-columns:repeat(3,1fr)}
}

/* === RESPONSIVE: MOBILE === */
@media(max-width:600px){
  .helpers-grid,.jobs-grid,.testi-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .hero-stats{gap:16px}
  .f-row{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-tabs{gap:2px}
  .dash-tab{padding:8px 10px;font-size:12px}
  .section-title{font-size:28px}
  .banner{padding:12px 20px;gap:20px}
  .banner-item{font-size:11px}
}

/* ══════════════════════════════════════
   SOS BUTTON
══════════════════════════════════════ */
.sos-btn {
  background: #DC2626;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  animation: sos-pulse 2s infinite;
}
@keyframes sos-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* ══════════════════════════════════════
   CHARACTER COUNTER
══════════════════════════════════════ */
.char-counter {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  margin-top: 2px;
}
.char-counter.near-limit { color: #F59E0B; }
.char-counter.at-limit { color: #DC2626; }

/* ══════════════════════════════════════
   ANNOUNCEMENT BANNER
══════════════════════════════════════ */
#announcementBanner {
  position: sticky;
  top: 0;
  z-index: 200;
}

/* ══════════════════════════════════════
   ONBOARDING CHECKLIST
══════════════════════════════════════ */
.onboarding-action {
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}

/* ══════════════════════════════════════
   VERIFIED DOCUMENT BADGE
══════════════════════════════════════ */
.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal-lt);
  color: var(--teal);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

/* ══════════════════════════════════════
   EVIDENCE PHOTO GRID
══════════════════════════════════════ */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.evidence-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid var(--border);
  transition: border-color 0.2s;
}
.evidence-grid img:hover { border-color: var(--teal); }

/* ══════════════════════════════════════
   FAVOURITE BUTTON
══════════════════════════════════════ */
.fav-btn.active { color: #DC2626; border-color: #DC2626; }

/* ══════════════════════════════════════
   PHONE OTP INPUT
══════════════════════════════════════ */
#otpInput {
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
  font-weight: 700;
}

/* ══════════════════════════════════════
   PRIVATE OFFER BADGE
══════════════════════════════════════ */
.private-badge {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: white;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}

/* ══════════════════════════════════════
   DARK MODE
══════════════════════════════════════ */
[data-theme="dark"] {
  --bg: #0f1117;
  --card: #1a1f2e;
  --border: #2d3348;
  --teal: #0fd9d9;
  --teal-lt: rgba(11,110,110,0.2);
  --muted: #8892a4;
  --text: #e8eaf0;
}
[data-theme="dark"] body { background:#0f1117; color:#e8eaf0; }
[data-theme="dark"] .job-card,
[data-theme="dark"] .h-card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .faq-item { background:#1a1f2e; border-color:#2d3348; }
[data-theme="dark"] nav { background:#1a1f2e; border-bottom-color:#2d3348; }
[data-theme="dark"] .f-input,
[data-theme="dark"] .f-select,
[data-theme="dark"] .f-textarea { background:#0f1117; border-color:#2d3348; color:#e8eaf0; }
[data-theme="dark"] .modal { background:#1a1f2e; }
[data-theme="dark"] .modal-overlay { background:rgba(0,0,0,0.8); }
[data-theme="dark"] footer { background:#0d1117; }
[data-theme="dark"] section { background:#0f1117; }
[data-theme="dark"] .section-wrap { background:#0f1117; }
[data-theme="dark"] .how-card { background:#1a1f2e; }
[data-theme="dark"] .testi-card { background:#1a1f2e; }
[data-theme="dark"] .svc-card { background:#1a1f2e; }
[data-theme="dark"] #jobsGrid .job-card,
[data-theme="dark"] .helpers-grid .h-card { border:1px solid #2d3348; }

/* ══════════════════════════════════════
   COUNTER-OFFER BUTTON
══════════════════════════════════════ */
.counterBtn {
  font-size:12px;
  padding:6px 10px;
  color:#7C3AED;
  border-color:#7C3AED;
}
.counterBtn:hover { background:#7C3AED; color:white; }

/* ══════════════════════════════════════
   BOOST BADGE
══════════════════════════════════════ */
.badge-boost {
  background:linear-gradient(135deg,#7C3AED,#EC4899);
  color:white;
  padding:2px 8px;
  border-radius:20px;
  font-size:10px;
  font-weight:700;
}

/* ══════════════════════════════════════
   NOTIFICATION BELL
══════════════════════════════════════ */
#notifBell {
  position:relative;
  cursor:pointer;
}

/* ══════════════════════════════════════
   PRIORITY JOB BADGE
══════════════════════════════════════ */
.priority-badge {
  background:linear-gradient(135deg,#059669,#047857);
  color:white;
  padding:2px 8px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
}

/* ══════════════════════════════════════
   OFFLINE BANNER
══════════════════════════════════════ */
#offlineBanner {
  position:fixed;
  top:0;left:0;right:0;
  background:#DC2626;
  color:white;
  text-align:center;
  padding:8px;
  font-size:13px;
  font-weight:700;
  z-index:9999;
}

/* ══════════════════════════════════════
   PAYMENT & ESCROW UI
══════════════════════════════════════ */
.escrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.escrow-awaiting { background: #FEF3C7; color: #92400E; }
.escrow-held { background: #DBEAFE; color: #1E40AF; }
.escrow-released { background: #D1FAE5; color: #065F46; }
.escrow-disputed { background: #FEE2E2; color: #991B1B; }

/* ══════════════════════════════════════
   SUBSCRIPTION BANNERS
══════════════════════════════════════ */
#trialBanner, #subBanner {
  transition: all 0.3s;
}

/* ══════════════════════════════════════
   BILLING TAB
══════════════════════════════════════ */
.billing-plan-card {
  background: linear-gradient(135deg, var(--teal), #074A4A);
  color: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-bottom: 20px;
}
.billing-plan-card .price {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
}
.billing-plan-card .period {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
}

/* ══════════════════════════════════════
   HEATMAP / DEMAND
══════════════════════════════════════ */
.demand-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-left: 4px solid var(--teal);
}
.demand-count {
  font-size: 28px;
  font-weight: 900;
}

/* ══════════════════════════════════════
   T&C CONSENT CHECKBOXES
══════════════════════════════════════ */
.consent-box {
  background: var(--teal-lt);
  border: 1.5px solid rgba(11,110,110,0.2);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.consent-box label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}
.consent-box input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

/* ══════════════════════════════════════
   PAYMENT FLOW STATUS BADGES
══════════════════════════════════════ */
.badge-awaiting-payment {
  background: #FEF3C7; color: #92400E;
}
.badge-payment-held {
  background: #DBEAFE; color: #1E40AF;
}
.badge-work-done {
  background: #EDE9FE; color: #5B21B6;
}

/* ══════════════════════════════════════
   EMPLOYER RATING STARS
══════════════════════════════════════ */
.employer-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF3C7;
  color: #92400E;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* ══════════════════════════════════════
   RECAPTCHA HIDE (invisible)
══════════════════════════════════════ */
.grecaptcha-badge {
  visibility: hidden;
}

/* ══════════════════════════════════════
   MINIMUM RATE BADGE ON HELPER CARDS
══════════════════════════════════════ */
.min-rate-badge {
  background: #F3F4F6;
  color: #6B7280;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}