/**
 * NewJobsOnline Tools - Ultra-Premium Modern Theme CSS
 * Design Style: Executive Dark Glassmorphism with Electric Blue & Gold Accents
 */

:root {
  /* Core Color Palette */
  --p-bg-main: #060913;               /* Obsidian Cyber Black */
  --p-bg-surface: #0e1726;            /* Deep Executive Navy */
  --p-bg-glass: rgba(15, 23, 42, 0.72);/* Soft Glass Surface */
  
  /* Primary & Accent Gradients */
  --p-accent-blue: #38bdf8;           /* Electric Sky Blue */
  --p-accent-purple: #818cf8;         /* Vivid Indigo */
  --p-accent-gold: #fbbf24;           /* Champagne Gold */
  
  /* Vibrant Gradients */
  --p-grad-primary: linear-gradient(135deg, #0284c7 0%, #4f46e5 50%, #9333ea 100%);
  --p-grad-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --p-grad-glow: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);

  /* Typography & Borders */
  --p-text-white: #f8fafc;
  --p-text-muted: #94a3b8;
  --p-border: rgba(255, 255, 255, 0.08);
  --p-border-glow: rgba(56, 189, 248, 0.35);

  /* Shadows & Elevation */
  --p-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.25);
  --p-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --p-shadow-glow: 0 0 25px rgba(56, 189, 248, 0.25);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--p-bg-main);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    border: 2px solid var(--p-bg-main);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--p-accent-blue);
}

/* Base Body Styling */
body {
  background-color: var(--p-bg-main) !important;
  color: var(--p-text-white) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Transitions */
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   Glassmorphism Header & Footer
   ========================================================= */

.glass-header {
    background: rgba(6, 9, 19, 0.8) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--p-border) !important;
}

.glass-footer {
    background: rgba(6, 9, 19, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--p-border) !important;
}

/* =========================================================
   Premium Tool Workspace & Cards
   ========================================================= */

.tool-page-main {
  position: relative;
}

/* Ambient Radial Background Glow */
.tool-page-main::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  width: min(900px, 95vw);
  height: 400px;
  transform: translateX(-50%);
  background: var(--p-grad-glow);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.tool-page-main > * {
  position: relative;
  z-index: 1;
}

/* Title & Typography */
.tool-page-main > .text-center h1 {
  letter-spacing: -.03em;
  line-height: 1.15;
  background: linear-gradient(135deg, #ffffff 30%, var(--p-accent-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.tool-page-main > .text-center p {
  color: var(--p-text-muted) !important;
}

/* Breadcrumb Navigation */
.tool-page-main nav {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--p-border) !important;
  border-radius: 999px;
  background: rgba(14, 23, 38, 0.6) !important;
  backdrop-filter: blur(12px);
  box-shadow: var(--p-shadow-sm);
}

.tool-page-main nav a {
  color: var(--p-text-muted) !important;
  transition: color 0.2s ease;
}

.tool-page-main nav a:hover {
  color: var(--p-accent-blue) !important;
}

/* Main Workspace Canvas */
.tool-workspace,
.tool-page-main > div.bg-white.dark\\:bg-gray-800 {
  background: var(--p-bg-glass) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--p-shadow-lg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tool-workspace:hover {
  border-color: var(--p-border-glow) !important;
  box-shadow: var(--p-shadow-lg), var(--p-shadow-glow) !important;
}

/* =========================================================
   Interactive Elements & Buttons
   ========================================================= */

/* Action Buttons */
.tool-page-main button {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tool-page-main button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(56, 189, 248, 0.3);
}

.tool-page-main button:active {
  transform: translateY(0) scale(0.98);
}

/* Primary Action Buttons */
.tool-page-main button.bg-brand-600,
.tool-page-main button.bg-blue-600 {
  background: var(--p-grad-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.tool-page-main button.bg-brand-600:hover,
.tool-page-main button.bg-blue-600:hover {
  filter: brightness(1.15);
}

/* Drag & Drop Upload Zone */
.tool-page-main #drop-zone {
  min-height: 220px;
  border: 2px dashed rgba(56, 189, 248, 0.3) !important;
  background: rgba(14, 23, 38, 0.4) !important;
  border-radius: 18px !important;
  transition: all 0.3s ease !important;
}

.tool-page-main #drop-zone:hover {
  border-color: var(--p-accent-blue) !important;
  background: rgba(56, 189, 248, 0.05) !important;
  box-shadow: var(--p-shadow-glow);
}

.tool-page-main #drop-zone i {
  color: var(--p-accent-blue) !important;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.5));
}

/* Input Fields & Controls */
.tool-page-main label {
  color: var(--p-text-white) !important;
  font-size: 0.9rem;
  font-weight: 600;
}

