/* =========================
   Fonts: loaded via <link> tags in layouts/app.blade.php
   (with rel=preconnect) instead of @import here, so the
   browser can fetch them in parallel with this stylesheet
   instead of discovering them only after this file loads.
=========================*/

/* =========================
   Brand palette (matches the JobLens logo:
   deep navy + blue-to-violet gradient)
=========================*/
:root{
    --jl-navy:#12163f;
    --jl-navy-2:#1c2266;
    --jl-blue:#3b6df6;
    --jl-blue-light:#6f95ff;
    --jl-purple:#7c3aed;
    --jl-purple-2:#a63ff5;
    --jl-purple-light:#c084fc;
    --jl-gradient:linear-gradient(135deg,var(--jl-blue) 0%,var(--jl-purple) 55%,var(--jl-purple-2) 100%);
    --jl-shadow:0 15px 35px rgba(90,60,230,.25);
}

#how-it-works{
    scroll-margin-top:90px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins','Cairo',sans-serif;
}

html{
    height:100%;
}

body{
    background:#f8f9fc;
    color:#222;
    min-height:100%;
    display:flex;
    flex-direction:column;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

/* Arabic script (loop letters, connectors, diacritics) reads more
   comfortably with a bit more vertical breathing room than Latin
   text needs. Elements with their own tuned line-height (hero
   heading, badges, buttons...) keep it — this only fills in the gap
   for plain body copy that doesn't set one explicitly. */
:lang(ar){
    line-height:1.85;
}

.page-content{
    flex:1 0 auto;
}

/* =========================
   Navbar
=========================*/

.navbar{
    background:#fff !important;
    padding:14px 0;
}

.navbar-brand{
    font-weight:700;
    font-size:30px;
}

.logo-icon{
    height:58px;
    width:auto;
    object-fit:contain;
}

.brand-word .job{
    color:var(--jl-navy);
}

.brand-word .lens{
    background:var(--jl-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--jl-purple);
}

.nav-link{
    color:#222 !important;
    font-weight:500;
    margin:0 12px;
    transition:.3s;
}

.nav-link:hover{
    color:var(--jl-purple) !important;
}

.btn-primary{
    background:var(--jl-gradient);
    border:none;
    border-radius:10px;
    padding:10px 25px;
    box-shadow:var(--jl-shadow);
    transition:.3s;
}

.btn-primary:hover{
    filter:brightness(1.08);
    transform:translateY(-2px);
    box-shadow:0 20px 40px rgba(90,60,230,.35);
}

.btn-outline-primary{
    border:2px solid var(--jl-purple);
    color:var(--jl-purple);
    border-radius:10px;
}

.btn-outline-primary:hover{
    background:var(--jl-purple);
    color:white;
}

/* Glass button used on dark hero */
.btn-glass{
    border:1.5px solid rgba(255,255,255,.4);
    color:#fff;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(6px);
    transition:.3s;
}

.btn-glass:hover{
    background:rgba(255,255,255,.18);
    color:#fff;
    transform:translateY(-2px);
}

/* Reusable gradient text */
.text-gradient{
    background:var(--jl-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* =========================
   Hero
=========================*/

.hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--jl-navy) 0%,var(--jl-navy-2) 100%);
    padding:110px 0;
}

.hero::before,
.hero::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    z-index:0;
    pointer-events:none;
}

.hero::before{
    width:420px;
    height:420px;
    background:var(--jl-purple);
    opacity:.35;
    top:-120px;
    right:-100px;
}

.hero::after{
    width:360px;
    height:360px;
    background:var(--jl-blue);
    opacity:.3;
    bottom:-140px;
    left:-80px;
}

.hero .container{
    position:relative;
    z-index:1;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:#e4e2ff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    padding:8px 18px;
    border-radius:50px;
    margin-bottom:22px;
}

/* Letter-spacing is a Latin-script convention: added space between
   Arabic letters breaks the connections a reader relies on to tell
   words apart, so turn it off wherever the page is in RTL/Arabic. */
[dir="rtl"] .hero-badge{
    letter-spacing:normal;
}

.hero-badge .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--jl-blue-light);
    box-shadow:0 0 10px var(--jl-blue-light);
}

.hero h1{
    /* Fluid scale instead of fixed breakpoint jumps: ~35px on a
       small phone, ~65px on desktop, sized proportionally to the
       screen at every width in between instead of snapping. */
    font-size:clamp(2.2rem, 1.55rem + 3.2vw, 4.0625rem);
    font-weight:800;
    line-height:1.15;
}

.hero p{
    font-size:18px;
    color:#c9c9e6;
    margin:25px 0;
}

.hero-image-wrap{
    position:relative;
}

