/* ============================================================
   NEXORA - Main Stylesheet
   Design: Dark Refined Professional
   Fonts: Roboto (display) + Roboto (body)
============================================================ */

:root {
    --primary: #0A0A0F;
    --secondary: #111118;
    --surface: #16161F;
    --surface2: #1E1E2A;
    --border: rgba(255,255,255,0.07);
    --accent: #1A6FFF;
    --accent2: #A020F0;
    --accent-glow: rgba(26, 111, 255, 0.3);
    --text: #E8E8F0;
    --text-muted: #7B7B8F;
    --text-dim: #4A4A5A;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --white: #FFFFFF;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --shadow: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 48px rgba(0,0,0,0.5);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; font-family: 'Roboto', Arial, sans-serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', Arial, sans-serif !important; }

body {
    font-family: 'Roboto', Arial, sans-serif;
    background: var(--primary);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Roboto', Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--white); }

/* ============================================================
   NAVBAR
============================================================ */
#mainNav {
    background: rgba(10, 10, 15, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    z-index: 1000;
}

.navbar-brand {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--white) !important;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.brand-icon { color: var(--accent); font-size: 1.2rem; }
.brand-accent {
    background: linear-gradient(135deg, #00C8FF, #1A6FFF, #A020F0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .brand-accent { color: var(--text); }

.nav-link {
    color: var(--text-muted) !important;
    font-weight: 500;
    padding: 6px 14px !important;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font-size: 0.9rem;
    margin-top: 4px;
}
.nav-link:hover, .nav-link.active {
    color: var(--white) !important;
    background: linear-gradient(135deg, rgba(0,200,255,0.1), rgba(160,32,240,0.1));
    box-shadow: inset 0 0 0 1px #1A6FFF;
}

.btn-icon {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
    padding: 0;
    position: relative;
}
.btn-icon:hover { background: var(--surface); color: var(--white); border-color: #1A6FFF; box-shadow: 0 0 8px rgba(0, 200, 255, 0.3); }

.badge-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--accent2);
    color: white;
    font-size: 0.6rem;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid var(--primary);
}

.btn-user {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
}
.btn-user:hover { border-color: var(--accent); color: var(--white); }

.user-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn-accent {
    background: linear-gradient(135deg, #00C8FF, #1A6FFF, #A020F0);
    background-size: 200% 200%;
    background-position: left center;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-position 0.4s ease, box-shadow 0.3s ease, transform 0.2s ease;
    font-family: 'Roboto', Arial, sans-serif;
}

.btn-accent:hover {
    background: linear-gradient(135deg, #00C8FF, #1A6FFF, #A020F0);
    background-size: 200% 200%;
    background-position: right center;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(26, 111, 255, 0.5);
}

.btn-outline-light {
    border-color: var(--border);
    color: var(--text-muted);
    background: transparent;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.875rem;
}
.btn-outline-light:hover {
    border-color: #1A6FFF;
    color: var(--white);
    background: linear-gradient(135deg, rgba(0,200,255,0.15), rgba(160,32,240,0.15));
}

.btn-surface {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--transition);
}
.btn-surface:hover { border-color: #1A6FFF; color: var(--white); background: linear-gradient(135deg, rgba(0,200,255,0.1), rgba(160,32,240,0.1)); }
.btn-surface:focus, .btn-surface:active, .btn-surface.show {
    border-color: #1A6FFF !important;
    color: var(--white) !important;
    background: linear-gradient(135deg, rgba(0,200,255,0.1), rgba(160,32,240,0.1)) !important;
    box-shadow: none !important;
}
/* ============================================================
   CARDS
============================================================ */
.card-ws {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.card-ws:hover {
    border-color: rgba(26, 111, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.job-card-static:hover {
    transform: none;
    box-shadow: none;
}

.card-ws::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1A6FFF, transparent);
    opacity: 0;
    transition: var(--transition);
}
.card-ws:hover::before { opacity: 1; }

/* ============================================================
   HERO SECTION
============================================================ */
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

/* Below lg the illustration column is hidden, so the hero holds only the text
   and is far shorter than the 90vh it reserves - centring that left a large
   gap under the navbar. Let it take its content's height and sit at the top. */
@media (max-width: 991.98px) {
    .hero {
        min-height: 0;
        align-items: flex-start;
        padding: 60px 0 56px;
    }
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 60% 50% at 70% 50%, rgba(26, 111, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 10% 80%, rgba(160, 32, 240, 0.08) 0%, transparent 50%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
}

.hero h1 {
    font-size: clamp(2.5rem, 4.8vw, 4.5rem);
    width: clamp(200px, 70vw, 800px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    color: var(--white);
}

/* The slogan carries the hero on its own, so it runs larger than the old
   three-line headline did and is allowed to wrap naturally. */
/* Sized to keep the sentence on one line. It cannot key off vw: Bootstrap's
   container is fixed between breakpoints, so the viewport keeps growing while
   the column does not, and the text would outrun it just before the next
   breakpoint. These follow the container's own steps instead, each leaving
   roughly 8% slack for fonts that render wider. */
/* Sets up the slogan rather than competing with it: sentence case, not the
   uppercase pill the old badge used, since this is a full sentence and
   uppercase would shout. The short accent rule ties it to the brand without
   adding another colour to the block. */
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: .2px;
}

.hero-eyebrow::before {
    content: '';
    flex: 0 0 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #00C8FF, #1A6FFF, #A020F0);
}

[data-theme="light"] .hero-eyebrow { color: #4B5563; }

/* On a phone it wraps to two lines, so it needs to sit further back from the
   slogan to stay clearly secondary. */
@media (max-width: 767.98px) {
    .hero-eyebrow {
        font-size: 0.88rem;
        gap: 10px;
        margin-bottom: 12px;
    }
    .hero-eyebrow::before { flex-basis: 22px; }
}

.hero-slogan {
    font-size: clamp(1.9rem, 6.7vw, 2.5rem) !important;
    width: auto !important;
    max-width: none;
    letter-spacing: -0.025em;
    margin-bottom: 0;
}
@media (min-width: 992px)  { .hero-slogan { font-size: 2.65rem !important; } }
@media (min-width: 1200px) { .hero-slogan { font-size: 3.15rem !important; } }
@media (min-width: 1400px) { .hero-slogan { font-size: 3.65rem !important; } }

/* RTL headings are deliberately smaller elsewhere because Arabic and Kurdish
   render taller than Latin, and that rule outranks the one above - hence the
   element-qualified selector. Tracking is never tightened here: negative
   letter-spacing breaks the joins between Arabic letterforms. */
[dir="rtl"] .hero h1.hero-slogan {
    font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important;
    letter-spacing: 0 !important;
    max-width: none;
}
/* One scale for both RTL languages. Arabic and Kurdish glyphs carry far more
   height at a given size than Latin, so matching the Latin number makes them
   look oversized; this is the size at which all three read as the same
   weight on the page. Kurdish is also the longest of the three sentences,
   and this keeps it on one line. */
@media (min-width: 992px)  { [dir="rtl"] .hero h1.hero-slogan { font-size: 1.7rem !important; } }
@media (min-width: 1200px) { [dir="rtl"] .hero h1.hero-slogan { font-size: 2rem !important; } }
@media (min-width: 1400px) { [dir="rtl"] .hero h1.hero-slogan { font-size: 2.35rem !important; } }

.hero h1 .highlight {
    background: linear-gradient(135deg, #00C8FF, #1A6FFF, #A020F0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 510px;
    line-height: 1.8;
}

.hero-search-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50px;
    /* Logical padding, so the roomy side follows the text direction: the
       magnifier keeps its inset and the button stays tight to the edge in
       both LTR and RTL. Physical padding left the RTL layout mirrored the
       wrong way round. */
    padding: 4px;
    padding-inline-start: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Kept just under the slogan's rendered width so the headline stays the
       widest thing in the hero. The box height follows the button inside it,
       not this padding - see .hero-search-btn. */
    max-width: 440px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.hero-search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.hero-search-box > .bi-search {
    color: var(--text-dim);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.hero-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.92rem;
    flex: 1;
    min-width: 0;
    padding: 6px 0;
}
.hero-search-box input::placeholder { color: var(--text-dim); }


/* This sets the height of the whole pill: button height plus the box's 4px
   padding top and bottom plus its border. */
.hero-search-btn {
    border-radius: 50px;
    padding: 6px 22px;
    font-size: 0.88rem;
    flex-shrink: 0;
}

/* With the category select gone the pill holds field + button on one line
   even on a phone; it only needs trimming down. */
@media (max-width: 767.98px) {
    .hero-search-box {
        padding: 6px;
        padding-inline-start: 18px;
    }
    .hero-search-btn {
        padding: 11px 22px;
    }
}

/* ---- Category chips under the search ---- */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 620px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--surface);
    /* A touch lighter than --text-muted, which only reaches 4.3:1 on the
       dark surface - under the 4.5 minimum at this size. */
    color: #9A9AAE;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: var(--transition);
}
.hero-chip:hover {
    color: var(--white);
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.12), rgba(160, 32, 240, 0.12));
    transform: translateY(-2px);
}
.hero-chip-all {
    color: var(--accent);
    border-color: var(--accent);
    background: transparent;
}

/* ---- Hero visual: floating cards over drawn shapes ---- */
.hero-visual {
    width: 440px;
    height: 420px;
}

.hero-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* The shapes run on the brand ramp - #00C8FF cyan into #1A6FFF blue into
   #A020F0 purple, the same three the logo and buttons use - so they read as
   part of the identity rather than generic decoration. Opacity is tuned per
   theme below, since the same value that glows on near-black turns muddy on
   a pale background. */
.hero-blob {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    top: 40px;
    right: 28px;
    background: radial-gradient(circle at 30% 28%,
                rgba(0, 200, 255, 0.28) 0%,
                rgba(26, 111, 255, 0.22) 42%,
                rgba(160, 32, 240, 0.16) 66%,
                transparent 74%);
    filter: blur(4px);
}

.hero-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px dashed rgba(160, 32, 240, 0.42);
    bottom: 4px;
    right: -14px;
}

.hero-dots {
    width: 78px;
    height: 78px;
    color: rgba(0, 200, 255, 0.45);
}
.hero-dots-a { top: 6px;    left: 18px; }
.hero-dots-b { bottom: 34px; right: 8px; color: rgba(160, 32, 240, 0.40); }

.hero-wave {
    width: 74px;
    height: 26px;
    color: #1A6FFF;
    opacity: .65;
    top: 8px;
    right: 6px;
}

/* ---- Shapes drift behind the cards ----
   Slower and wider than the card float so the two read as separate
   layers rather than one moving mass. */
@keyframes decoDrift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(14px, -18px); }
}
@keyframes decoDriftAlt {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-16px, 14px); }
}
@keyframes decoPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.07); opacity: .82; }
}
@keyframes decoSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes decoBob {
    0%, 100% { transform: translateY(0)     rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(6deg); }
}

