:root {
  --op-font-heading: "Fira Sans Condensed", sans-serif;
  --op-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  --op-primary: #1c4481;
  --op-primary-hover: #143261;
  --op-primary-soft: #edf2fa;
  --op-primary-line: #d2e0f5;
  --op-secondary: #ff7200;
  
  --op-bg: #f8f9fc;
  --op-card-bg: #ffffff;
  --op-text-main: #1c2438;
  --op-text-muted: #64748b;
  --op-text-body: #424141;
  --op-border: #e2e8f0;
  --op-border-light: #f1f4f9;
  
  --op-radius: 12px;
  --op-radius-sm: 8px;
  --op-radius-lg: 16px;
  
  --op-shadow: 0 4px 18px rgba(28, 68, 129, 0.08);
  --op-shadow-hover: 0 8px 26px rgba(28, 68, 129, 0.14);
  
  --op-green: #16a34a;
  --op-green-dark: #15803d;
  --op-green-soft: #dcfce7;
  --op-purple: #7c3aed;
  --op-purple-soft: #f3e8ff;
  --op-orange: #f97316;
  --op-orange-soft: #fff7ed;
  --op-orange-line: #ffd9b3;
  --op-blue: #2563eb;
  --op-blue-soft: #eff6ff;
  --op-red: #dc2626;
  --op-red-soft: #fef2f2;
}

/* Base Opportunity Section */
.op_section {
  background-color: var(--op-bg);
  padding: 50px 0 70px;
  color: var(--op-text-body);
  font-family: var(--op-font-body);
  font-size: 15px;
  line-height: 1.6;
}

.op_section a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.op_section h1,
.op_section h2,
.op_section h3,
.op_section h4,
.op_section h5,
.op_section h6 {
  font-family: var(--op-font-heading) !important;
  color: var(--op-primary);
  font-weight: 700;
  line-height: 1.25;
}

.op_section button,
.op_section input,
.op_section select,
.op_section textarea {
  font-family: var(--op-font-body);
}

.op_section :focus-visible {
  outline: 2px solid var(--op-primary);
  outline-offset: 2px;
}

/* Icon colors */
.ic-primary { color: var(--op-primary); }
.ic-green   { color: var(--op-green); }
.ic-purple  { color: var(--op-purple); }
.ic-orange  { color: var(--op-orange); }
.ic-blue    { color: var(--op-blue); }
.ic-red     { color: var(--op-red); }

/* ---------- Back Navigation Button ---------- */
.op_back_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--op-primary);
  font-family: var(--op-font-heading);
  font-size: 16px;
  font-weight: 700;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: var(--op-radius-sm);
  border: 1px solid var(--op-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  transition: all 0.2s ease;
}

.op_back_btn:hover {
  background: var(--op-primary);
  color: #ffffff;
  border-color: var(--op-primary);
  transform: translateX(-3px);
  text-decoration: none;
}

/* ---------- Hero / Overview Toolbar ---------- */
.op_toolbar {
  background: var(--op-card-bg);
  border-radius: var(--op-radius);
  border: 1px solid var(--op-border);
  border-left: 4px solid var(--op-primary);
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--op-shadow);
  margin-bottom: 22px;
}

.op_toolbar_title h2 {
  font-size: 24px;
  margin: 0 0 4px;
  color: var(--op-primary);
}

.op_toolbar_title p {
  color: var(--op-text-muted);
  margin: 0;
  font-size: 14.5px;
}

.op_pill {
  background: var(--op-primary-soft);
  color: var(--op-primary);
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--op-primary-line);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.op_pill b {
  color: var(--op-primary);
}

/* ---------- Filter Card ---------- */
.op_filter_card {
  background: var(--op-card-bg);
  border-radius: var(--op-radius);
  border: 1px solid var(--op-border);
  padding: 22px 28px;
  margin-bottom: 24px;
  box-shadow: var(--op-shadow);
}

.op_filter_row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.op_filter_col {
  flex: 1 1 240px;
  min-width: 200px;
}

.op_filter_col label {
  display: block;
  font-family: var(--op-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--op-primary);
  margin-bottom: 6px;
}