.tool-page-main input:not([type="checkbox"]):not([type="radio"]),
.tool-page-main select,
.tool-page-main textarea {
  color: #ffffff !important;
  background: rgba(6, 9, 19, 0.6) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.tool-page-main input:focus,
.tool-page-main select:focus,
.tool-page-main textarea:focus {
  border-color: var(--p-accent-blue) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15) !important;
  background: rgba(6, 9, 19, 0.8) !important;
}

/* =========================================================
   Global Navigation & Related Cards
   ========================================================= */

.njo-global-nav {
  background: rgba(6, 9, 19, 0.85) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--p-border) !important;
}

.njo-nav-chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--p-border) !important;
  color: var(--p-text-muted) !important;
  border-radius: 99px;
  backdrop-filter: blur(8px);
}

.njo-nav-chip:hover,
.njo-nav-chip.active {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: var(--p-accent-blue) !important;
  color: var(--p-accent-blue) !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

/* Tool Cards & Grid */
.njo-related-card {
  background: rgba(14, 23, 38, 0.6) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px);
  transition: all 0.3s ease !important;
}

.njo-related-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--p-border-glow) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.15) !important;
}

.njo-related-icon {
  background: rgba(56, 189, 248, 0.12) !important;
  color: var(--p-accent-blue) !important;
  border-radius: 12px;
}

/* Trust Strip */
.tool-trust-strip {
  background: linear-gradient(90deg, rgba(14, 23, 38, 0.9), rgba(6, 9, 19, 0.9)) !important;
  border-bottom: 1px solid var(--p-border) !important;
  color: var(--p-accent-gold) !important;
}

.tool-trust-strip i {
  color: var(--p-accent-gold) !important;
}
/**
 * NewJobsOnline Tools - Premium Unique Colored Tool Cards
 */

/* =========================================================
   TOOL CARDS - DISTINCT MULTI-COLOR STYLES
   ========================================================= */

/* Base Related/Tool Card Structure */
.njo-related-card,
.tool-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.njo-related-card:hover,
.tool-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
}

/* Common text contrast for multi-color cards */
.njo-related-card strong,
.tool-card h3,
.tool-card .title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.njo-related-card small,
.tool-card p,
.tool-card .desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

.njo-related-arrow {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Card 1: Electric Blue Gradient */
.njo-related-grid > a:nth-child(6n+1),
.tool-card:nth-child(6n+1) {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
  border: 1px solid rgba(147, 197, 253, 0.4) !important;
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25) !important;
}

.njo-related-grid > a:nth-child(6n+1) .njo-related-icon,
.tool-card:nth-child(6n+1) i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Card 2: Deep Purple & Pink Gradient */
.njo-related-grid > a:nth-child(6n+2),
.tool-card:nth-child(6n+2) {
  background: linear-gradient(135deg, #581c87 0%, #a855f7 100%) !important;
  border: 1px solid rgba(216, 180, 254, 0.4) !important;
  box-shadow: 0 10px 25px rgba(168, 85, 247, 0.25) !important;
}

.njo-related-grid > a:nth-child(6n+2) .njo-related-icon,
.tool-card:nth-child(6n+2) i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Card 3: Emerald Cyan Gradient */
.njo-related-grid > a:nth-child(6n+3),
.tool-card:nth-child(6n+3) {
  background: linear-gradient(135deg, #065f46 0%, #10b981 100%) !important;
  border: 1px solid rgba(110, 231, 183, 0.4) !important;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25) !important;
}

.njo-related-grid > a:nth-child(6n+3) .njo-related-icon,
.tool-card:nth-child(6n+3) i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Card 4: Vibrant Amber Gold Gradient */
.njo-related-grid > a:nth-child(6n+4),
.tool-card:nth-child(6n+4) {
  background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%) !important;
  border: 1px solid rgba(252, 211, 77, 0.4) !important;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25) !important;
}

.njo-related-grid > a:nth-child(6n+4) .njo-related-icon,
.tool-card:nth-child(6n+4) i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Card 5: Crimson Sunset Gradient */
.njo-related-grid > a:nth-child(6n+5),
.tool-card:nth-child(6n+5) {
  background: linear-gradient(135deg, #831843 0%, #ec4899 100%) !important;
  border: 1px solid rgba(24bc, 166, 203, 0.4) !important;
  box-shadow: 0 10px 25px rgba(236, 72, 153, 0.25) !important;
}

.njo-related-grid > a:nth-child(6n+5) .njo-related-icon,
.tool-card:nth-child(6n+5) i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Card 6: Midnight Indigo Gradient */
.njo-related-grid > a:nth-child(6n+0),
.tool-card:nth-child(6n+0) {
  background: linear-gradient(135deg, #312e81 0%, #6366f1 100%) !important;
  border: 1px solid rgba(199, 210, 254, 0.4) !important;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.25) !important;
}

.njo-related-grid > a:nth-child(6n+0) .njo-related-icon,
.tool-card:nth-child(6n+0) i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}