.hero-blob    { animation: decoPulse 9s ease-in-out infinite; }
.hero-ring    { animation: decoSpin 26s linear infinite; }
.hero-dots-a  { animation: decoDrift 11s ease-in-out infinite; }
.hero-dots-b  { animation: decoDriftAlt 13s ease-in-out infinite; }
.hero-wave    { animation: decoBob 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .hero-blob, .hero-ring, .hero-dots-a, .hero-dots-b, .hero-wave,
    .hero-visual .card-ws {
        animation: none !important;
    }
}

/* Cards float above the shapes with a softer edge than elsewhere */
.hero-visual .card-ws {
    z-index: 1;
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

.hero-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.stat-item .stat-number {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
}
.stat-item .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================================
   FREELANCER CARDS
============================================================ */
.freelancer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: var(--transition);
    text-align: center;
    position: relative;
}
.freelancer-card:hover {
    border-color: rgba(26, 111, 255, 0.4);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.freelancer-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--surface2);
    margin: 0 auto 12px;
    display: block;
}

.availability-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
}
.badge-available { background: rgba(34, 197, 94, 0.15); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.3); }
.badge-busy { background: rgba(245, 158, 11, 0.15); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-unavailable { background: rgba(239, 68, 68, 0.15); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.3); }

.skill-tag {
    display: inline-block;
    background: rgba(108, 99, 255, 0.1);
    color: var(--accent);
    border: 1px solid rgba(108, 99, 255, 0.2);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    margin: 2px;
    transition: var(--transition);
}
.skill-tag:hover { background: var(--accent); color: white; }

