/* Base styles for shared recruiter tools and the QR dialog. */
/* ── ODM Rx Core Design Tokens ── */
.rx-card, .rx-modal-bg {
  --rx-red: #DC2626;
  --rx-red-dark: #991B1B;
  --rx-red-soft: #FEF2F2;
  --rx-red-border: rgba(220, 38, 38, 0.25);
  
  --rx-dark: #0F172A;
  --rx-dark-surface: #1E293B;
  --rx-white: #FFFFFF;
  
  --rx-slate-50: #F8FAFC;
  --rx-slate-100: #F1F5F9;
  --rx-slate-200: #E2E8F0;
  --rx-slate-300: #CBD5E1;
  --rx-slate-500: #64748B;
  --rx-slate-600: #475569;
  --rx-slate-700: #334155;
  --rx-slate-800: #1E293B;
  --rx-slate-900: #0F172A;

  --rx-font-h: 'Outfit', system-ui, -apple-system, sans-serif;
  --rx-font-b: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --rx-radius: 12px;
}

/* ═══════════════════════════════
   MAIN CARD CONTAINER
═══════════════════════════════ */
.rx-card {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--rx-radius);
  border: 1px solid var(--rx-slate-200);
  border-bottom: 2.5px solid var(--rx-slate-300);
  margin-bottom: 1.15rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  font-family: var(--rx-font-b);
  overflow: visible !important; /* Prevents mobile and desktop dropdown clipping */
  z-index: 2;
}
.rx-card.menu-open,
.rx-card:has(.rx-dropdown.show) {
  z-index: 999999 !important;
  position: relative !important;
}
.rx-card:hover {
  border-color: var(--rx-red);
  border-bottom-color: var(--rx-red);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.12);
  transform: translateY(-2px);
  z-index: 3;
}
.rx-card.is-featured {
  border-left: 3.5px solid var(--rx-red);
  border-bottom-color: var(--rx-red);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBFB 100%);
}
.rx-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--rx-radius);
}
.rx-top-banner {
  border-top-left-radius: calc(var(--rx-radius) - 1px);
  border-top-right-radius: calc(var(--rx-radius) - 1px);
}
.rx-card > .rx-top:first-child {
  border-top-left-radius: calc(var(--rx-radius) - 1px);
  border-top-right-radius: calc(var(--rx-radius) - 1px);
}
.rx-card > .rx-admin:last-child {
  border-bottom-left-radius: calc(var(--rx-radius) - 1px);
  border-bottom-right-radius: calc(var(--rx-radius) - 1px);
}
.rx-card > .rx-leads-drawer:last-child {
  border-bottom-left-radius: calc(var(--rx-radius) - 1px);
  border-bottom-right-radius: calc(var(--rx-radius) - 1px);
}

/* ── Top Priority Bar (Replaces Cheesy Floating Ribbon) ── */
.rx-top-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(90deg, #0F172A 0%, #1E293B 100%);
  padding: 4px 14px;
  border-bottom: 1px solid rgba(220, 38, 38, 0.3);
  font-size: 0.72rem;
  font-weight: 750;
  color: #F8FAFC;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.rx-top-banner-left {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #FCA5A5;
}
.rx-top-banner-left svg {
  width: 12px;
  height: 12px;
  stroke: var(--rx-red);
  flex-shrink: 0;
}
.rx-top-banner-right {
  font-size: 0.68rem;
  color: #94A3B8;
  font-weight: 600;
}

/* ── Professional Clinical Plan Badges ── */
.rx-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.rx-plan-badge svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
  flex-shrink: 0;
}
.rx-plan-badge.is-top-tier {
  background: #0F172A;
  color: #FCA5A5;
  border: 1px solid var(--rx-red-border);
}
.rx-plan-badge.is-top-tier svg {
  color: var(--rx-red);
}
.rx-plan-badge.is-paid {
  background: var(--rx-slate-100);
  color: var(--rx-slate-800);
  border: 1px solid var(--rx-slate-300);
}
.rx-plan-badge.is-paid svg {
  color: var(--rx-slate-600);
}
.rx-plan-badge.is-free {
  background: var(--rx-slate-50);
  color: var(--rx-slate-600);
  border: 1px solid var(--rx-slate-200);
}
.rx-plan-badge.is-free svg {
  color: var(--rx-slate-500);
}

/* ── Job Pass & Doctor Profile Promotion Tags ── */
.rx-pass-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rx-pass-recruiter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.2;
}

.rx-pass-recruiter-tag svg {
  color: #059669;
  width: 11px;
  height: 11px;
}

.rx-pass-doc-promo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF !important;
  border: 1px solid rgba(220, 38, 38, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 750;
  text-decoration: none !important;
  position: relative;
  z-index: 4;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.rx-pass-doc-promo:hover {
  border-color: #DC2626;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.rx-pass-doc-icon svg {
  color: #FCA5A5;
  width: 12px;
  height: 12px;
}

.rx-pass-doc-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #EF4444;
  flex-shrink: 0;
}

.rx-tag-doc-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #EF4444;
  flex-shrink: 0;
  vertical-align: middle;
}

.rx-pass-doc-name {
  color: #FFFFFF;
}

.rx-pass-doc-badge {
  background: #DC2626;
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.rx-tag.is-doc-profile {
  background: #0F172A;
  color: #FCA5A5;
  border-color: rgba(220, 38, 38, 0.3);
  font-weight: 700;
  text-decoration: none;
  position: relative;
  z-index: 4;
}

.rx-tag.is-doc-profile:hover {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
}

/* ═══════════════════════════════
   TOP SECTION (Logo, Clinic, Title, QR)
═══════════════════════════════ */
.rx-top {
  padding: 1.15rem 1.25rem 0.85rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
  z-index: 3;
}

.rx-logo-wrap { flex-shrink: 0; }
.rx-logo {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--rx-slate-200);
  background: var(--rx-white);
}
.rx-logo-ph {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 8px;
  border: 1px solid var(--rx-slate-200);
  background: var(--rx-slate-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rx-logo-ph svg {
  width: 24px;
  height: 24px;
  color: var(--rx-red);
}

.rx-info { flex: 1; min-width: 0; }
.rx-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}
.rx-clinic {
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--rx-slate-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.rx-title {
  font-family: var(--rx-font-h);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--rx-slate-900);
  line-height: 1.35;
  margin-bottom: 0.35rem;
  word-break: break-word;
}
.rx-title a {
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 4;
}
.rx-title a:hover {
  color: var(--rx-red);
  text-decoration: underline;
}

.rx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rx-slate-600);
}
.rx-dot {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--rx-slate-300);
}

.rx-qr-frame {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--rx-white);
  border: 1px dashed var(--rx-slate-300);
  border-radius: 6px;
  padding: 3px;
  cursor: pointer;
  position: relative;
  z-index: 4;
  transition: all 0.2s;
}
.rx-qr-frame:hover {
  border-color: var(--rx-red);
  background: var(--rx-red-soft);
  transform: scale(1.04);
}
.rx-qr-img { width: 44px; height: 44px; mix-blend-mode: multiply; display: block; }
.rx-qr-lbl {
  font-size: 0.55rem;
  font-weight: 800;
  color: var(--rx-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

/* ═══════════════════════════════
   BOTTOM SECTION (Tags, Location, CTA)
═══════════════════════════════ */
.rx-stub {
  padding: 0 1.25rem 1.15rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
  z-index: 3;
}
.rx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.rx-tag {
  background: var(--rx-slate-50);
  border: 1px solid var(--rx-slate-200);
  color: var(--rx-slate-700);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  line-height: 1.2;
}
.rx-tag-plus {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--rx-slate-500);
  padding-left: 0.2rem;
  align-self: center;
}

.rx-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rx-slate-700);
}
.rx-loc svg { color: var(--rx-red); flex-shrink: 0; }