.op_filter_card select,
.op_filter_card input {
  width: 100%;
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius-sm);
  padding: 10px 14px;
  font-size: 14.5px;
  background: #ffffff;
  color: var(--op-text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.op_filter_card select:focus,
.op_filter_card input:focus {
  border-color: var(--op-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(28, 68, 129, 0.12);
}

.op_filter_card input:disabled {
  background: #f1f4f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.op_filter_actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.op_btn_apply {
  border: 0;
  border-radius: var(--op-radius-sm);
  padding: 11px 24px;
  font-family: var(--op-font-heading);
  font-weight: 700;
  font-size: 15px;
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.op_btn_apply.active {
  background: var(--op-primary);
  color: #ffffff;
  cursor: pointer;
}

.op_btn_apply.active:hover {
  background: var(--op-primary-hover);
  transform: translateY(-1px);
}

.op_btn_reset {
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius-sm);
  padding: 10px 18px;
  font-family: var(--op-font-heading);
  font-weight: 700;
  font-size: 15px;
  background: #ffffff;
  color: var(--op-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.op_btn_reset:hover {
  border-color: var(--op-red);
  color: var(--op-red);
  background: var(--op-red-soft);
}

/* ---------- Showing Results Count ---------- */
.op_showing_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 18px;
  color: var(--op-text-muted);
  font-size: 14.5px;
}

.op_showing_bar b {
  color: var(--op-primary);
}

/* ---------- Action Buttons ---------- */
.op_btn_primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--op-radius-sm);
  padding: 10px 22px;
  font-family: var(--op-font-heading);
  font-weight: 700;
  font-size: 15.5px;
  background: var(--op-primary);
  color: #ffffff !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.op_btn_primary:hover {
  background: var(--op-primary-hover);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28, 68, 129, 0.25);
}

.op_btn_success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--op-radius-sm);
  padding: 10px 22px;
  font-family: var(--op-font-heading);
  font-weight: 700;
  font-size: 15.5px;
  background: var(--op-green);
  color: #ffffff !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.op_btn_success:hover {
  background: var(--op-green-dark);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

.op_btn_success_block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--op-radius);
  padding: 13px 20px;
  font-family: var(--op-font-heading);
  font-weight: 700;
  font-size: 17px;
  background: var(--op-primary);
  color: #ffffff !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.op_btn_success_block:hover {
  background: var(--op-primary-hover);
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(28, 68, 129, 0.3);
  transform: translateY(-2px);
}

.op_btn_success_block[disabled] {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- Organization Logo Avatar ---------- */
.op_logo {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: var(--op-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--op-font-heading);
  font-weight: 700;
  font-size: 22px;
  color: #ffffff;
  overflow: hidden;
  background: var(--op-primary);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.op_logo.lg {
  flex-basis: 64px;
  width: 64px;
  height: 64px;
  font-size: 26px;
  border-radius: var(--op-radius);
}

.op_logo.sm {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  border-radius: 8px;
}

.op_logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ffffff;
}

/* ---------- Listing Card (Job & Hackathon) ---------- */
.op_card {
  display: block;
  background: var(--op-card-bg);
  border-radius: var(--op-radius);
  border: 1px solid var(--op-border);
  border-left: 4px solid var(--op-primary);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--op-shadow);
  transition: all 0.25s ease;
}

.op_card:hover {
  border-color: var(--op-primary-line);
  border-left-color: var(--op-secondary);
  box-shadow: var(--op-shadow-hover);
  transform: translateY(-2px);
}

.op_card_top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 26px;
}

.op_card_main {
  flex: 1;
  min-width: 0;
}

.op_card_main h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--op-primary);
  transition: color 0.2s ease;
}

.op_card:hover .op_card_main h3 {
  color: var(--op-secondary);
}

.op_card_company {
  color: var(--op-text-muted);
  font-size: 14.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.op_chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 13px;
}

.op_chip_link {
  color: var(--op-primary);
  background: var(--op-primary-soft);
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--op-primary-line);
}

.op_chip_link:hover {
  background: var(--op-primary);
  color: #ffffff;
  text-decoration: none;
}