.star-rating { color: var(--warning); font-size: 0.85rem; }

/* ============================================================
   JOB CARDS
============================================================ */
.job-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: var(--transition);
    display: flex;
    gap: 16px;
}
.job-card:hover {
    border-color: rgba(108, 99, 255, 0.4);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.company-logo-sm {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface2);
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.job-type-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
}
.type-freelance,
.type-full-time, .type-full_time,
.type-part-time, .type-part_time,
.type-contract,
.type-internship { background: rgba(108, 99, 255, 0.1); color: var(--accent); border: 1px solid rgba(108, 99, 255, 0.2); }

/* Job card colors by type - all unified to freelance purple style */
.job-card.card-freelance,
.job-card.card-full-time,
.job-card.card-full_time,
.job-card.card-part-time,
.job-card.card-part_time,
.job-card.card-contract,
.job-card.card-internship {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.08) 0%, var(--surface) 60%);
    border: 1px solid rgba(108, 99, 255, 0.5);
}

/* ============================================================
   SECTION HEADERS
============================================================ */
.section-header { text-align: center; margin-bottom: 48px; }
.section-tag {
    display: inline-block;
    background: rgba(108, 99, 255, 0.1);
    color: var(--accent);
    border: 1px solid rgba(108, 99, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.section-title {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -1px;
    line-height: 1.1;
}
.section-subtitle {
    color: var(--text-muted);
    max-width: 500px;
    margin: 12px auto 0;
    font-size: 1rem;
}

/* ============================================================
   FORMS
============================================================ */
.form-ws {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.form-control, .form-select {
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 16px;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.9rem;
    transition: var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none;
}
.form-control::placeholder { color: var(--text-dim) !important; }
.form-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

textarea.form-control { resize: vertical; min-height: 120px; }

/* Hide the browser's built-in password reveal/clear icons (Edge/IE) so only
   our custom show/hide toggle appears. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

/* ============================================================
   NOTIFICATIONS DROPDOWN
============================================================ */
.notif-dropdown {
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.notif-header {
    border-bottom: 1px solid var(--border);
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--white);
}
.notif-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
    text-decoration: none;
}
.notif-item:hover { background: var(--surface2); }
.notif-item.unread { border-left: 3px solid var(--accent); }
.notif-title { font-size: 0.85rem; color: var(--text); font-weight: 500; }
.notif-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.notif-footer { border-top: 1px solid var(--border); }
.text-accent { color: var(--accent) !important; }

/* ============================================================
   DROPDOWN MENUS
============================================================ */
.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
}
.dropdown-item {
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 0.875rem;
    transition: var(--transition);
}
.dropdown-item:hover { background: var(--surface2); color: var(--white); }
.dropdown-item.text-danger { color: var(--danger) !important; }
.dropdown-item.text-danger:hover { background: rgba(239, 68, 68, 0.1); color: var(--danger) !important; }
.dropdown-divider { border-color: var(--border); }

/* ============================================================
   ALERT FLOAT
============================================================ */
.alert-float {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    min-width: 320px;
    max-width: 450px;
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
    background: var(--secondary);
    border-top: 1px solid var(--border);
    padding: 60px 0 30px;
    margin-top: auto;
}
.footer-brand {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--white) !important;
    display: block;
    margin-bottom: 12px;
}
.footer-brand span { color: var(--accent); }
/* The slogan sits under the logo, set above the description so it reads as
   a statement rather than the first line of the paragraph. */
.footer-slogan {
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 14px 0 6px;
}
.footer-desc { color: var(--text-muted); font-size: 0.875rem; line-height: 1.7; margin-bottom: 20px; }
.footer-heading { font-family: 'Roboto', Arial, sans-serif; color: var(--white); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--text-muted); font-size: 0.875rem; }
.footer-links a:hover { color: var(--accent); }
.footer-divider { border-color: var(--border); margin: 40px 0 20px; }
.social-links { display: flex; gap: 10px; }
.social-links a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    transition: var(--transition);
}
.social-links a:hover { background: var(--accent); border-color: var(--accent); color: white; }
.footer-subscribe .form-control {
    border-radius: 50px 0 0 50px !important;
    border-right: none !important;
}
.footer-subscribe .btn-accent { border-radius: 0 50px 50px 0; padding: 8px 20px; }

/* ============================================================
   NAVBAR TOGGLER
============================================================ */
.navbar-toggler {
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}
.navbar-toggler:focus { box-shadow: none; }

/* ============================================================
   MISC UTILITIES
============================================================ */
.fw-600 { font-weight: 600; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent) !important; }
.bg-surface { background: var(--surface) !important; }
.bg-surface2 { background: var(--surface2) !important; }
.border-ws { border-color: var(--border) !important; }

.section-pad { padding: 80px 0; }

.avatar-lg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--surface2);
}

.page-hero {
    background: var(--secondary);
    border-bottom: 1px solid var(--border);
    padding: 48px 0;
}

.filter-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}

.pagination .page-link {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
    transition: var(--transition);
}
.pagination .page-link:hover, .pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* ============================================================
   DASHBOARD
============================================================ */
.dashboard-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    min-height: auto;
    width: 100%;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
    margin-bottom: 2px;
}
.sidebar-link:hover, .sidebar-link.active {
    background: rgba(108, 99, 255, 0.1);
    color: var(--white);
}
.sidebar-link.active { border-left: 3px solid var(--accent); }
.sidebar-link i { font-size: 1rem; width: 20px; text-align: center; }

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: var(--transition);
}
.stat-card:hover { border-color: rgba(108, 99, 255, 0.3); }
.stat-card .stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

