/* ═══════════════════════════════════════════════════════════════════════
   JobFindIn — Jobpilot Design System
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  --primary: #0A65CC;
  --primary-hover: #0852A5;
  --primary-light: #E7F0FA;
  --text-heading: #18191C;
  --text-body: #5E6670;
  --text-muted: #767F8C;
  --text-light: #9199A3;
  --border-color: #E4E5E8;
  --bg-light: #F1F2F4;
  --bg-dark: #18191C;
  --success: #0BA02C;
  --success-light: #E7F6EA;
  --danger: #E05151;
  --danger-light: #FFEDED;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-body);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
}

/* Button Styles */
.btn-primary-blue {
  background-color: #0A65CC;
  color: #FFFFFF !important;
  font-weight: 600;
  border-radius: 4px;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary-blue:hover {
  background-color: #0852A5;
  box-shadow: 0 4px 12px rgba(10, 101, 204, 0.2);
}

.btn-icon-light {
  background-color: #E7F0FA;
  color: #0A65CC;
  border-radius: 4px;
  padding: 12px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-icon-light:hover {
  background-color: #d6e6f7;
}

/* Badges */
.badge-fulltime {
  background-color: #0BA02C;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 3px;
  text-transform: uppercase;
}

.badge-parttime {
  background-color: #E7F6EA;
  color: #0BA02C;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 3px;
  text-transform: uppercase;
}

.badge-featured {
  background-color: #FFEDED;
  color: #E05151;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 52px;
}

/* Social share button */
.btn-copy-link {
  background: #E7F0FA;
  color: #0A65CC;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-copy-link:hover {
  background: #d8e7f8;
}

.share-social-icon {
  width: 36px;
  height: 36px;
  background: #E7F0FA;
  color: #0A65CC;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.share-social-icon:hover {
  background: #0A65CC;
  color: #FFFFFF;
}

/* Job Cards */
.related-job-card, .job-card {
  background: #FFFFFF;
  border: 1px solid #E4E5E8;
  border-radius: 8px;
  box-shadow: 0px 2px 12px rgba(24, 25, 28, 0.03);
  transition: all 0.2s ease;
}

.related-job-card:hover, .job-card:hover {
  border-color: #0A65CC;
  box-shadow: 0px 6px 20px rgba(10, 101, 204, 0.08);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   Dedicated High-Converting Monetag Ad Placement Containers
   ═══════════════════════════════════════════════════════════════════════ */

.ad-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8px;
}

.ad-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9199A3;
  font-weight: 600;
  margin-bottom: 6px;
  align-self: center;
}

.ad-leaderboard {
  min-height: 88px;
  max-width: 960px;
  margin: 0 auto;
}

.ad-sidebar {
  min-height: 270px;
  max-width: 340px;
  margin: 0 auto;
}

.ad-incontent {
  min-height: 90px;
  margin: 20px 0;
}

/* Formatted Description Styling */
.description-content {
  font-size: 15px;
  line-height: 1.7;
  color: #5E6670;
}

.description-content h1,
.description-content h2,
.description-content h3,
.description-content h4 {
  font-weight: 600;
  color: #18191C;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.description-content h2 { font-size: 1.25rem; }
.description-content h3 { font-size: 1.125rem; }
.description-content h4 { font-size: 1rem; }

.description-content p {
  margin-bottom: 1rem;
}

.description-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.description-content li {
  margin-bottom: 0.5rem;
}

.description-content a {
  color: #0A65CC;
  text-decoration: underline;
}

.description-content a:hover {
  color: #0852A5;
}

@media print {
  header, footer, .ad-container, .btn-primary-blue, .share-social-icon, .btn-copy-link, #searchInput, select {
    display: none !important;
  }
}