.op_chip_plain {
  color: var(--op-text-muted);
  background: #f1f5f9;
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.op_card_cta {
  flex: 0 0 auto;
  align-self: center;
}

/* Metadata Strip on Card Bottom */
.op_strip {
  background: #fbfcfe;
  border-top: 1px solid var(--op-border-light);
  padding: 14px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.op_strip.flat {
  background: transparent;
  border-top: 0;
  padding: 16px 0 0;
}

.op_info {
  flex: 1 1 140px;
  min-width: 130px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.op_info .icb {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: var(--op-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.op_info small {
  display: block;
  color: var(--op-text-muted);
  font-size: 12px;
  line-height: 1.2;
}

.op_info b {
  display: block;
  color: var(--op-text-main);
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
  line-height: 1.2;
}

.icb-primary { background: var(--op-primary-soft); }
.icb-green   { background: var(--op-green-soft); }
.icb-purple  { background: var(--op-purple-soft); }
.icb-orange  { background: var(--op-orange-soft); }
.icb-red     { background: var(--op-red-soft); }
.icb-blue    { background: var(--op-blue-soft); }

/* ---------- Badges & Pills ---------- */
.op_pillbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--op-font-heading);
}

.op_pillbadge.primary { background: var(--op-primary-soft); color: var(--op-primary); }
.op_pillbadge.blue    { background: var(--op-blue-soft); color: var(--op-blue); }
.op_pillbadge.green   { background: var(--op-green-soft); color: var(--op-green-dark); }
.op_pillbadge.purple  { background: var(--op-purple-soft); color: var(--op-purple); }
.op_pillbadge.orange  { background: var(--op-orange-soft); color: var(--op-orange); }
.op_pillbadge.red     { background: var(--op-red-soft); color: var(--op-red); }

/* ---------- Detail Page Components ---------- */
.jd_header {
  background: var(--op-card-bg);
  border: 1px solid var(--op-border);
  border-left: 4px solid var(--op-primary);
  border-radius: var(--op-radius);
  padding: 26px 30px;
  margin-bottom: 20px;
  box-shadow: var(--op-shadow);
}

.jd_header_top {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}

.jd_header_top h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--op-primary);
}

.jd_header_top .op_card_company {
  font-size: 15px;
  margin-top: 4px;
}

.jd_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.jd_header hr {
  border: 0;
  border-top: 1px solid var(--op-border-light);
  margin: 0 0 16px;
}

.jd_panel {
  background: var(--op-card-bg);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius);
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--op-shadow);
}

.jd_panel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--op-primary);
  border-bottom: 1px solid var(--op-border-light);
  padding-bottom: 10px;
}

.jd_panel p {
  color: #475569;
  line-height: 1.8;
  margin: 0 0 14px;
  font-size: 14.5px;
}

.jd_panel p b {
  color: var(--op-primary);
}

.chip_soft {
  display: inline-block;
  background: var(--op-primary-soft);
  color: var(--op-primary);
  font-family: var(--op-font-heading);
  font-size: 13.5px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  border: 1px solid var(--op-primary-line);
}

.chip_outline {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--op-font-heading);
  font-size: 14px;
  font-weight: 700;
  margin: 0 8px 8px 0;
  border: 1px solid;
}

.chip_outline.primary {
  border-color: var(--op-primary-line);
  color: var(--op-primary);
  background: var(--op-primary-soft);
}

.chip_outline.purple {
  border-color: #ddd6fe;
  color: var(--op-purple);
  background: var(--op-purple-soft);
}

.jd_bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.jd_bullets li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: #475569;
  line-height: 1.7;
}

.jd_bullets li:before {
  content: "\2022";
  position: absolute;
  left: 2px;
  color: var(--op-primary);
  font-weight: 700;
  font-size: 18px;
}

.jd_note {
  margin-top: 10px;
  padding: 12px 18px;
  background: #f8fafc;
  border-left: 3px solid var(--op-primary);
  color: var(--op-text-muted);
  font-size: 13.5px;
  border-radius: var(--op-radius-sm);
}

