/**
 * Mochabun Karir - Frontend Stylesheet
 * 
 * Accurately styled according to karir-no-header-footer.html with bulletproof
 * theme/Elementor isolation and complete dotted outline removal on all buttons.
 *
 * @package MochabunKarir
 */

/* NanumSquareNeo Korean / Latin Variable Webfont */
@font-face {
  font-family: 'NanumSquareNeo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --mbk-bg-warm: #FAF7F2;
  --mbk-bg-white: #FFFFFF;
  --mbk-terracotta: #8D5B4C;
  --mbk-terracotta-dark: #734537;
  --mbk-terracotta-light: #F5EBE6;
  --mbk-warm-tan: #EFE8DE;
  --mbk-warm-tan-card: #F3ECE2;
  --mbk-text-dark: #2D2A26;
  --mbk-text-muted: #7A7571;
  --mbk-border-color: #E8E1D5;
  --mbk-font-heading: 'NanumSquareNeo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mbk-font-brand: 'Quicksand', 'Plus Jakarta Sans', sans-serif;
}

/* Base Wrapper and Reset */
div.mochabun-karir-wrapper {
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--mbk-font-brand) !important;
  color: var(--mbk-text-dark) !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

div.mochabun-karir-wrapper *,
div.mochabun-karir-wrapper *::before,
div.mochabun-karir-wrapper *::after {
  box-sizing: border-box !important;
}

/* ==========================================================================
   STRICT OUTLINE RING REMOVAL (NO DOTTED OUTLINE ON BUTTONS)
   ========================================================================== */
div.mochabun-karir-wrapper button,
div.mochabun-karir-wrapper button:focus,
div.mochabun-karir-wrapper button:focus-visible,
div.mochabun-karir-wrapper button:active,
div.mochabun-karir-wrapper .job-tab,
div.mochabun-karir-wrapper .job-tab:focus,
div.mochabun-karir-wrapper .job-tab:focus-visible,
div.mochabun-karir-wrapper .job-tab:active,
div.mochabun-karir-wrapper .btn-pill,
div.mochabun-karir-wrapper .btn-pill:focus,
div.mochabun-karir-wrapper .btn-pill:focus-visible,
div.mochabun-karir-wrapper .btn-pill:active,
div.mochabun-karir-wrapper a:focus,
div.mochabun-karir-wrapper a:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

div.mochabun-karir-wrapper button::-moz-focus-inner,
div.mochabun-karir-wrapper input::-moz-focus-inner {
  border: 0 !important;
  outline: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   OPTIONAL SECTION HEADER
   ========================================================================== */
div.mochabun-karir-wrapper .mbk-section-header {
  margin-bottom: 24px !important;
}

div.mochabun-karir-wrapper .section-title {
  font-family: var(--mbk-font-heading) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  letter-spacing: -0.3px !important;
  color: var(--mbk-text-dark) !important;
  line-height: 1.3 !important;
}

div.mochabun-karir-wrapper .section-sub {
  font-size: 14px !important;
  color: var(--mbk-text-muted) !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   JOB TABS (CATEGORY FILTER BUTTONS)
   ========================================================================== */
div.mochabun-karir-wrapper .job-tabs {
  display: flex !important;
  gap: 10px !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
  list-style: none !important;
}

div.mochabun-karir-wrapper button.job-tab,
div.mochabun-karir-wrapper .job-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 18px !important;
  border-radius: 99px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1px solid var(--mbk-border-color) !important;
  background: var(--mbk-bg-white) !important;
  color: var(--mbk-text-dark) !important;
  cursor: pointer !important;
  font-family: var(--mbk-font-heading) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

div.mochabun-karir-wrapper button.job-tab:hover,
div.mochabun-karir-wrapper .job-tab:hover {
  background: var(--mbk-bg-warm) !important;
  border-color: var(--mbk-terracotta) !important;
  color: var(--mbk-terracotta) !important;
}

div.mochabun-karir-wrapper button.job-tab.active,
div.mochabun-karir-wrapper .job-tab.active {
  background: var(--mbk-terracotta) !important;
  color: #FFFFFF !important;
  border-color: var(--mbk-terracotta) !important;
  cursor: default !important;
}

/* ==========================================================================
   JOB LIST & JOB CARD
   ========================================================================== */
div.mochabun-karir-wrapper .job-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 60px !important;
  padding: 0 !important;
}

div.mochabun-karir-wrapper .job-card {
  background: var(--mbk-bg-white) !important;
  border: 1px solid var(--mbk-border-color) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease, transform 0.25s ease !important;
  position: relative !important;
}

div.mochabun-karir-wrapper .job-card:hover {
  border-color: var(--mbk-terracotta) !important;
  box-shadow: 0 8px 24px rgba(141, 91, 76, 0.07) !important;
}

div.mochabun-karir-wrapper .job-card.mbk-hidden {
  display: none !important;
}

div.mochabun-karir-wrapper .job-card.mbk-fade-in {
  animation: mbkFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes mbkFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Job Main Info Area */
div.mochabun-karir-wrapper .job-main {
  flex: 1 1 auto !important;
  margin-right: 24px !important;
  min-width: 0 !important;
}

div.mochabun-karir-wrapper .job-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
  flex-wrap: wrap !important;
}

div.mochabun-karir-wrapper h3.job-title,
div.mochabun-karir-wrapper .job-title {
  font-family: var(--mbk-font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--mbk-text-dark) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.2px !important;
}

div.mochabun-karir-wrapper .job-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  font-family: var(--mbk-font-heading) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

div.mochabun-karir-wrapper .job-meta {
  font-size: 13px !important;
  color: var(--mbk-text-muted) !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

div.mochabun-karir-wrapper .job-skills {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--mbk-terracotta) !important;
  line-height: 1.45 !important;
}

/* Action Button: .btn-pill */
div.mochabun-karir-wrapper a.btn-pill,
div.mochabun-karir-wrapper .btn-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  border-radius: 99px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
  background: var(--mbk-terracotta) !important;
  color: #FFFFFF !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  font-family: var(--mbk-font-heading) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

div.mochabun-karir-wrapper a.btn-pill:hover,
div.mochabun-karir-wrapper .btn-pill:hover {
  background: var(--mbk-terracotta-dark) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

div.mochabun-karir-wrapper a.btn-pill:active,
div.mochabun-karir-wrapper .btn-pill:active {
  transform: translateY(0) !important;
}

/* Empty State Card */
div.mochabun-karir-wrapper .mbk-empty-card {
  text-align: center !important;
  padding: 40px 24px !important;
  background: var(--mbk-bg-warm) !important;
  border: 1px dashed var(--mbk-border-color) !important;
}

div.mochabun-karir-wrapper .mbk-empty-card .job-title {
  margin-bottom: 8px !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (<= 900px matching mockup)
   ========================================================================== */
@media (max-width: 900px) {
  div.mochabun-karir-wrapper .job-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 22px !important;
  }

  div.mochabun-karir-wrapper .job-main {
    margin-right: 0 !important;
    width: 100% !important;
  }

  div.mochabun-karir-wrapper a.btn-pill,
  div.mochabun-karir-wrapper .btn-pill {
    width: 100% !important;
    text-align: center !important;
  }

  div.mochabun-karir-wrapper h3.job-title,
  div.mochabun-karir-wrapper .job-title {
    font-size: 18px !important;
  }

  div.mochabun-karir-wrapper .job-tabs {
    gap: 8px !important;
  }

  div.mochabun-karir-wrapper button.job-tab,
  div.mochabun-karir-wrapper .job-tab {
    padding: 7px 14px !important;
    font-size: 12px !important;
  }
}