/* ============================================================
   XP Freelancer — Guest homepage redesign overlay
   Loaded only when user is NOT logged in.
   Keeps all info & images. Just restyles.
   ============================================================ */

:root {
    --xp-red:        hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
    --xp-red-dark:   hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 8%));
    --xp-red-soft:   hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .08);
    --xp-text:       #1f2328;
    --xp-text-soft:  #5d6066;
    --xp-text-mut:   #95979d;
    --xp-card:       #ffffff;
    --xp-bg:         #ffffff;
    --xp-bg-alt:     #fafafa;
    --xp-border:     #e4e5e7;
    --xp-radius:     10px;
    --xp-radius-lg:  14px;
    --xp-shadow-sm:  0 1px 2px rgba(0,0,0,.04);
    --xp-shadow:     0 4px 14px rgba(0,0,0,.06);
    --xp-shadow-lg:  0 14px 40px rgba(0,0,0,.08);
}

/* ---------------- Body ---------------- */
body { background: var(--xp-bg) !important; color: var(--xp-text); }

/* ---------------- Top nav / header ---------------- */
header, .navbar, nav.relative {
    background: var(--xp-card) !important;
    border-bottom: 1px solid var(--xp-border);
    box-shadow: var(--xp-shadow-sm);
}

/* ---------------- HERO (Herd-style: white bg + red blob) ---------------- */
section[class*="hero"],
.hero,
section:has(> h1.text-3xl):first-of-type,
section:first-of-type[class*="bg-"] {
    background: #ffffff !important;
    color: var(--xp-text) !important;
    padding-top: 96px !important;
    padding-bottom: 96px !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* The gradient red/orange blob */
section[class*="hero"]::before,
.hero::before {
    content: "";
    position: absolute;
    top: 50%; right: -8%;
    width: 720px; height: 720px;
    transform: translateY(-50%);
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 120, 90, .55) 0%, transparent 55%),
        radial-gradient(circle at 65% 55%, rgba(229, 30, 47, .85) 0%, transparent 55%),
        radial-gradient(circle at 55% 30%, rgba(255, 180, 90, .35) 0%, transparent 50%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}
section[class*="hero"]::after,
.hero::after {
    content: "";
    position: absolute;
    top: 35%; right: 5%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(229, 30, 47, .9) 0%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
}

/* Make hero content sit above the blob */
section[class*="hero"] > *,
.hero > * { position: relative; z-index: 1; }

/* Layout: text left, blob right */
section[class*="hero"] .container,
section[class*="hero"] > div:first-child {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* Huge bold heading like Herd */
section[class*="hero"] h1,
.hero h1 {
    font-size: clamp(40px, 6.5vw, 88px) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
    color: #0a0a0a !important;
    line-height: .98 !important;
    max-width: 720px;
    margin-bottom: 22px !important;
}

section[class*="hero"] p,
.hero p {
    color: var(--xp-text-soft) !important;
    font-size: clamp(16px, 1.4vw, 20px) !important;
    line-height: 1.5 !important;
    max-width: 560px;
    margin-bottom: 32px !important;
}

/* Search form: floating, soft shadow */
section[class*="hero"] form,
.hero form {
    box-shadow: 0 20px 50px rgba(229, 30, 47, .15), 0 4px 12px rgba(0,0,0,.06) !important;
    border-radius: 12px !important;
    overflow: hidden;
    max-width: 580px;
    background: #fff;
    border: 1px solid var(--xp-border);
}
section[class*="hero"] input[type="search"],
section[class*="hero"] input[type="text"] {
    border-radius: 0 !important;
    height: 62px !important;
    padding: 0 22px !important;
    font-size: 16px !important;
    border: 0 !important;
    background: transparent !important;
}
section[class*="hero"] input[type="search"]:focus,
section[class*="hero"] input[type="text"]:focus {
    outline: none !important; box-shadow: none !important;
}
section[class*="hero"] button[type="submit"] {
    height: 62px !important;
    padding: 0 28px !important;
    border-radius: 0 !important;
    background: #0a0a0a !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: 0 !important;
    transition: background .15s;
}
section[class*="hero"] button[type="submit"]:hover { background: var(--xp-red) !important; }

/* "Popular: ..." chips under search */
section[class*="hero"] a[href*="search"],
section[class*="hero"] a[href*="category"] {
    color: var(--xp-text-soft) !important;
    background: rgba(255,255,255,.6) !important;
    border: 1px solid var(--xp-border) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all .15s;
    backdrop-filter: blur(6px);
}
section[class*="hero"] a[href*="search"]:hover,
section[class*="hero"] a[href*="category"]:hover {
    background: #0a0a0a !important;
    color: #fff !important;
    border-color: #0a0a0a !important;
}

/* Mobile: shrink everything */
@media (max-width: 768px) {
    section[class*="hero"], .hero { padding-top: 60px !important; padding-bottom: 60px !important; }
    section[class*="hero"]::before, .hero::before { width: 400px; height: 400px; right: -30%; opacity: .7; }
    section[class*="hero"]::after, .hero::after { width: 180px; height: 180px; }
    section[class*="hero"] h1, .hero h1 { font-size: 40px !important; }
    section[class*="hero"] input { height: 54px !important; }
    section[class*="hero"] button[type="submit"] { height: 54px !important; padding: 0 18px !important; }
}

/* Trusted-by row under hero */
section[class*="hero"] + section img,
.trusted-by img { filter: brightness(0) invert(.7); opacity: .65; }

/* ---------------- Section spacing ---------------- */
main > section, body > section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
section h2 {
    font-size: clamp(20px, 2.4vw, 28px) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    color: var(--xp-text);
}
section p.text-gray-500,
section p.text-gray-600 { color: var(--xp-text-soft) !important; }

/* ---------------- Category cards ---------------- */
.categories .card,
section a[href*="category"],
section a[href*="categories"] {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-border) !important;
    border-radius: var(--xp-radius) !important;
    box-shadow: var(--xp-shadow-sm) !important;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    overflow: hidden;
}
.categories .card:hover,
section a[href*="category"]:hover,
section a[href*="categories"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--xp-shadow) !important;
    border-color: var(--xp-red) !important;
}
.categories .card img,
section a[href*="category"] img,
section a[href*="categories"] img {
    height: 130px;
    object-fit: cover;
    width: 100%;
}