.rx-apply-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--rx-slate-900);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 0.55rem 1.15rem;
  border-radius: 6px;
  text-decoration: none;
  position: relative;
  z-index: 4;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.rx-apply-btn:hover {
  background: var(--rx-red);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.rx-card.is-featured .rx-apply-btn {
  background: var(--rx-red);
  color: #FFFFFF;
}
.rx-card.is-featured .rx-apply-btn:hover {
  background: var(--rx-red-dark);
}

/* ═══════════════════════════════
   ADMIN / OWNER PANEL
═══════════════════════════════ */
.rx-admin {
  background: var(--rx-slate-900);
  border-radius: 0 0 calc(var(--rx-radius) - 1px) calc(var(--rx-radius) - 1px);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  position: relative;
  z-index: 4;
  border-top: 1px solid var(--rx-slate-800);
  overflow: visible !important;
}
.rx-admin-status { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.rx-b-act { background: rgba(16,185,129,0.15); color: #34D399; border: 1px solid rgba(16,185,129,0.3); }
.rx-b-exp { background: rgba(220,38,38,0.15); color: #FCA5A5; border: 1px solid rgba(220,38,38,0.3); }
.rx-b-inact { background: rgba(255,255,255,0.1); color: #CBD5E1; border: 1px solid rgba(255,255,255,0.2); }
.rb-ok { background: rgba(16,185,129,0.15); color: #34D399; border: 1px solid rgba(16,185,129,0.3); }
.rb-warn { background: rgba(245,158,11,0.15); color: #FCD34D; border: 1px solid rgba(245,158,11,0.3); }
.rb-off { background: rgba(255,255,255,0.1); color: #CBD5E1; border: 1px solid rgba(255,255,255,0.2); }
.rb-scheduled-delete {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0%, rgba(185, 28, 28, 0.32) 100%);
  color: #FCA5A5;
  border: 1px solid #EF4444;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
  letter-spacing: 0.4px;
}
.rx-scheduled-delete-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rx-deletion-countdown-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-left: 3px solid #EF4444;
  border-radius: 6px;
  padding: 5px 10px;
}
.rx-countdown-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rx-timer-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #CBD5E1;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rx-timer-digits {
  font-size: 0.82rem;
  font-weight: 800;
  font-family: monospace, var(--rx-font-b);
  color: #FCA5A5;
  background: rgba(239, 68, 68, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.rx-countdown-sub {
  font-size: 0.70rem;
  color: #94A3B8;
}
.rx-countdown-sub strong {
  color: #F1F5F9;
}
.rx-renew-btn.is-urgent {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  border-color: #EF4444;
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}
.rx-renew-btn.is-urgent:hover {
  background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%);
  transform: translateY(-1px);
}
.rx-delete-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #FCA5A5;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.rx-delete-now-btn:hover {
  background: #DC2626;
  border-color: #DC2626;
  color: #FFFFFF;
}

.rx-admin-dates { font-size: 0.78rem; font-weight: 500; color: var(--rx-slate-300); display: flex; align-items: center; gap: 5px; }
.rx-admin-dates strong { color: #FFFFFF; font-weight: 700; }

.rx-admin-actions { display: flex; align-items: center; gap: 8px; overflow: visible !important; }

/* Keep the actions dropdown above this card's expanded leads drawer. */
.rx-card.menu-open .rx-admin,
.rx-card:has(.rx-dropdown.show) .rx-admin {
  z-index: 20 !important;
}
.rx-card.menu-open .rx-menu-wrap,
.rx-card:has(.rx-dropdown.show) .rx-menu-wrap {
  z-index: 21 !important;
}
.rx-renew-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #FFFFFF;
  padding: 5px 12px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; text-decoration: none; transition: 0.2s;
}
.rx-renew-btn:hover { background: var(--rx-red); border-color: var(--rx-red); color: #FFFFFF; }

.rx-menu-wrap { position: relative; display: inline-flex; }
.rx-menu-btn {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #FFFFFF; border-radius: 6px; cursor: pointer; transition: 0.2s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.rx-menu-btn svg, .rx-menu-btn circle { pointer-events: none; }
.rx-menu-btn:hover, .rx-menu-btn.active { background: #FFFFFF; color: var(--rx-slate-900); }

.rx-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 999999 !important;
  background: #FFFFFF;
  border: 1px solid var(--rx-slate-200);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.08);
  min-width: 190px;
  max-width: min(280px, calc(100vw - 32px));
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
  pointer-events: none;
}
.rx-dropdown.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.rx-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-family: var(--rx-font-b);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--rx-slate-700);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.rx-dd-item:hover {
  background: var(--rx-slate-100);
  color: var(--rx-slate-900);
}
.rx-dd-item svg {
  color: var(--rx-slate-400);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.rx-dd-item.red {
  color: #DC2626;
}
.rx-dd-item.red:hover {
  background: #FEE2E2;
  color: #B91C1C;
}
.rx-dd-item.red svg {
  color: #DC2626;
}
.rx-dd-sep {
  height: 1px;
  background: var(--rx-slate-200);
  margin: 4px 0;
}

/* ═══════════════════════════════
   CANDIDATE LEADS CONTROL CENTER
═══════════════════════════════ */
.rx-leads-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF !important;
  border: 1px solid rgba(220, 38, 38, 0.4);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-family: var(--rx-font-b);
}
.rx-leads-btn:hover, .rx-leads-btn.active {
  background: #DC2626;
  border-color: #DC2626;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.rx-leads-btn svg {
  width: 14px;
  height: 14px;
  color: #FCA5A5;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.rx-leads-btn:hover svg, .rx-leads-btn.active svg {
  color: #FFFFFF;
}
.rx-leads-arrow {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
  margin-left: 2px;
}
.rx-leads-btn.active .rx-leads-arrow {
  transform: rotate(180deg);
}

.rx-leads-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #CBD5E1;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
  font-family: var(--rx-font-b);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.rx-leads-locked-badge:hover {
  background: #FEF2F2;
  border-color: #DC2626;
  color: #DC2626;
}
.rx-leads-locked-badge svg {
  width: 13px;
  height: 13px;
  color: #94A3B8;
  flex-shrink: 0;
}
.rx-leads-locked-badge:hover svg {
  color: #DC2626;
}

/* ── Expandable Leads Drawer ── */
/* ── Flat Leads Drawer ── */
.rx-leads-drawer {
  display: none;
  background: #0B1120;
  border-top: 1px solid #1E293B;
  padding: 1.15rem 1.25rem;
  color: #F8FAFC;
  font-family: var(--rx-font-b);
  position: relative;
  z-index: 5;
  animation: rxFadeInDrawer 0.22s ease-out;
}
@keyframes rxFadeInDrawer {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.rx-leads-drawer.show {
  display: block;
}

.rx-leads-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #E2E8F0;
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--rx-font-b);
  line-height: 1.2;
}
.rx-leads-collapse-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  border-color: #EF4444;
  color: #FFFFFF;
}
.rx-leads-collapse-btn svg {
  color: #F87171;
  transition: transform 0.2s ease;
}
.rx-leads-collapse-btn:hover svg {
  color: #FFFFFF;
}

.rx-leads-drawer-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.rx-leads-footer-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1E293B;
  border: 1px solid #334155;
  color: #CBD5E1;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--rx-font-b);
}
.rx-leads-footer-collapse-btn:hover {
  background: #DC2626;
  border-color: #DC2626;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.rx-leads-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #1E293B;
  flex-wrap: wrap;
}
.rx-leads-h-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rx-leads-h-title {
  font-family: var(--rx-font-h);
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rx-leads-h-pill {
  background: #1E293B;
  border: 1px solid #334155;
  color: #E2E8F0;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rx-leads-h-sub {
  font-size: 0.76rem;
  color: #94A3B8;
}

.rx-leads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.85rem;
}

.rx-lead-card {
  background: #131D31;
  border: 1px solid #24324D;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color 0.15s ease;
}
.rx-lead-card:hover {
  border-color: #3B82F6;
}

.rx-lead-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.rx-lead-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rx-lead-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #0B1120;
  border: 1px solid #24324D;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EF4444;
  font-weight: 800;
  font-size: 0.88rem;
  flex-shrink: 0;
}
.rx-lead-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #24324D;
  flex-shrink: 0;
}
.rx-lead-name {
  font-size: 0.88rem;
  font-weight: 750;
  color: #FFFFFF;
  line-height: 1.3;
}
.rx-lead-role {
  font-size: 0.72rem;
  color: #94A3B8;
  margin-top: 1px;
}
.rx-lead-time {
  font-size: 0.68rem;
  color: #64748B;
  white-space: nowrap;
}

