/**
 * Jobify Custom Styles
 *
 * @package Jobify
 */

/* ================================
 MOBILE MENU
 ================================ */
.mobile-menu-btn {
 display:none !important;
 background:none;
 border:none;
 font-size:24px;
 cursor:pointer;
 color:var(--gray-700);
 padding:8px;
}

@media (max-width:768px) {
 .mobile-menu-btn {
 display:none !important;
 }
 
 .main-nav {
 display:none;
 position:absolute;
 top:70px;
 left:0;
 right:0;
 background:var(--white);
 box-shadow:var(--shadow-lg);
 padding:20px;
 z-index:99;
 }
 
 .nav-menu {
 flex-direction:column;
 gap:0;
 }
 
 .nav-menu li {
 border-bottom:1px solid var(--gray-100);
 }
 
 .nav-menu a {
 display:block;
 padding:15px 0;
 }
}

/* ================================
 PAGINATION
 ================================ */
.pagination {
 display:flex;
 justify-content:center;
 gap:8px;
 flex-wrap:wrap;
}

.pagination a,
.pagination span {
 min-width:44px;
 height:44px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:var(--radius);
 background:var(--white);
 color:var(--gray-700);
 font-weight:500;
 border:1px solid var(--gray-200);
 transition:all 0.2s ease;
}

.pagination a:hover,
.pagination .current {
 background:var(--primary);
 color:var(--white);
 border-color:var(--primary);
}

/* ================================
 WIDGET STYLES
 ================================ */
.widget {
 background:var(--white);
 border-radius:var(--radius);
 padding:24px;
 margin-bottom:24px;
 box-shadow:var(--shadow-sm);
}

.widget-title {
 font-family:var(--font-heading);
 font-size:16px;
 font-weight:600;
 color:var(--gray-900);
 margin-bottom:16px;
 padding-bottom:12px;
 border-bottom:1px solid var(--gray-100);
}

/* ================================
 FORM STATES
 ================================ */
.form-input.error,
.form-select.error,
.form-textarea.error {
 border-color:var(--danger);
 background:#fef2f2;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
 box-shadow:0 0 0 3px rgba(79,70,229,0.1);
}

/* ================================
 ANIMATIONS
 ================================ */
@keyframes fadeInUp {
 from {
 opacity:0;
 transform:translateY(20px);
 }
 to {
 opacity:1;
 transform:translateY(0);
 }
}

.fade-in-up {
 animation:fadeInUp 0.4s ease;
}

/* ================================
 LOADING STATES
 ================================ */
.btn.loading {
 position:relative;
 color:transparent !important;
 pointer-events:none;
}

.btn.loading::after {
 content:'';
 position:absolute;
 width:20px;
 height:20px;
 top:50%;
 left:50%;
 margin:-10px 0 0 -10px;
 border:2px solid transparent;
 border-top-color:currentColor;
 border-radius:50%;
 animation:spin 0.8s linear infinite;
}

@keyframes spin {
 to {
 transform:rotate(360deg);
 }
}

/* ================================
 JOB HEADER - BEAUTIFUL DESIGN
 ================================ */

.job-single-header {
 background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);
 color:white;
 padding:60px 0;
 position:relative;
 overflow:hidden;
}

.job-single-header::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sparkles" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="5" cy="15" r="0.5" fill="rgba(255,255,255,0.2)"/></pattern></defs><rect width="100" height="100" fill="url(%23sparkles)"/></svg>');
 opacity:0.1;
}

.job-single-header-inner {
 display:flex;
 align-items:center;
 gap:32px;
 position:relative;
 z-index:1;
}

.job-single-logo {
 flex-shrink:0;
}

.job-single-logo img {
 border:4px solid rgba(255,255,255,0.3);
 border-radius:12px;
 width:100px;
 height:100px;
 object-fit:cover;
 box-shadow:0 8px 24px rgba(0,0,0,0.2);
 transition:transform 0.3s ease;
}

.job-single-logo img:hover {
 transform:scale(1.05);
}

.job-single-logo i {
 background:rgba(255,255,255,0.15);
 border:2px solid rgba(255,255,255,0.3);
 color:rgba(255,255,255,0.9);
 width:100px;
 height:100px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:12px;
}

.job-single-info {
 flex:1;
 min-width:0;
}

.job-single-title {
 font-size:32px;
 font-weight:700;
 margin:0 0 20px;
 line-height:1.3;
 text-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.job-single-meta {
 display:flex;
 flex-wrap:wrap;
 gap:12px;
 margin-bottom:20px;
}

.job-single-meta-item {
 background:rgba(255,255,255,0.2);
 border:1px solid rgba(255,255,255,0.3);
 padding:8px 16px;
 border-radius:8px;
 font-size:14px;
 font-weight:500;
 display:flex;
 align-items:center;
 gap:8px;
 transition:all 0.3s ease;
 backdrop-filter:blur(10px);
}

.job-single-meta-item:hover {
 background:rgba(255,255,255,0.3);
 transform:translateY(-2px);
}

.job-single-meta-item a {
 color:inherit;
 text-decoration:none;
 font-weight:600;
}

.job-single-meta-item i {
 font-size:16px;
}

.job-single-actions {
 display:flex;
 flex-wrap:wrap;
 gap:12px;
}

.job-salary {
 background:rgba(255,255,255,0.15);
 border:1px solid rgba(255,255,255,0.3);
 padding:20px 24px;
 border-radius:12px;
 text-align:center;
 flex-shrink:0;
 backdrop-filter:blur(10px);
}

.job-salary-amount {
 font-size:28px;
 font-weight:700;
 margin-bottom:4px;
 text-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.job-salary-period {
 font-size:13px;
 opacity:0.9;
}

/* ================================
 JOB CARDS - BEAUTIFUL LAYOUT (Single Job Page Only)
 ================================ */

.job-content .job-card {
 background:#ffffff;
 border-radius:20px;
 box-shadow:0 8px 32px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.04);
 margin-bottom:32px;
 overflow:visible;
 transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
 border:1px solid rgba(0,0,0,0.06);
 position:relative;
}

.job-content .job-card::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:6px;
 background:linear-gradient(90deg,#667eea 0%,#764ba2 30%,#f093fb 60%,#f5576c 100%);
}

.job-content .job-card:hover {
 box-shadow:0 16px 48px rgba(0,0,0,0.12),0 8px 24px rgba(0,0,0,0.08);
 transform:translateY(-6px);
 border-color:rgba(102,126,234,0.2);
}

.job-content .job-card-header {
 background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
 color:#ffffff;
 padding:28px 32px;
 display:flex;
 align-items:center;
 gap:18px;
 position:relative;
 overflow:hidden;
 border:none;
 border-bottom:2px solid rgba(255,255,255,0.2);
}

.job-content .job-card-header::before {
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 70%);
 animation:gentleGlow 4s ease-in-out infinite;
}

@keyframes gentleGlow {
 0%,100% {transform:translateX(-50%) translateY(-50%) scale(1);}
 50% {transform:translateX(-50%) translateY(-50%) scale(1.1);}
}

.job-content .job-card-header i {
 font-size:28px;
 opacity:0.95;
 filter:drop-shadow(0 2px 8px rgba(0,0,0,0.2));
 color:#ffffff;
}

.job-content .job-card-header h3 {
 margin:0;
 font-size:13px;
 font-weight:700;
 letter-spacing:-0.025em;
 text-shadow:0 1px 3px rgba(0,0,0,0.15);
}

.job-content .job-card-content {
 padding:32px;
 background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);
 border-top:1px solid rgba(0,0,0,0.05);
 overflow:visible !important;
}

