/* ============================================================
   Midnight Consultant – EsyJobPortal.Web redesign
   Primary:  #0faebd   Dark: #2c3e50   Accent: #ffa500
   ============================================================ */
:root {
    --mc-primary:  #0faebd;
    --mc-primary-dark: #0d8a96;
    --mc-primary-light: rgba(15,174,189,0.12);
    --mc-dark:     #2c3e50;
    --mc-accent:   #ffa500;
    --mc-bg:       #f8fffe;
    --mc-gray:     #f5f5f5;
}

html, body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: var(--mc-dark);
    background: #f5f5f5;
    scroll-behavior: smooth;
}

body { margin-bottom: 0; }

/* ── Navbar ─────────────────────────────────────────────── */
.mc-header { z-index: 1030; }

.logo-img { object-fit: contain; }

.mc-nav-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mc-dark) !important;
    padding: 0.5rem 0.9rem !important;
    border-radius: 8px;
    transition: color 0.18s, background 0.18s;
    white-space: nowrap;
}

.mc-nav-link:hover { color: var(--mc-primary) !important; background: var(--mc-primary-light); }

.mc-dropdown {
    border-radius: 12px !important;
    padding: 6px !important;
    min-width: 220px;
    border: 1px solid rgba(15,174,189,0.15) !important;
}

.mc-dropdown .dropdown-item {
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 8px 14px;
    color: var(--mc-dark);
    transition: background 0.15s, color 0.15s;
}

.mc-dropdown .dropdown-item:hover { background: var(--mc-primary-light); color: var(--mc-primary); }

.mc-btn-login {
    border: 2px solid var(--mc-primary) !important;
    background: transparent !important;
    color: var(--mc-primary) !important;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.18s, color 0.18s;
}

.mc-btn-login:hover,
.mc-btn-login:focus,
.mc-btn-login:active {
    background: var(--mc-primary) !important;
    color: #fff !important;
    border-color: var(--mc-primary) !important;
}

.mc-btn-register {
    background: var(--mc-accent) !important;
    border: 2px solid var(--mc-accent) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.18s, border-color 0.18s;
}

.mc-btn-register:hover,
.mc-btn-register:focus,
.mc-btn-register:active {
    background: #e69500 !important;
    border-color: #e69500 !important;
    color: #fff !important;
}

/* ── Shared Buttons ─────────────────────────────────────── */
.mc-btn-primary {
    background: var(--mc-primary);
    border: none;
    color: #fff !important;
    font-weight: 600;
    transition: background 0.18s;
}

.mc-btn-primary:hover { background: var(--mc-primary-dark); color: #fff !important; }

.mc-btn-outline {
    border: 2px solid var(--mc-primary);
    color: var(--mc-primary) !important;
    font-weight: 600;
    background: transparent;
    transition: background 0.18s, color 0.18s;
}

.mc-btn-outline:hover { background: var(--mc-primary); color: #fff !important; }

/* ── Hero ────────────────────────────────────────────────── */
.mc-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 50%, transparent 100%);
    z-index: 1;
}

.mc-hero-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Search Box ─────────────────────────────────────────── */
.mc-search-box { max-width: 580px; }

.mc-search-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    display: block;
}

/* ── Section Titles ─────────────────────────────────────── */
.mc-section-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--mc-dark);
    letter-spacing: -0.02em;
}

.mc-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-dark));
    border-radius: 4px;
    margin: 0.6rem 0 1rem;
}

.mc-badge {
    display: inline-block;
    background: var(--mc-primary-light);
    color: var(--mc-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(15,174,189,0.25);
}

/* ── Step Cards ─────────────────────────────────────────── */
.mc-step-card {
    transition: transform 0.22s, box-shadow 0.22s;
    border: 2px solid transparent;
}

.mc-step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(15,174,189,0.18) !important;
    border-color: rgba(15,174,189,0.25);
}

.mc-step-num {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(15,174,189,0.1);
    line-height: 1;
    position: absolute;
    top: 16px;
    left: 20px;
}

.mc-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mc-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--mc-primary);
    margin: 0 auto;
    transition: background 0.22s, color 0.22s;
}

.mc-step-card:hover .mc-step-icon { background: var(--mc-primary); color: #fff; }

.mc-step-arrow {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.22s;
}

.mc-step-card:hover .mc-step-arrow { opacity: 1; }

/* ── Service Items ──────────────────────────────────────── */
.mc-service-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.mc-service-item:hover {
    border-color: rgba(15,174,189,0.3);
    box-shadow: 0 6px 20px rgba(15,174,189,0.12);
    transform: translateX(4px);
}

.mc-service-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mc-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.mc-service-item:hover .mc-service-icon { background: var(--mc-primary); color: #fff; }

.mc-service-btn {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mc-primary);
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--mc-primary-light);
    transition: background 0.18s, color 0.18s;
    align-self: center;
    flex-shrink: 0;
}

.mc-service-btn:hover { background: var(--mc-primary); color: #fff; }

/* ── Lifestyle image ────────────────────────────────────── */
.mc-lifestyle-wrap { border-radius: 20px; }

.mc-lifestyle-img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mc-lifestyle-wrap:hover .mc-lifestyle-img {
    transform: scale(1.06);
}

.mc-floating-badge { animation: floatBadge 4s ease-in-out infinite; }

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ── App Section ────────────────────────────────────────── */
.mc-app-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.mc-dot-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #28a745;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.mc-store-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--mc-dark);
    color: #fff;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 12px;
    transition: background 0.18s;
}

.mc-store-btn:hover { background: #1a2a3a; color: #fff; }

/* ── Feature Cards ──────────────────────────────────────── */
.mc-feature-card {
    transition: transform 0.22s, box-shadow 0.22s;
    border: 2px solid transparent;
}

.mc-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(15,174,189,0.16) !important;
    border-color: rgba(15,174,189,0.2);
}

.mc-feature-card--active {
    background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-dark)) !important;
    color: #fff !important;
}

.mc-feature-card--active p { opacity: 0.88; }
.mc-feature-card--active h5 { color: #fff; }

.mc-feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--mc-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--mc-primary);
    margin: 0 auto;
    transition: background 0.22s, color 0.22s;
}

.mc-feature-card:hover .mc-feature-icon { background: var(--mc-primary); color: #fff; }
.mc-feature-card--active .mc-feature-icon { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Helper Cards ───────────────────────────────────────── */
.mc-helper-card {
    border: 2px solid transparent;
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.mc-helper-card:hover {
    transform: translateY(-6px);
    border-color: rgba(15,174,189,0.2);
    box-shadow: 0 12px 32px rgba(15,174,189,0.14) !important;
}

.mc-helper-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(15,174,189,0.2);
    margin: 0 auto;
    display: block;
}

.mc-tag {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--mc-primary-light);
    color: var(--mc-primary);
    padding: 3px 10px;
    border-radius: 50px;
}

/* ── Category Cards ─────────────────────────────────────── */
.mc-cat-card {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s;
    border: 2px solid transparent;
    background: #fff;
}

.mc-cat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    border-color: rgba(15,174,189,0.2);
}

.mc-cat-card:hover img { transform: scale(1.08); }

.mc-cat-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(15,174,189,0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── CTA Banner ─────────────────────────────────────────── */
.mc-cta-banner {
    background: linear-gradient(135deg, #2c3e50 0%, #1a2a3a 100%);
    position: relative;
    overflow: hidden;
}

.mc-cta-banner::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(15,174,189,0.12);
    top: -100px;
    right: -80px;
    pointer-events: none;
}

/* ── Swiper overrides ───────────────────────────────────── */
.swiper { padding-bottom: 2.5rem !important; }
.swiper-pagination-bullet { background: var(--mc-primary) !important; opacity: 0.35; }
.swiper-pagination-bullet-active { opacity: 1 !important; }
.swiper-button-next, .swiper-button-prev {
    color: var(--mc-primary) !important;
    background: #fff;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 0.85rem !important; font-weight: 700; }

/* ── Footer ─────────────────────────────────────────────── */
.mc-footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9rem;
}

.mc-footer-links a, .mc-footer-links li {
    color: #555;
    text-decoration: none;
    transition: color 0.18s;
}

.mc-footer-links a:hover { color: var(--mc-primary); }

.mc-social-img-link {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s;
    text-decoration: none;
}

.mc-social-img-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.mc-social-img-link img { display: block; }

/* ── WhatsApp Float ─────────────────────────────────────── */
.whatsapp-float { position: fixed; bottom: 20px; right: 20px; z-index: 1050; }

.whatsapp-icon {
    width: 56px;
    height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    animation: waPulse 2.5s infinite;
}

.whatsapp-icon i { color: #fff; font-size: 1.6rem; }
.whatsapp-icon:hover { transform: scale(1.08); }

.whatsapp-options {
    position: absolute;
    bottom: 66px;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px;
    min-width: 160px;
    display: none;
    border: 1px solid #e5e5e5;
}

.whatsapp-options.show { display: block; animation: slideUp 0.25s ease; }

.whatsapp-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s;
}

.whatsapp-option:hover { background: #f5f5f5; color: #333; }
.whatsapp-option i { color: #25d366; font-size: 1.1rem; }

@keyframes waPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,0.4); }
    50% { box-shadow: 0 4px 28px rgba(37,211,102,0.7); }
}

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

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .mc-step-arrow { display: none !important; }
    .mc-hero { min-height: 480px !important; }
    .mc-phone-wrap { width: 220px !important; height: 400px !important; }
}

@media (max-width: 576px) {
    .mc-search-box { flex-direction: column; }
}

.btn:focus { box-shadow: 0 0 0 0.2rem rgba(15,174,189,0.25); }

/* ── Hero Banner (shared across pages) ──────────────────── */
.mc-hero-banner {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.mc-hero-bg {
    position: absolute;
    inset: 0;
    background-color: #0faebd;
    background-size: cover;
    background-position: center;
    filter: blur(1.5px);
    transform: scale(1.1);
    z-index: 0;
}

.mc-hero-banner-shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
    z-index: 1;
}

.mc-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(20, 184, 166, 0.3);
    border: 1px solid rgba(20, 184, 166, 0.5);
    color: #fff;
    padding: 0.55rem 1.4rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.mc-hero-vision-bar {
    position: relative;
    padding-left: 1.75rem;
    margin-top: 2rem;
}

.mc-hero-vision-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #0faebd;
    border-radius: 3px;
}

.mc-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.mc-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #0faebd;
}

.mc-timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 6px;
    width: 12px;
    height: 12px;
    background: #0faebd;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #0faebd;
}

.mc-value-card {
    border-radius: 16px;
    border: 2px solid transparent;
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    padding: 2rem;
}