.rx-lead-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid #24324D;
}
.rx-lead-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.rx-lead-act svg {
  width: 12px;
  height: 12px;
}
.rx-lead-act.phone {
  background: #064E3B;
  color: #6EE7B7 !important;
  border: 1px solid #059669;
}
.rx-lead-act.phone:hover {
  background: #059669;
  color: #FFFFFF !important;
}
.rx-lead-act.email {
  background: #0B1120;
  color: #CBD5E1 !important;
  border: 1px solid #24324D;
}
.rx-lead-act.email:hover {
  background: #24324D;
  color: #FFFFFF !important;
}
.rx-lead-act.resume {
  background: #DC2626;
  color: #FFFFFF !important;
  border: 1px solid #DC2626;
}
.rx-lead-act.resume:hover {
  background: #B91C1C;
}
.rx-lead-act.profile-link {
  background: #0B1120;
  color: #93C5FD !important;
  border: 1px solid #2563EB;
}
.rx-lead-act.profile-link:hover {
  background: #2563EB;
  color: #FFFFFF !important;
}
.rx-lead-no-profile-msg {
  font-size: 0.72rem;
  color: #FCD34D;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 5px 9px;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  line-height: 1.35;
  word-break: break-word;
}
.rx-lead-no-profile-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .rx-leads-grid {
    grid-template-columns: 1fr !important;
  }
  .rx-lead-card {
    padding: 0.75rem 0.8rem !important;
  }
  .rx-lead-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .rx-lead-act {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

.rx-leads-locked-alert {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid #DC2626;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.rx-leads-locked-text {
  font-size: 0.78rem;
  color: #FCA5A5;
  font-weight: 600;
}
.rx-leads-unlock-btn {
  background: #DC2626;
  color: #FFFFFF !important;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
}
.rx-leads-unlock-btn:hover {
  background: #991B1B;
}

.rx-leads-empty {
  background: #101726;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  color: #94A3B8;
  font-size: 0.82rem;
  line-height: 1.5;
}
.rx-leads-empty svg {
  width: 32px;
  height: 32px;
  color: #475569;
  margin-bottom: 8px;
}

/* ── Leads PDF Export Button ── */
.rx-leads-download-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  color: #FFFFFF !important;
  border: 1px solid #EF4444;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.73rem;
  font-weight: 750;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
  white-space: nowrap;
}
.rx-leads-download-pdf-btn:hover {
  background: #991B1B;
  border-color: #DC2626;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}
.rx-leads-download-pdf-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Leads Filter Bar ── */
.rx-leads-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.95rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #1E293B;
  flex-wrap: wrap;
}
.rx-leads-filter-label {
  font-size: 0.72rem;
  font-weight: 750;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rx-leads-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rx-filter-pill {
  background: #131D31;
  border: 1px solid #24324D;
  color: #94A3B8;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.71rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.rx-filter-pill:hover {
  border-color: #38BDF8;
  color: #F8FAFC;
}
.rx-filter-pill.active {
  background: #0284C7;
  border-color: #38BDF8;
  color: #FFFFFF;
}
.rx-filter-pill.pill-contacted.active {
  background: #059669;
  border-color: #34D399;
  color: #FFFFFF;
}
.rx-filter-pill.pill-not_responded.active {
  background: #D97706;
  border-color: #FBBF24;
  color: #FFFFFF;
}
.rx-filter-pill.pill-spam.active {
  background: #DC2626;
  border-color: #F87171;
  color: #FFFFFF;
}
.rx-filter-pill .rx-pill-cnt {
  font-weight: 800;
  opacity: 0.9;
  margin-left: 2px;
}

/* ── WhatsApp Lead Action ── */
.rx-lead-act.whatsapp {
  background: #064E3B;
  color: #6EE7B7 !important;
  border: 1px solid #059669;
}
.rx-lead-act.whatsapp:hover {
  background: #059669;
  color: #FFFFFF !important;
}

/* ── Lead Status Badge & Dropdown ── */
.rx-lead-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.rx-lead-status-row {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.rx-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.67rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.rx-status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.rx-status-badge.status-new {
  background: rgba(56, 189, 248, 0.12);
  color: #38BDF8;
  border: 1px solid #0284C7;
}
.rx-status-badge.status-new .status-dot { background: #38BDF8; }

.rx-status-badge.status-contacted {
  background: rgba(52, 211, 153, 0.12);
  color: #34D399;
  border: 1px solid #059669;
}
.rx-status-badge.status-contacted .status-dot { background: #34D399; }

.rx-status-badge.status-not_responded {
  background: rgba(251, 191, 36, 0.12);
  color: #FBBF24;
  border: 1px solid #D97706;
}
.rx-status-badge.status-not_responded .status-dot { background: #FBBF24; }

.rx-status-badge.status-spam {
  background: rgba(248, 113, 113, 0.12);
  color: #F87171;
  border: 1px solid #DC2626;
}
.rx-status-badge.status-spam .status-dot { background: #F87171; }

.rx-status-menu-btn {
  background: #0B1120;
  border: 1px solid #24324D;
  color: #94A3B8;
  border-radius: 4px;
  padding: 2px 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.rx-status-menu-btn:hover {
  background: #1E293B;
  color: #FFFFFF;
  border-color: #3B82F6;
}
.rx-status-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 175px;
  background: #0F172A;
  border: 1px solid #334155;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 50;
  padding: 4px;
}
.rx-status-dropdown.show {
  display: block;
}
.rx-status-dd-hdr {
  font-size: 0.62rem;
  text-transform: uppercase;
  font-weight: 800;
  color: #64748B;
  padding: 4px 6px 2px 6px;
  letter-spacing: 0.4px;
}
.rx-status-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: #E2E8F0;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  font-family: inherit;
}
.rx-status-opt:hover {
  background: #1E293B;
  color: #FFFFFF;
}
.rx-status-opt .opt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.rx-status-opt .opt-dot.green { background: #34D399; }
.rx-status-opt .opt-dot.amber { background: #FBBF24; }
.rx-status-opt .opt-dot.red { background: #F87171; }
.rx-status-opt .opt-dot.blue { background: #38BDF8; }

.rx-filter-empty {
  display: none;
  grid-column: 1 / -1;
  background: #101726;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
  color: #94A3B8;
  font-size: 0.78rem;
}

/* ═══════════════════════════════
   RESPONSIVE ADAPTIVITY (MOBILE & TABLET)
═══════════════════════════════ */
@media(max-width: 599px) {
  .rx-top { padding: 0.85rem 0.95rem 0.7rem; gap: 0.65rem; display: flex; align-items: flex-start; }
  .rx-logo, .rx-logo-ph { width: 42px; height: 42px; min-width: 42px; }
  .rx-title { font-size: 0.98rem; }
  .rx-meta-top { flex-direction: column; align-items: flex-start; gap: 3px; }
  .rx-clinic { max-width: 100%; font-size: 0.72rem; }
  
  .rx-qr-frame {
    display: flex !important;
    width: 42px;
    height: 50px;
    padding: 2px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
  }
  .rx-qr-img { width: 36px; height: 36px; }
  .rx-qr-lbl { font-size: 0.5rem; font-weight: 850; }
  
  .rx-stub { padding: 0 0.95rem 0.95rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .rx-tags { width: 100%; }
  .rx-apply-btn { margin-left: 0; width: 100%; justify-content: center; padding: 9px 12px; font-size: 0.85rem; }
  
  .rx-admin {
    padding: 0.85rem 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    position: relative;
    z-index: 10;
  }
  .rx-admin-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .rx-admin-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .rx-admin-actions .rx-leads-btn,
  .rx-admin-actions .rx-leads-locked-badge {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    font-size: 0.76rem;
    padding: 7px 10px;
  }
  .rx-admin-actions .rx-renew-btn {
    flex: 0 0 auto;
    justify-content: center;
    padding: 7px 12px;
  }
  .rx-admin-actions .rx-menu-wrap {
    flex: 0 0 auto;
    position: relative;
  }
  .rx-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 185px;
    max-width: min(260px, calc(100vw - 32px));
    z-index: 999999 !important;
  }
}

@media(min-width: 600px) and (max-width: 991px) {
  .rx-top { padding: 1rem 1.15rem 0.8rem; }
  .rx-title { font-size: 1.08rem; }
  .rx-qr-img { width: 40px; height: 40px; }
}

/* Shared job QR dialog. */
.rx-modal-bg {
  position: fixed; inset: 0; z-index: 9999999; width: 100%; height: 100%; height: 100dvh; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(24, 35, 49, .62);
  opacity: 0; visibility: hidden; box-sizing: border-box;
}
.rx-modal-bg.active { opacity: 1; visibility: visible; }
.rx-modal-bg *, .rx-modal-bg *::before, .rx-modal-bg *::after { box-sizing: border-box; }
.rx-modal-card {
  width: 100%; max-width: 440px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 20px; margin: 0; flex: 0 1 440px;
  background: #fff; color: #263445; border: 1px solid #dce2e8; border-radius: 10px;
  box-shadow: 0 16px 60px #18233433; text-align: left;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.rx-modal-card::-webkit-scrollbar { display: none; width: 0; height: 0; }
.rx-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rx-modal-brand { display: flex; align-items: center; gap: 12px; color: #263445; font-size: 17px; font-weight: 750; }
.rx-modal-brand span { padding-left: 12px; border-left: 1px solid #dce2e8; color: #657285; font-size: 12px; font-weight: 500; }
.rx-modal-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid #dce2e8; border-radius: 5px; background: #fff; color: #536174; cursor: pointer; }
.rx-modal-close:hover { background: #f3f5f7; color: #263445; }
.rx-modal-title { margin: 0 0 8px; font: 650 24px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.5px; color: #263445; }
.rx-modal-p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #627084; }
.rx-modal-qr-area { padding: 12px; border: 1px solid #e1e6ec; border-radius: 6px; background: #f5f7f9; text-align: center; }
.rx-modal-img { display: flex; align-items: center; justify-content: center; width: 216px; height: 216px; max-width: 100%; padding: 12px; margin: 0 auto; background: #fff; border: 1px solid #e1e6ec; border-radius: 4px; }
.rx-modal-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rx-modal-bg[data-qr-state="loading"] .rx-modal-img img, .rx-modal-bg[data-qr-state="error"] .rx-modal-img img { visibility: hidden; }
.rx-modal-bg[data-qr-state="error"] .rx-modal-img { display: none; }
.rx-modal-qr-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.rx-modal-bg[data-qr-state="error"] .rx-modal-qr-status { position: static; width: auto; height: auto; margin: 0; clip-path: none; white-space: normal; color: #854032; font-size: 12px; line-height: 1.5; }
.rx-modal-job { padding: 12px 0; margin-bottom: 12px; border-bottom: 1px solid #e1e6ec; }
.rx-modal-job > span { display: none; }
.rx-modal-t { margin: 0; color: #263445; font: 600 16px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-wrap: anywhere; }
.rx-modal-link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rx-modal-link { display: block; width: 100%; min-width: 0; height: 42px; padding: 9px 11px; margin: 0 0 14px; border: 1px solid #d5dce5; border-radius: 4px; color: #536174; background: #fafbfc; font: 12px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; text-overflow: ellipsis; }
.rx-modal-actions { display: flex; gap: 10px; }
.rx-modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; font: 600 13px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: none !important; cursor: pointer; }
.rx-modal-btn.primary { background: #a82739; border-color: #a82739; color: #fff !important; }
.rx-modal-btn.primary:hover { background: #8c2030; border-color: #8c2030; }
.rx-modal-btn.secondary { background: #fff; color: #344d67 !important; border-color: #cbd5df; }
.rx-modal-btn.secondary:hover { background: #f3f6f9; border-color: #9cabbc; }
.rx-modal-copy-status { margin: 9px 0 0; color: #536174; font-size: 12px; line-height: 1.5; }
.rx-modal-copy-status:empty { display: none; }
.rx-modal-bg :is(button, a, input):focus-visible { outline: 2px solid #344d67; outline-offset: 3px; }
@media (max-width: 480px) {
  .rx-modal-bg { padding: 12px; }
  .rx-modal-card { padding: 20px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .rx-modal-header { margin-bottom: 10px; }
  .rx-modal-title { font-size: 22px; }
  .rx-modal-p { font-size: 13px; margin-bottom: 12px; }
  .rx-modal-img { width: 192px; height: 192px; }
}


/* Fit shorter screens by tightening the content, keeping the dialog centered. */
@media (max-height: 700px) {
  .rx-modal-bg { padding: 12px; }
  .rx-modal-card { padding: 16px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .rx-modal-header { margin-bottom: 8px; }
  .rx-modal-close { width: 36px; height: 36px; }
  .rx-modal-title { font-size: 20px; margin-bottom: 6px; }
  .rx-modal-p { font-size: 13px; margin-bottom: 10px; }
  .rx-modal-img { width: 168px; height: 168px; padding: 10px; }
  .rx-modal-qr-area { padding: 10px; }
  .rx-modal-job { padding: 10px 0; margin-bottom: 10px; }
  .rx-modal-t { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .rx-modal-link { height: 38px; margin-bottom: 10px; }
  .rx-modal-copy-status { margin-top: 6px; font-size: 11px; line-height: 1.4; }
}
@media (max-height: 580px) and (max-width: 599px) {
  .rx-modal-card { padding: 12px; }
  .rx-modal-title { font-size: 19px; }
  .rx-modal-p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .rx-modal-img { width: 144px; height: 144px; }
  .rx-modal-qr-area { margin-top: 8px; padding: 8px; }
}
/* A horizontal layout leaves the QR and actions visible in landscape. */
@media (max-height: 500px) and (min-width: 600px) {
  .rx-modal-card { display: grid; padding: 12px; grid-template-columns: 184px minmax(0, 1fr); column-gap: 20px; max-width: 600px; flex-basis: 600px; }
  .rx-modal-header { grid-column: 1 / -1; }
  .rx-modal-qr-area { grid-column: 1; grid-row: 2 / 8; align-self: center; }
  .rx-modal-img { width: 162px; height: 162px; padding: 8px; }
  .rx-modal-title, .rx-modal-p, .rx-modal-job, .rx-modal-link, .rx-modal-actions, .rx-modal-copy-status { grid-column: 2; }
  .rx-modal-title { font-size: 20px; }
  .rx-modal-job { border-bottom: 0; padding-top: 0; padding-bottom: 0; }
}

.rx-card.highlight-target-job {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 12px 28px -6px rgba(15, 23, 42, 0.25) !important;
  transition: all 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ODM Rx (ODMPlatforms.com) ENGRAVED TICKET & EXPRESS APPLY ARCHITECTURE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ticket Card Container ── */
.rx-card.rx-ticket-card {
  position: relative;
  border: 2px solid var(--tkt-border, #1D4ED8) !important;
  border-radius: 14px !important;
  background: var(--tkt-bg-surface, #FFFFFF) !important;
  box-shadow: 0 8px 24px var(--tkt-glow, rgba(29, 78, 216, 0.15)), 0 2px 6px rgba(15, 23, 42, 0.05) !important;
  overflow: visible !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.rx-card.rx-ticket-card:hover {
  border-color: var(--tkt-border, #1D4ED8) !important;
  box-shadow: 0 14px 36px var(--tkt-glow, rgba(29, 78, 216, 0.25)), 0 0 0 1px var(--tkt-border, #1D4ED8) !important;
  transform: translateY(-3px) !important;
}

/* Subtle Engraved Guilloche Pattern Overlay */
.rx-card.rx-ticket-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, var(--tkt-watermark, rgba(29, 78, 216, 0.025)) 0, var(--tkt-watermark, rgba(29, 78, 216, 0.025)) 1px, transparent 0, transparent 16px);
  z-index: 1;
}

/* Subtle Diagonal Engraved Watermark Stamp */
.rx-tkt-watermark {
  position: absolute;
  right: 18px;
  bottom: 50px;
  font-family: var(--rx-font-h, 'Outfit', sans-serif);
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--tkt-watermark-text, rgba(29, 78, 216, 0.05));
  pointer-events: none;
  user-select: none;
  transform: rotate(-9deg);
  z-index: 1;
  white-space: nowrap;
}

/* ── Top Engraved Banner ── */
.rx-tkt-engraved-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--tkt-banner-bg, linear-gradient(90deg, #1E3A8A 0%, #0F172A 100%));
  color: #FFFFFF;
  padding: 5px 14px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1.5px solid var(--tkt-border-sub, rgba(255, 255, 255, 0.15));
  position: relative;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.rx-tkt-banner-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFFFFF;
  flex-wrap: wrap;
}
.rx-tkt-seal-ico {
  width: 14px;
  height: 14px;
  color: #FCD34D;
  flex-shrink: 0;
}
.rx-tkt-brand-title {
  color: #FFFFFF;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.rx-tkt-brand-domain {
  color: #CBD5E1;
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.95;
  letter-spacing: 0.3px;
}
.rx-tkt-pill-engraved {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FEF08A;
  font-size: 0.62rem;
  font-weight: 850;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  margin-left: 2px;
}
.rx-tkt-serial {
  font-family: monospace;
  font-size: 0.68rem;
  color: #E2E8F0;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ── Perforated Ticket Divider & Inward Cut Notches ── */
.rx-tkt-divider-wrap {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  margin: 0.25rem 0 0.45rem;
  z-index: 5;
  pointer-events: none;
}
.rx-tkt-notch {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tkt-notch-bg, #F8FAFC);
  border: 2px solid var(--tkt-border, #1D4ED8);
  transform: translateY(-50%);
  box-sizing: border-box;
  z-index: 6;
}
.rx-tkt-notch-left {
  left: -12px;
  box-shadow: inset -3px 0 5px rgba(0, 0, 0, 0.12);
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.rx-tkt-notch-right {
  right: -12px;
  box-shadow: inset 3px 0 5px rgba(0, 0, 0, 0.12);
  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}
.rx-tkt-perforated-line {
  flex: 1;
  margin: 0 16px;
  border-top: 2px dashed var(--tkt-border-sub, rgba(29, 78, 216, 0.45));
  height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RUBY DIAMOND SHAPE RED INK EXPRESS APPLY TAG
   ═══════════════════════════════════════════════════════════════════════════ */
.rx-ruby-diamond-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: linear-gradient(135deg, #7F1D1D 0%, #991B1B 25%, #DC2626 50%, #B91C1C 75%, #450A0A 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--rx-font-h, 'Outfit', sans-serif) !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 4px 18px !important;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0% 50%) !important;
  box-shadow: 0 0 0 1px #991B1B, 0 3px 10px rgba(220, 38, 38, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  position: relative !important;
  z-index: 5 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.3 !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
  user-select: none !important;
  text-decoration: none !important;
}
.rx-ruby-diamond-tag:hover {
  filter: brightness(1.12) !important;
  transform: scale(1.02) !important;
}
.rx-ruby-diamond-icon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FECDD3;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.rx-ruby-diamond-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rx-ruby-tag-text {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  display: inline-block;
  font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAVISH GOLDEN BUTTON MARKING APPLY NOW
   ═══════════════════════════════════════════════════════════════════════════ */



.rx-gold-sheen {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  animation: rxGoldSheenSweep 3.6s infinite ease-in-out;
}
@keyframes rxGoldSheenSweep {
  0%, 60% { left: -120%; }
  100% { left: 220%; }
}
.rx-gold-gem {
  color: #92400E;
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.4));
}
.rx-gold-lbl {
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0.6px;
}
.rx-gold-arr {
  transition: transform 0.2s ease;
  stroke-width: 2.8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GUARANTEED NON-OVERLAPPING RESPONSIVE ARCHITECTURE (DEPTH-TESTED)
   ═══════════════════════════════════════════════════════════════════════════ */
.rx-meta-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  margin-bottom: 0.35rem !important;
}
.rx-meta-top-left {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.rx-meta-top-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  z-index: 4 !important;
}

/* Tablet Devices (max-width: 1024px) */
@media (max-width: 1024px) {
  .rx-meta-top-right {
    gap: 6px;
  }
  .rx-ruby-diamond-tag {
    font-size: 0.7rem !important;
    padding: 3.5px 15px !important;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%) !important;
  }
}

/* Mobile Devices (max-width: 640px) */
@media (max-width: 640px) {
  .rx-meta-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .rx-meta-top-left {
    width: 100% !important;
    gap: 6px !important;
  }
  .rx-meta-top-right {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  .rx-ruby-diamond-tag {
    font-size: 0.68rem !important;
    padding: 3px 14px !important;
    clip-path: polygon(9px 0%, calc(100% - 9px) 0%, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0% 50%) !important;
  }
  .rx-card.rx-ticket-card .rx-stub {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .rx-card.rx-ticket-card .rx-golden-apply-btn {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
    height: 44px !important;
    padding: 0 1rem !important;
    font-size: 0.84rem !important;
  }
  .rx-tkt-engraved-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    padding: 6px 12px !important;
  }
  .rx-tkt-serial {
    font-size: 0.62rem !important;
  }
}

/* Small mobile (max-width: 380px) */
@media (max-width: 380px) {
  .rx-ruby-diamond-tag {
    font-size: 0.64rem !important;
    padding: 2.5px 12px !important;
    gap: 4px !important;
  }

}

/* Shared ODM Rx listing. Keep selectors scoped: homepage, search and employer pages share it. */
.odm-job-card.rx-card {
  --rx-font-b: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rx-font-h: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rx-red: #a82739;
  --rx-slate-900: #202b3a;
  --rx-slate-700: #465365;
  --rx-slate-600: #5b6675;
  --rx-slate-500: #647083;
  container: odm-job-card / inline-size;
  width: 100%; min-width: 0;
  color: #202b3a; background: #fff;
  border: 1px solid #dce1e7; border-radius: 8px;
  margin: 0 0 18px; box-shadow: 0 2px 4px #202b3a05;
  font: 400 14px/1.6 var(--rx-font-b);
  transition: border-color .18s, box-shadow .18s;
  isolation: isolate;
}
.odm-job-card.rx-card:hover { transform: none; border-color: #b4becb; box-shadow: 0 3px 12px #202b3a09; }
.odm-job-card.rx-card.is-featured { background: #fff; border-left: 3px solid #a82739; border-bottom: 1px solid #dce1e7; }
.odm-job-card.rx-card.rx-ticket-card { border: 1px solid #c6ced8 !important; border-left: 3px solid #314963 !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 2px 4px #202b3a05 !important; transition: border-color .18s !important; }
.odm-job-card.rx-card.rx-ticket-card:hover { transform: none !important; box-shadow: 0 3px 12px #202b3a09 !important; border-color: #9daab9 !important; }
.odm-job-card.rx-ticket-card::before { display: none; }
.odm-job-card *, .odm-job-card *::before, .odm-job-card *::after { box-sizing: border-box; }
.odm-job-card h3, .odm-job-card button, .odm-job-card a { font-family: var(--rx-font-b); }
.odm-job-card a { text-decoration: none; }
.odm-job-card a:focus-visible, .odm-job-card button:focus-visible { outline: 3px solid #315d89; outline-offset: 4px; }
.odm-job-card button { cursor: pointer; }
.odm-job-card .rx-link-overlay { z-index: 1; }
.odm-job-card .rx-listing-banner { position: relative; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 9px 23px; background: #f8f9fb; border-bottom: 1px solid #e5e8ed; border-radius: 7px 7px 0 0; color: #5b6675; font-size: 12px; }
.odm-job-card .rx-listing-label { font-weight: 600; color: #8c2e3e; }
.odm-job-card.rx-ticket-card .rx-listing-label { color: #314963; }
.odm-job-card .rx-plan-badge, .odm-job-card .rx-plan-badge.is-top-tier, .odm-job-card .rx-plan-badge.is-paid, .odm-job-card .rx-plan-badge.is-free { display: inline-flex; padding: 3px 8px; border: 1px solid #d7dce3; border-radius: 4px; background: #fff; color: #465365; box-shadow: none; font: 600 11px/1.5 var(--rx-font-b); text-transform: none; letter-spacing: 0; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.odm-job-card .rx-top { position: relative; z-index: 2; pointer-events: none; display: flex; align-items: flex-start; gap: 16px; padding: 23px 23px 19px; background: transparent; }
.odm-job-card .rx-top a, .odm-job-card .rx-top button { pointer-events: auto; }
.odm-job-card .rx-logo-wrap { flex: 0 0 52px; width: 52px; padding: 0; }
.odm-job-card .rx-logo, .odm-job-card .rx-logo-ph { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 8px; border: 1px solid #e0e4ea; border-radius: 7px; background: #fff; object-fit: contain; color: #66758a; box-shadow: none; }
.odm-job-card .rx-logo-ph svg { width: 27px; height: 27px; }
.odm-job-card .rx-info { flex: 1; min-width: 0; padding: 0; }
.odm-job-card .rx-clinic { color: #596679; font: 500 13px/1.5 var(--rx-font-b); text-transform: none; letter-spacing: 0; margin: 0 0 5px; overflow-wrap: anywhere; }
.odm-job-card .rx-title { margin: 0 0 11px; color: #202b3a; font: 650 21px/1.35 var(--rx-font-h); letter-spacing: -.015em; white-space: normal; overflow-wrap: anywhere; }
.odm-job-card .rx-title a { color: #202b3a; display: inline; position: relative; z-index: 3; }
.odm-job-card .rx-title a:hover { color: #a82739; text-decoration: underline; text-underline-offset: 3px; }
.odm-job-card .rx-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: #596679; font: 400 13px/1.6 var(--rx-font-b); }
.odm-job-card .rx-meta > span { display: inline-flex; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.odm-job-card .rx-meta svg { width: 15px; height: 15px; flex-shrink: 0; }
.odm-job-card .rx-job-salary { font-weight: 600; color: #344256; }
.odm-job-card .rx-qr-frame { position: relative; flex-shrink: 0; display: inline-flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 58px; min-height: 60px; padding: 8px; border: 1px solid #e0e4ea; background: #fff; border-radius: 6px; color: #596679; transform: none; }
.odm-job-card .rx-qr-frame:hover { background: #f5f7f9; border-color: #aab5c3; transform: none; }
.odm-job-card .rx-qr-lbl { color: #596679; font: 500 10px/1.4 var(--rx-font-b); text-transform: none; letter-spacing: 0; margin: 0; }

/* Job Pass profile promotion has its own readable, clickable row. */
.odm-job-card .rx-profile-feature.rx-pass-doc-promo { position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-start; gap: 13px; max-width: none; width: auto; margin: 0 23px 20px; padding: 15px; border: 1px solid #e0e3e7; border-left: 2px solid #8291a3; border-radius: 6px; background: #f8f9fa; box-shadow: none; color: #202b3a; animation: none; transform: none; text-decoration: none; white-space: normal; }
.odm-job-card .rx-profile-feature:hover { border-color: #aeb9c6; background: #f2f5f7; box-shadow: none; transform: none; }
.odm-job-card .rx-profile-feature::before, .odm-job-card .rx-profile-feature::after { display: none; }
.odm-job-card .rx-pass-doc-avatar, .odm-job-card .rx-pass-doc-icon { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 50%; object-fit: cover; background: #e9edf2; display: flex; align-items: center; justify-content: center; box-shadow: none; }
.odm-job-card .rx-pass-doc-icon svg { width: 24px; height: 24px; color: #627188; }
.odm-job-card .rx-profile-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.odm-job-card .rx-profile-eyebrow { color: #687385; font: 400 11px/1.5 var(--rx-font-b); margin-bottom: 3px; }
.odm-job-card .rx-pass-doc-name { color: #202b3a; font: 650 15px/1.4 var(--rx-font-b); max-width: none; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.odm-job-card .rx-profile-role { color: #596679; font-size: 12px; line-height: 1.5; margin-top: 3px; }
.odm-job-card .rx-profile-action { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; font: 600 12px/1.5 var(--rx-font-b); color: #8c2e3e; }
.odm-job-card .rx-pass-doc-badge, .odm-job-card .rx-pass-recruiter-tag { display: inline-block; max-width: 190px; border: 1px solid #d8dee5; background: #fff; border-radius: 4px; padding: 3px 7px; color: #596679; font: 600 10px/1.5 var(--rx-font-b); text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.odm-job-card .rx-pass-recruiter-line { display: flex; position: relative; z-index: 2; pointer-events: none; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 23px 18px; font-size: 12px; color: #687385; }
.odm-job-card .rx-stub { position: relative; z-index: 2; pointer-events: none; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #edf0f3; padding: 15px 23px; background: #fff; border-radius: 0 0 7px 7px; }
.odm-job-card .rx-stub a, .odm-job-card .rx-stub button { pointer-events: auto; }
.odm-job-card .rx-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.odm-job-card .rx-tag { display: inline-flex; align-items: center; border: 1px solid #e3e7ec; border-radius: 4px; background: #f8f9fa; color: #596679; padding: 4px 8px; font: 500 11px/1.5 var(--rx-font-b); white-space: normal; overflow-wrap: anywhere; }
.odm-job-card .rx-tag-plus { color: #687385; font: 500 11px/1.5 var(--rx-font-b); }
.odm-job-card .rx-listing-detail { color: #687385; font-size: 12px; }
.odm-job-card .rx-apply-btn, .odm-job-card .rx-golden-apply-btn { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: auto; flex: 0 0 auto; min-height: 43px; padding: 10px 17px; margin: 0; border: 1px solid #a82739; border-radius: 5px; background: #a82739; color: #fff !important; font: 600 13px/1.5 var(--rx-font-b); text-transform: none; letter-spacing: 0; box-shadow: none; overflow: visible; transform: none; animation: none; }
.odm-job-card .rx-apply-btn:hover, .odm-job-card .rx-golden-apply-btn:hover { background: #8c2232; border-color: #8c2232; box-shadow: none; transform: none; }
.odm-job-card .rx-golden-apply-btn { background: #314963; border-color: #314963; }
.odm-job-card .rx-golden-apply-btn:hover { background: #24384f; border-color: #24384f; }
.odm-job-card .rx-golden-apply-btn::before, .odm-job-card .rx-golden-apply-btn::after { display: none; }

/* Recruiter controls retain their existing handlers, IDs and entitlement gates. */
.odm-job-card .rx-admin { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 23px; background: #f7f8fa; border-top: 1px solid #e0e5eb; border-radius: 0 0 7px 7px; color: #465365; }
.odm-job-card .rx-admin-status { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; }
.odm-job-card .rx-admin-dates { color: #687385; font: 400 12px/1.6 var(--rx-font-b); white-space: normal; }
.odm-job-card .rx-admin-dates strong { color: #465365; }
.odm-job-card .rx-admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.odm-job-card .rx-badge { padding: 4px 8px; border-radius: 4px; font: 600 11px/1.5 var(--rx-font-b); text-transform: none; }
.odm-job-card .rb-ok { background: #eaf3ed; color: #315d42; border: 1px solid #cbded1; }
.odm-job-card .rb-off { background: #eef0f3; color: #596679; border: 1px solid #d7dce4; }
.odm-job-card .rb-warn, .odm-job-card .rb-scheduled-delete { background: #fff4e9; color: #865727; border: 1px solid #e8d4bd; animation: none; box-shadow: none; }
.odm-job-card .rx-leads-btn, .odm-job-card .rx-leads-locked-badge, .odm-job-card .rx-renew-btn, .odm-job-card .rx-delete-now-btn, .odm-job-card .rx-menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 11px; border: 1px solid #d2d9e2; border-radius: 5px; background: #fff; color: #465365 !important; font: 600 12px/1.5 var(--rx-font-b); box-shadow: none; transform: none; animation: none; white-space: normal; }
.odm-job-card .rx-leads-btn { color: #fff !important; background: #314963; border-color: #314963; }
.odm-job-card .rx-leads-btn:hover, .odm-job-card .rx-leads-btn.active { color: #fff !important; background: #24384f; box-shadow: none; border-color: #24384f; }
.odm-job-card .rx-leads-btn svg { color: #dbe4ef; }
.odm-job-card .rx-leads-locked-badge:hover, .odm-job-card .rx-renew-btn:hover, .odm-job-card .rx-menu-btn:hover { background: #eef1f5; border-color: #aab6c5; }
.odm-job-card .rx-renew-btn.is-urgent, .odm-job-card .rx-delete-now-btn { color: #973346 !important; border-color: #dfc4cb; background: #fff; }
.odm-job-card .rx-menu-btn { width: 40px; }
.odm-job-card .rx-leads-arrow { display: inline-block; transform: none; }
.odm-job-card .rx-dropdown { border: 1px solid #d7dee7; border-radius: 6px; background: #fff; box-shadow: 0 8px 30px #26344526; }
.odm-job-card .rx-dd-item { min-height: 40px; font: 500 13px/1.5 var(--rx-font-b); white-space: normal; }
.odm-job-card .rx-scheduled-delete-wrap { max-width: 100%; }
.odm-job-card .rx-deletion-countdown-box { border-color: #e1d1be; background: #fff9f1; color: #865727; box-shadow: none; border-radius: 5px; }
.odm-job-card .rx-timer-digits, .odm-job-card .rx-timer-label, .odm-job-card .rx-countdown-sub { color: #865727; text-shadow: none; }
.odm-job-card .rx-leads-drawer { color: #344256; background: #f5f7fa; border-color: #dce3eb; padding: 22px; border-radius: 0 0 7px 7px; }
.odm-job-card .rx-leads-header { flex-wrap: wrap; gap: 13px; border-color: #dce3eb; }
.odm-job-card .rx-leads-h-left { flex-wrap: wrap; gap: 8px; }
.odm-job-card .rx-leads-h-title { color: #263649; font-size: 15px; }
.odm-job-card .rx-leads-h-title svg { color: #62768d; }
.odm-job-card .rx-leads-h-pill { background: #e9eef4; border-color: #ccd7e4; color: #50647b; font-size: 11px; }
.odm-job-card .rx-leads-h-right { flex-wrap: wrap; }
.odm-job-card .rx-leads-filter-bar { border-color: #dce3eb; }
.odm-job-card .rx-leads-filter-label { color: #627188; font-weight: 500; text-transform: none; }
.odm-job-card .rx-filter-pill { background: #fff; border-color: #d2dbe6; color: #596b80; min-height: 34px; padding: 6px 10px; border-radius: 4px; font-size: 12px; }
.odm-job-card .rx-filter-pill.active { color: #fff; background: #314963; border-color: #314963; }
.odm-job-card .rx-lead-card { background: #fff; color: #344256; border-color: #d8e0e9; border-radius: 6px; box-shadow: none; }
.odm-job-card .rx-lead-name, .odm-job-card .rx-lead-name a { color: #263649; }
.odm-job-card .rx-lead-info, .odm-job-card .rx-lead-meta, .odm-job-card .rx-lead-time { color: #627188; }
.odm-job-card .rx-lead-actions { flex-wrap: wrap; }
.odm-job-card .rx-lead-act { color: #344d67 !important; border-color: #ccd7e3; background: #f3f6fa; }
.odm-job-card .rx-lead-act.whatsapp { color: #36674c !important; border-color: #cbded1; background: #edf5ef; }
.odm-job-card .rx-leads-empty { color: #627188; border-color: #ccd7e3; background: #fff; border-radius: 5px; font-size: 14px; }
.odm-job-card .rx-leads-empty strong { color: #344256; }
.odm-job-card .rx-leads-download-pdf-btn, .odm-job-card .rx-leads-unlock-btn { background: #314963; border-color: #314963; color: #fff !important; box-shadow: none; border-radius: 4px; min-height: 38px; font-size: 12px; }
.odm-job-card .rx-leads-collapse-btn, .odm-job-card .rx-leads-footer-collapse-btn { color: #50647b; border-color: #ccd7e4; background: #fff; border-radius: 4px; min-height: 36px; box-shadow: none; }
.odm-job-card .rx-leads-locked-alert { color: #66563d; border-color: #e0d5c4; background: #faf6ee; border-radius: 5px; }
.odm-job-card .rx-leads-locked-text { color: #66563d; }
.odm-job-card .rx-status-menu-btn { color: #50647b; border-color: #ccd7e4; background: #fff; }
.odm-job-card .rx-status-dropdown { background: #fff; border-color: #ccd7e4; box-shadow: 0 5px 18px #26344520; }
.odm-job-card .rx-status-opt { color: #465b73; }

/* Container queries also cover 320px clinic carousel tiles on desktop screens. */
@container odm-job-card (max-width: 540px) {
  .odm-job-card .rx-listing-banner { padding: 9px 16px; gap: 6px 10px; font-size: 11px; }
  .odm-job-card .rx-top { display: grid; grid-template-columns: 42px minmax(0, 1fr) 36px; gap: 11px; padding: 18px 16px; align-items: start; }
  .odm-job-card .rx-logo-wrap { width: 42px; }
  .odm-job-card .rx-logo, .odm-job-card .rx-logo-ph { width: 42px; height: 42px; padding: 7px; }
  .odm-job-card .rx-clinic { font-size: 12px; }
  .odm-job-card .rx-title { font-size: 18px; line-height: 1.4; margin-bottom: 9px; }
  .odm-job-card .rx-info { width: auto; min-width: 0; padding: 0; }
  .odm-job-card .rx-meta { gap: 5px 12px; font-size: 12px; }
  .odm-job-card .rx-qr-frame { width: 36px; min-height: 40px; padding: 7px; margin: 0; position: relative; inset: auto; }
  .odm-job-card .rx-qr-lbl { display: none; }
  .odm-job-card .rx-profile-feature.rx-pass-doc-promo { gap: 10px; padding: 12px; margin: 0 16px 16px; flex-wrap: wrap; }
  .odm-job-card .rx-pass-doc-avatar, .odm-job-card .rx-pass-doc-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .odm-job-card .rx-profile-copy { flex: 1; min-width: 100px; }
  .odm-job-card .rx-profile-action { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: center; padding-left: 48px; gap: 8px; }
  .odm-job-card .rx-profile-eyebrow { font-size: 10px; }
  .odm-job-card .rx-pass-doc-name { font-size: 14px; }
  .odm-job-card .rx-pass-doc-badge { max-width: 140px; font-size: 10px; }
  .odm-job-card .rx-stub { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 14px; }
  .odm-job-card .rx-tags { flex-basis: 100%; }
  .odm-job-card .rx-apply-btn, .odm-job-card .rx-golden-apply-btn { width: 100%; min-height: 44px; font-size: 13px; }
  .odm-job-card .rx-listing-detail { font-size: 11px; }
  .odm-job-card .rx-pass-recruiter-line { padding: 0 16px 16px; }
  .odm-job-card .rx-admin { padding: 16px; gap: 14px; }
  .odm-job-card .rx-admin-status, .odm-job-card .rx-admin-actions { flex-basis: 100%; }
  .odm-job-card .rx-admin-actions { justify-content: flex-start; }
  .odm-job-card .rx-admin-actions .rx-leads-btn, .odm-job-card .rx-admin-actions .rx-leads-locked-badge { flex: 1; justify-content: center; }
  .odm-job-card .rx-leads-drawer { padding: 16px; }
  .odm-job-card .rx-leads-grid { grid-template-columns: 1fr; }
  .odm-job-card .rx-leads-h-title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
 .odm-job-card *, .odm-job-card *::before, .odm-job-card *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Avoid animating dimensions when a card moves into a narrower container. */
.odm-job-card .rx-qr-frame { min-width: 0; height: auto; transition: background-color .15s, border-color .15s; }
.odm-job-card .rx-dropdown { transition: none; }
.odm-job-card .rx-clinic { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.odm-job-card .rx-lead-role { color: #627188; }
.odm-job-card .rx-leads-h-pill { text-transform: none; letter-spacing: 0; }
.odm-job-card .rx-profile-action > span:last-child { white-space: nowrap; }
@container odm-job-card (max-width: 540px) {
 .odm-job-card .rx-info { display: contents; }
 .odm-job-card .rx-logo-wrap { grid-column: 1; grid-row: 1; }
 .odm-job-card .rx-clinic { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
 .odm-job-card .rx-qr-frame { grid-column: 3; grid-row: 1; align-self: center; }
 .odm-job-card .rx-title { grid-column: 1 / -1; margin: 2px 0 0; }
 .odm-job-card .rx-meta { grid-column: 1 / -1; }
 .odm-job-card .rx-profile-action { padding-left: 0; flex-wrap: wrap; }
 .odm-job-card .rx-pass-doc-badge { max-width: 165px; }
}