/* ============================================================
   MESSAGES PAGE
============================================================ */
.messages-container {
    display: flex;
    height: calc(100vh - 120px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.conversations-list {
    width: 300px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
}
.conversation-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.conversation-item:hover, .conversation-item.active { background: var(--surface2); }
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.chat-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.message-bubble {
    max-width: 70%;
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}
.message-bubble.sent {
    background: var(--accent);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.message-bubble.received {
    background: var(--surface2);
    color: var(--text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.chat-input-area {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
}

/* ============================================================
   CATEGORY CARDS
============================================================ */
.category-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: var(--text);
}
.category-card:hover {
    border-color: var(--accent);
    background: rgba(108, 99, 255, 0.05);
    transform: translateY(-4px);
    color: var(--white);
}
.category-icon {
    width: 56px; height: 56px;
    background: rgba(108, 99, 255, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--accent);
    margin: 0 auto 14px;
    transition: var(--transition);
}
.category-card:hover .category-icon { background: var(--accent); color: white; }

/* ============================================================
   PROFILE PAGE
============================================================ */
.profile-cover {
    height: 200px;
    background: linear-gradient(135deg, rgba(108,99,255,0.3), rgba(255,101,132,0.2));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: relative;
}
.profile-avatar-wrapper {
    position: absolute;
    bottom: -40px;
    left: 32px;
}
.profile-avatar {
    width: 90px; height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--surface);
}
.online-dot {
    width: 14px; height: 14px;
    background: var(--success);
    border-radius: 50%;
    border: 2px solid var(--surface);
    position: absolute;
    bottom: 4px; right: 4px;
}

/* ============================================================
   ADMIN
============================================================ */
.admin-sidebar {
    width: 250px;
    background: var(--secondary);
    border-right: 1px solid var(--border);
    height: 100vh;
    position: fixed;
    left: 0; top: 0;
    overflow-y: auto;
    z-index: 100;
}
.admin-mobile-toggle {
    display: none;
}
.admin-content {
    margin-left: 250px;
    min-height: 100vh;
    padding: 24px;
}
.admin-logo {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; letter-spacing: -1px; }
    [dir="rtl"] .hero h1 { font-size: 1.5rem; letter-spacing: 0; }
    .messages-container { flex-direction: column; height: auto; }
    .conversations-list { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
    .admin-mobile-toggle { display: block; padding: 10px; }
    .admin-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow-y: visible !important;
        z-index: 10 !important;
        display: none !important;
    }
    .admin-sidebar.open { display: flex !important; }
    .admin-content { margin-left: 0 !important; }
    .hero-stats { gap: 20px; }
    .form-ws { padding: 20px; }
}

/* ============================================================
   MOBILE OFF-CANVAS DRAWER MENU (burger)
   Below 992px the navbar turns into a slide-in drawer: logo + close
   at the top, stacked links with dividers, then language buttons and
   account actions. Desktop layout is untouched.
============================================================ */
#drawerBackdrop {
    display: none;
}

/* On desktop this wrapper must not exist as a box: its children (theme
   toggle, messages) sit directly in the navbar's flex row, unchanged.
   The drawer media query below turns it back into a real row. */
.drawer-icons {
    display: contents;
}

@media (max-width: 991.98px) {
    /* Nothing on a phone should scroll the page sideways. `clip` rather than
       `hidden` so the navbar's position: sticky keeps working, and so the
       viewport-fixed drawer is not clipped away. */
    html,
    body {
        overflow-x: clip;
    }

    /* No blur on mobile. backdrop-filter makes #mainNav the containing block
       for its fixed-position children, so the drawer would anchor to the
       navbar instead of the viewport - and while closed its off-screen
       translateX(105%) would count as real page width and let the whole
       page scroll sideways. */
    #mainNav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* ---- Notification bell beside the burger ----
       Anchor the panel to the navbar rather than to the small bell, so it
       always spans the viewport width minus a gutter and can never hang off
       the edge. `position: static` on the .dropdown hands the containing
       block to #mainNav, which is sticky and therefore positioned. */
    .navbar-mobile-actions .dropdown {
        position: static;
    }
    .navbar-mobile-actions .dropdown-menu {
        position: absolute !important;
        inset: calc(100% + 6px) 12px auto 12px !important;
        transform: none !important;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    /* ---- Backdrop ----
       Backdrop and drawer are both children of #mainNav, which opens its
       own stacking context, so these z-indexes are relative to each other
       only: backdrop below, drawer above, both over the navbar's own row. */
    #drawerBackdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility .28s ease;
        /* Above .navbar-brand, which carries an inline z-index: 2 */
        z-index: 3;
    }
    #drawerBackdrop.show {
        opacity: 1;
        visibility: visible;
    }

    /* ---- Drawer panel ---- */
    #mainNav #navbarMain {
        display: flex !important;       /* beat .collapse { display:none } */
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: min(86vw, 360px);
        background: var(--surface);
        border-left: 1px solid var(--border);
        box-shadow: -8px 0 30px rgba(0, 0, 0, .35);
        z-index: 4;
        overflow-y: auto;
        padding: 18px 20px 28px;
        transform: translateX(105%);
        /* visibility guarantees the panel is unreachable while closed,
           regardless of how the transform resolves in RTL */
        visibility: hidden;
        transition: transform .28s ease, visibility .28s ease;
    }
    #mainNav #navbarMain.drawer-open {
        transform: translateX(0);
        visibility: visible;
    }
    /* In RTL the drawer slides in from the left */
    [dir="rtl"] #mainNav #navbarMain {
        right: auto;
        left: 0;
        border-left: none;
        border-right: 1px solid var(--border);
        box-shadow: 8px 0 30px rgba(0, 0, 0, .35);
        transform: translateX(-105%);
        direction: rtl !important;
        text-align: right;
    }
    [dir="rtl"] #mainNav #navbarMain.drawer-open {
        transform: translateX(0);
        visibility: visible;
    }

    /* ---- Drawer header (logo + close) ---- */
    .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    .drawer-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 1.15rem;
        color: var(--text);
        text-decoration: none;
    }
    .drawer-brand img {
        height: 30px;
        width: 30px;
        object-fit: contain;
    }
    .drawer-close {
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 1.15rem;
        line-height: 1;
        padding: 6px;
        cursor: pointer;
    }
    .drawer-close:hover {
        color: var(--accent);
    }

    /* ---- Signed-in identity, directly under the logo ---- */
    .drawer-user {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2px;
        padding: 18px 0 16px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    .drawer-avatar {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--accent);
        margin-bottom: 8px;
    }
    .drawer-user-name {
        font-weight: 700;
        font-size: 1.02rem;
        color: var(--text);
        line-height: 1.3;
        word-break: break-word;
    }
    .drawer-user-role {
        font-size: 0.82rem;
        color: var(--text-muted);
    }

    /* ---- Account actions as full-width buttons ---- */
    .drawer-account {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 4px;
    }
    .drawer-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface2);
        color: var(--text);
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
    }
    .drawer-btn i {
        font-size: 1.05rem;
        color: var(--accent);
        flex-shrink: 0;
    }
    .drawer-btn:hover,
    .drawer-btn:focus {
        border-color: var(--accent);
        color: var(--text);
    }
    .drawer-btn-danger,
    .drawer-btn-danger i {
        color: #dc3545;
    }
    .drawer-btn-danger:hover,
    .drawer-btn-danger:focus {
        border-color: #dc3545;
        color: #dc3545;
    }

    /* ---- Stacked links with dividers ---- */
    #mainNav #navbarMain .navbar-nav {
        width: 100%;
        margin: 0 0 14px !important;
    }
    #mainNav #navbarMain .navbar-nav .nav-link {
        padding: 15px 2px;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: .3px;
        border-bottom: 1px solid var(--border);
    }

    /* ---- Drawer running order ----
       .nav-actions collapses to display: contents so its children become
       direct flex items of the drawer, which lets a single `order` scale
       sequence arrange sections that are not DOM siblings. */
    #mainNav #navbarMain .nav-actions {
        display: contents !important;
    }
    #mainNav #navbarMain .drawer-head {
        order: 1;
    }
    #mainNav #navbarMain .drawer-icons {
        order: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 4px 0 2px;
    }
    #mainNav #navbarMain .drawer-user {
        order: 3;
    }
    #mainNav #navbarMain .drawer-account {
        order: 4;
        margin-bottom: 14px;
    }
    #mainNav #navbarMain .navbar-nav {
        order: 5;
    }
    /* .nav-actions is display: contents here, so its gap no longer applies -
       these two need their own spacing. */
    #mainNav #navbarMain .nav-actions .btn-outline-light,
    #mainNav #navbarMain .nav-actions .btn-accent {
        order: 6;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    #mainNav #navbarMain .mobile-lang {
        order: 7;
    }
    #mainNav #navbarMain .drawer-logout {
        order: 8;
        width: 100%;
    }
    /* Dropdowns inside the drawer flow inline so they can't be clipped */
    #mainNav #navbarMain .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        width: 100%;
        min-width: 0 !important;
        margin: 6px 0 0;
        box-shadow: none;
    }
    #mainNav #navbarMain .dropdown-item {
        padding: 10px 14px;
        font-size: 0.95rem;
    }

    /* ---- Language buttons ---- */
    .mobile-lang {
        display: flex;
        gap: 8px;
        width: 100%;
        margin: 4px 0 10px;
    }
    .mobile-lang-btn {
        flex: 1;
        text-align: center;
        padding: 11px 6px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--surface2);
        color: var(--text);
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        transition: var(--transition);
    }
    .mobile-lang-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }
    .mobile-lang-btn.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }
}