.mc-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(15, 174, 189, 0.2);
}

.mc-value-icon {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.mc-check-bullet {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

@media (max-width: 992px) {
    .mc-hero-banner { min-height: 550px; }
}

@media (max-width: 768px) {
    .mc-hero-banner { min-height: 480px; }
    .mc-hero-banner-content { padding-top: 60px; padding-bottom: 60px; }
}

/* ── Plans Page ──────────────────────────────────────────── */
.plans-how-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    border: 2px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.plans-how-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.12);
    border-color: rgba(15,174,189,0.2);
}

.plans-how-card:hover .plans-step-title { color: #0faebd !important; }

.plans-how-card:hover .plans-step-img { transform: scale(1.08); }

.plans-step-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plans-how-card:hover .plans-step-badge {
    transform: scale(1.15) rotate(5deg);
}

.plans-step-img {
    transition: transform 0.4s ease;
}

.plans-pricing-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plans-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

.plans-pricing-card--featured {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #0faebd;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.18);
    transform: scale(1.05);
}

.plans-pricing-card--featured:hover {
    transform: scale(1.05) translateY(-6px);
}

.plans-plan-icon {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto;
}

.plans-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plans-benefit-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.plans-benefit-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 2rem;
    transition: transform 0.3s ease;
}

.plans-benefit-item:hover .plans-benefit-icon { transform: scale(1.1); }

.plans-testimonials-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plans-testimonials-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

@media (max-width: 992px) {
    .plans-pricing-card--featured { transform: scale(1); }
    .plans-pricing-card--featured:hover { transform: translateY(-6px); }
}

@media (max-width: 768px) {
    .plans-how-card { margin-bottom: 1rem; }
    .plans-benefit-item { padding: 1.25rem; }
    .plans-testimonials-card { padding: 1.75rem; }
}

/* ── Services Page (mc-svc- prefix) ─────────────────────── */
.mc-svc-section { padding: 80px 0; }

.mc-svc-img-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.mc-svc-img-wrap img { width: 100%; display: block; }

.mc-svc-list { list-style: none; padding: 0; margin: 0; }

.mc-svc-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
}

.mc-svc-list li i {
    color: var(--mc-primary);
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.mc-svc-comparison { background: #e6f7ff; padding: 80px 0; }

.mc-svc-comparison-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.mc-svc-comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.mc-svc-comparison-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,174,189,0.1);
    border-radius: 50%;
}

.mc-svc-comparison-icon i { font-size: 2.5rem; color: var(--mc-primary); }

.mc-svc-steps { background: var(--mc-primary); padding: 100px 0; }

.mc-svc-steps-wrapper { position: relative; }

.mc-svc-steps-line {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background: rgba(255,255,255,0.5);
    z-index: 0;
}

.mc-svc-step-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #0b7f89;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mc-svc-steps h2,
.mc-svc-steps h5,
.mc-svc-steps p { color: #fff; }

.mc-svc-steps .btn-light { border-radius: 30px; color: var(--mc-primary); font-weight: 600; }

.mc-svc-processing { padding: 80px 0; text-align: center; background: #fff; }

.mc-svc-processing-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
}

.mc-svc-cta {
    position: relative;
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(110deg, #087f8c 0%, #0faebd 40%, #18d3e0 75%, #2ce6f2 100%);
    overflow: hidden;
}

.mc-svc-cta-shape {
    position: absolute;
    top: -140px;
    left: -10%;
    width: 130%;
    height: 260px;
    background: linear-gradient(120deg, rgba(0,0,0,0.18), rgba(0,0,0,0.05), rgba(255,255,255,0));
    transform: skewY(-4deg);
    z-index: 1;
}

.mc-svc-cta-content {
    position: relative;
    z-index: 2;
    max-width: 950px;
    margin: auto;
}

.mc-svc-cta h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
    .mc-svc-section { padding: 60px 0; }
    .mc-svc-comparison { padding: 60px 0; }
    .mc-svc-steps { padding: 80px 0; }
    .mc-svc-steps-line { display: none !important; }
}

@media (max-width: 767.98px) {
    .mc-svc-processing { padding: 60px 0; }
    .mc-svc-cta { padding: 60px 20px; }
}

/* ── B2B / Processing Services Page (mc-b2b- prefix) ──────── */
.mc-b2b-hero-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mc-b2b-hero-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #18d3e0;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mc-b2b-hero-feature-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.mc-b2b-hero-feature-sub {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

/* Service Cards */
.mc-b2b-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    height: 100%;
}

.mc-b2b-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, #0faebd 0%, #18d3e0 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.mc-b2b-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(15,174,189,0.15);
    border-color: #0faebd;
}

.mc-b2b-card:hover::before { transform: scaleX(1); }

.mc-b2b-card-img {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    height: 100%;
}

.mc-b2b-card-img img { width: 100%; height: auto; object-fit: contain; max-height: 260px; }

.mc-b2b-card-body { padding: 1.75rem; }

.mc-b2b-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.mc-b2b-card-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.mc-b2b-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.mc-b2b-card-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #475569;
    margin-bottom: 0.5rem;
}

.mc-b2b-card-features li:last-child { margin-bottom: 0; }

.mc-b2b-card-features li i { color: #0faebd; font-size: 0.9rem; flex-shrink: 0; }

.mc-b2b-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    border-top: 2px solid #f1f5f9;
}

.mc-b2b-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0faebd;
    letter-spacing: -0.02em;
}

