/* ============================================================
   Taklif App — Global Theme Override
   Color System: Green (#2d8657, #38a169, #22c55e) + White
   NO BLUE. NO PURPLE. NO INDIGO.
   ============================================================ */

/* Global layout — crisp white with a subtle green tint */
body {
  background: #f6fdf9;
  color: #0f172a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
}

/* Add bottom space so content is not hidden behind the app bottom nav */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 88px;
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* Constrain main content for a centered app shell on larger screens */
.searchwrap,
.infodatawrap,
.listpgWraper,
.pageSearch,
.userccount,
.job-header,
.footerWrap,
.howitwrap,
.topjobsec,
.latestjobs,
.topemployerwrap,
.premium-wrap,
.testimonials,
.blogwrap {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 22px;
  box-shadow: 0 8px 30px rgba(15, 60, 30, 0.08);
  overflow: hidden;
  background-color: #ffffff;
}

@media (max-width: 991.98px) {
  .searchwrap,
  .infodatawrap,
  .listpgWraper,
  .pageSearch,
  .userccount,
  .job-header,
  .footerWrap,
  .howitwrap,
  .topjobsec,
  .latestjobs,
  .topemployerwrap,
  .premium-wrap,
  .testimonials,
  .blogwrap {
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(15, 60, 30, 0.1);
  }
}

/* ── Header: Rich Green gradient ── */
.header {
  background: linear-gradient(135deg, #1a5c38 0%, #2d8657 50%, #38a169 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 20px rgba(29, 100, 60, 0.3) !important;
}

.header .logo img {
  max-height: 42px;
}

.navbar-light .navbar-nav .nav-link,
.navbar-nav>li>a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-nav>li.active>a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  border-bottom-color: transparent;
}

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-nav>li:hover>a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 10px 8px;
    font-size: 13px;
    color: #1a202c !important;
  }
  .navbar-light .navbar-nav .active>.nav-link,
  .navbar-nav>li.active>a {
    background: #38a169 !important;
    color: #ffffff !important;
  }
}

/* ── Buttons: All green ── */
.btn,
.btn-yellow,
.btn-dark,
.btn-primary {
  border-radius: 999px;
  padding-inline: 22px;
  padding-block: 10px;
  font-weight: 600;
}

.btn-yellow,
.btn-primary {
  background: linear-gradient(135deg, #38a169, #2d8657) !important;
  border: none !important;
  color: #ffffff !important;
}

.btn-yellow:hover,
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(45, 134, 87, 0.4);
  color: #ffffff !important;
}

.btn-green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding-inline: 22px;
  padding-block: 10px;
  font-weight: 600;
}

.btn-green:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.45);
  color: #fff;
}

.btn-dark {
  background: #1a202c !important;
  border: none;
}

/* ── App-style bottom / mobile nav ── */
.mobilenav {
  border-radius: 18px 18px 0 0;
  background: #2d8657 !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 -4px 20px rgba(29, 100, 60, 0.2);
}

.mobilenav ul li a {
  color: #ffffff;
}

.mobilenav ul li a span {
  font-size: 12px;
  text-transform: none;
}

.mobilenav ul li a svg {
  fill: #ffffff;
}

/* ── Cards & list items ── */
.jobslist .jobint,
.joblist,
.topjobwrap,
.company-list,
.premium-wrap .col-md-3,
.latestjobs .col-md-4,
.blogwrap .col-md-4,
.testimonials .col-md-4 {
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(15, 60, 30, 0.08);
  border: 1px solid rgba(56, 161, 105, 0.1);
}

.jobslist .jobint {
  padding: 16px 14px;
}

/* ── Home search hero ── */
.searchwrap {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
}

/* Search hero box inside */
.srjobseeker {
  background: linear-gradient(145deg, #1a5c38 0%, #38a169 100%) !important;
  border-radius: 24px;
  padding: 40px 30px 36px;
  color: #ffffff;
  box-shadow: 0 10px 40px rgba(29, 100, 60, 0.35);
}

.srjobseeker h1 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #ffffff;
  font-weight: 800;
}

.srjobseeker p {
  opacity: 0.9;
  color: rgba(255,255,255,0.88);
}

.searchbarbt {
  margin-top: 18px;
}

/* ── Section page search (inner pages) ── */
.pageSearch {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border-left: 4px solid #38a169;
}

.pageSearch h3 {
  color: #1a5c38 !important;
}

/* ── Inputs: clean rounded fields ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  border-radius: 12px;
  border-color: #d1fae5;
  padding-inline: 18px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: #38a169 !important;
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.15) !important;
  outline: none;
}

textarea {
  border-radius: 14px;
}

/* ── Inner page title header ── */
.pageTitle {
  background: transparent;
  padding-top: 16px;
}

.pageTitle .page-heading {
  font-size: 20px;
  font-weight: 700;
  color: #1a5c38;
}

/* ── Links ── */
a {
  color: #2d8657;
}
a:hover {
  color: #1a5c38;
}

/* ── text-primary bootstrap override ── */
.text-primary {
  color: #38a169 !important;
}

.bg-primary {
  background-color: #38a169 !important;
}

/* ── Badges / pills ── */
.badge-primary,
.badge.bg-primary {
  background-color: #38a169 !important;
  color: #fff;
}

/* ── Bootstrap form focus ring ── */
.form-control:focus {
  border-color: #38a169 !important;
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.15) !important;
}

/* ── Green section backgrounds ── */
.greybg {
  background: #f0fdf4 !important;
}