.job-content .apply-card {
 border:3px solid #f5576c;
 position:relative;
 background:linear-gradient(135deg,#fff9fa 0%,#ffffff 100%);
}

.job-content .apply-card::before {
 background:linear-gradient(90deg,#f5576c 0%,#fa709a 50%,#fee140 100%);
}

.job-content .apply-card .job-card-header {
 background:linear-gradient(135deg,#fa709a 0%,#fee140 100%);
}

.job-content .apply-card .job-card-content {
 background:linear-gradient(135deg,#fef7f0 0%,#fefcfa 100%);
}

/* Requirements & Qualifications */
.job-content .requirement-item {
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:18px 0;
 border-bottom:1px solid #e2e8f0;
 transition:all 0.3s ease;
}

.job-content .requirement-item:hover {
 background:linear-gradient(135deg,rgba(79,172,254,0.05) 0%,rgba(0,242,254,0.05) 100%);
 padding-left:16px;
 padding-right:16px;
 margin:0 -16px;
 border-radius:12px;
}

.job-content .requirement-item:last-child {
 border-bottom:none;
}

.job-content .requirement-item strong {
 color:#2d3748;
 font-weight:600;
 font-size:16px;
}

.job-content .requirement-item span {
 color:#4a5568;
 background:linear-gradient(135deg,#e6fffa 0%,#b2f5ea 100%);
 padding:8px 18px;
 border-radius:25px;
 font-size:14px;
 font-weight:500;
 border:1px solid #81e6d9;
}

/* ================================
 RESPONSIBILITIES LIST - ENHANCED
 ================================ */

.job-content .responsibilities-list {
 list-style:none;
 padding:0;
 margin:0;
 width:100%;
}

.job-content .responsibilities-list li {
 position:relative;
 padding:14px 0 14px 44px;
 margin-bottom:10px;
 color:#4a5568;
 line-height:1.7;
 font-size:14px;
 transition:all 0.3s ease;
 border-bottom:1px solid #e2e8f0;
 word-wrap:break-word;
 word-break:break-word;
 overflow-wrap:break-word;
}

.job-content .responsibilities-list li:last-child {
 border-bottom:none;
}

.job-content .responsibilities-list li:hover {
 color:#667eea;
 padding-left:48px;
 background:linear-gradient(90deg,rgba(102,126,234,0.05) 0%,transparent 100%);
 border-radius:6px;
 padding:12px 8px 12px 48px;
}

.job-content .responsibilities-list li:before {
 content:'✓';
 position:absolute;
 left:0;
 top:12px;
 color:#ffffff;
 font-weight:bold;
 font-size:14px;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 width:28px;
 height:28px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 3px 10px rgba(102,126,234,0.3);
 transition:all 0.3s ease;
 flex-shrink:0;
}

.job-content .responsibilities-list li:hover:before {
 transform:scale(1.1);
 box-shadow:0 6px 16px rgba(102,126,234,0.35);
}

/* Position Details Grid */
.job-content .position-details-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:20px;
}

.job-content .detail-item {
 display:flex;
 align-items:center;
 gap:18px;
 padding:22px;
 background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
 border-radius:16px;
 transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
 border:1px solid #e2e8f0;
 position:relative;
 overflow:hidden;
}

.job-content .detail-item::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 width:5px;
 height:100%;
 background:linear-gradient(180deg,#667eea 0%,#764ba2 100%);
 opacity:0;
 transition:opacity 0.3s ease;
}

.job-content .detail-item:hover {
 background:linear-gradient(135deg,#667eea 0%,#ffffff 100%);
 color:white;
 transform:translateY(-3px);
 box-shadow:0 10px 30px rgba(102,126,234,0.2);
}

.job-content .detail-item:hover::before {
 opacity:1;
}

.job-content .detail-item:hover i {
 color:white;
 transform:scale(1.1);
}

.job-content .detail-item:hover strong,
.job-content .detail-item:hover span {
 color:white;
}

.job-content .detail-item i {
 font-size:22px;
 color:#667eea;
 min-width:26px;
 transition:all 0.3s ease;
}

.job-content .detail-item strong {
 display:block;
 font-size:12px;
 text-transform:uppercase;
 letter-spacing:1px;
 margin-bottom:6px;
 opacity:0.8;
 color:#718096;
 transition:color 0.3s ease;
}

.job-content .detail-item span {
 font-weight:700;
 font-size:17px;
 color:#2d3748;
 transition:color 0.3s ease;
}

/* Benefits */
.job-content .benefits-list {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:18px;
 list-style:none;
 padding:0;
 margin:0;
}

.job-content .benefits-list li {
 position:relative;
 padding:18px 22px 18px 56px;
 background:linear-gradient(135deg,#fef5e7 0%,#ffffff 100%);
 border-radius:14px;
 font-size:16px;
 color:#2d3748;
 border:1px solid #fbd38d;
 transition:all 0.3s ease;
}

.job-content .benefits-list li:hover {
 background:linear-gradient(135deg,#fed7aa 0%,#fdba74 100%);
 transform:translateY(-3px);
 box-shadow:0 6px 20px rgba(245,158,11,0.15);
}

.job-content .benefits-list li:before {
 content:'⭐';
 position:absolute;
 left:18px;
 top:50%;
 transform:translateY(-50%);
 color:#f59e0b;
 font-size:18px;
}

/* Company Info */
.job-content .company-info {
 text-align:center;
 background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);
 padding:32px;
 border-radius:16px;
 border:1px solid #bae6fd;
}

.job-content .company-info h4 {
 color:#0f172a;
 margin-bottom:14px;
 font-size:24px;
 font-weight:700;
}

.job-content .company-info p {
 color:#374151;
 line-height:1.7;
 margin-bottom:22px;
 font-size:16px;
}

/* Enhanced Apply Section */
.job-content .apply-section-header {
 background:linear-gradient(135deg,#ffffff 0%,#fef7f0 100%);
 border-radius:16px;
 padding:28px;
 border:3px solid #f5576c;
 margin-bottom:28px;
}

.job-content .apply-box {
 background:linear-gradient(135deg,#fef7f0 0%,#fefcfa 100%);
 border:2px solid #f6ad55;
 border-radius:16px;
}

/* Responsive Design */
@media (max-width:768px) {
 /* Container and Layout - Tablet */
 .job-content-wrap {
 display:flex;
 flex-direction:column;
 gap:24px;
 align-items:stretch;
 }

 .job-sidebar {
 width:100%;
 flex-shrink:0;
 }

 .job-content {
 flex:1;
 min-width:0;
 }

 /* Main container padding */
 .single-job-container,
 .job-single-header {
 padding:20px 16px !important;
 }

 /* Cards padding - Tablet */
 .job-content .job-card-content {
 padding:20px 16px;
 }

 .job-content .job-card-header {
 padding:18px 20px;
 }

 .job-content .job-card-header h3 {
 font-size:13px;
 }

 .job-content .job-cards-grid {
 grid-template-columns:1fr;
 gap:16px;
 margin-bottom:20px;
 }

 .job-content .position-details-grid {
 grid-template-columns:1fr;
 gap:14px;
 }

 .job-content .benefits-list {
 grid-template-columns:1fr;
 gap:12px;
 }

 .job-content .detail-item {
 padding:14px;
 flex-direction:column;
 text-align:center;
 gap:8px;
 font-size:13px;
 }

 /* Mobile styles */

 /* Ensure sidebar is visible on mobile */
 .jobPortal-sidebar .jobPortal-sidebar-card {
 display:block !important;
 }

 .job-content .detail-item strong {
 font-size:10px;
 margin-bottom:4px;
 }

 .job-content .detail-item span {
 font-size:13px;
 }

 .job-content .responsibilities-list li {
 padding:11px 14px 11px 38px;
 margin-bottom:8px;
 font-size:12px;
 }

 .job-content .requirements-list li {
 padding:11px 14px 11px 38px;
 margin-bottom:8px;
 font-size:12px;
 }

 .job-content .requirement-item {
 flex-direction:column;
 align-items:flex-start;
 gap:6px;
 padding:10px;
 }

 .job-content .requirement-item strong {
 font-size:9px;
 margin-bottom:4px;
 }

 .job-content .requirement-item span {
 font-size:12px;
 }

 /* Typography - Tablet */
 .single-job-title {
 font-size:22px;
 margin-bottom:12px;
 }

 .job-single-meta-item {
 font-size:12px;
 }

 /* Sidebar cards - Tablet */
 .sidebar-card {
 padding:18px;
 margin-bottom:16px;
 }

 .sidebar-card h4 {
 font-size:16px;
 margin-bottom:14px;
 }
.notification {
 position:fixed;
 top:90px;
 right:20px;
 padding:16px 24px;
 border-radius:var(--radius);
 color:white;
 font-weight:500;
 z-index:1000;
 animation:slideIn 0.3s ease;
 max-width:400px;
}

.notification-success {
 background:var(--success);
}

.notification-error {
 background:var(--danger);
}

/* ================================
 RESPONSIVE TYPOGRAPHY
 ================================ */
@media (max-width:768px) {
 /* Single job page styles */
}

@keyframes slideIn {
 from {
 transform:translateX(100%);
 opacity:0;
 }
 to {
 transform:translateX(0);
 opacity:1;
 }
}

/* ================================
 WORDPRESS ALIGNMENT
 ================================ */
.alignleft {
 float:left;
 margin-right:24px;
 margin-bottom:16px;
}

.alignright {
 float:right;
 margin-left:24px;
 margin-bottom:16px;
}

.aligncenter {
 display:block;
 margin-left:auto;
 margin-right:auto;
}

/* ================================
 SCREEN READER
 ================================ */
.screen-reader-text {
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space:nowrap;
 border:0;
}

/* ================================
 PRINT STYLES
 ================================ */

/* ================================
 ACCESSIBILITY
 ================================ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
 outline:2px solid var(--primary);
 outline-offset:2px;
}

/* ================================
 DARK MODE SUPPORT (Optional)
 ================================ */
@media (prefers-color-scheme:dark) {
 :root {
 --gray-50:#0f172a;
 --gray-100:#1e293b;
 --white:#1e293b;
 --gray-900:#f1f5f9;
 --gray-700:#cbd5e1;
 }
}

/* ================================
 ENHANCED VISUAL ELEMENTS
 ================================ */

.job-content {
 max-width:100%;
}

/* Subtle animations for better UX */
.job-content .job-card:nth-child(odd) {
 animation-delay:0.1s;
}

.job-content .job-card:nth-child(even) {
 animation-delay:0.2s;
}

.job-content .job-card {
 animation:slideInUp 0.6s ease-out forwards;
 opacity:0;
 transform:translateY(30px);
}

@keyframes slideInUp {
 to {
 opacity:1;
 transform:translateY(0);
 }
}

/* Enhanced focus states for accessibility */
.job-content .job-card:focus-within {
 box-shadow:0 0 0 3px rgba(66,153,225,0.3);
}

/* Professional loading state for apply button */
.btn-primary.loading {
 background:linear-gradient(45deg,#4299e1,#3182ce);
 background-size:200% 200%;
 animation:gradientShift 1.5s ease infinite;
}

@keyframes gradientShift {
 0% {background-position:0% 50%;}
 50% {background-position:100% 50%;}
 100% {background-position:0% 50%;}
}

/* ================================
 JOB CARDS GRID - TWO COLUMN LAYOUT
 ================================ */

.job-content .job-cards-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
 gap:32px;
 margin-bottom:32px;
}

/* ================================
 PREMIUM CARD STYLES
 ================================ */

.job-content .premium-card {
 background:linear-gradient(135deg,#ffffff 0%,#fefefe 100%);
 border:1px solid rgba(0,0,0,0.06);
 position:relative;
}

.job-content .premium-card::after {
 display:none;
}

.job-content .premium-card .job-card-header {
 background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);
 position:relative;
 overflow:visible;
 border:none;
 border-bottom:2px solid rgba(255,255,255,0.2);
}

.job-content .premium-card .job-card-header::before {
 background:radial-gradient(circle,rgba(255,255,255,0.2) 0%,transparent 70%);
 animation:premiumGlow 3s ease-in-out infinite;
}

@keyframes premiumGlow {
 0%,100% {transform:translateX(-50%) translateY(-50%) scale(1);opacity:0.2;}
 50% {transform:translateX(-50%) translateY(-50%) scale(1.2);opacity:0.4;}
}

/* ================================
 FEATURED CARD STYLES
 ================================ */

.job-content .featured-card {
 background:linear-gradient(135deg,#fff8f1 0%,#fefcfb 100%);
 border:3px solid #f59e0b;
 position:relative;
}

.job-content .featured-card::before {
 background:linear-gradient(90deg,#f59e0b 0%,#d97706 50%,#b45309 100%);
}

.job-content .featured-card .job-card-header {
 background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
 border:none;
 border-bottom:2px solid rgba(255,255,255,0.2);
}

.job-content .featured-card .job-card-content {
 background:linear-gradient(135deg,#fefcfb 0%,#fef3c7 100%);
}

/* ================================
 RESPONSIVE ADJUSTMENTS
 ================================ */

@media (max-width:1024px) {
 .job-content .job-cards-grid {
 grid-template-columns:1fr;
 gap:24px;
 }
}

@media (max-width:768px) {
 /* Enhanced Requirement Items Responsive */
 .job-content .requirement-item {
 padding:12px;
 margin-bottom:12px;
 word-wrap:break-word;
 overflow-wrap:break-word;
 }

 .job-content .requirement-item strong {
 font-size:9px;
 letter-spacing:1px;
 margin-bottom:6px;
 }

 .job-content .requirement-item span {
 font-size:12px;
 word-break:break-word;
 }

 .job-content .requirement-item:hover {
 transform:translateX(2px);
 }

 /* Enhanced Responsibilities List Responsive */
 .job-content .responsibilities-list li {
 padding:12px 0 12px 40px;
 margin-bottom:10px;
 font-size:13px;
 word-wrap:break-word;
 overflow-wrap:break-word;
 }

 .job-content .responsibilities-list li:before {
 width:26px;
 height:26px;
 font-size:12px;
 left:0;
 top:12px;
 }

 .job-content .responsibilities-list li:hover {
 padding-left:44px;
 }

 .job-content .responsibilities-list li:hover:before {
 transform:scale(1.08);
 }

 /* Job Overview Responsive - Tablet */
 .overview-grid {
 grid-template-columns:repeat(2,1fr);
 gap:14px;
 padding:0;
 }

 .overview-item {
 padding:16px 18px;
 gap:10px;
 border-radius:7px;
 border-left:3px solid #667eea;
 }

 .overview-item-icon {
 width:36px;
 height:36px;
 font-size:15px;
 }

 .overview-item-content label {
 font-size:10px;
 margin-bottom:3px;
 letter-spacing:0.5px;
 }

 .overview-item-content p {
 font-size:13px;
 }

 /* Requirements and Responsibilities Cards */
 .requirements-card,
 .responsibilities-card {
 margin-bottom:20px;
 }

 .requirements-card .job-card-content,
 .responsibilities-card .job-card-content {
 padding:16px 14px;
 overflow:visible;
 }

 .job-single-header-inner {
 flex-direction:column;
 text-align:center;
 gap:20px;
 }

 .job-single-logo {
 margin-bottom:0;
 }

 .job-single-logo img {
 width:80px;
 height:80px;
 }

 .job-single-info {
 text-align:center;
 }

 .job-single-title {
 font-size:24px;
 margin-bottom:16px;
 }

 .job-single-meta {
 flex-wrap:wrap;
 justify-content:center;
 }

 .job-single-meta-item {
 font-size:12px;
 padding:6px 12px;
 }

 .job-single-actions {
 flex-direction:column;
 gap:10px;
 justify-content:center;
 }

 .job-single-actions .btn {
 width:100%;
 }

 .job-salary {
 margin-top:20px;
 text-align:center;
 width:100%;
 }

 .job-salary-amount {
 font-size:18px;
 }
 .job-content-wrap {
 flex-direction:column;
 gap:24px;
 }

 .job-sidebar {
 width:100%;
 }

 /* Responsive Cards */
 .job-content .job-card {
 margin-bottom:24px;
 border-radius:16px;
 overflow:visible;
 }

 .job-content .job-card-header {
 padding:20px 24px;
 gap:12px;
 border:none;
 border-bottom:2px solid rgba(255,255,255,0.2);
 }

 .job-content .job-card-content {
 padding:20px 24px;
 overflow:visible !important;
 }

 /* Responsive Position Details Grid */
 .job-content .position-details-grid {
 grid-template-columns:1fr;
 gap:16px;
 }

 .job-content .detail-item {
 padding:16px;
 gap:12px;
 }

 .job-content .detail-item i {
 font-size:18px;
 min-width:20px;
 }

 .job-content .detail-item strong {
 font-size:11px;
 }

 .job-content .detail-item span {
 font-size:14px;
 }

 /* Responsive Benefits List */
 .job-content .benefits-list {
 margin:0;
 padding:0;
 list-style:none;
 }

 .job-content .benefits-list li {
 padding:12px 0 12px 40px;
 margin-bottom:8px;
 position:relative;
 font-size:14px;
 }

 .job-content .benefits-list li:before {
 left:12px;
 width:20px;
 height:20px;
 font-size:12px;
 }

 /* Responsive Responsibility List */
 .job-content .responsibilities-list li {
 padding-left:40px;
 margin-bottom:12px;
 }

 .job-content .responsibilities-list li:before {
 left:12px;
 width:20px;
 height:20px;
 font-size:12px;
 }

 /* Responsive Company Info */
 .company-info h4 {
 font-size:18px;
 }

 .company-info p {
 font-size:14px;
 line-height:1.6;
 }

 /* Responsive Requirement Items */
 .job-content .requirement-item {
 padding:12px;
 margin-bottom:10px;
 }

 .job-content .requirement-item strong {
 font-size:11px;
 }

 .job-content .requirement-item span {
 font-size:13px;
 }

 /* Responsive Sidebar Cards */
 .sidebar-card {
 font-size:14px;
 padding:20px;
 border-radius:12px;
 }

 .sidebar-card h4 {
 font-size:16px;
 margin-bottom:16px;
 }

 .sidebar-card-header {
 gap:10px;
 margin-bottom:16px;
 }

 .sidebar-card-header i {
 font-size:18px;
 }

 .overview-table-sidebar {
 font-size:13px;
 }

 .overview-table-sidebar td {
 padding:10px 0;
 }

 .overview-table-sidebar td.overview-label {
 font-size:11px;
 }

 .overview-table-sidebar td.overview-value {
 font-size:13px;
 }

 /* Code Sample Responsive */
 .job-content pre {
 padding:16px !important;
 font-size:12px;
 }

 .job-content pre code {
 font-size:12px;
 }

 .job-content code {
 font-size:12px;
 }

 /* Apply Box Responsive */
 .apply-box {
 padding:20px !important;
 }

 .apply-box p {
 font-size:14px;
 }

 .job-content .job-cards-grid {
 grid-template-columns:1fr;
 gap:24px;
 }
}

@media (max-width:480px) {
 /* Mobile Layout - Full Stack */
 .job-content-wrap {
 display:flex;
 flex-direction:column;
 gap:12px;
 align-items:stretch;
 }

 .job-content {
 width:100%;
 flex:1;
 min-width:0;
 }

 .job-sidebar {
 width:100%;
 flex-shrink:0;
 }

 /* Hide salary on mobile */
 .job-salary {
 display:none !important;
 }

 /* Mobile Container Padding - Minimal gutters */
 .single-job-container {
 padding:0 !important;
 max-width:100%;
 }

 .job-single-header,
 .job-content {
 padding:12px !important;
 }

 body {
 margin:0;
 padding:0;
 }

 /* Mobile Touch Feedback for Cards - Hover on Scroll */
 .job-content .job-card {
 transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
 cursor:pointer;
 touch-action:manipulation;
 }

 .job-content .job-card:hover,
 .job-content .job-card.scroll-hover {
 box-shadow:0 8px 24px rgba(102,126,234,0.2) !important;
 transform:translateY(-2px) scale(1.01);
 border-color:rgba(102,126,234,0.4) !important;
 }

 .job-content .job-card:active {
 transform:scale(0.98);
 box-shadow:0 2px 8px rgba(102,126,234,0.3) !important;
 border-color:rgba(102,126,234,0.5) !important;
 opacity:0.95;
 }

 .job-content .job-card:focus {
 outline:none;
 box-shadow:0 0 0 3px rgba(102,126,234,0.2) !important;
 }

 /* Mobile Header - Clean & Simple */
 .job-single-header {
 padding:16px 12px !important;
 background-size:cover;
 background-position:center;
 }

 .job-single-header-inner {
 gap:12px;
 flex-direction:column;
 text-align:center;
 max-width:100%;
 }

 .job-single-logo {
 margin:0 auto;
 }

 .job-single-logo img {
 width:56px;
 height:56px;
 border-radius:8px;
 }

 .job-single-title {
 font-size:18px;
 line-height:1.4;
 margin:8px 0;
 font-weight:800;
 word-break:break-word;
 }

 .job-single-meta {
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:6px;
 margin:8px 0 0 0;
 }

 .job-single-meta-item {
 font-size:11px;
 padding:5px 10px;
 display:inline-block;
 margin:2px;
 border-radius:6px;
 background:rgba(102,126,234,0.1);
 }

 /* Mobile Cards - Clean & Mobile Friendly */
 .job-content .job-card {
 margin-bottom:12px;
 border-radius:8px;
 border:none;
 background:#ffffff;
 box-shadow:0 2px 8px rgba(0,0,0,0.08);
 transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
 }

 .job-content .job-card:hover,
 .job-content .job-card.scroll-hover {
 box-shadow:0 8px 20px rgba(102,126,234,0.25) !important;
 transform:translateY(-3px) !important;
 background:#f8faff;
 }

 .job-content .job-card:active {
 transform:scale(0.98) !important;
 box-shadow:0 2px 8px rgba(102,126,234,0.3) !important;
 }

 .job-content .job-card::before {
 display:none;
 }

 .job-content .job-card-header {
 padding:14px 16px !important;
 border:none;
 border-bottom:1px solid rgba(102,126,234,0.1);
 background:linear-gradient(135deg,rgba(102,126,234,0.08) 0%,rgba(118,75,162,0.08) 100%);
 }

 .job-content .job-card-header h3 {
 font-size:13px;
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:0.5px;
 margin:0;
 }

 .job-content .job-card-content {
 padding:14px 16px !important;
 overflow:visible !important;
 }

 .job-content .job-cards-grid {
 grid-template-columns:1fr;
 gap:10px;
 margin-bottom:10px;
 }

 /* Mobile Position Details */
 .job-content .position-details-grid {
 grid-template-columns:1fr;
 gap:8px;
 }

 .job-content .requirement-item {
 padding:8px;
 margin-bottom:6px;
 word-wrap:break-word;
 overflow-wrap:break-word;
 flex-direction:column;
 align-items:flex-start;
 gap:3px;
 border-radius:6px;
 background:rgba(226,232,240,0.3);
 }

 .job-content .requirement-item strong {
 font-size:9px;
 margin-bottom:1px;
 letter-spacing:0.5px;
 color:#667eea;
 font-weight:800;
 }

 .job-content .requirement-item span {
 font-size:12px;
 word-break:break-word;
 color:#2d3748;
 font-weight:600;
 line-height:1.3;
 }

 .job-content .detail-item {
 padding:8px;
 flex-direction:column;
 text-align:center;
 gap:4px;
 font-size:10px;
 }

 .job-content .detail-item i {
 font-size:16px;
 min-width:16px;
 color:#667eea;
 }

 .job-content .detail-item strong {
 font-size:8px;
 margin-bottom:1px;
 color:#667eea;
 font-weight:800;
 }

 .job-content .detail-item span {
 font-size:12px;
 color:#2d3748;
 font-weight:700;
 }

 /* Mobile Lists */
 .job-content .benefits-list {
 grid-template-columns:1fr;
 gap:8px;
 list-style:none;
 padding:0;
 margin:0;
 }

 .job-content .benefits-list li {
 padding:8px 10px 8px 30px;
 font-size:11px;
 border-radius:6px;
 position:relative;
 word-wrap:break-word;
 overflow-wrap:break-word;
 line-height:1.4;
 }

 .job-content .requirements-list {
 list-style:none;
 padding:0;
 margin:0;
 }

 .job-content .requirements-list li {
 padding:8px 10px 8px 28px;
 margin-bottom:6px;
 font-size:11px;
 word-wrap:break-word;
 overflow-wrap:break-word;
 position:relative;
 line-height:1.4;
 }

 .job-content .requirements-list li:before {
 width:18px;
 height:18px;
 font-size:9px;
 top:6px;
 left:0;
 }

 .job-content .responsibilities-list {
 list-style:none;
 padding:0;
 margin:0;
 }

 .job-content .responsibilities-list li {
 padding:8px 10px 8px 28px;
 margin-bottom:6px;
 font-size:11px;
 word-wrap:break-word;
 overflow-wrap:break-word;
 position:relative;
 line-height:1.4;
 }

 .job-content .responsibilities-list li:before {
 width:18px;
 height:18px;
 font-size:9px;
 top:6px;
 left:0;
 }

 .job-content .responsibilities-list li:hover {
 padding-left:28px;
 }

 /* Mobile Company Info */
 .job-content .company-info {
 text-align:center;
 background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);
 padding:12px;
 border-radius:8px;
 border:1px solid #bae6fd;
 }

 .job-content .company-info h4 {
 color:#0f172a;
 margin-bottom:8px;
 font-size:12px;
 font-weight:700;
 }

 .job-content .company-info p {
 color:#374151;
 line-height:1.5;
 margin-bottom:8px;
 font-size:11px;
 }

 /* Mobile Apply Section */
 .job-content .apply-section-header {
 background:linear-gradient(135deg,#ffffff 0%,#fef7f0 100%);
 border-radius:8px;
 padding:10px 12px;
 border:2px solid #f5576c;
 margin-bottom:12px;
 }

 .apply-box {
 padding:10px 12px !important;
 }

 .apply-box p {
 font-size:11px;
 margin:4px 0;
 }

 .apply-box button,
 .btn-primary {
 padding:12px 16px !important;
 font-size:13px !important;
 min-height:44px;
 border-radius:6px;
 width:100%;
 font-weight:700;
 }

 /* Mobile Ads */
 }

 /* Mobile Sidebar Cards */
 .sidebar-card {
 padding:12px;
 margin-bottom:10px;
 border-radius:8px;
 background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
 }

 .sidebar-card h4 {
 font-size:12px;
 margin-bottom:8px;
 gap:6px;
 font-weight:700;
 color:#2d3748;
 }

 .sidebar-card h4 i {
 font-size:14px;
 color:#667eea;
 }

 /* Mobile Job Overview */
 .overview-grid {
 grid-template-columns:repeat(2,1fr);
 gap:10px;
 padding:0;
 }

 .overview-item {
 padding:12px 14px;
 gap:8px;
 border-radius:6px;
 border-left:2px solid #667eea;
 box-shadow:none;
 min-height:auto;
 justify-content:flex-start;
 flex-direction:column;
 align-items:flex-start;
 background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
 }

 .overview-item:hover {
 transform:translateY(-1px);
 box-shadow:0 2px 4px rgba(102,126,234,0.1);
 border-left-color:#764ba2;
 }

 .overview-item-icon {
 width:28px;
 height:28px;
 font-size:12px;
 margin-bottom:2px;
 }

 .overview-item:hover .overview-item-icon {
 transform:scale(1.05) rotate(1deg);
 }

 .overview-item-content label {
 font-size:8px;
 margin-bottom:2px;
 letter-spacing:0.4px;
 font-weight:800;
 color:#667eea;
 }

 .overview-item-content p {
 font-size:11px;
 word-wrap:break-word;
 color:#2d3748;
 font-weight:700;
 line-height:1.2;
 }

 .overview-salary {
 font-size:11px !important;
 }

 /* Viewport optimization */
 html {
 font-size:14px;
 }

 * {
 -webkit-tap-highlight-color:transparent;
 }
}
 letter-spacing:0.5px;
 }

 .overview-item-content p {
 font-size:12px;
 word-wrap:break-word;
 }

 .overview-salary {
 font-size:12px !important;
 }

 /* Very Small Screen - Responsibilities */
 .job-content .responsibilities-list li {
 padding:10px 0 10px 36px;
 margin-bottom:8px;
 font-size:12px;
 word-wrap:break-word;
 overflow-wrap:break-word;
 line-height:1.5;
 }

 .job-content .responsibilities-list li:before {
 width:24px;
 height:24px;
 font-size:11px;
 top:8px;
 }

 .job-content .responsibilities-list li:hover {
 padding-left:36px;
 }

 .requirements-card .job-card-content,
 .responsibilities-card .job-card-content {
 padding:14px 12px;
 overflow:visible;
 }

 .sidebar-card {
 padding:16px;
 }

 .job-salary-amount {
 font-size:14px;
 }

 .btn-lg {
 padding:10px 16px !important;
 font-size:13px !important;
 }

 /* Fix apply section layout */
 .apply-section-header {
 flex-direction:column;
 }

 .apply-section-header .btn {
 width:100%;
 }
}

@media (max-width:1024px) {
 .job-content-wrap {
 gap:24px;
 }

 .job-sidebar {
 width:280px;
 }

 .sidebar-card {
 padding:20px;
 }
}

/* ================================
 CODE SYNTAX HIGHLIGHTING
 ================================ */

.job-content pre {
 background:#1e1e1e !important;
 border:none !important;
 border-radius:12px;
 padding:20px !important;
 overflow-x:auto;
 font-size:14px;
 line-height:1.6;
 font-family:'Courier New',monospace;
 box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.job-content pre code {
 background:transparent !important;
 color:#d4d4d4;
 border:none !important;
 font-size:14px;
 line-height:1.6;
 font-family:'Courier New',monospace;
 padding:0 !important;
 margin:0 !important;
}

.job-content code {
 background:#f5f5f5;
 padding:2px 6px;
 border-radius:4px;
 color:#e83e8c;
 font-family:'Courier New',monospace;
 font-size:13px;
}

/* Highlight.js theme overrides */
.hljs {
 background:#1e1e1e !important;
 color:#d4d4d4 !important;
}

.hljs-string,
.hljs-literal {
 color:#ce9178 !important;
}

.hljs-number {
 color:#b5cea8 !important;
}

.hljs-literal,
.hljs-attr {
 color:#9cdcfe !important;
}

.hljs-title,
.hljs-function {
 color:#dcdcaa !important;
}

.hljs-keyword {
 color:#569cd6 !important;
}

.hljs-comment {
 color:#6a9955 !important;
}

.hljs-attr {
 color:#9cdcfe !important;
}

.hljs-variable {
 color:#9cdcfe !important;
}

/* ================================
 JOB OVERVIEW SIDEBAR CARD
 ================================ */

.job-overview-card-sidebar {
 background:linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%) !important;
 border:1px solid #e2e8f0 !important;
 box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
 transition:all 0.3s ease !important;
}

.job-overview-card-sidebar:hover {
 box-shadow:0 8px 24px rgba(0,0,0,0.1) !important;
 transform:translateY(-2px) !important;
}

.sidebar-card-header {
 display:flex;
 align-items:center;
 gap:12px;
 margin-bottom:20px;
 padding-bottom:16px;
 border-bottom:2px solid #e2e8f0;
}

.sidebar-card-header i {
 font-size:20px;
 color:#667eea;
}

.sidebar-card-header h4 {
 margin:0 !important;
 font-size:16px;
 font-weight:700;
 color:#2d3748;
}

.overview-table-sidebar {
 width:100%;
 border-collapse:collapse;
}

.overview-table-sidebar tbody tr {
 border-bottom:1px solid #e2e8f0;
 transition:background-color 0.3s ease;
}

.overview-table-sidebar tbody tr:last-child {
 border-bottom:none;
}

.overview-table-sidebar tbody tr:hover {
 background-color:rgba(102,126,234,0.08);
}

.overview-table-sidebar td {
 padding:12px 0;
 vertical-align:middle;
}

.overview-table-sidebar td.overview-label {
 width:45%;
 font-weight:600;
 color:#718096;
 font-size:12px;
 text-transform:uppercase;
 letter-spacing:0.5px;
}

.overview-table-sidebar td.overview-value {
 width:55%;
 color:#2d3748;
 font-weight:500;
 font-size:13px;
 word-break:break-word;
}

.overview-table-sidebar td.overview-value a {
 color:#667eea;
 text-decoration:none;
 font-weight:600;
 transition:color 0.3s ease;
}

.overview-table-sidebar td.overview-value a:hover {
 color:#764ba2;
 text-decoration:underline;
}

/* ================================
 JOB CONTENT WRAPPER - RESPONSIVE
 ================================ */

.job-content-wrap {
 display:flex;
 gap:32px;
 align-items:flex-start;
}

.job-content {
 flex:1;
 min-width:0;
}

.job-sidebar {
 width:320px;
 flex-shrink:0;
}

/* ================================
 JOB CARDS GRID - RESPONSIVE
 ================================ */

.job-content .job-cards-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:24px;
 margin-bottom:32px;
}

/* ================================
 SIDEBAR CARDS - BEAUTIFUL
 ================================ */

.sidebar-card {
 background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
 border:1px solid #e2e8f0;
 border-radius:16px;
 padding:24px;
 margin-bottom:24px;
 box-shadow:0 2px 12px rgba(0,0,0,0.05);
 transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.sidebar-card:hover {
 box-shadow:0 8px 24px rgba(0,0,0,0.1);
 transform:translateY(-4px);
 border-color:#d1d5db;
}

.sidebar-card h4 {
 font-size:18px;
 font-weight:700;
 color:#2d3748;
 margin:0 0 20px;
 display:flex;
 align-items:center;
 gap:10px;
}

.sidebar-card h4 i {
 color:#667eea;
 font-size:20px;
}

/* ================================
 REQUIREMENTS & RESPONSIBILITIES CARDS
 ================================ */

.requirements-card,
.responsibilities-card {
 position:relative;
 overflow:hidden;
}

.requirements-card::before,
.responsibilities-card::before {
 background:linear-gradient(90deg,#667eea 0%,#764ba2 50%,#f093fb 100%) !important;
}

.requirements-card {
 border:3px solid #667eea !important;
 overflow:visible !important;
}

.requirements-card .job-card-header {
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
 border:none !important;
 border-bottom:2px solid rgba(255,255,255,0.2) !important;
}

.responsibilities-card {
 border:3px solid #f5576c !important;
 overflow:visible !important;
}

.responsibilities-card .job-card-header {
 background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%) !important;
 border:none !important;
 border-bottom:2px solid rgba(255,255,255,0.2) !important;
}

.requirements-card .job-card-content,
.responsibilities-card .job-card-content {
 background:linear-gradient(135deg,#f8fafc 0%,#f0f4ff 100%);
 overflow:visible;
 word-wrap:break-word;
}

/* ================================
 PROFESSIONAL JOB PORTAL LAYOUT
 ================================ */

.jobPortal-container {
 max-width:1400px;
 margin:0 auto;
 padding:2rem;
 display:grid;
 grid-template-columns:1fr 380px;
 gap:2rem;
 background:#f9fafb;
}

@media (max-width:1024px) {
 .jobPortal-container {
 grid-template-columns:1fr;
 }
}

/* ================================
 JOB HEADER CARD
 ================================ */

.jobPortal-header {
 background:#ffffff;
 border:1px solid #e5e7eb;
 border-radius:20px;
 padding:2.5rem;
 margin-bottom:2rem;
 position:relative;
 overflow:hidden;
 box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

.jobPortal-header::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:4px;
 background:linear-gradient(90deg,var(--primary) 0%,#764ba2 100%);
}

.jobPortal-company-banner {
 display:flex;
 justify-content:center;
 margin-bottom:1.5rem;
}

.jobPortal-logo-large {
 width:80px;
 height:80px;
 background:linear-gradient(135deg,var(--primary) 0%,#764ba2 100%);
 border-radius:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:28px;
 font-weight:800;
 color:white;
 flex-shrink:0;
 box-shadow:0 4px 15px rgba(102,126,234,0.3);
 overflow:hidden;
}

.jobPortal-logo-large img {
 width:100%;
 height:100%;
 object-fit:cover;
}

.jobPortal-title-section {
 text-align:center;
}

.jobPortal-title-section h1 {
 font-size:28px;
 font-weight:700;
 color:#1f2937;
 margin-bottom:8px;
 line-height:1.2;
}

.jobPortal-company-meta {
 display:flex;
 align-items:center;
 gap:10px;
 color:#6b7280;
 font-size:14px;
 flex-wrap:wrap;
}

.company-link {
 color:var(--primary);
 text-decoration:none;
 font-weight:600;
 transition:opacity 0.3s;
}

.company-link:hover {
 opacity:0.8;
}

/* ================================
 QUICK INFO BADGES
 ================================ */

.jobPortal-quick-info {
 display:flex;
 flex-wrap:wrap;
 gap:0.75rem;
 margin:1.5rem 0;
}

.info-badge {
 display:inline-flex;
 align-items:center;
 gap:6px;
 padding:8px 14px;
 background:#f3f4f6;
 border:1px solid #e5e7eb;
 border-radius:50px;
 font-size:13px;
 color:#6b7280;
 font-weight:500;
 transition:all 0.3s ease;
}

.info-badge:hover {
 background:#e5e7eb;
 border-color:#d1d5db;
}

.info-badge i {
 font-size:13px;
}

.info-badge.salary {
 background:rgba(16,185,129,0.1);
 border-color:rgba(16,185,129,0.3);
 color:#10b981;
 font-weight:600;
}

.info-badge.salary:hover {
 background:rgba(16,185,129,0.2);
 border-color:rgba(16,185,129,0.5);
}

.info-badge.urgent {
 background:rgba(239,68,68,0.1);
 border-color:rgba(239,68,68,0.3);
 color:#ef4444;
 animation:pulse-border-light 2s infinite;
}

@keyframes pulse-border-light {
 0%,100% {box-shadow:0 0 0 0 rgba(239,68,68,0.2);}
 50% {box-shadow:0 0 0 3px rgba(239,68,68,0);}
}

/* ================================
 ACTION BAR
 ================================ */

.jobPortal-action-bar {
 display:flex;
 gap:1rem;
 margin:1.5rem 0;
 padding:1.5rem 0;
 border-top:1px solid #e5e7eb;
 border-bottom:1px solid #e5e7eb;
}

.btn {
 padding:10px 16px;
 border-radius:10px;
 font-weight:600;
 font-size:14px;
 cursor:pointer;
 transition:all 0.3s ease;
 display:inline-flex;
 align-items:center;
 gap:6px;
 border:none;
 text-decoration:none;
}

.btn-primary {
 background:linear-gradient(135deg,var(--primary) 0%,#764ba2 100%);
 color:white;
 box-shadow:0 2px 8px rgba(102,126,234,0.3);
}

.btn-primary:hover {
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(102,126,234,0.4);
}

.btn-secondary {
 background:#f3f4f6;
 color:#1f2937;
 border:1px solid #e5e7eb;
}

.btn-secondary:hover {
 background:#e5e7eb;
 border-color:#d1d5db;
}

.btn-outline {
 background:transparent;
 color:var(--primary);
 border:1px solid var(--primary);
}

.btn-outline:hover {
 background:rgba(102,126,234,0.05);
}

.btn-loading {
 position:relative;
 color:transparent !important;
 pointer-events:none;
}

.btn-loading::after {
 content:'';
 position:absolute;
 width:16px;
 height:16px;
 border:2px solid rgba(255,255,255,0.3);
 border-top-color:white;
 border-radius:50%;
 animation:spin 0.8s linear infinite;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
}

@keyframes spin {
 to {transform:translate(-50%,-50%) rotate(360deg);}
}

/* ================================
 MAIN CONTENT CARDS
 ================================ */

.jobPortal-content-card {
 background:#ffffff;
 border:1px solid #e5e7eb;
 border-radius:16px;
 padding:2rem;
 margin-bottom:1.5rem;
 box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

.jobPortal-section-title {
 font-size:18px;
 font-weight:700;
 color:#1f2937;
 margin-bottom:1.5rem;
 display:flex;
 align-items:center;
 gap:10px;
}

.jobPortal-section-title i {
 color:var(--primary);
 font-size:18px;
}

.jobPortal-description {
 color:#6b7280;
 line-height:1.8;
 font-size:15px;
}

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

/* ================================
 LISTS
 ================================ */

.jobPortal-list {
 list-style:none;
 display:flex;
 flex-direction:column;
 gap:10px;
}

.jobPortal-list li {
 display:flex;
 align-items:flex-start;
 gap:10px;
 padding:10px 12px;
 background:#f9fafb;
 border-radius:10px;
 border-left:3px solid var(--primary);
 transition:all 0.3s ease;
}

.jobPortal-list li:hover {
 background:#f3f4f6;
 transform:translateX(4px);
}

.jobPortal-list i {
 color:var(--primary);
 margin-top:2px;
 flex-shrink:0;
 font-size:14px;
}

.jobPortal-list span {
 color:#4b5563;
}

/* ================================
 STEPS (Ordered List)
 ================================ */

.jobPortal-steps {
 list-style:none;
 display:flex;
 flex-direction:column;
 gap:12px;
 padding:0;
}

.jobPortal-steps li {
 display:flex;
 align-items:flex-start;
 gap:15px;
 padding:14px 16px;
 background:linear-gradient(135deg,#f8f9fc 0%,#f3f4f7 100%);
 border-radius:10px;
 border-left:4px solid var(--primary);
 counter-increment:step-counter;
 transition:all 0.3s ease;
 position:relative;
}

.jobPortal-steps {
 counter-reset:step-counter;
}

.jobPortal-steps li::before {
 content:counter(step-counter);
 display:flex;
 align-items:center;
 justify-content:center;
 width:32px;
 height:32px;
 min-width:32px;
 background:var(--primary);
 color:white;
 border-radius:50%;
 font-weight:bold;
 font-size:14px;
 flex-shrink:0;
}

.jobPortal-steps li:hover {
 background:linear-gradient(135deg,#f0f2f8 0%,#eaecf1 100%);
 transform:translateX(4px);
 box-shadow:0 4px 12px rgba(79,70,229,0.1);
}

.jobPortal-steps li span {
 color:#4b5563;
 font-size:14px;
 line-height:1.6;
 flex:1;
}

.jobPortal-content-text {
 line-height:1.8;
 color:#4b5563;
 font-size:14px;
}

.jobPortal-content-text p {
 margin:0 0 12px 0;
}

.jobPortal-content-text p:last-child {
 margin-bottom:0;
}

/* ================================
 SKILLS
 ================================ */

.jobPortal-skills-container {
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}

.skill-tag {
 padding:6px 12px;
 background:linear-gradient(135deg,rgba(102,126,234,0.1) 0%,rgba(139,92,246,0.1) 100%);
 border:1px solid rgba(102,126,234,0.2);
 border-radius:50px;
 font-size:13px;
 font-weight:500;
 color:var(--primary);
 cursor:pointer;
 transition:all 0.3s ease;
}

.skill-tag:hover {
 background:rgba(102,126,234,0.2);
 transform:translateY(-2px);
}

/* ================================
 BENEFITS GRID
 ================================ */

.jobPortal-benefits-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:1rem;
}

.benefit-item {
 display:flex;
 align-items:flex-start;
 gap:12px;
 padding:16px;
 background:#f9fafb;
 border-radius:12px;
 border:1px solid #e5e7eb;
 transition:all 0.3s ease;
}

.benefit-item:hover {
 border-color:var(--primary);
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(102,126,234,0.1);
}

.benefit-icon {
 font-size:24px;
 line-height:1;
}

.benefit-content h4 {
 font-size:14px;
 font-weight:600;
 color:#1f2937;
 margin-bottom:4px;
}

.benefit-content p {
 font-size:12px;
 color:#6b7280;
}

/* ================================
 COMPANY INFO
 ================================ */

.jobPortal-company-info h3 {
 font-size:18px;
 font-weight:700;
 color:#1f2937;
 margin-bottom:12px;
}

.jobPortal-company-info p {
 color:#6b7280;
 line-height:1.6;
 margin-bottom:16px;
}

/* ================================
 SIDEBAR
 ================================ */

.jobPortal-sidebar {
 display:flex;
 flex-direction:column;
 gap:1.5rem;
}

.jobPortal-sidebar-card {
 background:#ffffff;
 border:1px solid #e5e7eb;
 border-radius:16px;
 padding:1.5rem;
 box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

.jobPortal-sidebar-title {
 font-size:14px;
 font-weight:700;
 color:#1f2937;
 margin-bottom:1rem;
 display:flex;
 align-items:center;
 gap:8px;
}

.jobPortal-sidebar-title i {
 color:var(--primary);
}

/* ================================
 HIRING AGENCY
 ================================ */

.jobPortal-hiring-agency {
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:12px;
 text-align:center;
}

.agency-logo {
 width:80px;
 height:80px;
 border-radius:8px;
 background:#f3f4f6;
 display:flex;
 align-items:center;
 justify-content:center;
 flex-shrink:0;
 overflow:hidden;
 border:2px solid var(--border);
}

.agency-logo img {
 width:100%;
 height:100%;
 object-fit:cover;
}

.agency-logo-placeholder {
 font-weight:700;
 font-size:24px;
 color:var(--primary);
}

.jobPortal-hiring-agency h4 {
 font-weight:600;
 font-size:14px;
 color:#1f2937;
 margin:0;
}

/* ================================
 RECRUITER PROFILE
 ================================ */

.jobPortal-recruiter-profile {
 display:flex;
 align-items:center;
 gap:12px;
 margin-bottom:1rem;
}

.recruiter-avatar {
 width:48px;
 height:48px;
 border-radius:50%;
 background:linear-gradient(135deg,var(--primary) 0%,#764ba2 100%);
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
 font-size:14px;
 color:white;
 flex-shrink:0;
 box-shadow:0 2px 8px rgba(102,126,234,0.2);
}

.recruiter-info h4 {
 font-weight:600;
 font-size:13px;
 color:#1f2937;
 margin-bottom:2px;
}

.recruiter-info p {
 font-size:11px;
 color:#6b7280;
 margin:0;
}

.response-time {
 display:inline-flex;
 align-items:center;
 gap:4px;
 font-size:10px;
 color:#10b981;
 background:rgba(16,185,129,0.1);
 padding:4px 8px;
 border-radius:12px;
 margin-top:4px;
}

/* ================================
 FOOTER CATEGORIES - MOVED TO FOOTER.PHP INLINE STYLES
 ================================ */
.jobs-by-location-page {
 max-width:1000px;
 margin:0 auto;
 padding:40px 20px;
}

/* outer wrapper clean layout for location templates */
body.page-template-template-jobs-by-country .site-main,
body.page-template-template-jobs-by-province .site-main,
body.page-template-template-jobs-by-city .site-main,
body.page-template-template-jobs-by-category .site-main,
body.page-template .site-main {
 background:#f5f7fb;
 padding-top:30px;
 padding-bottom:30px;
}

body.page-template-template-jobs-by-country .jobify-container,
body.page-template-template-jobs-by-province .jobify-container,
body.page-template-template-jobs-by-city .jobify-container,
body.page-template-template-jobs-by-category .jobify-container,
body.page-template .jobify-container {
 max-width:1100px;
 margin:0 auto;
 padding:20px;
 background:#fff;
 border-radius:12px;
 box-shadow:0 10px 28px rgba(15,23,42,0.08);
}

.location-page-header {
 margin-bottom:40px;
}

.location-page-header h1 {
 font-size:32px;
 margin-bottom:10px;
 color:#111827;
}

.location-page-header p {
 color:#6b7280;
 font-size:16px;
 margin:0;
}

.back-link {
 display:inline-block;
 margin-top:12px;
 color:var(--primary);
 font-weight:600;
 text-decoration:none;
}

.location-summary-panel {
 background:#f8f9fa;
 border:1px solid #e5e7eb;
 border-radius:8px;
 padding:20px;
 margin-bottom:30px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 flex-wrap:wrap;
}

.location-summary-panel label,
.location-summary-panel .job-company,
.location-card p {
 color:#6b7280;
}

.location-summary-panel .btn {
 min-width:auto;
}

.location-grid {
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
 gap:20px;
}

.location-card {
 border:1px solid #e5e7eb;
 border-radius:8px;
 padding:30px 20px;
 background:#fff;
 text-align:center;
 transition:box-shadow 0.3s ease,transform 0.3s ease;
}

.location-card:hover {
 transform:translateY(-4px);
 box-shadow:0 16px 40px rgba(15,23,42,0.08);
}

.location-card h2 {
 font-size:24px;
 margin-bottom:15px;
 color:#111827;
}

.location-card strong {
 font-size:20px;
 color:var(--primary);
}

.location-jobs-list {
 display:grid;
 gap:15px;
}

.location-job-item {
 border:1px solid #e5e7eb;
 border-radius:8px;
 padding:20px;
 background:#fff;
 display:flex;
 justify-content:space-between;
 align-items:center;
 transition:border-color 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease;
}

.location-job-item:hover {
 border-color:#d1d5db;
 box-shadow:0 16px 40px rgba(15,23,42,0.06);
}

.location-job-item .job-details {
 flex:1;
 min-width:0;
}

.location-job-item h3 {
 margin:0 0 8px;
 font-size:18px;
}

.location-job-item h3 a {
 color:var(--primary);
 text-decoration:none;
}

.location-job-link {
 margin-left:20px;
}

.location-card-link {
 text-decoration:none;
}

.location-card-link:hover .location-card {
 text-decoration:none;
}

/* ================================
 SIMILAR JOBS
 ================================ */

.similar-job-item {
 display:flex;
 gap:10px;
 padding:12px;
 background:#f9fafb;
 border-radius:10px;
 margin-bottom:8px;
 text-decoration:none;
 color:inherit;
 transition:all 0.3s ease;
 border:1px solid transparent;
}

.similar-job-item:hover {
 background:#f3f4f6;
 border-color:#e5e7eb;
 transform:translateX(4px);
}

.similar-logo {
 width:40px;
 height:40px;
 min-width:40px;
 border-radius:8px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
 font-size:12px;
 background:linear-gradient(135deg,var(--primary) 0%,#764ba2 100%);
 color:white;
}

.similar-info h4 {
 font-size:13px;
 font-weight:600;
 color:#1f2937;
 margin-bottom:2px;
}

.similar-info p {
 font-size:11px;
 color:#6b7280;
 margin:0;
}

.similar-salary {
 font-size:12px;
 color:#10b981;
 font-weight:600;
 margin-top:4px;
}

/* ================================
 SHARE BUTTONS
 ================================ */

.share-grid {
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:8px;
}

.share-btn {
 padding:10px;
 background:#f9fafb;
 border:1px solid #e5e7eb;
 border-radius:10px;
 color:#6b7280;
 cursor:pointer;
 transition:all 0.3s ease;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:16px;
}

.share-btn:hover {
 background:#f3f4f6;
 border-color:#d1d5db;
 color:#1f2937;
 transform:translateY(-2px);
}

.share-btn.linkedin:hover {color:#0077b5;border-color:#0077b5;}
.share-btn.twitter:hover {color:#1da1f2;border-color:#1da1f2;}
.share-btn.facebook:hover {color:#4267B2;border-color:#4267B2;}
.share-btn.copy:hover {color:#10b981;border-color:#10b981;}

/* ================================
 TOAST NOTIFICATIONS
 ================================ */

.toast-container {
 position:fixed;
 top:100px;
 right:2rem;
 z-index:1000;
 display:flex;
 flex-direction:column;
 gap:8px;
}

.toast {
 background:#ffffff;
 border:1px solid #e5e7eb;
 border-radius:12px;
 padding:12px 16px;
 display:flex;
 align-items:center;
 gap:10px;
 box-shadow:0 4px 12px rgba(0,0,0,0.15);
 transform:translateX(400px);
 transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
 max-width:360px;
}

.toast.show {
 transform:translateX(0);
}

.toast-icon {
 width:32px;
 height:32px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:14px;
 flex-shrink:0;
}

.toast.success .toast-icon {
 background:rgba(16,185,129,0.15);
 color:#10b981;
}

.toast.info .toast-icon {
 background:rgba(59,130,246,0.15);
 color:#3b82f6;
}

.toast-content {
 font-weight:500;
 font-size:13px;
 color:#1f2937;
}

/* ================================
 RESPONSIVE DESIGN
 ================================ */

@media (max-width:768px) {
 .jobPortal-container {
 padding:1rem;
 gap:1rem;
 }
 
 .jobPortal-header {
 padding:1.5rem;
 }
 
 .jobPortal-title-section h1 {
 font-size:20px;
 }
 
 .jobPortal-company-banner {
 justify-content:center;
 }
 
 .jobPortal-benefits-grid {
 grid-template-columns:1fr;
 }
 
 .share-grid {
 grid-template-columns:repeat(2,1fr);
 }
}

/* ================================
 PREMIUM FEATURES - MATCH SCORE
 ================================ */

.job-match-score {
 position:absolute;
 top:20px;
 right:30px;
 background:linear-gradient(135deg,var(--company-color) 0%,#764ba2 100%);
 padding:16px 24px;
 border-radius:16px;
 text-align:center;
 box-shadow:0 10px 40px rgba(102,126,234,0.3);
 z-index:10;
 min-width:90px;
 animation:slideInRight 0.6s ease-out;
}

.match-score-value {
 font-size:28px;
 font-weight:800;
 color:white;
 line-height:1;
}

.match-score-label {
 font-size:12px;
 color:rgba(255,255,255,0.9);
 text-transform:uppercase;
 letter-spacing:1px;
 margin-top:4px;
}

@keyframes slideInRight {
 from {
 transform:translateX(100px);
 opacity:0;
 }
 to {
 transform:translateX(0);
 opacity:1;
 }
}

/* ================================
 PREMIUM FEATURES - QUICK BADGES
 ================================ */

.job-quick-badges {
 display:flex;
 flex-wrap:wrap;
 gap:12px;
 margin:16px 0;
 animation:slideInUp 0.6s ease-out 0.2s both;
}

.info-badge {
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:8px 14px;
 background:rgba(255,255,255,0.08);
 border:1px solid rgba(255,255,255,0.15);
 border-radius:50px;
 font-size:14px;
 color:#94a3b8;
 font-weight:500;
 transition:all 0.3s ease;
}

.info-badge:hover {
 background:rgba(255,255,255,0.12);
 border-color:rgba(255,255,255,0.25);
 transform:translateY(-2px);
}

.info-badge i {
 font-size:14px;
}

.info-badge.salary {
 background:rgba(16,185,129,0.15);
 border-color:rgba(16,185,129,0.4);
 color:#34d399;
 font-weight:600;
}

.info-badge.salary:hover {
 background:rgba(16,185,129,0.25);
 border-color:rgba(16,185,129,0.6);
}

.info-badge.urgent {
 background:rgba(239,68,68,0.15);
 border-color:rgba(239,68,68,0.4);
 color:#f87171;
 animation:pulse-border 2s infinite;
}

@keyframes pulse-border {
 0%,100% {
 box-shadow:0 0 0 0 rgba(239,68,68,0.4);
 }
 50% {
 box-shadow:0 0 0 4px rgba(239,68,68,0);
 }
}

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

/* ================================
 PREMIUM FEATURES - COMPANY LOGO PLACEHOLDER
 ================================ */

.company-logo-placeholder {
 width:100%;
 height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:20px;
 font-weight:800;
 color:white;
 border-radius:12px;
 position:relative;
 overflow:hidden;
}

.company-logo-placeholder::after {
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.3) 50%,transparent 70%);
 animation:shimmer 3s infinite;
}

@keyframes shimmer {
 0% {
 transform:translateX(-100%) translateY(-100%) rotate(45deg);
 }
 100% {
 transform:translateX(100%) translateY(100%) rotate(45deg);
 }
}

/* ================================
 MOBILE OPTIMIZATION
 ================================ */

/* ================================
 RECRUITER CARD STYLING
 ================================ */

.recruiter-card {
 background:linear-gradient(135deg,rgba(102,126,234,0.05) 0%,rgba(139,92,246,0.05) 100%) !important;
 border:1px solid rgba(102,126,234,0.2) !important;
}

.recruiter-profile {
 display:flex;
 gap:12px;
 margin-bottom:12px;
}

.recruiter-avatar {
 width:56px;
 height:56px;
 border-radius:50%;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
 font-size:16px;
 color:white;
 flex-shrink:0;
 box-shadow:0 4px 15px rgba(102,126,234,0.3);
}

.recruiter-info h5 {
 font-weight:600;
 font-size:14px;
 color:#2d3748;
 margin-bottom:4px;
}

.recruiter-info p {
 font-size:12px;
 color:#718096;
 margin:0;
}

.response-time {
 display:inline-flex;
 align-items:center;
 gap:4px;
 font-size:11px;
 color:#10b981;
 background:rgba(16,185,129,0.1);
 padding:4px 8px;
 border-radius:20px;
 margin-top:4px;
}

.contact-btn {
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
 color:white !important;
 border:none !important;
 font-weight:600;
}

.contact-btn:hover {
 transform:translateY(-2px);
 box-shadow:0 8px 20px rgba(102,126,234,0.3) !important;
}

@media (max-width:768px) {
 .job-match-score {
 position:static;
 margin-bottom:16px;
 display:inline-block;
 }
 
 .job-quick-badges {
 gap:8px;
 }
 
 .info-badge {
 font-size:12px;
 padding:6px 10px;
 }
}

.requirements-card:hover,
.responsibilities-card:hover {
 box-shadow:0 16px 48px rgba(0,0,0,0.15) !important;
}

/* ================================
 JOB OVERVIEW CARD - LARGE STYLE
 ================================ */

.job-overview-card {
 background:linear-gradient(135deg,#ffffff 0%,#fafbfc 100%) !important;
 border:2px solid #667eea !important;
}

.job-overview-card .job-card-header {
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
 border:none !important;
 border-bottom:2px solid rgba(255,255,255,0.2) !important;
}

/* Hide the old sidebar overview card */
.job-overview-card-sidebar {
 display:none;
}

.overview-grid {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:16px;
 padding:0;
}

.overview-item {
 display:flex;
 gap:12px;
 align-items:flex-start;
 padding:18px 20px;
 background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
 border-radius:8px;
 border-left:3px solid #667eea;
 border-top:1px solid rgba(102,126,234,0.08);
 transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
 box-shadow:0 1px 3px rgba(0,0,0,0.02);
}

.overview-item:hover {
 transform:translateX(3px) translateY(-1px);
 box-shadow:0 3px 8px rgba(102,126,234,0.12);
 border-left-color:#764ba2;
 background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 100%);
}

.overview-item-icon {
 font-size:18px;
 display:flex;
 align-items:center;
 justify-content:center;
 width:40px;
 height:40px;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 border-radius:50%;
 color:#ffffff;
 transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
 flex-shrink:0;
 box-shadow:0 1px 4px rgba(102,126,234,0.12);
}

.overview-item:hover .overview-item-icon {
 transform:scale(1.1) rotate(3deg);
 box-shadow:0 3px 8px rgba(102,126,234,0.2);
}

.overview-item-content {
 flex:1;
}

.overview-item-content label {
 display:block;
 font-size:11px;
 font-weight:800;
 color:#667eea;
 text-transform:uppercase;
 letter-spacing:0.6px;
 margin-bottom:4px;
 line-height:1;
}

.overview-item-content p {
 margin:0;
 font-size:15px;
 color:#2d3748;
 font-weight:700;
 line-height:1.3;
 word-wrap:break-word;
 overflow-wrap:break-word;
 word-break:break-word;
}

.overview-link {
 color:#667eea;
 text-decoration:none;
 font-weight:700;
 transition:all 0.3s ease;
}

.overview-link:hover {
 color:#764ba2;
 text-decoration:underline;
}

.overview-salary {
 color:#f5576c !important;
 font-size:16px !important;
 font-weight:700 !important;
}

.overview-empty {
 color:#cbd5e0;
 font-style:italic;
}

/* ================================
 REQUIREMENT ITEMS - ENHANCED
 ================================ */

.job-content .requirement-item {
 padding:8px 10px;
 background:linear-gradient(135deg,#ffffff 0%,#f9f5ff 100%);
 border-left:3px solid #667eea;
 border-radius:6px;
 margin-bottom:6px;
 transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
 box-shadow:0 1px 4px rgba(102,126,234,0.08);
 position:relative;
}

.job-content .requirement-item::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:2px;
 background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);
 border-radius:6px 6px 0 0;
 opacity:0;
 transition:opacity 0.3s ease;
}

.job-content .requirement-item:hover {
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 color:white;
 transform:translateX(2px);
 box-shadow:0 3px 10px rgba(102,126,234,0.2);
 border-color:#764ba2;
}

.job-content .requirement-item:hover::before {
 opacity:1;
}

.job-content .requirement-item:hover strong,
.job-content .requirement-item:hover span {
 color:white;
}

.job-content .requirement-item strong {
 display:block;
 font-size:9px;
 text-transform:uppercase;
 letter-spacing:0.8px;
 color:#667eea;
 margin-bottom:3px;
 transition:color 0.3s ease;
 font-weight:700;
 line-height:1.2;
}

.job-content .requirement-item span {
 font-size:12px;
 font-weight:600;
 color:#2d3748;
 transition:color 0.3s ease;
 line-height:1.3;
 word-break:break-word;
}

/* ================================
 RESPONSIBILITIES LIST - ENHANCED
 ================================ */

.job-content .responsibilities-list {
 list-style:none;
 padding:0;
 margin:0;
 width:100%;
 overflow:visible;
 display:block;
}

.job-content .responsibilities-list li {
 position:relative;
 padding:12px 0 12px 44px;
 margin-bottom:12px;
 color:#4a5568;
 line-height:1.7;
 font-size:13px;
 transition:all 0.3s ease;
 border-bottom:1px solid #e2e8f0;
 word-wrap:break-word;
 word-break:break-word;
 overflow-wrap:break-word;
 overflow:visible;
 white-space:normal;
 display:list-item;
 width:100%;
 box-sizing:border-box;
 min-height:auto;
}

.job-content .responsibilities-list li:last-child {
 border-bottom:none;
}

.job-content .responsibilities-list li:hover {
 color:#667eea;
 padding-left:48px;
 background:linear-gradient(90deg,rgba(102,126,234,0.05) 0%,transparent 100%);
 border-radius:4px;
 padding:12px 8px 12px 48px;
}

.job-content .responsibilities-list li:before {
 content:'✓';
 position:absolute;
 left:0;
 top:10px;
 color:#ffffff;
 font-weight:bold;
 font-size:13px;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 width:26px;
 height:26px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 3px 10px rgba(102,126,234,0.3);
 transition:all 0.3s ease;
 flex-shrink:0;
}

.job-content .responsibilities-list li:hover:before {
 transform:scale(1.1);
 box-shadow:0 6px 16px rgba(102,126,234,0.35);
}

/* ================================
 COMPANY INFO - IMPROVED
 ================================ */

.company-info {
 display:flex;
 flex-direction:column;
 gap:16px;
}

.company-info h4 {
 margin:0;
 font-size:20px;
 font-weight:700;
 color:#2d3748;
 border-bottom:2px solid #e2e8f0;
 padding-bottom:12px;
}

.company-info p {
 margin:0;
 color:#4a5568;
 line-height:1.8;
 font-size:15px;
}

.company-info .btn {
 align-self:flex-start;
 margin-top:8px;
}

/* ================================
 BENEFITS LIST - BEAUTIFUL
 ================================ */

.job-content .benefits-list {
 list-style:none;
 padding:0;
 margin:0;
}

.job-content .benefits-list li {
 position:relative;
 padding-left:36px;
 margin-bottom:14px;
 color:#4a5568;
 line-height:1.7;
 font-size:15px;
 transition:all 0.3s ease;
}

.job-content .benefits-list li:hover {
 color:#667eea;
 transform:translateX(4px);
}

.job-content .benefits-list li:before {
 content:'★';
 position:absolute;
 left:0;
 color:#fbbf24;
 font-size:18px;
 font-weight:bold;
 text-shadow:0 2px 4px rgba(251,191,36,0.3);
}

/* ================================
 APPLY SECTION - BEAUTIFUL
 ================================ */

.apply-section-header {
 flex-wrap:wrap;
 gap:16px;
}

.apply-box {
 border:2px dashed #e2e8f0;
 background:linear-gradient(135deg,#f8fafc 0%,#f0f4ff 100%) !important;
 transition:all 0.3s ease;
}

.apply-box:hover {
 border-color:#667eea;
 background:linear-gradient(135deg,#f0f4ff 0%,#f9f5ff 100%) !important;
}

.apply-box p {
 color:#4a5568;
 font-size:15px;
}

/* ================================
 TEXT CENTER CLASS
 ================================ */

.text-center {
 text-align:center;
}

/* ================================
 SIMILAR JOBS - BEAUTIFUL STYLING
 ================================ */

.sidebar-card > div {
 padding:16px 0;
 border-bottom:1px solid #e2e8f0;
 transition:all 0.3s ease;
}

.sidebar-card > div:last-child {
 border-bottom:none;
 padding-bottom:0;
}

.sidebar-card > div:hover {
 background:#f8fafc;
 padding-left:8px;
}

.sidebar-card a {
 font-weight:600;
 color:#2d3748;
 text-decoration:none;
 transition:color 0.3s ease;
 display:block;
}

.sidebar-card a:hover {
 color:#667eea;
}

.sidebar-card p {
 font-size:13px;
 color:#718096;
 margin:5px 0 0;
}

/* ================================
 SOCIAL SHARING BUTTONS (#7)
 ================================ */

.share-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
 gap:10px;
 margin-top:15px;
}

.share-btn {
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:8px;
 padding:12px 16px;
 border:2px solid #e2e8f0;
 border-radius:6px;
 background:white;
 color:#4a5568;
 font-size:13px;
 font-weight:600;
 cursor:pointer;
 transition:all 0.3s ease;
 text-decoration:none;
 min-height:60px;
}

.share-btn:hover {
 transform:translateY(-2px);
 box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

.share-btn i {
 font-size:18px;
}

.share-btn.facebook {
 border-color:#1877f2;
 color:#1877f2;
}

.share-btn.facebook:hover {
 background:#f0f6ff;
 border-color:#0a66c2;
}

.share-btn.twitter {
 border-color:#000000;
 color:#000000;
}

.share-btn.twitter:hover {
 background:#f5f5f5;
}

.share-btn.linkedin {
 border-color:#0a66c2;
 color:#0a66c2;
}

.share-btn.linkedin:hover {
 background:#f0f6ff;
}

.share-btn.whatsapp {
 border-color:#25d366;
 color:#25d366;
}

.share-btn.whatsapp:hover {
 background:#f0fff4;
 border-color:#128c7e;
}

.share-btn.copy {
 border-color:#718096;
 color:#718096;
}

.share-btn.copy:hover {
 background:#f7fafc;
}

.share-btn span {
 font-size:12px;
 font-weight:600;
 letter-spacing:0.3px;
}

/* Extra Large Screens (1440px+) */
@media (min-width:1440px) {
 .container {
 max-width:1320px;
 }
}

/* Tablets & Medium Screens (768px - 1024px) */
@media (max-width:1024px) {
 .container {
 padding:0 20px;
 }
 
 .search-form {
 flex-wrap:wrap;
 }
 
 .search-field {
 flex:0 0 calc(50% - 10px) !important;
 }
 
 .jobs-grid {
 grid-template-columns:repeat(2,1fr) !important;
 gap:15px;
 }
 
 .categories-grid {
 grid-template-columns:repeat(4,1fr) !important;
 gap:12px;
 }
}

/* Mobile Phones (480px - 767px) */
@media (max-width:768px) {
 html {
 font-size:14px;
 }
 
 .container {
 padding:0 15px;
 margin:0 auto;
 }
 
 /* ===== Typography ===== */
 h1 {
 font-size:24px !important;
 margin-bottom:15px !important;
 }
 
 h2 {
 font-size:20px !important;
 margin-bottom:15px !important;
 }
 
 h3 {
 font-size:18px !important;
 }
 
 p {
 font-size:14px;
 line-height:1.6;
 }
 
 /* ===== Buttons & Forms ===== */
 .btn {
 padding:12px 20px !important;
 font-size:14px !important;
 min-width:auto;
 border-radius:6px;
 }
 
 .btn-lg {
 padding:14px 24px !important;
 font-size:15px !important;
 width:100%;
 }
 
 .btn-primary,.btn-secondary,.btn-accent {
 width:100%;
 }
 
 input[type="text"],
 input[type="email"],
 input[type="number"],
 input[type="date"],
 select,
 textarea {
 font-size:16px !important;/* Prevents zoom on iOS */
 padding:12px 14px !important;
 width:100%;
 border-radius:6px;
 margin-bottom:8px;
 }
 
 /* ===== Search & Filters ===== */
 .search-form {
 flex-direction:column;
 gap:12px;
 }
 
 .search-field {
 flex:1 !important;
 margin-bottom:0;
 }
 
 .search-field label {
 font-size:13px;
 margin-bottom:6px;
 display:block;
 }
 
 .search-box {
 padding:20px 15px !important;
 margin-bottom:30px;
 }
 
 /* ===== Grid Layouts ===== */
 .jobs-grid {
 grid-template-columns:1fr !important;
 gap:12px !important;
 }
 
 .categories-grid {
 grid-template-columns:repeat(3,1fr) !important;
 gap:10px !important;
 }
 
 /* ===== Cards & Content ===== */
 .job-item,
 .job-card {
 padding:15px !important;
 flex-direction:column;
 }
 
 .related-jobs {
 margin-top:40px;
 padding-top:30px;
 }
 
 /* ===== Header & Navigation ===== */
 .site-header {
 padding:12px 0 !important;
 position:sticky;
 top:0;
 left:0;
 right:0;
 z-index:999;
 background-color:#ffffff;
 box-shadow:0 2px 6px rgba(0,0,0,0.08);
 will-change:transform;
 }
 
 .header-main {
 flex-direction:column;
 gap:15px;
 }
 
 .main-nav {
 display:none;/* Hide on mobile */
 }
 
 .header-actions {
 flex-direction:column;
 gap:8px;
 width:100%;
 }
 
 .header-actions .btn {
 width:100%;
 padding:10px 12px !important;
 font-size:12px !important;
 }
 
 /* ===== Hero Section ===== */
 .hero {
 padding:30px 0 !important;
 }
 
 .hero-title {
 font-size:24px !important;
 line-height:1.3;
 }
 
 .hero-subtitle {
 font-size:14px !important;
 }
 
 /* ===== Sections ===== */
 .section {
 padding:30px 0 !important;
 margin:0;
 }
 
 .section-header {
 flex-direction:column;
 gap:15px;
 margin-bottom:25px;
 }
 
 .section-title {
 font-size:20px !important;
 }
 
 .section-subtitle {
 font-size:13px !important;
 }
 
 /* ===== Job Alert Form ===== */
 .job-alert-section {
 padding:30px 15px !important;
 margin:30px 0 !important;
 border-radius:8px;
 }
 
 #jobify-alert-form {
 flex-direction:column;
 }
 
 #jobify-alert-email,
 #jobify-alert-form .btn {
 width:100% !important;
 padding:12px 14px !important;
 }
 
 /* ===== Tables ===== */
 table {
 font-size:12px !important;
 }
 
 table th,
 table td {
 padding:8px !important;
 }
 
 /* ===== Sidebar/Two-column ===== */
 .section > div[style*="grid-template-columns:1fr 300px"] {
 grid-template-columns:1fr !important;
 }
 
 /* ===== Footer ===== */
 .site-footer {
 padding:30px 0 !important;
 }
 
 .footer-content {
 grid-template-columns:1fr !important;
 gap:20px;
 }
}

/* Small Phones (max 480px) */
@media (max-width:480px) {
 .container {
 padding:0 12px;
 }
 
 h1 {
 font-size:20px !important;
 }
 
 h2 {
 font-size:18px !important;
 }
 
 h3 {
 font-size:16px !important;
 }
 
 .hero-title {
 font-size:20px !important;
 }
 
 .search-form {
 gap:10px;
 }
 
 input,
 select,
 textarea,
 .btn {
 font-size:16px !important;
 }
 
 .categories-grid {
 grid-template-columns:repeat(2,1fr) !important;
 gap:8px !important;
 }
 
 /* Full width buttons on small phones */
 .btn {
 display:block;
 width:100% !important;
 }
 
 /* ===== Social Sharing ===== */
 .share-grid {
 grid-template-columns:repeat(2,1fr) !important;
 gap:8px;
 }
 
 .share-btn {
 padding:10px 12px !important;
 font-size:12px !important;
 min-height:50px;
 }
 
 .share-btn i {
 font-size:16px !important;
 }
 
 .share-btn span {
 font-size:10px !important;
 }
}