.sq_item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff8f0;
  border: 1px solid var(--op-orange-line);
  border-radius: var(--op-radius-sm);
  padding: 14px 18px;
  margin-bottom: 12px;
}

.sq_num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--op-secondary);
  color: #ffffff;
  font-family: var(--op-font-heading);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sq_text {
  color: var(--op-text-main);
  font-weight: 600;
  padding-top: 2px;
}

/* Sidebar Cards */
.jd_side_card {
  background: var(--op-card-bg);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--op-shadow);
}

.jd_side_card.apply {
  text-align: center;
  border-top: 4px solid var(--op-primary);
}

.jd_side_card h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--op-primary);
  border-bottom: 1px solid var(--op-border-light);
  padding-bottom: 8px;
}

.jd_side_sub {
  color: var(--op-text-muted);
  font-size: 13px;
  margin-top: 10px;
}

.hl_item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.hl_item:last-child {
  margin-bottom: 0;
}

.hl_item .icb {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--op-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.hl_item small {
  display: block;
  color: var(--op-text-muted);
  font-size: 12px;
}

.hl_item b {
  display: block;
  color: var(--op-text-main);
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}

.jd_company_row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.jd_company_row b {
  display: block;
  font-size: 16px;
  color: var(--op-primary);
  font-family: var(--op-font-heading);
}

.jd_company_row small {
  color: var(--op-text-muted);
  font-size: 13px;
}

.jd_rep {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--op-border);
  color: var(--op-text-muted);
  font-size: 13.5px;
}

/* Hackathon Banner / Details */
.op_hack_banner {
  border-radius: var(--op-radius);
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--op-border);
  box-shadow: var(--op-shadow);
}

.op_hack_banner img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
}

.op_count_box {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.op_count_box div {
  flex: 1;
  background: var(--op-primary-soft);
  border-radius: var(--op-radius-sm);
  padding: 10px 0;
  text-align: center;
  border: 1px solid var(--op-primary-line);
}

.op_count_box b {
  display: block;
  font-family: var(--op-font-heading);
  font-size: 22px;
  color: var(--op-primary);
  line-height: 1.1;
}

.op_count_box small {
  color: var(--op-text-muted);
  font-size: 11.5px;
}

/* ---------- Skeleton, Empty, Error, Toast States ---------- */
.op_skel {
  background: var(--op-card-bg);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius);
  padding: 24px;
  margin-bottom: 18px;
}

.op_skel i {
  display: block;
  height: 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #edf2fa 25%, #f8fafc 50%, #edf2fa 75%);
  background-size: 200% 100%;
  animation: op_sh 1.3s infinite;
}

@keyframes op_sh {
  to {
    background-position: -200% 0;
  }
}

.op_empty {
  text-align: center;
  background: var(--op-card-bg);
  border: 1px dashed var(--op-border);
  border-radius: var(--op-radius);
  padding: 60px 24px;
  color: var(--op-text-muted);
  box-shadow: var(--op-shadow);
}

.op_empty i {
  font-size: 42px;
  color: #94a3b8;
  margin-bottom: 14px;
  display: block;
}

.op_empty h5 {
  font-size: 20px;
  color: var(--op-primary);
  margin-bottom: 8px;
}

.op_empty p {
  color: var(--op-text-muted);
  font-size: 14px;
  margin-bottom: 18px;
}

.op_toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  background: var(--op-primary);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--op-radius-sm);
  z-index: 9999;
  font-family: var(--op-font-heading);
  font-size: 15.5px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Responsive queries */
@media (max-width: 991px) {
  .op_section {
    padding: 35px 0 50px;
  }
  .op_card_top {
    flex-direction: column;
  }
  .op_card_cta {
    align-self: flex-start;
    width: 100%;
    margin-top: 10px;
  }
  .op_card_cta .op_btn_primary,
  .op_card_cta .op_btn_success {
    width: 100%;
  }
  .jd_header_top {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .op_toolbar {
    padding: 18px 20px;
  }
  .op_filter_card {
    padding: 18px 20px;
  }
  .op_filter_actions {
    width: 100%;
  }
  .op_filter_actions button {
    flex: 1;
  }
}