.hero-image-wrap::before{
    content:"";
    position:absolute;
    inset:-18px;
    background:var(--jl-gradient);
    border-radius:26px;
    filter:blur(18px);
    opacity:.55;
    z-index:0;
}

.hero img{
    position:relative;
    z-index:1;
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* =========================
   Hero feature highlights
   (kept alongside .stats below — currently unused, available if
   the hero switches back to plain feature callouts instead of
   numeric stats)
=========================*/

.hero-features{
    margin-top:45px;
    display:flex;
    flex-wrap:wrap;
    gap:14px 28px;
}

.hero-feature{
    display:flex;
    align-items:center;
    gap:10px;
    color:#e4e2ff;
    font-size:14px;
    font-weight:600;
}

.hero-feature i{
    color:var(--jl-blue-light);
    font-size:16px;
}

/* =========================
   Statistics
=========================*/

.hero .stats{
    margin-top:50px;
}

.hero .stats .col-3{
    position:relative;
}

.hero .stats .col-3:not(:first-child)::before{
    content:"";
    position:absolute;
    inset-inline-start:0;
    top:10px;
    bottom:10px;
    width:1px;
    background:rgba(255,255,255,.15);
}

.hero .stats h3{
    font-weight:700;
    font-size:28px;
    background:var(--jl-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero small{
    color:#a8a8cf;
}

/* =========================
   Sections
=========================*/

section{
    padding:90px 0;
}

section h2{
    font-weight:700;
    line-height:1.25;
    margin-bottom:15px;
}

.section-subtitle{
    text-align:center;
    color:#4b5563;
    max-width:560px;
    margin:0 auto 50px;
}

.section-badge{
    display:block;
    text-align:center;
    color:var(--jl-purple);
    font-weight:700;
    letter-spacing:1.5px;
    font-size:15px;
    text-transform:uppercase;
    margin-bottom:10px;
}

[dir="rtl"] .section-badge{
    letter-spacing:normal;
    /* Arabic has no letter case, and uppercase transforms can
       otherwise confuse some browsers' Arabic shaping. */
    text-transform:none;
}

/* =========================
   Icon badges (How It Works / Why Choose)
=========================*/

.icon-badge{
    position:relative;
    width:90px;
    height:90px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    line-height:1;
    overflow:hidden;
    /* Outer lift + a soft inner rim of light so the circle reads as
       a glossy sphere instead of a flat, plain-colored dot. */
    box-shadow:
        0 15px 30px rgba(80,50,200,.25),
        inset 0 2px 3px rgba(255,255,255,.45),
        inset 0 -10px 14px rgba(0,0,0,.18);
}

/* Glass-like sheen across the top of the circle. */
.icon-badge::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:linear-gradient(155deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 45%);
    pointer-events:none;
}

.icon-badge i{
    /* Flexbox centers the icon's line box, not its inked glyph —
       and font-awesome glyphs don't all sit dead-center within
       their own em-square (a gem/diamond shape especially looks
       shifted upward otherwise). Locking line-height to the
       glyph's own font-size removes that invisible padding so the
       circle centers on what you actually see, not on metrics. */
    position:relative;
    z-index:1;
    line-height:1;
    display:inline-flex;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));
}

.icon-badge.grad-1{ background:linear-gradient(135deg,var(--jl-blue),var(--jl-purple)); }
.icon-badge.grad-2{ background:linear-gradient(135deg,var(--jl-purple),var(--jl-purple-2)); }
.icon-badge.grad-3{ background:linear-gradient(135deg,var(--jl-navy-2),var(--jl-blue)); }
.icon-badge.grad-4{ background:linear-gradient(135deg,var(--jl-purple-2),var(--jl-navy-2)); }

.icon-badge-sm{
    width:46px;
    height:46px;
    min-width:46px;
    margin:0;
    font-size:16px;
    box-shadow:0 8px 18px rgba(80,50,200,.2);
}

/* =========================
   Soft badges (job tags, etc.)
=========================*/

.badge-soft{
    font-weight:600;
    font-size:13px;
    padding:6px 14px;
    border-radius:50px;
    display:inline-block;
    /* A skill/tag badge is meant to hold a short word or two. If one
       ever ends up holding a whole sentence (e.g. a company pasting
       a paragraph into the skills field instead of comma-separating
       it), contain it with an ellipsis instead of letting it wrap
       across several lines and throw off the whole card's layout. */
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:middle;
}