.mc-b2b-btn {
    padding: 0.625rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    background: linear-gradient(135deg, #0faebd 0%, #18d3e0 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(15,174,189,0.25);
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-b2b-btn:hover {
    background: linear-gradient(135deg, #0d8a99 0%, #15b8c5 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15,174,189,0.35);
}

/* Streamlined Processing */
.mc-b2b-streamlined {
    background: linear-gradient(135deg, #0faebd 0%, #0d96a4 100%);
    padding: 80px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.mc-b2b-streamlined::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.mc-b2b-streamlined-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.mc-b2b-streamlined-left { display: flex; flex-direction: column; }

.mc-b2b-streamlined-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    color: #fff;
}

.mc-b2b-streamlined-hl { color: #fff; }

.mc-b2b-streamlined-desc {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.95);
    margin-bottom: 2rem;
}

.mc-b2b-streamlined-btn {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #0faebd;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    align-self: flex-start;
}

.mc-b2b-streamlined-btn:hover {
    color: #0faebd;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.mc-b2b-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.mc-b2b-step-card {
    background: rgba(255,255,255,0.98);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.mc-b2b-step-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0faebd 0%, rgba(15,174,189,0.5) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.mc-b2b-step-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.mc-b2b-step-card:hover::before { transform: scaleX(1); }

.mc-b2b-step-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #0faebd;
    background: rgba(15,174,189,0.1);
    border-radius: 12px;
}

.mc-b2b-step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.mc-b2b-step-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

@media (max-width: 991.98px) {
    .mc-b2b-streamlined { padding: 60px 0; }
    .mc-b2b-streamlined-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .mc-b2b-steps-grid { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 767.98px) {
    .mc-b2b-card-body { padding: 1.5rem; }
    .mc-b2b-card-img { padding: 1.5rem; }
    .mc-b2b-card-footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .mc-b2b-btn { width: 100%; }
}

/* ── Direct Hire Packages Page (mc-dhp- prefix) ──────────── */
.mc-dhp-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0.7);
    color: rgba(255,255,255,0.9);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mc-dhp-tab:hover,
.mc-dhp-tab.active {
    background: #fff;
    color: #0faebd;
    border-color: #fff;
}

.mc-dhp-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.mc-dhp-card-header {
    background: linear-gradient(to right, #4fd1c5, #0bc5ea);
    color: #fff;
    padding: 1.5rem 2rem;
    text-align: center;
}

.mc-dhp-card-header h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.mc-dhp-card-body { background: #fff; padding: 2rem; }

.mc-dhp-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0d9488;
}

.mc-dhp-group-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #06b6d4;
    margin-bottom: 0.75rem;
}

.mc-dhp-info-box {
    background: #e0f7fa;
    border-left: 4px solid #0faebd;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.mc-dhp-info-box h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #0d9488;
    margin-bottom: 0.5rem;
}

.mc-dhp-info-box p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.mc-dhp-price-box {
    background: #f8fafc;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mc-dhp-discount-badge {
    position: absolute;
    top: -14px;
    right: -8px;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    border-radius: 25px;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(13,148,136,0.3);
    letter-spacing: 0.5px;
}

.mc-dhp-original-price {
    font-size: 1.1rem;
    color: #94a3b8;
    text-decoration: line-through;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.mc-dhp-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0d9488;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.mc-dhp-price-label {
    font-size: 1rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.mc-dhp-cta-btn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    margin-bottom: 1.25rem;
    transition: background 0.2s, transform 0.2s;
}

.mc-dhp-cta-btn:hover {
    background: linear-gradient(135deg, #0b7a71, #0d9488);
    color: #fff;
    transform: translateY(-2px);
}

.mc-dhp-cta-note {
    font-size: 0.875rem;
    color: #64748b;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

@media (max-width: 767.98px) {
    .mc-dhp-card-body { padding: 1.5rem; }
    .mc-dhp-price-box { height: auto; }
    .mc-dhp-card-header { padding: 1.25rem 1.5rem; }
    .mc-dhp-card-header h3 { font-size: 1.2rem; }
}

.mc-dhp-why-box {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.mc-dhp-why-box h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 0.75rem;
}

.mc-dhp-why-box .mc-svc-list li i { color: #22c55e; }

/* ── Hero Banner small modifier ──────────────────────────── */
.mc-hero-banner--sm { min-height: 300px !important; }

@media (max-width: 992px) { .mc-hero-banner--sm { min-height: 240px !important; } }
@media (max-width: 768px) { .mc-hero-banner--sm { min-height: 200px !important; } }

/* ── View Job Page (vj- prefix) ─────────────────────────── */
.vj-panel {
    border-left: 2px solid #0a94c2;
    border-right: 2px solid #0a94c2;
}

.vj-panel-header {
    color: #0a94c2;
    background: #fff;
    border-top: 2px solid #0a94c2;
    border-bottom: 2px solid #0a94c2;
    font-weight: 700;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.vj-panel-body {
    background: #fff;
    padding: 20px 24px;
}

.vj-panel-last { border-bottom: 2px solid #0a94c2; }

.vj-panel-top-border {
    border-top: 2px solid #0a94c2;
    background: #fff;
    padding: 20px 24px;
}

.vj-info-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #333;
    border-radius: 6px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
}

.vj-info-box i { color: #0faebd; flex-shrink: 0; width: 16px; text-align: center; }

.vj-company-img {
    width: 130px;
    height: 130px;
    min-width: 130px;
    border-radius: 50%;
    border: 3px solid #0a94c2;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vj-company-img img {
    width: 108px;
    height: 108px;
    object-fit: contain;
    display: block;
}

.vj-skill-badge {
    background: #e7f1ff;
    color: #0faebd;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

.vj-child-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 16px 18px;
    height: 100%;
}

.vj-child-header {
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #0faebd;
}

.vj-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #eee;
    font-size: 13px;
    color: #444;
}

.vj-detail-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.vj-detail-label { font-weight: 600; color: #6c757d; white-space: nowrap; }

.vj-special-need-card {
    background: #fff3cd;
    border-radius: 10px;
    padding: 16px 18px;
    border-left: 4px solid #ffc107;
    height: 100%;
}

.vj-pet-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f8ff;
    color: #0faebd;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
}

.vj-suggested-item {
    display: block;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    color: inherit;
}

.vj-suggested-item:hover {
    background: linear-gradient(135deg, #f0f9ff, #e0f7fa);
    border-color: #0a94c2;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(10, 148, 194, 0.15);
    color: inherit;
}

.vj-suggested-img {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #0a94c2;
    flex-shrink: 0;
}

.vj-suggested-sidebar {
    border: 2px solid #0a94c2;
    border-radius: 0;
    overflow: hidden;
}

.vj-suggested-sidebar-header {
    background: linear-gradient(135deg, #0a94c2, #0d8f9d);
    color: #fff;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
}

/* extracted inline styles */
.vj-content-wrapper { margin-top: -70px; position: relative; z-index: 2; padding-bottom: 60px; }
.vj-function-badge { font-size: 0.82rem; }
.vj-job-title { color: #1e3a5f; }
.vj-job-desc-box { border: 1px solid #e9ecef; border-left: 4px solid #0faebd; border-radius: 6px; padding: 14px 18px; font-size: 15px; line-height: 1.7; color: #333; margin-bottom: 18px; }
.vj-section-label { color: #555; letter-spacing: 0.5px; }
.vj-panel-text { margin: 0; font-size: 15px; line-height: 1.7; color: #444; }
.vj-pet-details { font-size: 14px; color: #555; line-height: 1.6; margin-top: 6px; }
.vj-employer-note-list { margin: 10px 0 0; padding-left: 20px; font-size: 15px; color: #444; line-height: 1.7; }
.vj-special-need-header { color: #856404; border-bottom: 2px solid #ffeaa7; padding-bottom: 8px; margin-bottom: 10px; }
.vj-icon-gender { color: #e91e8c; }
.vj-suggested-body { padding: 12px; background: #fff; }
.vj-suggested-title { color: #1e3a5f; font-size: 14px; }
.vj-suggested-location { font-size: 12px; color: #495057; }
.vj-suggested-fn { font-size: 12px; color: #6c757d; }
.vj-suggested-icon { color: #0a94c2; font-size: 11px; }
.vj-suggested-chevron { color: #0a94c2; font-size: 12px; flex-shrink: 0; }

@media (max-width: 991px) {
    .vj-company-img { width: 100px; height: 100px; min-width: 100px; }
    .vj-company-img img { width: 82px; height: 82px; }
}

@media (max-width: 767px) {
    .vj-panel-body { padding: 14px 16px; }
    .vj-panel-top-border { padding: 14px 16px; }
    .vj-panel-header { padding: 9px 16px; font-size: 0.9rem; }
    .vj-suggested-img { width: 55px; height: 55px; }
    .vj-child-card, .vj-special-need-card { padding: 12px 14px; }
}

/* ── Candidate Search Page (cs- prefix) ─────────────────── */

/* Hero text overlay */
.cs-hero-title {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 700;
    color: #fff;
    border-bottom: 3px solid #ffa500;
    display: inline-block;
    padding-bottom: 6px;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
    line-height: 1.3;
}

.cs-hero-desc {
    color: rgba(255,255,255,0.95);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 8px;
    padding: 14px 18px;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(6px);
    line-height: 1.7;
    margin: 0;
    font-size: 0.92rem;
    max-width: 680px;
}

/* Page wrapper */
.cs-page-wrapper { padding: 36px 0 60px; }

/* Mobile filter toggle button */
.cs-filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--mc-primary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 16px;
    position: relative;
    transition: background 0.2s;
}

.cs-filter-toggle-btn:hover { background: var(--mc-primary-dark); }

.cs-filter-toggle-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255,255,255,0.8);
    transition: transform 0.3s ease;
}

.cs-filter-toggle-btn.active::after { transform: translateY(-50%) rotate(180deg); }

@media (max-width: 991px) {
    #filtersection { display: none; }
    #filtersection.show { display: block; animation: csSlideDown 0.3s ease; }
}

@keyframes csSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Filter panel */
.cs-filter-panel {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: sticky;
    top: 80px;
}

.cs-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9ecef;
}

.cs-filter-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
}

.cs-filter-title i { color: var(--mc-primary); }

.cs-reset-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s;
}

.cs-reset-btn:hover { color: var(--mc-primary); }
.cs-reset-btn i { color: var(--mc-primary); }

/* Search input inside filter */
.cs-search-wrap { position: relative; margin-bottom: 16px; }

.cs-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 0.85rem;
    pointer-events: none;
}

.cs-search-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.88rem;
    background: #f8f9fa;
    transition: border-color 0.2s, background 0.2s;
}

.cs-search-input:focus {
    outline: none;
    border-color: var(--mc-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15,174,189,0.12);
}

/* Filter groups accordion */
.cs-filter-group { border-bottom: 1px solid #e9ecef; }
.cs-filter-group:last-of-type { border-bottom: none; }

.cs-filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    user-select: none;
}

.cs-filter-group-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #212529;
}

.cs-toggle-icon {
    color: #6c757d;
    font-size: 0.78rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.cs-filter-group-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
}

.cs-filter-group-content.show {
    max-height: 600px;
    padding-bottom: 10px;
}

.cs-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.cs-filter-option input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--mc-primary);
    flex-shrink: 0;
}

.cs-filter-option label {
    font-size: 0.88rem;
    color: #495057;
    cursor: pointer;
    margin: 0;
    flex: 1;
    transition: color 0.15s;
}

.cs-filter-option:hover label { color: #212529; }

.cs-apply-btn {
    width: 100%;
    padding: 12px 20px;
    background: var(--mc-primary);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 16px;
    transition: background 0.2s, transform 0.15s;
}

.cs-apply-btn:hover  { background: var(--mc-primary-dark); transform: translateY(-1px); }
.cs-apply-btn:active { transform: translateY(0); }

/* View toggle (Grid / List) */
.cs-view-toggle .nav-link {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    background: #fff;
    transition: all 0.2s;
}

.cs-view-toggle .nav-link.active,
.cs-view-toggle .nav-link:hover {
    background: var(--mc-primary);
    color: #fff !important;
    border-color: var(--mc-primary);
}

/* ── Grid view candidate card ───────────────────────────── */
.cs-cand-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
    display: flex;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
    margin-bottom: 20px;
}

.cs-cand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.cs-cand-photo {
    width: 150px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: #f8f9fa;
    border-right: 1px solid #f0f0f0;
}

.cs-cand-photo img {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--mc-primary);
    display: block;
}

/* Arrow-badge "Active" label */
.cs-active-label {
    display: inline-block;
    background: var(--mc-primary);
    color: #fff;
    font-weight: 700;
    padding: 2px 18px;
    border-radius: 4px;
    font-size: 11px;
    margin-top: 10px;
    position: relative;
    letter-spacing: 0.4px;
}

.cs-active-label::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -11px;
    transform: translateY(-50%);
    border-left: 11px solid var(--mc-primary);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

.cs-active-label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -11px;
    transform: translateY(-50%);
    border-right: 11px solid var(--mc-primary);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

.cs-cand-body {
    flex: 1;
    padding: 18px 20px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cs-cand-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mc-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.cs-cand-name:hover { color: var(--mc-primary-dark); }

.cs-cand-meta {
    font-size: 0.88rem;
    color: #6c757d;
    font-weight: 500;
    margin-top: 3px;
}

.cs-cand-desc {
    font-size: 0.86rem;
    color: #555;
    line-height: 1.65;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.cs-cand-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.cs-cand-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    color: #495057;
}

.cs-cand-info-item i { color: #0d6efd; flex-shrink: 0; }
.cs-cand-info-label { font-weight: 600; }

/* ── List view candidate card ───────────────────────────── */
.cs-list-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--mc-primary);
    padding: 20px;
    margin-bottom: 18px;
    transition: transform 0.25s, box-shadow 0.25s;
}

.cs-list-card:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.cs-list-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--mc-primary);
    flex-shrink: 0;
}

.cs-list-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mc-primary);
    text-decoration: none;
}

.cs-list-name:hover { color: var(--mc-primary-dark); }

.cs-list-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.85rem;
}

.cs-list-info:last-child { border-bottom: none; }

.cs-list-info strong {
    min-width: 145px;
    color: #495057;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cs-list-info span { color: #212529; }

/* Utility: pink icon (gender) */
.text-pink { color: #e83e8c !important; }

/* ── Pagination ──────────────────────────────────────────── */
.cs-pagination {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 36px 0 0;
    justify-content: center;
    flex-wrap: wrap;
}

.cs-pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    color: #495057;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    background: #fff;
    transition: all 0.2s;
}

.cs-pagination .page-link:hover {
    background: var(--mc-primary-light);
    border-color: var(--mc-primary);
    color: var(--mc-primary);
}

.cs-pagination li.active .page-link {
    background: var(--mc-primary);
    border-color: var(--mc-primary);
    color: #fff;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .cs-cand-photo { width: 120px; min-width: 120px; }
    .cs-cand-photo img { width: 88px; height: 88px; }
    .cs-cand-body { padding: 14px; }
    .cs-page-wrapper { padding: 20px 0 40px; }
    .cs-filter-panel { position: static; }
    .cs-list-info strong { min-width: 120px; font-size: 0.82rem; }
}

@media (max-width: 576px) {
    .cs-cand-card { flex-direction: column; }
    .cs-cand-photo {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        padding: 14px 16px;
        gap: 14px;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        justify-content: flex-start;
    }
    .cs-active-label { margin-top: 0; }
}

/* ── Candidate View Page (cv- prefix) ───────────────────── */
.cv-page-wrapper { padding: 36px 0 60px; }

/* Shared card shell */
.cv-section-card {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    border-left: 2px solid #0a94c2;
    border-right: 2px solid #0a94c2;
    border-radius: 0;
}

.cv-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 24px;
    border-top: 2px solid #0a94c2;
    border-bottom: 2px solid #0a94c2;
}

.cv-section-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #e0f7fa;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cv-section-icon i { color: #0a94c2; font-size: 14px; }

.cv-section-title {
    font-size: 16px; font-weight: 700;
    color: #0a94c2;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0;
}

.cv-section-body { padding: 24px; }

/* Profile card */
.cv-profile-card {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
    border: 2px solid #0a94c2;
    border-radius: 0;
    padding: 32px;
    position: relative;
}

/* Contact button */
.cv-contact-btn {
    position: absolute; top: 24px; right: 24px;
    background: linear-gradient(135deg,#0faebd,#0d8f9d);
    color: #fff; border: none; border-radius: 12px;
    padding: 10px 22px; font-size: 15px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15,174,189,.3);
    transition: all .25s;
    z-index: 2;
}
.cv-contact-btn:hover {
    background: linear-gradient(135deg,#0d8f9d,#0b7a87);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15,174,189,.4);
}

/* Profile photo */
.cv-profile-photo {
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 2px solid #0a94c2;
    overflow: hidden; flex-shrink: 0;
    position: relative;
}
.cv-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cv-badge-check {
    position: absolute; bottom: 8px; right: 8px;
    width: 32px; height: 32px;
    background: #22c55e; border-radius: 50%;
    border: 3px solid #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(34,197,94,.3);
}
.cv-badge-check i { color: #fff; font-size: 13px; }

/* Name / occupation / tags */
.cv-profile-name  { font-size: 32px; font-weight: 700; color: #1e3a5f; margin: 0; line-height: 1.2; }
.cv-profile-age   { font-size: 18px; font-weight: 400; color: #6c757d; margin-left: 4px; }
.cv-profile-occupation { display: flex; align-items: center; gap: 10px; color: #495057; font-size: 16px; margin-top: 6px; }
.cv-profile-occupation i { color: #0a94c2; font-size: 18px; }

.cv-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 500;
    background: #fff; border: 1.5px solid #0a94c2;
    color: #374151; white-space: nowrap;
    transition: transform .2s;
}
.cv-tag i { font-size: 13px; color: #0a94c2; }
.cv-tag:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(10,148,194,.18); }

/* Personal detail rows */
.cv-detail-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.cv-detail-item:last-child { margin-bottom: 0; }
.cv-detail-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: #e0f7fa;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cv-detail-icon i { color: #0a94c2; font-size: 20px; }
.cv-detail-label { font-size: 11px; font-weight: 500; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; }
.cv-detail-value { font-size: 16px; font-weight: 700; color: #000; margin-top: 2px; }

/* Skill rows */
.cv-skill-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cv-skill-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: #dbeafe;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cv-skill-icon img { width: 24px; height: 24px; object-fit: contain; }
.cv-skill-title { font-size: 14px; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }

.cv-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cv-badge { padding: 7px 16px; font-size: 14px; font-weight: 500; border-radius: 20px; transition: transform .2s; }
.cv-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,.12); }
.cv-badge--lang   { background: #ecf7ff; color: #2881b7; }
.cv-badge--main   { background: #d7fbe9; color: #3d9e7e; }
.cv-badge--cook   { background: #fff5ce; color: #e0aa76; }
.cv-badge--other  { background: #ecf7ff; color: #2d9474; }
.cv-badge--person { background: #c084fc; color: #fff; }

/* Work experience */
.cv-work-item  { margin-bottom: 32px; }
.cv-work-item:last-child { margin-bottom: 0; }
.cv-work-header { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; margin-bottom: 10px; }
.cv-work-bullet { width: 12px; height: 12px; border-radius: 50%; background: #0a94c2; flex-shrink: 0; }
.cv-work-title  { font-size: 18px; font-weight: 700; color: #374151; white-space: nowrap; }
.cv-work-duration { background: #ecf7ff; color: #0a94c2; padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.cv-work-location { font-size: 14px; color: #9ca3af; margin: 0 0 12px 24px; display: flex; align-items: center; gap: 6px; }
.cv-work-location i { color: #9ca3af; }
.cv-work-detail { margin-left: 24px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.cv-work-detail:last-child { margin-bottom: 0; }
.cv-work-detail-label { font-size: 12px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; flex-shrink: 0; }
.cv-work-detail-value { font-size: 14px; color: #000; }

/* Education */
.cv-edu-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border: 1px solid #e5e7eb; margin-bottom: 16px; }
.cv-edu-item:last-child { margin-bottom: 0; }
.cv-edu-icon { width: 48px; height: 48px; border-radius: 50%; background: #0a94c2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(10,148,194,.2); }
.cv-edu-icon i { color: #fff; font-size: 20px; }
.cv-edu-degree { font-size: 17px; font-weight: 700; color: #374151; }
.cv-edu-sub    { font-size: 14px; color: #6b7280; margin-top: 4px; }

/* Certificates */
.cv-cert-item { margin-bottom: 14px; padding: 12px 16px; background: #f8f9fa; border-left: 3px solid #0a94c2; }
.cv-cert-item:last-child { margin-bottom: 0; }
.cv-cert-name { font-size: 15px; font-weight: 700; color: #374151; }
.cv-cert-meta { font-size: 13px; color: #6b7280; margin-top: 4px; }

/* Suggested sidebar */
.cv-suggested-header { background: linear-gradient(135deg,#0a94c2,#0d8f9d); color: #fff; padding: 12px 20px; border-bottom: 2px solid #0a94c2; }
.cv-suggested-header h6 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.cv-suggested-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px; background: #f8f9fa;
    border-radius: 8px; border: 1px solid #e9ecef;
    margin-bottom: 16px; text-decoration: none; color: inherit;
    transition: all .25s;
}
.cv-suggested-item:last-of-type { margin-bottom: 0; }
.cv-suggested-item:hover { background: #eef7fb; border-color: #0a94c2; transform: translateX(2px); color: inherit; }
.cv-suggested-img img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 2px solid #0a94c2; display: block; }
.cv-suggested-name { font-size: 15px; font-weight: 700; color: #1e3a5f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-suggested-name span { color: #6c757d; font-weight: 400; font-size: 13px; }
.cv-suggested-sub { font-size: 13px; color: #495057; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Book meeting form – hidden until Contact button clicked */
.cv-contact-form { display: none; }

/* Responsive */
@media (max-width: 768px) {
    .cv-profile-card { padding: 20px; }
    .cv-contact-btn  { position: static; width: 100%; justify-content: center; margin-bottom: 16px; }
    .cv-profile-name { font-size: 26px; text-align: center; }
    .cv-profile-age  { font-size: 16px; }
    .cv-profile-occupation { justify-content: center; }
    .cv-profile-photo { margin: 0 auto; }
    .cv-section-body { padding: 16px; }
    .cv-detail-icon  { width: 40px; height: 40px; }
    .cv-detail-icon i { font-size: 16px; }
    .cv-detail-value { font-size: 14px; }
    .cv-skill-icon   { width: 40px; height: 40px; }
    .cv-edu-icon     { width: 40px; height: 40px; }
    .cv-edu-icon i   { font-size: 17px; }
    .cv-edu-degree   { font-size: 15px; }
    .cv-work-title   { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════
   Edit Profile Form  (ep-*)
   Isolated prefix – do NOT reuse outside this section.
   JS-referenced class names (skill-option, form-step, step,
   photo-upload-box, etc.) are scoped under .ep-form-wrap.
   ══════════════════════════════════════════════════════════ */

/* Outer card wrapper */
.ep-form-wrap {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    padding: 24px;
}

/* Welcome banner */
.ep-welcome {
    text-align: center;
    padding: 24px 20px;
    background: linear-gradient(135deg,#f8f9fa,#e9ecef);
    border: 2px dashed var(--mc-primary);
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.ep-welcome-icon {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-dark));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    color: #fff; font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(15,174,189,.3);
}

/* Step progress */
.ep-progress { margin-bottom: 24px; }

.ep-steps-bar {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 8px;
}

.ep-steps-bar::after {
    content: ''; position: absolute;
    width: 100%; height: 2px;
    background: #ddd; top: 50%; left: 0; z-index: 1;
}

/* .step is referenced by JS – scoped to avoid leaking */
.ep-form-wrap .step {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff; border: 2px solid #ddd;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    font-size: 0.85rem; font-weight: 600;
    transition: all 0.3s; cursor: default;
}

.ep-form-wrap .step.active,
.ep-form-wrap .step.completed { background: var(--mc-primary); color: #fff; border-color: var(--mc-primary); }

.ep-step-labels { display: flex; justify-content: space-between; }
.ep-step-label  { font-size: 0.68rem; text-align: center; color: #666; flex: 1; padding: 0 2px; line-height: 1.3; }

/* Section header (gradient banner) */
.ep-section-header {
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-dark));
    color: #fff;
    padding: 12px 18px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 1rem;
    display: flex; align-items: center; gap: 10px;
}

/* Navigation buttons */
.ep-nav-btns {
    display: flex; justify-content: space-between;
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

/* Photo upload – class name kept for JS compat, scoped here */
.ep-form-wrap .photo-upload-box {
    border: 2px dashed #bbb; border-radius: 8px;
    padding: 30px 0 20px; text-align: center;
    cursor: pointer; min-height: 120px;
    position: relative; margin-bottom: 10px;
    transition: border-color 0.2s;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

.ep-form-wrap .photo-upload-box:hover { border-color: var(--mc-primary); }

.ep-form-wrap .photo-upload-box i.fa-camera { font-size: 2.2rem; color: #888; margin-bottom: 8px; display: block; }

.ep-form-wrap .photo-upload-box > div { color: #888; font-size: 0.9rem; }

.ep-form-wrap .photo-upload-box.has-image {
    background-size: cover; background-position: center; background-repeat: no-repeat;
}

.ep-form-wrap .photo-upload-box.has-image i,
.ep-form-wrap .photo-upload-box.has-image > div { display: none; }

.ep-form-wrap .photo-upload-box.has-image::after {
    content: 'Click to change photo';
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.7); color: #fff;
    padding: 4px 10px; border-radius: 4px; font-size: 12px;
}

/* Skills options – scoped */
.ep-form-wrap .skills-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px; padding: 12px 0;
}

.ep-form-wrap .skill-option {
    display: block; position: relative;
    background: #fff; border: 2px solid #e0e0e0;
    border-radius: 10px; padding: 12px;
    font-size: 0.88rem; color: #333;
    cursor: pointer; transition: all 0.25s;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

.ep-form-wrap .skill-option input[type="checkbox"] { display: none; }

.ep-form-wrap .skill-option:hover { border-color: var(--mc-primary); box-shadow: 0 3px 8px rgba(15,174,189,.14); }

.ep-form-wrap .skill-option.selected { border-color: var(--mc-primary); background: var(--mc-primary-light); }

.ep-form-wrap .skill-option input:checked + span::before { content: '✔ '; color: var(--mc-primary); font-weight: 700; }

/* Skills label bar */
.ep-skills-bar {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-dark));
    color: #fff; font-weight: 600;
    padding: 10px 16px; border-radius: 5px;
    font-size: 1rem; margin-bottom: 0;
}

/* Validation warning blocks (shown/hidden by JS) */
.ep-form-wrap .personality-validation-message,
.ep-form-wrap .mainskills-validation-message,
.ep-form-wrap .cookingskills-validation-message,
.ep-form-wrap .otherskills-validation-message {
    display: none; margin-top: 10px;
    padding: 8px 12px; border-radius: 4px;
    background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; font-size: 0.83rem;
}

/* DOB dropdowns */
.ep-dob select {
    height: 44px !important; border: 2px solid #ddd !important; border-radius: 6px !important;
}

.ep-dob select:focus { border-color: var(--mc-primary) !important; box-shadow: 0 0 0 3px rgba(15,174,189,.2) !important; }

/* Kids section */
.ep-form-wrap .kids-list { margin-bottom: 16px; }

.ep-form-wrap .kid-entry {
    background: #f8f9fa; border: 1px solid #dee2e6;
    border-radius: 8px; padding: 14px; margin-bottom: 12px; position: relative;
}

.ep-form-wrap .kid-entry:hover { background: #f1f3f5; }

/* Phone / salary input groups */
.ep-form-wrap .phone-input-group,
.ep-form-wrap .whatsapp-input-group,
.ep-form-wrap .salary-input-group { display: flex; align-items: stretch; position: relative; }

/* Duty rows (dynamically generated) */
.ep-form-wrap .duty-row { border: 1px solid #e0e0e0; padding: 14px; margin-bottom: 12px; border-radius: 8px; }

/* Input group + floating icon */
.ep-form-wrap .input-group { position: relative; width: 100%; }
.ep-form-wrap .input-group .form-control:focus { z-index: 0 !important; }
.ep-form-wrap .input-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--mc-primary); z-index: 3; font-size: 1rem; pointer-events: none;
}
.ep-form-wrap .form-control {
    border: 2px solid #ddd; border-radius: 6px; height: 44px; padding-left: 40px;
}
.ep-form-wrap textarea.form-control { height: auto; min-height: 120px; padding-top: 12px; }
.ep-form-wrap .form-control:focus { border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(15,174,189,.2); }

/* Phone / WhatsApp / salary groups – hide generic icon, use select prefix */
.ep-form-wrap .phone-input-group .input-icon,
.ep-form-wrap .whatsapp-input-group .input-icon,
.ep-form-wrap .salary-input-group .input-icon { display: none !important; }

.ep-form-wrap .phone-input-group #MobileCountryCode,
.ep-form-wrap .whatsapp-input-group #WhatsAppCountryCode {
    width: 120px !important; min-width: 120px; flex-shrink: 0;
    border-right: none !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
    padding-left: 6px !important; font-size: 11px; background: #f8f9fa; height: 44px;
}
.ep-form-wrap .salary-input-group #SalaryCurrencyCode,
.ep-form-wrap .salary-input-group .salary-currency-code {
    width: 80px !important; min-width: 80px; flex-shrink: 0;
    border-right: none !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
    padding-left: 6px !important; font-size: 11px; background: #f8f9fa; height: 44px;
}
.ep-form-wrap .phone-input-group .mobile-number-input,
.ep-form-wrap .whatsapp-input-group .whatsapp-number-input,
.ep-form-wrap .salary-input-group .salary-amount-input {
    padding-left: 12px !important; border-left: none !important;
    border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; flex: 1;
}

/* Validation highlight (toggled by JS) */
.ep-form-wrap .has-validation-error {
    border: 2px solid #dc3545 !important; border-radius: 8px;
    padding: 12px; background: rgba(220,53,69,.04);
}
.ep-form-wrap .has-validation-warning {
    border: 2px solid #ffc107 !important; border-radius: 8px;
    padding: 12px; background: rgba(255,193,7,.04);
}

/* Help text */
.ep-form-wrap .help-block { color: #6c757d; font-size: 0.82rem; margin-top: 6px; }

/* Responsive */
@media (max-width: 767px) {
    .ep-form-wrap      { padding: 16px; }
    .ep-nav-btns       { flex-direction: column; gap: 10px; }
    .ep-nav-btns .btn  { width: 100%; justify-content: center; }
    .ep-step-label     { font-size: 0.6rem; }
}

/* ══════════════════════════════════════════════════════════
   My Account  (ma-*)
   Isolated prefix – do NOT reuse outside this section.
   ══════════════════════════════════════════════════════════ */

.ma-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    overflow: hidden;
    margin-bottom: 24px;
}

.ma-section:last-child { margin-bottom: 0; }

.ma-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.ma-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.ma-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mc-dark);
    margin: 0;
}

.ma-section-body { padding: 24px; }

.ma-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.ma-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 8px 14px 0;
    border-bottom: 1px solid #f5f5f5;
}

.ma-info-item:nth-last-child(-n+2) { border-bottom: none; }

.ma-info-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mc-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-primary);
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.ma-info-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.ma-info-value {
    font-size: 0.93rem;
    color: var(--mc-dark);
    font-weight: 500;
    word-break: break-word;
}

@media (max-width: 767px) {
    .ma-section-header           { padding: 16px; }
    .ma-section-body             { padding: 16px; }
    .ma-info-grid                { grid-template-columns: 1fr; }
    .ma-info-item:nth-last-child(-n+2) { border-bottom: 1px solid #f5f5f5; }
    .ma-info-item:last-child     { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════
   Candidate Dashboard  (cd-*)
   Isolated prefix – do NOT reuse outside this section.
   ══════════════════════════════════════════════════════════ */

/* Sidebar */
.cd-sidebar {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding: 8px 0;
    position: sticky;
    top: 80px;
}

.cd-sidebar ul { list-style: none; margin: 0; padding: 0; }

.cd-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #555;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 8px;
    margin: 2px 8px;
    transition: background 0.18s, color 0.18s;
    text-decoration: none;
}

.cd-sidebar .nav-link:hover,
.cd-sidebar .nav-link.active {
    background: var(--mc-primary-light);
    color: var(--mc-primary);
}

.cd-sidebar .nav-link.active svg path[fill="#595959"],
.cd-sidebar .nav-link:hover  svg path[fill="#595959"] { fill: var(--mc-primary); }

/* Profile card */
.cd-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    overflow: hidden;
}

.cd-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.cd-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--mc-primary);
    flex-shrink: 0;
}

.cd-avatar-placeholder {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--mc-primary-light);
    border: 3px solid var(--mc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-primary);
    font-size: 2rem;
    flex-shrink: 0;
}

.cd-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mc-dark);
    margin: 0 0 4px;
}

.cd-profile-title {
    font-size: 0.95rem;
    color: var(--mc-primary);
    font-weight: 500;
    margin: 0 0 6px;
}

.cd-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.88rem;
}

.cd-location i { color: var(--mc-primary); }

/* Card body */
.cd-card-body { padding: 24px; }

.cd-detail-row {
    display: flex;
    gap: 0 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid #f5f5f5;
}

.cd-detail-row:last-child { border-bottom: none; }

.cd-detail-col { flex: 1; min-width: 220px; }
.cd-detail-col.full { flex: 1 1 100%; }

.cd-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
}

.cd-detail-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mc-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-primary);
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.cd-detail-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.cd-detail-value {
    font-size: 0.93rem;
    color: var(--mc-dark);
    font-weight: 500;
}

/* Card footer */
.cd-card-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 767px) {
    .cd-card-header  { flex-direction: column; text-align: center; }
    .cd-location     { justify-content: center; }
    .cd-detail-col   { min-width: 100%; }
    .cd-card-body    { padding: 16px; }
    .cd-card-footer  { padding: 12px 16px; }
    .cd-name         { font-size: 1.2rem; }
    .cd-card-footer  { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   Applications  (aj-*)
   Isolated prefix – do NOT reuse outside this section.
   ══════════════════════════════════════════════════════════ */

.aj-wrap { background:#fff; border:1px solid #e9ecef; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; }

.aj-wrap-header {
    display:flex; align-items:center; gap:14px;
    padding:20px 24px; border-bottom:1px solid #f0f0f0;
}

.aj-wrap-icon {
    width:40px; height:40px; border-radius:50%;
    background:var(--mc-primary); display:flex;
    align-items:center; justify-content:center;
    color:#fff; font-size:1rem; flex-shrink:0;
}

.aj-wrap-title { font-size:1.05rem; font-weight:600; color:var(--mc-dark); margin:0; }

.aj-wrap-body { padding:20px 24px; }

/* List of cards */
.aj-list { display:flex; flex-direction:column; gap:12px; }

.aj-card {
    background:#fff; border:1px solid #e9ecef; border-radius:10px;
    padding:18px 20px; box-shadow:0 2px 6px rgba(0,0,0,.04);
    transition:box-shadow .2s, transform .2s;
}

.aj-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.1); transform:translateY(-2px); }

.aj-card-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:8px; margin-bottom:14px;
}

.aj-employer { font-size:1rem; font-weight:600; color:var(--mc-dark); margin:0; }

.aj-badge {
    background:var(--mc-primary); color:#fff;
    padding:3px 12px; border-radius:20px; font-size:0.78rem; font-weight:500;
    white-space:nowrap;
}

.aj-badge-muted { background:#adb5bd; }

/* Detail rows */
.aj-details { display:flex; flex-direction:column; gap:10px; }

.aj-detail-item { display:flex; align-items:flex-start; gap:12px; }

.aj-detail-icon {
    width:30px; height:30px; border-radius:50%;
    background:var(--mc-primary-light); display:flex;
    align-items:center; justify-content:center;
    color:var(--mc-primary); font-size:0.78rem; flex-shrink:0; margin-top:1px;
}

.aj-detail-label { font-size:0.72rem; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }

.aj-detail-value { font-size:0.9rem; color:var(--mc-dark); }

.aj-detail-value a { color:var(--mc-primary); text-decoration:none; }
.aj-detail-value a:hover { text-decoration:underline; }

/* Empty state */
.aj-empty {
    text-align:center; padding:48px 24px;
    background:linear-gradient(135deg,#f8f9fa,#e9ecef);
    border:2px dashed var(--mc-primary); border-radius:12px;
}

.aj-empty-icon {
    width:64px; height:64px; border-radius:50%;
    background:var(--mc-primary-light); display:flex;
    align-items:center; justify-content:center;
    color:var(--mc-primary); font-size:1.6rem;
    margin:0 auto 16px;
}

.aj-empty-title { font-size:1.2rem; font-weight:600; color:var(--mc-dark); margin-bottom:8px; }

.aj-empty-text { color:#6c757d; font-size:0.95rem; margin-bottom:16px; }

.aj-empty-hints { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }

.aj-empty-hint { display:flex; align-items:center; justify-content:center; gap:8px; color:#555; font-size:0.9rem; }

.aj-empty-hint i { color:var(--mc-primary); }

/* Responsive */
@media (max-width: 767px) {
    .aj-wrap-body { padding:14px; }
    .aj-card { padding:14px; }
    .aj-card-header { flex-direction:column; }
}

/* ══════════════════════════════════════════════════════════
   Meetings  (mt-*)
   Isolated prefix – do NOT reuse outside this section.
   ══════════════════════════════════════════════════════════ */

.mt-wrap { background:#fff; border:1px solid #e9ecef; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; }

.mt-wrap-header {
    display:flex; align-items:center; gap:14px;
    padding:20px 24px; border-bottom:1px solid #f0f0f0;
}

.mt-wrap-icon {
    width:40px; height:40px; border-radius:50%;
    background:var(--mc-primary); display:flex;
    align-items:center; justify-content:center;
    color:#fff; font-size:1rem; flex-shrink:0;
}

.mt-wrap-title { font-size:1.05rem; font-weight:600; color:var(--mc-dark); margin:0; }

.mt-wrap-body { padding:20px 24px; }

/* Card list */
.mt-list { display:flex; flex-direction:column; gap:12px; }

.mt-card {
    background:#fff; border:1px solid #e9ecef; border-radius:10px;
    padding:18px 20px; box-shadow:0 2px 6px rgba(0,0,0,.04);
    transition:box-shadow .2s, transform .2s;
}

.mt-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.1); transform:translateY(-2px); }

.mt-card-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:8px; margin-bottom:14px;
}

.mt-employer { font-size:1rem; font-weight:600; color:var(--mc-dark); margin:0; }

.mt-badge {
    background:var(--mc-primary); color:#fff;
    padding:3px 12px; border-radius:20px; font-size:0.78rem; font-weight:500;
    white-space:nowrap;
}

/* Detail rows */
.mt-details { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }

.mt-detail-item { display:flex; align-items:flex-start; gap:12px; }

.mt-detail-icon {
    width:30px; height:30px; border-radius:50%;
    background:var(--mc-primary-light); display:flex;
    align-items:center; justify-content:center;
    color:var(--mc-primary); font-size:0.78rem; flex-shrink:0; margin-top:1px;
}

.mt-detail-label { font-size:0.72rem; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }

.mt-detail-value { font-size:0.9rem; color:var(--mc-dark); font-weight:500; }

/* Empty state */
.mt-empty {
    text-align:center; padding:48px 24px;
    background:linear-gradient(135deg,#f8f9fa,#e9ecef);
    border:2px dashed var(--mc-primary); border-radius:12px;
}

.mt-empty-icon {
    width:64px; height:64px; border-radius:50%;
    background:var(--mc-primary-light); display:flex;
    align-items:center; justify-content:center;
    color:var(--mc-primary); font-size:1.6rem;
    margin:0 auto 16px;
}

.mt-empty-title { font-size:1.2rem; font-weight:600; color:var(--mc-dark); margin-bottom:8px; }

.mt-empty-text { color:#6c757d; font-size:0.95rem; margin-bottom:16px; }

.mt-empty-hints { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }

.mt-empty-hint { display:flex; align-items:center; justify-content:center; gap:8px; color:#555; font-size:0.9rem; }

.mt-empty-hint i { color:var(--mc-primary); }

/* Responsive */
@media (max-width: 767px) {
    .mt-wrap-body { padding:14px; }
    .mt-card { padding:14px; }
    .mt-card-header { flex-direction:column; }
}

/* ── Inbox (ib-*) ─────────────────────────────────────────────── */
.ib-wrap { background:#fff; border:1px solid #e9ecef; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; }

.ib-wrap-header { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid #f0f0f0; background:linear-gradient(135deg,#f8fffe,#f0fafb); }

.ib-wrap-icon {
    width:40px; height:40px; border-radius:50%;
    background:var(--mc-primary); display:flex;
    align-items:center; justify-content:center;
    color:#fff; font-size:1rem; flex-shrink:0;
}

.ib-wrap-title { margin:0; font-size:1.1rem; font-weight:700; color:var(--mc-dark); }

.ib-wrap-body { padding:24px; }

.ib-list { display:flex; flex-direction:column; gap:12px; }

.ib-card {
    background:#fff; border:1px solid #e9ecef; border-radius:10px;
    padding:18px 20px; box-shadow:0 2px 6px rgba(0,0,0,.04);
    transition:box-shadow .2s, transform .2s; cursor:pointer;
}

.ib-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.1); transform:translateY(-2px); border-color:var(--mc-primary); }

.ib-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }

.ib-sender-info { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }

.ib-avatar {
    width:46px; height:46px; border-radius:50%;
    background:var(--mc-primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; flex-shrink:0;
}

.ib-avatar-admin { background:#1976d2; }

.ib-sender-details { min-width:0; }

.ib-sender-name { margin:0 0 2px; font-size:1rem; font-weight:600; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ib-sender-email { margin:0; font-size:0.85rem; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ib-meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }

.ib-time { font-size:0.8rem; color:#999; white-space:nowrap; }

.ib-unread {
    background:var(--mc-primary); color:#fff; border-radius:50%;
    width:22px; height:22px; display:flex;
    align-items:center; justify-content:center;
    font-size:0.72rem; font-weight:700;
}

.ib-preview { color:#666; font-size:0.88rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Empty state */
.ib-empty {
    text-align:center; padding:48px 24px;
    background:linear-gradient(135deg,#f8f9fa,#e9ecef);
    border:2px dashed var(--mc-primary); border-radius:12px;
}

.ib-empty-icon {
    width:64px; height:64px; border-radius:50%;
    background:var(--mc-primary-light); display:flex;
    align-items:center; justify-content:center;
    margin:0 auto 16px;
}

.ib-empty-icon i { font-size:1.6rem; color:var(--mc-primary); }

.ib-empty-title { font-size:1.1rem; font-weight:700; color:#374151; margin-bottom:8px; }

.ib-empty-text { color:#6b7280; font-size:0.9rem; max-width:380px; margin:0 auto; }

/* Responsive */
@media (max-width: 575px) {
    .ib-wrap-body { padding:16px; }
    .ib-card { padding:14px 16px; }
    .ib-avatar { width:38px; height:38px; font-size:0.95rem; }
    .ib-sender-name { font-size:0.92rem; }
    .ib-card-header { flex-wrap:wrap; }
}

/* ── Employer Dashboard (ed-*) ────────────────────────────────── */
.ed-stat-card {
    background:#fff; border-radius:12px; padding:22px 18px;
    box-shadow:0 5px 15px rgba(0,0,0,.08); transition:transform .3s, box-shadow .3s;
    border-left:4px solid var(--mc-primary); height:100%;
    display:flex; flex-direction:column; align-items:flex-start;
}

.ed-stat-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,.15); }

.ed-stat-icon { font-size:1.9rem; color:var(--mc-primary); margin-bottom:12px; }

.ed-stat-number { font-size:2rem; font-weight:700; color:var(--mc-primary); margin-bottom:4px; line-height:1.1; }

.ed-stat-label { color:#666; font-size:0.8rem; text-transform:uppercase; letter-spacing:.9px; font-weight:500; }

/* Panel */
.ed-panel { background:#fff; border-radius:12px; padding:22px 20px; box-shadow:0 5px 15px rgba(0,0,0,.08); height:100%; }

.ed-panel-title { font-size:1rem; font-weight:700; color:var(--mc-dark); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

.ed-panel-title i { color:var(--mc-primary); }

/* Activity rows */
.ed-activity-item { padding:12px 8px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; gap:12px; border-radius:6px; transition:background .15s; }

.ed-activity-item:last-child { border-bottom:none; }

.ed-activity-item:hover { background:#f8f9fa; }

.ed-activity-icon { width:38px; height:38px; border-radius:50%; background:var(--mc-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.95rem; flex-shrink:0; }

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

.ed-activity-title { font-weight:600; color:#333; margin-bottom:2px; font-size:0.93rem; }

.ed-activity-title a { color:var(--mc-primary); text-decoration:none; }

.ed-activity-title a:hover { text-decoration:underline; }

.ed-activity-time { color:#888; font-size:0.82rem; }

/* Status badges */
.ed-badge { padding:2px 9px; border-radius:20px; font-size:0.75rem; font-weight:600; text-transform:uppercase; white-space:nowrap; display:inline-block; margin-left:6px; }

.ed-badge-pending   { background:#fff3cd; color:#856404; }
.ed-badge-approved  { background:#d4edda; color:#155724; }
.ed-badge-rejected  { background:#f8d7da; color:#721c24; }
.ed-badge-interview { background:#cce5ff; color:#004085; }

/* Chart / summary panels */
.ed-chart-panel { background:#fff; border-radius:12px; padding:22px 20px; box-shadow:0 5px 15px rgba(0,0,0,.08); }

.ed-chart-title { font-size:1rem; font-weight:700; color:var(--mc-dark); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

.ed-chart-title i { color:var(--mc-primary); }

.ed-chart-stat { text-align:center; padding:12px 8px; }

/* Empty state */
.ed-empty { text-align:center; padding:28px; color:#aaa; }

.ed-empty i { font-size:2.4rem; margin-bottom:10px; opacity:.4; display:block; }

@keyframes ed-pulse { 0% { transform:scale(1); } 50% { transform:scale(1.04); } 100% { transform:scale(1); } }

.ed-pulse { animation:ed-pulse .8s ease-in-out; }

/* Responsive */
@media (max-width: 767px) {
    .ed-stat-number { font-size:1.4rem; }
    .ed-stat-card { padding:16px 14px; }
    .ed-panel, .ed-chart-panel { padding:16px 14px; }
}

/* ── Employer Candidates (ec-*) ──────────────────────────────────── */
.ec-wrap { background:#fff; border:1px solid #e9ecef; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; }

.ec-wrap-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:18px 24px; border-bottom:1px solid #f0f0f0; background:linear-gradient(135deg,#f8fffe,#f0fafb); }

.ec-wrap-header-left { display:flex; align-items:center; gap:12px; }

.ec-wrap-icon { width:40px; height:40px; border-radius:50%; background:var(--mc-primary); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; flex-shrink:0; }

.ec-wrap-title { margin:0; font-size:1.1rem; font-weight:700; color:var(--mc-dark); }

.ec-filter-select { min-width:200px; max-width:260px; }

.ec-wrap-body { padding:20px 24px; }

/* Card */
.ec-card { display:flex; align-items:stretch; border:1px solid #e9ecef; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); margin-bottom:20px; background:#fff; transition:box-shadow .2s; }

.ec-card:last-child { margin-bottom:0; }

.ec-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.1); }

/* Avatar column */
.ec-card-avatar { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 14px; background:#f6f8fa; min-width:170px; max-width:170px; flex-shrink:0; text-align:center; }

.ec-card-avatar img { width:130px; height:130px; border-radius:50%; object-fit:cover; margin-bottom:8px; }

.ec-avatar-icon { font-size:130px; color:#ccc; margin-bottom:8px; line-height:1; display:block; }

.ec-candidate-sno { color:#888; font-size:0.85rem; }

/* Details column */
.ec-card-details { flex:1; padding:16px 20px; min-width:0; overflow:hidden; }

.ec-detail-row { display:flex; align-items:flex-start; gap:7px; font-size:0.875rem; color:#444; margin-bottom:9px; line-height:1.45; }

.ec-detail-row i { color:var(--mc-primary); font-size:0.82rem; width:16px; text-align:center; flex-shrink:0; margin-top:2px; }

.ec-detail-row strong { color:#333; font-weight:600; white-space:nowrap; flex-shrink:0; }

.ec-availability-item { margin-left:24px; font-size:0.85rem; color:#555; margin-bottom:3px; }

.ec-badge { background:var(--mc-primary); color:#fff; padding:3px 10px; border-radius:14px; font-size:0.78rem; font-weight:500; margin-right:4px; margin-bottom:4px; display:inline-block; }

/* Actions column */
.ec-card-actions { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px 14px; min-width:150px; border-left:1px solid #f0f0f0; flex-shrink:0; }

.ec-card-actions .btn { width:116px; }

/* Empty state */
.ec-empty { text-align:center; padding:48px 24px; background:linear-gradient(135deg,#f8f9fa,#e9ecef); border:2px dashed var(--mc-primary); border-radius:12px; }

.ec-empty-icon { width:64px; height:64px; border-radius:50%; background:var(--mc-primary-light); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }

.ec-empty-icon i { font-size:1.6rem; color:var(--mc-primary); }

.ec-empty-title { font-size:1.1rem; font-weight:700; color:#374151; margin-bottom:8px; }

.ec-empty-text { color:#6b7280; font-size:0.9rem; }

/* Responsive */
@media (max-width: 992px) {
    .ec-card-avatar { min-width:140px; max-width:140px; }
    .ec-card-avatar img { width:110px; height:110px; }
    .ec-avatar-icon { font-size:110px; }
    .ec-card-actions { min-width:130px; }
    .ec-card-actions .btn { width:100px; }
}

@media (max-width: 767px) {
    .ec-wrap-body { padding:14px 16px; }
    .ec-wrap-header { padding:14px 16px; }
    .ec-filter-select { min-width:100%; max-width:100%; }
    .ec-card { flex-direction:column; }
    .ec-card-avatar { min-width:auto; max-width:100%; width:100%; flex-direction:row; gap:16px; padding:14px 16px; border-radius:0; justify-content:flex-start; }
    .ec-card-avatar img { width:70px; height:70px; margin-bottom:0; }
    .ec-avatar-icon { font-size:70px; margin-bottom:0; }
    .ec-card-details { padding:14px 16px; }
    .ec-card-actions { flex-direction:row; width:100%; min-width:auto; border-left:none; border-top:1px solid #f0f0f0; padding:12px 16px; justify-content:center; }
    .ec-card-actions .btn { width:auto; flex:1; max-width:160px; }
}

@media (max-width: 575px) {
    .ec-detail-row { font-size:0.82rem; }
    .ec-availability-item { font-size:0.8rem; }
    .ec-badge { font-size:0.75rem; padding:2px 8px; }
}

/* ── Employer Jobs (ej-*) ───────────────────────────────── */
.ej-wrap { background:#fff; border:1px solid #e9ecef; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; }

.ej-wrap-header { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid #f0f0f0; background:linear-gradient(135deg,#f8fffe,#f0fafb); }

.ej-wrap-icon { width:40px; height:40px; border-radius:50%; background:var(--mc-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }

.ej-wrap-title { margin:0; font-size:1.15rem; font-weight:700; color:var(--mc-dark); }

.ej-wrap-body { padding:24px; }

.ej-jobs-list { display:flex; flex-direction:column; gap:20px; }

.ej-card { border:1px solid #e9ecef; border-radius:10px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.05); transition:box-shadow .2s,transform .2s; }

.ej-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.1); transform:translateY(-2px); }

.ej-card-header { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 20px; background:linear-gradient(135deg,#f8f9fa,#fff); border-bottom:1px solid #e9ecef; }

.ej-badge-sno { background:var(--mc-primary); color:#fff; padding:4px 10px; border-radius:6px; font-size:0.78rem; font-weight:700; white-space:nowrap; flex-shrink:0; }

.ej-title-section { flex:1; min-width:0; }

.ej-title { font-size:1.05rem; font-weight:600; color:#2c3e50; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ej-order { font-size:0.83rem; color:#6c757d; margin:0; }

.ej-meta { display:flex; flex-direction:column; gap:4px; font-size:0.83rem; color:#6c757d; flex-shrink:0; }

.ej-meta i { color:var(--mc-primary); width:14px; text-align:center; }

.ej-status { display:inline-block; padding:4px 12px; border-radius:20px; font-size:0.75rem; font-weight:700; text-transform:uppercase; white-space:nowrap; }

.ej-status-active { background:#d4edda; color:#155724; }

.ej-status-inactive { background:#f8d7da; color:#721c24; }

.ej-status-pending { background:#fff3cd; color:#856404; }

.ej-card-body { padding:18px 20px; background:#fff; }

.ej-family-title { font-size:0.85rem; font-weight:700; color:#2c3e50; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid #e9ecef; }

.ej-family-title i { color:var(--mc-primary); margin-right:6px; }

.ej-family-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.ej-family-col { background:#f8f9fa; border-radius:8px; padding:14px; border:1px solid #e9ecef; }

.ej-info-item { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:#444; padding:6px 0; border-bottom:1px solid #f0f0f0; }

.ej-info-item:last-child { border-bottom:none; }

.ej-info-item i { width:22px; height:22px; border-radius:50%; background:rgba(15,174,189,.1); color:var(--mc-primary); display:flex; align-items:center; justify-content:center; font-size:0.72rem; flex-shrink:0; }

.ej-info-item strong { color:#2c3e50; min-width:76px; font-weight:600; }

.ej-empty { text-align:center; padding:48px 24px; background:linear-gradient(135deg,#f8f9fa,#e9ecef); border:2px dashed var(--mc-primary); border-radius:12px; }

.ej-empty i { font-size:2.5rem; color:var(--mc-primary); margin-bottom:12px; display:block; }

@media (max-width: 991px) {
    .ej-family-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 767px) {
    .ej-wrap-body { padding:14px 16px; }
    .ej-card-header { flex-direction:column; align-items:flex-start; gap:10px; }
    .ej-title-section { width:100%; }
    .ej-family-grid { grid-template-columns:1fr; }
}

@media (max-width: 575px) {
    .ej-title { font-size:0.95rem; }
    .ej-info-item { font-size:0.78rem; }
}

/* ── Employer Edit Profile (ep-*) ───────────────────────── */
.ep-wrap { background:#fff; border:1px solid #e9ecef; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; }

.ep-wrap-header { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid #f0f0f0; background:linear-gradient(135deg,#f8fffe,#f0fafb); }

.ep-wrap-icon { width:40px; height:40px; border-radius:50%; background:var(--mc-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }

.ep-wrap-title { margin:0; font-size:1.15rem; font-weight:700; color:var(--mc-dark); }

.ep-wrap-body { padding:28px 24px; }

.ep-profile-header { display:flex; align-items:center; gap:16px; padding-bottom:20px; border-bottom:1px solid #f0f0f0; margin-bottom:24px; }

.ep-avatar { width:68px; height:68px; border-radius:50%; background:var(--mc-primary-light); color:var(--mc-primary); display:flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; border:2px solid var(--mc-primary); }

.ep-profile-name { margin:0; font-size:1.1rem; font-weight:600; color:#2c3e50; }

@media (max-width: 575px) {
    .ep-wrap-body { padding:18px 16px; }
}

/* ── View Job (vj-*) ────────────────────────────────────── */
.vj-job-header { background:#fff; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.06); border:1px solid #e6f2f5; margin-bottom:24px; padding:20px 24px; }

.vj-job-title { font-size:1.35rem; font-weight:800; color:#222; margin:0 0 10px; text-transform:capitalize; }

.vj-job-meta { display:flex; flex-wrap:wrap; gap:16px; font-size:0.88rem; color:#6c757d; align-items:center; }

.vj-job-meta i { color:var(--mc-primary); }

.vj-section { background:#fff; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:24px; border:1px solid #e6f2f5; overflow:hidden; transition:box-shadow .2s,border-color .2s; }

.vj-section:hover { border-color:var(--mc-primary); box-shadow:0 6px 24px rgba(15,174,189,.12); }

.vj-section-heading { background:var(--mc-primary); color:#fff; font-weight:700; font-size:1rem; padding:13px 20px; display:flex; align-items:center; gap:10px; margin:0; }

.vj-section-heading i { font-size:1rem; opacity:.9; }

.vj-section-body { padding:20px 22px; background:#fcfeff; }

.vj-info-item { padding:9px 0; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; gap:10px; font-size:0.92rem; }

.vj-info-item:last-child { border-bottom:none; }

.vj-info-label { font-weight:600; color:#222; min-width:145px; display:flex; align-items:center; gap:6px; flex-shrink:0; }

.vj-info-label i { color:var(--mc-primary); width:16px; text-align:center; }

.vj-info-value { color:#6c757d; }

.vj-family-members { align-items:flex-start; }

.vj-family-count { display:flex; gap:20px; flex-wrap:wrap; font-size:0.9rem; color:#6c757d; font-weight:500; margin-top:2px; }

.vj-divider { border:none; border-top:1px solid #ececec; margin:4px 0 6px; }

.vj-badge { display:inline-block; font-size:0.85rem; padding:4px 14px; border-radius:999px; font-weight:500; margin:3px 4px 3px 0; background:#f5fafd; color:var(--mc-primary); border:1px solid #e6f2f5; transition:background .2s,color .2s; }

.vj-badge:hover { background:#e6f2f5; color:#0b8591; }

.vj-badges-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }

.vj-special-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }

.vj-special-card { background:#f8f9fa; border-radius:8px; padding:12px 14px; border-left:3px solid var(--mc-primary); box-shadow:0 1px 4px rgba(15,174,189,.07); }

.vj-special-header { font-size:0.92rem; font-weight:700; color:var(--mc-primary); margin-bottom:8px; display:flex; align-items:center; gap:6px; }

.vj-special-details { display:flex; flex-direction:column; gap:4px; }

.vj-detail-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; font-size:0.85rem; }

.vj-detail-row .vj-val { color:#6c757d; text-align:right; flex:1; margin-left:8px; }

.vj-sidebar-card { background:#fff; border-radius:8px; padding:18px; box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:18px; border:1px solid #e6f2f5; transition:box-shadow .2s,border-color .2s; }

.vj-sidebar-card:hover { border-color:var(--mc-primary); box-shadow:0 4px 18px rgba(15,174,189,.12); }

.vj-card-title { font-size:0.95rem; font-weight:700; color:var(--mc-primary); margin-bottom:14px; }

.vj-detail-item { display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; padding:9px 0; border-bottom:1px solid #f0f0f0; color:#444; }

.vj-detail-item:last-child { border-bottom:none; }

.vj-detail-item i { color:var(--mc-primary); width:18px; text-align:center; flex-shrink:0; margin-top:2px; }

.vj-detail-item strong { color:#222; font-weight:600; min-width:100px; }

.vj-location-info { background:#f8f9fa; padding:10px 12px; border-radius:6px; margin-bottom:10px; }

.vj-map iframe { border-radius:6px; border:1px solid #e0e0e0; min-height:200px; width:100%; display:block; }

@media (max-width: 991px) {
    .vj-special-grid { grid-template-columns:1fr; }
}

@media (max-width: 767px) {
    .vj-job-title { font-size:1.1rem; }
    .vj-section-body { padding:14px 16px; }
    .vj-info-label { min-width:120px; }
}

/* ── Add Post (ap-*) ───────────────────────────────────────── */
.ap-wrap { background:#fff; border:1px solid #e9ecef; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; }

.ap-wrap-header { display:flex; align-items:center; gap:14px; padding:20px 24px; background:var(--mc-primary); }

.ap-wrap-icon { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; flex-shrink:0; }

.ap-wrap-title { margin:0; font-size:1.1rem; font-weight:700; color:#fff; }

.ap-wrap-body { padding:24px; }

.ap-form-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:0; border-bottom:2px solid #e9ecef; }
.ap-form-tabs::-webkit-scrollbar { height:4px; }
.ap-form-tabs::-webkit-scrollbar-track { background:#f1f1f1; border-radius:3px; }
.ap-form-tabs::-webkit-scrollbar-thumb { background:var(--mc-primary); border-radius:3px; }

.ap-form-tabs .nav-tabs { border-bottom:none; padding:0; display:flex; flex-wrap:nowrap; min-width:max-content; margin:0; }
.ap-form-tabs .nav-tabs .nav-item { flex:0 0 auto; }
.ap-form-tabs .nav-tabs .nav-link { display:flex; flex-direction:column; align-items:center; gap:6px; max-width:120px; padding:12px 14px; border:none; color:#6c757d; font-size:0.82rem; font-weight:500; white-space:normal; text-align:center; line-height:1.3; transition:color .2s; position:relative; }
.ap-form-tabs .nav-tabs .nav-link i { font-size:1.2rem; }
.ap-form-tabs .nav-tabs .nav-link:hover { color:var(--mc-primary); border:none; }
.ap-form-tabs .nav-tabs .nav-link.active { color:var(--mc-primary); border:none; background:transparent; }
.ap-form-tabs .nav-tabs .nav-link.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--mc-primary); border-radius:3px 3px 0 0; }
.ap-form-tabs .nav-tabs .nav-link::before { content:attr(data-step); display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#e9ecef; color:#6c757d; font-size:0.75em; font-weight:700; flex-shrink:0; }
.ap-form-tabs .nav-tabs .nav-link.active::before { background:var(--mc-primary); color:#fff; }
.ap-form-tabs .nav-tabs .nav-link.completed::before { background:#28a745; color:#fff; }

#formSteps button::before { display:none; }

.ap-form-section { background:#fff; padding:24px 0 12px; }

.ap-tab-nav { display:flex; justify-content:flex-end; gap:12px; padding:16px 0 8px; border-top:1px solid #f0f0f0; margin-top:8px; }
.ap-tab-nav button { min-width:110px; padding:0.45rem 1.4rem; border-radius:6px; font-weight:500; }

.ap-icon-circle { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ap-icon-circle i { font-size:0.78em; }

.ap-icon-sm { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ap-icon-sm i { font-size:0.72em; }

.ap-input-icon { position:relative; }
.ap-input-icon .form-control,
.ap-input-icon .form-select { padding-left:36px; background-color:#f5f9ff; border-color:#d0e1ff; }
.ap-input-icon .ap-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:10; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.ap-input-icon .ap-icon i { font-size:0.72em; }
.ap-input-icon textarea.form-control { padding-left:36px; padding-top:10px; }
.ap-input-icon .ap-icon:has(+ textarea) { top:16px; transform:none; }

.ap-wrap .text-primary { color:var(--mc-primary) !important; }
.ap-wrap .is-invalid { border:1px solid #dc3545; }
.ap-wrap .is-invalid:focus { border:1px solid #dc3545; box-shadow:0 0 0 0.25rem rgba(220,53,69,.25); }
.ap-wrap .tab-pane { display:none; opacity:0; transition:opacity .3s ease-in-out; }
.ap-wrap .tab-pane.show { display:block; opacity:1; }

@media (max-width: 767px) {
    .ap-wrap-body { padding:16px; }
    .ap-form-tabs .nav-tabs .nav-link { padding:10px 10px; max-width:100px; font-size:0.78rem; }
    .ap-tab-nav { flex-wrap:wrap; }
}

/* ── Chat (ch-*) ─────────────────────────────────────────────── */
.ch-wrap { background:#fff; border:1px solid #e9ecef; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; }
.ch-wrap-header { display:flex; align-items:center; gap:14px; padding:20px 24px; background:var(--mc-primary); }
.ch-wrap-icon { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; flex-shrink:0; }
.ch-wrap-title { margin:0; font-size:1.1rem; font-weight:700; color:#fff; }
.ch-wrap-body { padding:24px; }

.ch-back-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.ch-partner-name { font-weight:600; font-size:1rem; color:#333; }

.ch-wrap .chat-container { display:flex; flex-direction:column; height:calc(100vh - 300px); max-height:700px; background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.1); overflow:hidden; border:1px solid #e9ecef; }
.ch-wrap .chat-header { background:var(--mc-primary); color:#fff; padding:15px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.2); }
.ch-wrap .chat-header-info { display:flex; align-items:center; gap:15px; }
.ch-wrap .chat-header-avatar { width:45px; height:45px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:20px; }
.ch-wrap .chat-header-details h5 { margin:0; font-size:16px; font-weight:600; }
.ch-wrap .chat-header-details p { margin:0; font-size:12px; opacity:.9; }
.ch-wrap .chat-messages { flex:1; overflow-y:auto; padding:20px; background:#f5f5f5; display:flex; flex-direction:column; gap:15px; }

@keyframes ch-fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.ch-wrap .message { display:flex; gap:10px; max-width:70%; animation:ch-fadeIn .3s ease-in; }
.ch-wrap .message.sent { align-self:flex-end; flex-direction:row-reverse; }
.ch-wrap .message.received { align-self:flex-start; }
.ch-wrap .message-avatar { width:35px; height:35px; border-radius:50%; background:var(--mc-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.ch-wrap .message.received .message-avatar { background:#28a745; }
.ch-wrap .message-content { background:#fff; padding:12px 16px; border-radius:18px; box-shadow:0 1px 2px rgba(0,0,0,.1); word-wrap:break-word; }
.ch-wrap .message.sent .message-content { background:var(--mc-primary); color:#fff; }
.ch-wrap .message.received .message-content { background:#fff; color:#333; }
.ch-wrap .message-time { font-size:11px; color:#999; margin-top:5px; text-align:right; }
.ch-wrap .message.sent .message-time { color:rgba(255,255,255,.8); }

.ch-wrap .chat-input-container { padding:15px 20px; background:#fff; border-top:1px solid #e0e0e0; display:flex; gap:10px; align-items:center; }
.ch-wrap .chat-input { flex:1; border:1px solid #e0e0e0; border-radius:25px; padding:12px 20px; font-size:14px; outline:none; resize:none; max-height:100px; }
.ch-wrap .chat-input:focus { border-color:var(--mc-primary); }
.ch-wrap .chat-send-btn { background:var(--mc-primary); color:#fff; border:none; border-radius:50%; width:45px; height:45px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s; flex-shrink:0; }
.ch-wrap .chat-send-btn:hover { background:#0d9aaa; }
.ch-wrap .chat-send-btn:disabled { background:#ccc; cursor:not-allowed; }
.ch-wrap .chat-loading { text-align:center; padding:20px; color:#999; }
.ch-wrap .chat-empty { text-align:center; padding:40px; color:#999; }
.ch-wrap .chat-empty i { font-size:48px; margin-bottom:15px; opacity:.5; }
.ch-wrap .connection-status { font-size:12px; opacity:.9; }
.ch-wrap .connection-status.connected { color:#4caf50; }
.ch-wrap .connection-status.disconnected { color:#f44336; }
.ch-wrap .chat-messages::-webkit-scrollbar { width:6px; }
.ch-wrap .chat-messages::-webkit-scrollbar-track { background:#f1f1f1; }
.ch-wrap .chat-messages::-webkit-scrollbar-thumb { background:#888; border-radius:3px; }
.ch-wrap .chat-messages::-webkit-scrollbar-thumb:hover { background:#555; }

@media (max-width: 767px) {
    .ch-wrap-body { padding:16px; }
    .ch-wrap .chat-container { height:calc(100vh - 240px); }
    .ch-wrap .message { max-width:85%; }
    .ch-wrap .chat-header { padding:12px 15px; }
    .ch-wrap .chat-header-details h5 { font-size:14px; }
    .ch-wrap .chat-input-container { padding:12px 15px; }
}