/* Force dark background on all tables in frontend */
.table > :not(caption) > * > * {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}
.table-hover > tbody > tr:hover > * {
    background: rgba(108,99,255,0.05) !important;
}

/* Table alignment fix */
.table td, .table th {
    vertical-align: middle !important;
    padding: 12px 10px !important;
}
.table a {
    text-decoration: none !important;
}

/* ============================================================
   LIGHT MODE
============================================================ */
[data-theme="light"] {
    --primary: #F0F2F5;
    --secondary: #E4E7EC;
    --surface: #FFFFFF;
    --surface2: #F8F9FB;
    --border: rgba(0,0,0,0.08);
    --accent: #1A6FFF;
    --accent2: #A020F0;
    --accent-glow: rgba(26, 111, 255, 0.15);
    --text: #1A1A2E;
    --text-muted: #6B7280;
    --text-dim: #9CA3AF;
    --success: #16A34A;
    --warning: #D97706;
    --danger: #DC2626;
    --white: #FFFFFF;
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 48px rgba(0,0,0,0.12);
}

[data-theme="light"] body {
    background: var(--primary);
    color: var(--text);
}

[data-theme="light"] #mainNav {
    background: rgba(255,255,255,0.95) !important;
    border-bottom: 1px solid var(--border);
}

[data-theme="light"] .nav-link {
    color: var(--text-muted) !important;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
    color: var(--text) !important;
    background: var(--surface2);
}

[data-theme="light"] .navbar-brand {
    color: var(--text) !important;
}

[data-theme="light"] .btn-icon {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text-muted);
}