.badge-soft-purple{ background:rgba(124,58,237,.12); color:var(--jl-purple); }
.badge-soft-blue{ background:rgba(59,109,246,.12); color:var(--jl-blue); }
.badge-soft-green{ background:rgba(16,185,129,.12); color:#059669; }
.badge-soft-red{ background:rgba(239,68,68,.12); color:#dc2626; }
.badge-soft-gray{ background:rgba(107,114,128,.12); color:#4b5563; }

/* =========================
   Category list (Jobs page)
=========================*/

.list-group-item-action{
    border:none;
    padding:14px 20px;
    font-weight:500;
    color:#374151;
}

.list-group-item-action:hover,
.list-group-item-action:focus{
    background:rgba(124,58,237,.08);
    color:var(--jl-purple);
}

/* =========================
   Auth card
=========================*/

.auth-card{
    border-radius:20px;
}

.auth-icon{
    position:relative;
    width:64px;
    height:64px;
    margin:0 auto 18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    line-height:1;
    overflow:hidden;
    background:var(--jl-gradient);
    box-shadow:
        var(--jl-shadow),
        inset 0 2px 3px rgba(255,255,255,.45),
        inset 0 -8px 12px rgba(0,0,0,.18);
}

.auth-icon::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:linear-gradient(155deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 45%);
    pointer-events:none;
}

.auth-icon i{
    position:relative;
    z-index:1;
    line-height:1;
    display:inline-flex;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));
}

/* =========================
   Cards
=========================*/

.card{
    border:none;
    border-radius:18px;
}

/* Opt-in hover lift — only for cards that are purely informational
   showcases (feature/value cards), not for cards that wrap a form,
   a table, or other in-place content where a lift on hover doesn't
   mean anything and just feels like visual noise. */
.card-hover{
    transition:transform .3s ease,box-shadow .3s ease;
}

.card-hover:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 35px rgba(90,60,230,.18);
}

.card i{
    margin-bottom:20px;
}

/* .card i's bottom margin above is meant for a bare icon sitting
   directly above card text — but it also matches an icon nested
   inside a .icon-badge circle, where flexbox then centers the
   glyph's margin box instead of the glyph itself, visibly pushing
   it upward inside the circle by that same margin. Zero it out
   specifically for that case. */
.card .icon-badge i{
    margin-bottom:0;
}

.card .table{
    margin-bottom:0;
}

.card .table thead th{
    font-weight:600;
    color:#374151;
    border-bottom-width:1px;
}

/* =========================
   Footer
=========================*/

.footer{
    background:var(--jl-navy);
    padding:60px 0 20px;
}

.footer h3,
.footer h5{
    color:white;
    margin-bottom:20px;
}

.footer p,
.footer a{
    color:#d3d3d3;
    text-decoration:none;
}

.footer a:hover{
    color:white;
}

/* Social icons — reused on the footer and the Contact page sidebar.
   Real profile URLs aren't set up yet, so these are placeholders
   (href="#") until the accounts exist; swap the hrefs in once they
   do. */
a.footer-social-icon{
    color:inherit;
    display:inline-block;
    transition:color .3s ease,transform .3s ease;
}

a.footer-social-icon:hover{
    color:var(--jl-blue-light);
    transform:scale(1.2);
}

/* =========================
   Responsive
=========================*/

@media(max-width:991px){

.hero{
    text-align:center;
}

.hero img{
    margin-top:40px;
}

.hero-features{
    justify-content:center;
}

.hero .stats .col-3:not(:first-child)::before{
    display:none;
}

}

@media(max-width:768px){

.logo-icon{
    height:44px;
    width:auto;
}

.navbar-brand{
    font-size:25px;
}

section{
    padding:60px 0;
}

.card{
    margin-bottom:25px;
}

/* Comfortable tap targets on phones: action buttons in tables
   (Accept/Reject/Edit/Delete...) are packed close together, so
   give them a bit more height/width to tap accurately. */
.btn-sm{
    padding:.42rem .85rem;
    min-height:38px;
}

}

/* =========================
   Keyboard accessibility
   Visible, on-brand focus ring for keyboard users only —
   :focus-visible skips it for mouse/touch clicks, so it never
   adds visual noise to normal pointer interaction.
=========================*/

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:3px solid var(--jl-purple);
    outline-offset:2px;
    border-radius:6px;
}

/* =========================
   RTL-aware directional icons
   Plain Font Awesome glyphs (e.g. an arrow pointing "next") don't
   mirror automatically under dir="rtl" the way Bootstrap's own
   logical-property classes do. Apply this class to any icon whose
   direction is meaningful (arrows, chevrons) so it flips in Arabic.
=========================*/

[dir="rtl"] .icon-flip-rtl{
    display:inline-block;
    transform:scaleX(-1);
}

/* =========================
   Reduced motion
   Respect the OS-level "reduce motion" preference: keep hover/focus
   states functional but drop the animated movement.
=========================*/

@media (prefers-reduced-motion: reduce){
    *{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }

    .card-hover:hover,
    .btn-primary:hover,
    .btn-glass:hover{
        transform:none;
    }
}

@media (prefers-reduced-motion: no-preference){
    html{
        scroll-behavior:smooth;
    }
}