/* ---------------- Gig cards (popular services / freelancers) ---------------- */
.gigs .card,
.gig-card,
section .grid a[href*="service"],
section .grid > div:has(img.lazy) {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-border) !important;
    border-radius: var(--xp-radius) !important;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.gigs .card:hover,
.gig-card:hover,
section .grid a[href*="service"]:hover,
section .grid > div:has(img.lazy):hover {
    transform: translateY(-3px);
    box-shadow: var(--xp-shadow);
}
.gig-card img { aspect-ratio: 16/10; object-fit: cover; }

/* Star ratings */
.rating,
.stars,
[class*="star"] { color: #ffb500 !important; }

/* Price tag */
.price,
.gig-price,
span[class*="price"] {
    color: var(--xp-text) !important;
    font-weight: 700 !important;
    font-size: 15px;
}

/* ---------------- Become a seller / CTA blocks ---------------- */
section[class*="cta"],
.become-seller {
    background: linear-gradient(135deg, #fdecec 0%, #fff 100%) !important;
    border-radius: var(--xp-radius-lg) !important;
    padding: 48px !important;
}
section[class*="cta"] h2,
.become-seller h2 { color: var(--xp-text) !important; }

/* ---------------- Buttons ---------------- */
.btn-primary,
button.bg-primary-600,
a.bg-primary-600,
.bg-primary-600 {
    background: var(--xp-red) !important;
    color: #fff !important;
    border-color: var(--xp-red) !important;
    border-radius: 8px !important;
    font-weight: 600;
    transition: background .15s, transform .12s;
}
button.bg-primary-600:hover,
a.bg-primary-600:hover,
.hover\\:bg-primary-700:hover {
    background: var(--xp-red-dark) !important;
    transform: translateY(-1px);
}

.btn-outline,
a.border-primary-600,
a.text-primary-600 {
    border: 1px solid var(--xp-red) !important;
    color: var(--xp-red) !important;
    background: transparent !important;
    border-radius: 8px !important;
}
.btn-outline:hover,
a.border-primary-600:hover,
a.text-primary-600:hover {
    background: var(--xp-red) !important;
    color: #fff !important;
}

/* ---------------- Sliders / Swiper nav ---------------- */
.swiper-button-prev, .swiper-button-next {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-border) !important;
    box-shadow: var(--xp-shadow);
    color: var(--xp-text) !important;
    width: 40px !important; height: 40px !important;
    border-radius: 50% !important;
}
.swiper-button-prev::after, .swiper-button-next::after {
    font-size: 14px !important; font-weight: 700 !important; color: var(--xp-text) !important;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
    border-color: var(--xp-red) !important;
    color: var(--xp-red) !important;
}

/* ---------------- Testimonials ---------------- */
.testimonial,
section[class*="testimonial"] .card {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-border) !important;
    border-radius: var(--xp-radius) !important;
    padding: 24px !important;
    box-shadow: var(--xp-shadow-sm) !important;
}

/* ---------------- Footer ---------------- */
footer {
    background: #0f1012 !important;
    color: rgba(255,255,255,.7) !important;
    padding-top: 56px !important;
    padding-bottom: 24px !important;
}
footer h3, footer h4, footer h5 {
    color: #fff !important;
    font-weight: 700 !important;
    margin-bottom: 14px;
}
footer a {
    color: rgba(255,255,255,.65) !important;
    transition: color .12s;
}
footer a:hover { color: #fff !important; }
footer .border-t { border-color: rgba(255,255,255,.1) !important; }

/* ---------------- Misc polish ---------------- */
img.lazy { background: #f3f4f6; }
.bg-slate-50, .bg-gray-50 { background: var(--xp-bg-alt) !important; }

/* Smooth section dividers */
section + section { border-top: 1px solid var(--xp-border); }
section[class*="hero"] + section { border-top: 0; }

/* ---------------- Responsive ---------------- */
@media (max-width: 768px) {
    section[class*="hero"] { padding-top: 40px !important; padding-bottom: 48px !important; }
    section[class*="hero"] h1 { font-size: 26px !important; }
    main > section, body > section { padding-top: 36px !important; padding-bottom: 36px !important; }
    section[class*="cta"] { padding: 28px !important; }
}