[data-theme="light"] .card-ws {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

[data-theme="light"] .dashboard-sidebar {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="light"] .sidebar-link {
    color: var(--text-muted);
}

[data-theme="light"] .sidebar-link:hover,
[data-theme="light"] .sidebar-link.active {
    background: rgba(108,99,255,0.08);
    color: var(--accent);
}

[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    background: var(--surface2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(108,99,255,0.15) !important;
}

[data-theme="light"] .btn-surface {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="light"] .btn-surface:hover,
[data-theme="light"] .btn-surface:focus,
[data-theme="light"] .btn-surface:active,
[data-theme="light"] .btn-surface.show {
    background: var(--surface) !important;
    color: var(--accent) !important;
    border-color: #1A6FFF !important;
    box-shadow: none !important;
}

[data-theme="light"] .btn-icon:hover {
    background: var(--surface);
    color: var(--accent) !important;
}

[data-theme="light"] .btn-user:hover {
    color: var(--accent) !important;
}

[data-theme="light"] .btn-outline-light:hover {
    color: var(--accent) !important;
    background: linear-gradient(135deg, rgba(0,200,255,0.1), rgba(160,32,240,0.1));
}

[data-theme="light"] .table > :not(caption) > * > * {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="light"] .dropdown-menu {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

[data-theme="light"] .dropdown-item {
    color: var(--text) !important;
}

[data-theme="light"] .dropdown-item:hover {
    background: var(--surface2) !important;
}

[data-theme="light"] .page-hero {
    background: var(--surface2);
}

[data-theme="light"] .job-card {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="light"] .job-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 20px rgba(108,99,255,0.1);
}

[data-theme="light"] .modal-content {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
    border-color: var(--border) !important;
}

[data-theme="light"] .text-white {
    color: var(--text) !important;
}

[data-theme="light"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="light"] footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--border);
}

/* Theme toggle button */
.theme-toggle {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1rem;
}
.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(108,99,255,0.1);
}

/* ============================================================
   LIGHT MODE - TEXT COLOR FIXES
============================================================ */
[data-theme="light"] .hero h1 {
    color: #1A1A2E !important;
}
[data-theme="light"] .hero-subtitle {
    color: #4B5563 !important;
}
[data-theme="light"] .hero {
    background: linear-gradient(135deg, #F0F2F5 0%, #E8EAF0 100%) !important;
}
[data-theme="light"] .hero-bg {
    opacity: 0.03 !important;
}
[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3, 
[data-theme="light"] h4, 
[data-theme="light"] h5, 
[data-theme="light"] h6 {
    color: #1A1A2E !important;
}
[data-theme="light"] .fw-800,
[data-theme="light"] .fw-700,
[data-theme="light"] .fw-600,
[data-theme="light"] .fw-500 {
    color: #1A1A2E !important;
}
[data-theme="light"] p,
[data-theme="light"] span:not(.badge):not(.availability-badge):not(.job-type-badge):not(.skill-tag):not(.brand-accent) {
    color: #374151;
}
[data-theme="light"] .text-muted {
    color: #6B7280 !important;
}
[data-theme="light"] .section-label {
    color: var(--accent) !important;
    border-color: rgba(108,99,255,0.2) !important;
    background: rgba(108,99,255,0.05) !important;
}
[data-theme="light"] .stat-number {
    color: #1A1A2E !important;
}
[data-theme="light"] .stat-label {
    color: #6B7280 !important;
}
[data-theme="light"] .freelancer-card {
    background: #FFFFFF !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .freelancer-card .fw-700,
[data-theme="light"] .freelancer-card .fw-600 {
    color: #1A1A2E !important;
}
[data-theme="light"] .job-card {
    background: #FFFFFF !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Job card type colors in light mode - all unified to freelance purple */
[data-theme="light"] .job-card.card-freelance,
[data-theme="light"] .job-card.card-full-time,
[data-theme="light"] .job-card.card-full_time,
[data-theme="light"] .job-card.card-part-time,
[data-theme="light"] .job-card.card-part_time,
[data-theme="light"] .job-card.card-contract,
[data-theme="light"] .job-card.card-internship {
    background: rgba(108, 99, 255, 0.12) !important;
    border-color: rgba(108, 99, 255, 0.6) !important;
    box-shadow: 0 2px 12px rgba(108, 99, 255, 0.15) !important;
}
[data-theme="light"] .job-card h6,
[data-theme="light"] .job-card .fw-600 {
    color: #1A1A2E !important;
}
[data-theme="light"] .section-header h2 {
    color: #1A1A2E !important;
}
[data-theme="light"] .card-ws {
    color: #1A1A2E !important;
}
[data-theme="light"] .hero-search-box {
    background: #FFFFFF !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .hero-search-box input {
    color: #1A1A2E !important;
}
[data-theme="light"] .hero-search-box input::placeholder {
    color: #9CA3AF !important;
}
/* The dark hover flips text to --white, which is white on white here */
[data-theme="light"] .hero-chip {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.09);
    color: #4B5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .hero-chip:hover {
    color: var(--accent);
    background: rgba(26, 111, 255, 0.06);
}
[data-theme="light"] .hero-chip-all {
    color: var(--accent);
    background: transparent;
}
/* The brand ramp opens on cyan, which measures 1.75:1 on the light
   background - all but invisible. Drop that stop here and run blue into
   purple, both of which clear the 3:1 large-text threshold comfortably. */
[data-theme="light"] .hero-slogan .highlight {
    background: linear-gradient(135deg, #1A6FFF, #A020F0);
    -webkit-background-clip: text;
    background-clip: text;
}

/* On a pale background the same colours need to be stronger and less
   diffuse, otherwise they wash out into grey. */
[data-theme="light"] .hero-blob {
    background: radial-gradient(circle at 30% 28%,
                rgba(0, 200, 255, 0.30) 0%,
                rgba(26, 111, 255, 0.24) 42%,
                rgba(160, 32, 240, 0.18) 66%,
                transparent 74%);
    filter: blur(2px);
}
[data-theme="light"] .hero-dots   { color: rgba(26, 111, 255, 0.55); }
[data-theme="light"] .hero-dots-b { color: rgba(160, 32, 240, 0.48); }
[data-theme="light"] .hero-ring   { border-color: rgba(160, 32, 240, 0.45); }
[data-theme="light"] .hero-wave   { color: #1A6FFF; opacity: .75; }
[data-theme="light"] .popular-tag {
    background: rgba(108,99,255,0.08) !important;
    color: #4B5563 !important;
    border-color: rgba(108,99,255,0.15) !important;
}
[data-theme="light"] .popular-tag:hover {
    background: var(--accent) !important;
    color: #FFFFFF !important;
}
[data-theme="light"] .skill-tag {
    background: rgba(108,99,255,0.08) !important;
    color: var(--accent) !important;
    border-color: rgba(108,99,255,0.2) !important;
}
[data-theme="light"] .availability-badge.badge-available {
    background: rgba(34,197,94,0.1) !important;
    color: #16A34A !important;
    border-color: rgba(34,197,94,0.2) !important;
}
[data-theme="light"] .availability-badge.badge-unavailable {
    background: rgba(239,68,68,0.1) !important;
    color: #DC2626 !important;
    border-color: rgba(239,68,68,0.2) !important;
}
[data-theme="light"] .hero-stats .stat-divider {
    background: rgba(0,0,0,0.1) !important;
}

/* ============================================================
   RTL SUPPORT (Arabic & Kurdish)
============================================================ */
[dir="rtl"] body {
    font-family: 'Roboto', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}
[dir="rtl"] .navbar-nav {
    padding-right: 0;
}
/* Navbar always LTR - logo always on the left */
#mainNav,
#mainNav .container,
#mainNav .navbar-collapse,
#mainNav .navbar-nav {
    direction: ltr !important;
}
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; padding-right: 1rem; }
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .dashboard-sidebar {
    border-right: none;
    border-left: 1px solid var(--border);
}
[dir="rtl"] .sidebar-link {
    text-align: right;
}
[dir="rtl"] .sidebar-link i {
    margin-right: 0;
    margin-left: 10px;
}
[dir="rtl"] .dropdown-menu-end {
    left: 0 !important;
    right: auto !important;
}
[dir="rtl"] .hero h1 {
    text-align: right;
}
[dir="rtl"] .hero-subtitle {
    text-align: right;
}

/* ============================================================
   ARABIC & KURDISH FONT
============================================================ */
[dir="rtl"] *,
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] label {
    font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif !important;
    letter-spacing: 0 !important;
}
[dir="rtl"] .hero h1 {
    font-size: clamp(2rem, 4.5vw, 4rem) !important;
    line-height: 1.3 !important;
}
[dir="rtl"] .navbar-brand {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
}

/* ============================================================
   RTL FONT SIZE FIXES
============================================================ */
[dir="rtl"] .hero h1 {
    font-size: clamp(1.8rem, 3.0vw, 3.2rem) !important;
    line-height: 1.4 !important;
}
[dir="rtl"] h1 { font-size: clamp(1.6rem, 3vw, 2.8rem) !important; }
[dir="rtl"] h2 { font-size: clamp(1.3rem, 2.5vw, 2rem) !important; }
[dir="rtl"] h3 { font-size: clamp(1.1rem, 2vw, 1.6rem) !important; }
[dir="rtl"] .section-title { font-size: clamp(1.3rem, 2.5vw, 2rem) !important; }
[dir="rtl"] .btn { font-size: 0.88rem !important; }
[dir="rtl"] .navbar-brand { font-size: 1.3rem !important; }
[dir="rtl"] .footer-desc { font-size: 0.85rem !important; }
[dir="rtl"] footer .btn { font-size: 0.82rem !important; padding: 7px 12px !important; }

/* Fix freelancer card availability badge in RTL */
[dir="rtl"] .availability-badge {
    right: auto !important;
    left: 12px !important;
}

/* Fix hero card in RTL */
[dir="rtl"] .hero-card {
    direction: ltr !important;
}

[dir="rtl"] .form-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.input-group .input-group-text {
    margin-left: 2px !important;
}
[dir="rtl"] .input-group .input-group-text {
    margin-left: 0 !important;
    margin-right: 2px !important;
}
[dir="rtl"] .forgot-title {
    font-size: 2rem !important;
}

/* ============================================================
   FADE-UP REVEAL
   Elements start lower and transparent, then rise into place as they
   enter the viewport. Anything already on screen plays on page open.

   To remove: delete this block, the .js-reveal script in
   includes/header.php, the reveal block in includes/js/main.js, and the
   reveal-on-scroll / reveal-stagger classes in the page templates.

   Everything is gated behind html.js-reveal, which the page only sets
   when the script that reveals elements is actually running - so the
   content is never left invisible if that script fails.
============================================================ */
.js-reveal .reveal-on-scroll {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.16, .84, .34, 1);
}

.js-reveal .reveal-on-scroll.revealed {
    opacity: 1;
    transform: none;
}

/* Children rise one after another behind their parent. The stagger box is
   either inside the revealing element or the revealing element itself, so
   both shapes are matched throughout. */
.js-reveal .reveal-on-scroll .reveal-stagger > *,
.js-reveal .reveal-on-scroll.reveal-stagger > * {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.16, .84, .34, 1);
}

.js-reveal .revealed .reveal-stagger > *,
.js-reveal .reveal-stagger.revealed > * {
    opacity: 1;
    transform: none;
}

.js-reveal .revealed .reveal-stagger > *:nth-child(1),  .js-reveal .reveal-stagger.revealed > *:nth-child(1)  { transition-delay: .09s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(2),  .js-reveal .reveal-stagger.revealed > *:nth-child(2)  { transition-delay: .18s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(3),  .js-reveal .reveal-stagger.revealed > *:nth-child(3)  { transition-delay: .27s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(4),  .js-reveal .reveal-stagger.revealed > *:nth-child(4)  { transition-delay: .36s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(5),  .js-reveal .reveal-stagger.revealed > *:nth-child(5)  { transition-delay: .45s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(6),  .js-reveal .reveal-stagger.revealed > *:nth-child(6)  { transition-delay: .54s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(7),  .js-reveal .reveal-stagger.revealed > *:nth-child(7)  { transition-delay: .63s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(8),  .js-reveal .reveal-stagger.revealed > *:nth-child(8)  { transition-delay: .72s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(9),  .js-reveal .reveal-stagger.revealed > *:nth-child(9)  { transition-delay: .81s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(10), .js-reveal .reveal-stagger.revealed > *:nth-child(10) { transition-delay: .90s; }
.js-reveal .revealed .reveal-stagger > *:nth-child(n+11), .js-reveal .reveal-stagger.revealed > *:nth-child(n+11) { transition-delay: .99s; }

/* Motion is decoration - honour the OS setting and show everything at once */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal-on-scroll,
    .js-reveal .reveal-on-scroll .reveal-stagger > *,
    .js-reveal .reveal-on-scroll.reveal-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ============================================================
   MOBILE HERO BANNER
   Only below lg, where the illustration column beside the slogan is
   hidden. Everything is drawn - gradient, shapes, cards - so there is no
   artwork to licence and nothing extra to download.
============================================================ */
.hero-banner {
    display: none;
}

@media (max-width: 991.98px) {
    .hero-banner {
        position: relative;
        display: block;
        margin-top: 26px;
        padding: 20px 16px 24px;
        min-height: 208px;
        border-radius: 22px;
        overflow: hidden;
        border: 1px solid var(--border);
        background:
            radial-gradient(120% 90% at 12% 8%, rgba(0, 200, 255, 0.16), transparent 55%),
            radial-gradient(110% 90% at 95% 95%, rgba(160, 32, 240, 0.18), transparent 58%),
            linear-gradient(150deg, rgba(26, 111, 255, 0.10), rgba(10, 10, 15, 0) 60%),
            var(--surface2);
    }

    /* A slow drifting light so the panel is not a flat rectangle */
    .hb-glow {
        position: absolute;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        top: -70px;
        inset-inline-start: -60px;
        background: radial-gradient(circle, rgba(0, 200, 255, 0.30), transparent 68%);
        filter: blur(6px);
        pointer-events: none;
        animation: hbGlow 12s ease-in-out infinite;
    }
    @keyframes hbGlow {
        0%, 100% { transform: translate(0, 0)      scale(1); }
        50%      { transform: translate(34px, 22px) scale(1.12); }
    }

    .hb-dots {
        position: absolute;
        width: 60px;
        height: 60px;
        bottom: 14px;
        inset-inline-start: 14px;
        color: rgba(0, 200, 255, 0.38);
        pointer-events: none;
        animation: decoDrift 11s ease-in-out infinite;
    }

    .hb-ring {
        position: absolute;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        border: 2px dashed rgba(160, 32, 240, 0.38);
        top: -26px;
        inset-inline-end: -26px;
        pointer-events: none;
        animation: decoSpin 26s linear infinite;
    }

    /* ---- Cards ---- */
    .hero-banner .hb-card {
        position: relative;
        z-index: 1;
        border-radius: 15px;
        border: 1px solid var(--border);
        /* Solid first: color-mix is unsupported on older Android browsers,
           where the card would otherwise have no background at all. */
        background: var(--surface);
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .hb-card-person {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 13px;
        animation: float1 5s ease-in-out infinite;
    }
    .hb-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
    .hb-person-text { min-width: 0; flex: 1; }
    .hb-name { font-weight: 700; font-size: 0.92rem; line-height: 1.2; }
    .hb-role { font-size: 0.74rem; color: var(--text-muted); }
    .hb-badge {
        font-size: 0.66rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 50px;
        color: #22C55E;
        background: rgba(34, 197, 94, 0.14);
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Overlaps the card above, the way the desktop cluster does. Width is
       held at 62% so its leading edge clears the stat chip sitting in the
       opposite corner - wider and the chip covers its tags. */
    .hb-card-job {
        width: 62%;
        margin-top: -8px;
        margin-inline-start: auto;
        padding: 11px 13px;
        animation: float2 6.5s ease-in-out infinite;
    }
    .hb-job-top {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--accent);
        margin-bottom: 3px;
    }
    .hb-job-title { font-weight: 700; font-size: 0.86rem; line-height: 1.25; }
    .hb-tags { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
    .hb-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.68rem;
        padding: 3px 9px;
        border-radius: 50px;
        color: var(--text-muted);
        background: var(--surface2);
        border: 1px solid var(--border);
    }

    /* Qualified with the parent, otherwise .hero-banner .hb-card above wins
       on specificity and forces this back to position: relative, where it
       stretches to the full panel width instead of hugging its text. */
    .hero-banner .hb-card-stat {
        position: absolute;
        z-index: 2;
        bottom: 16px;
        inset-inline-start: 16px;
        inset-inline-end: auto;
        width: max-content;
        padding: 9px 14px;
        text-align: center;
        animation: float3 4.5s ease-in-out infinite;
    }
    .hb-stat-num {
        font-size: 1.28rem;
        font-weight: 800;
        line-height: 1;
        background: linear-gradient(135deg, #00C8FF, #1A6FFF, #A020F0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .hb-stat-label { font-size: 0.63rem; color: var(--text-muted); margin-top: 2px; }

    /* The light theme needs stronger tints or the panel washes out to grey */
    [data-theme="light"] .hero-banner {
        background:
            radial-gradient(120% 90% at 12% 8%, rgba(0, 200, 255, 0.20), transparent 55%),
            radial-gradient(110% 90% at 95% 95%, rgba(160, 32, 240, 0.20), transparent 58%),
            linear-gradient(150deg, rgba(26, 111, 255, 0.12), rgba(255, 255, 255, 0) 60%),
            #FFFFFF;
    }
    [data-theme="light"] .hb-dots { color: rgba(26, 111, 255, 0.45); }
    [data-theme="light"] .hb-ring { border-color: rgba(160, 32, 240, 0.42); }
    [data-theme="light"] .hero-banner .hb-card { background: rgba(255, 255, 255, 0.92); }

    @media (prefers-reduced-motion: reduce) {
        .hb-glow, .hb-dots, .hb-ring,
        .hb-card-person, .hb-card-job, .hb-card-stat { animation: none !important; }
    }
}