/* ============================================================
   XP Freelancer — Neumorphism (soft & subtle) for the Home page
   Scoped under .xpn-home so nothing else on the site is affected.
   Brand accent: var(--xpn-brand)
   ============================================================ */

:root {
    --xpn-bg:        #eceff4;
    --xpn-surface:   #f0f3f8;
    --xpn-light:     rgba(255, 255, 255, 0.92);
    --xpn-dark:      rgba(163, 177, 198, 0.40);
    --xpn-brand:     #e74c3c;
    --xpn-radius:    20px;
}

/* Page canvas — neumorphism needs a soft tinted background, not pure white */
html body.application:has(.xpn-home),
html body:has(.xpn-home) {
    background-color: var(--xpn-bg) !important;
}
.xpn-home {
    background-color: var(--xpn-bg);
}

/* ---------- Raised surface (the core neumorphic look) ---------- */
.xpn-home .gig-card > div,
.xpn-home .xpn-card {
    background: var(--xpn-surface) !important;
    border-radius: var(--xpn-radius) !important;
    box-shadow:
         7px  7px 16px var(--xpn-dark),
        -7px -7px 16px var(--xpn-light) !important;
    /* remove the old flat ring/border so the shadow reads cleanly */
    --tw-ring-shadow: 0 0 #0000 !important;
    border: none !important;
    transition: box-shadow .28s ease, transform .28s ease !important;
}

.xpn-home .gig-card > div:hover,
.xpn-home .xpn-card:hover {
    transform: translateY(-3px);
    box-shadow:
         10px  10px 22px var(--xpn-dark),
        -10px -10px 22px var(--xpn-light) !important;
}

/* Gig thumbnail sits flush inside the soft card */
.xpn-home .gig-card > div > a:first-child img,
.xpn-home .gig-card > div > a:first-child {
    border-radius: var(--xpn-radius) var(--xpn-radius) 0 0;
}

/* ---------- Inset elements (search fields, wells) ---------- */
.xpn-home input[type="text"],
.xpn-home input[type="search"],
.xpn-home input[type="email"],
.xpn-home .xpn-inset {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}

.xpn-home input:focus {
    outline: none !important;
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light),
        0 0 0 2px rgba(210, 65, 43, 0.28) !important;
}

/* ---------- Buttons ---------- */
.xpn-home .bg-primary-600,
.xpn-home .xpn-btn {
    background: var(--xpn-brand) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #fff !important;
    box-shadow:
         5px  5px 12px var(--xpn-dark),
        -5px -5px 12px var(--xpn-light) !important;
    transition: box-shadow .22s ease, transform .22s ease !important;
}
.xpn-home .bg-primary-600:hover,
.xpn-home .xpn-btn:hover {
    transform: translateY(-1px);
    box-shadow:
         7px  7px 16px var(--xpn-dark),
        -7px -7px 16px var(--xpn-light) !important;
}
.xpn-home .bg-primary-600:active,
.xpn-home .xpn-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 4px 4px 9px rgba(0, 0, 0, .18),
        inset -3px -3px 8px rgba(255, 255, 255, .18) !important;
}

/* ---------- Category / section tiles ---------- */
.xpn-home .rounded-2xl.overflow-hidden,
.xpn-home .bg-gray-100.rounded-md,
.xpn-home .bg-white.rounded-md.shadow {
    background: var(--xpn-surface) !important;
    border-radius: var(--xpn-radius) !important;
    box-shadow:
         7px  7px 16px var(--xpn-dark),
        -7px -7px 16px var(--xpn-light) !important;
    border: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* Chips / tags → soft pill */
.xpn-home .rounded-full.bg-gray-100,
.xpn-home .bg-gray-100.rounded-full {
    background: var(--xpn-surface) !important;
    box-shadow:
         3px  3px 7px var(--xpn-dark),
        -3px -3px 7px var(--xpn-light) !important;
    border: none !important;
}

/* Keep imagery crisp — never emboss photos */
.xpn-home img { box-shadow: none !important; }

/* ---------- Dark mode (site toggles a .dark class — do NOT use prefers-color-scheme) ---------- */
.dark, .dark .xpn-home {
    --xpn-bg:      #16171b;
    --xpn-surface: #1d1f24;
    --xpn-light:   rgba(255, 255, 255, 0.045);
    --xpn-dark:    rgba(0, 0, 0, 0.55);
}

/* Small screens — soften the depth so it doesn't feel heavy */
@media (max-width: 640px) {
    .xpn-home .gig-card > div,
    .xpn-home .xpn-card {
        box-shadow:
             5px  5px 11px var(--xpn-dark),
            -5px -5px 11px var(--xpn-light) !important;
    }
}

/* ============================================================
   Footer — neumorphic surface to match the Home page.
   Scoped to pages that render .xpn-home so other pages keep
   the existing dark footer until we roll it out site-wide.
   ============================================================ */
body:has(.xpn-home) footer {
    background: var(--xpn-surface) !important;
    color: #4b5563 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 10px 20px -14px var(--xpn-dark);
}

/* Column headings */
body:has(.xpn-home) footer h1,
body:has(.xpn-home) footer h2,
body:has(.xpn-home) footer h3,
body:has(.xpn-home) footer h4,
body:has(.xpn-home) footer strong {
    color: #1f2937 !important;
}

/* Links — readable on the light surface, brand red on hover */
body:has(.xpn-home) footer a {
    color: #5b6473 !important;
    transition: color .18s ease;
}
body:has(.xpn-home) footer a:hover {
    color: var(--xpn-brand) !important;
}

/* Muted/legal text */
body:has(.xpn-home) footer span,
body:has(.xpn-home) footer p,
body:has(.xpn-home) footer li {
    color: #6b7280 !important;
}

/* Soft raised chips/buttons inside the footer (language, socials, etc.) */
body:has(.xpn-home) footer button,
body:has(.xpn-home) footer select {
    background: var(--xpn-surface) !important;
    color: #374151 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow:
         4px  4px 9px var(--xpn-dark),
        -4px -4px 9px var(--xpn-light) !important;
}
body:has(.xpn-home) footer button:active {
    box-shadow:
        inset 3px 3px 7px var(--xpn-dark),
        inset -3px -3px 7px var(--xpn-light) !important;
}

/* Keep logos/payment icons legible on a light background */
body:has(.xpn-home) footer img { filter: none !important; }

/* Dark mode — keep the footer dark and soft */
.dark body:has(.xpn-home) footer,
body.dark:has(.xpn-home) footer {
    background: var(--xpn-surface) !important;
    color: rgba(255,255,255,0.72) !important;
    border-top-color: rgba(255,255,255,0.06);
}
.dark body:has(.xpn-home) footer a,
body.dark:has(.xpn-home) footer a { color: rgba(255,255,255,0.62) !important; }
.dark body:has(.xpn-home) footer h1,
.dark body:has(.xpn-home) footer h2,
.dark body:has(.xpn-home) footer h3,
.dark body:has(.xpn-home) footer h4,
.dark body:has(.xpn-home) footer strong { color: #f3f4f6 !important; }

/* ============================================================
   AUTH PAGES (login / register / password) — neumorphic
   Scope: body.xpn-auth  •  Brand: var(--color-primary)
   ============================================================ */
body.xpn-auth {
    background: var(--xpn-bg) !important;
}

/* Soft canvas with a faint brand glow instead of the old gradient */
body.xpn-auth .xpn-auth-bg {
    background: var(--xpn-bg) !important;
    background-image:
        radial-gradient(900px 620px at 12% 0%, rgba(231, 76, 60, 0.10), rgba(231, 76, 60, 0) 60%),
        radial-gradient(760px 560px at 100% 100%, rgba(163, 177, 198, 0.28), rgba(163, 177, 198, 0) 62%) !important;
}

/* The card itself — the hero of the neumorphic look */
body.xpn-auth .auth-card {
    background: var(--xpn-surface);
    border-radius: 26px;
    padding: 4px;
    box-shadow:
         12px  12px 28px var(--xpn-dark),
        -12px -12px 28px var(--xpn-light);
}

/* Inputs — pressed-in */
body.xpn-auth input[type="text"],
body.xpn-auth input[type="email"],
body.xpn-auth input[type="password"],
body.xpn-auth input[type="tel"],
body.xpn-auth select,
body.xpn-auth textarea {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #1f2937 !important;
    box-shadow:
        inset 5px 5px 10px var(--xpn-dark),
        inset -5px -5px 10px var(--xpn-light) !important;
}
body.xpn-auth input:focus,
body.xpn-auth select:focus,
body.xpn-auth textarea:focus {
    outline: none !important;
    box-shadow:
        inset 5px 5px 10px var(--xpn-dark),
        inset -5px -5px 10px var(--xpn-light),
        0 0 0 2px rgba(231, 76, 60, 0.30) !important;
}
body.xpn-auth ::placeholder { color: #9aa3b2 !important; }

/* Primary action button — solid brand, softly raised */
body.xpn-auth button[type="submit"],
body.xpn-auth .bg-primary-600 {
    background: var(--color-primary, #e74c3c) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
         6px  6px 14px var(--xpn-dark),
        -6px -6px 14px var(--xpn-light) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
body.xpn-auth button[type="submit"]:hover,
body.xpn-auth .bg-primary-600:hover {
    transform: translateY(-1px);
    box-shadow:
         8px  8px 18px var(--xpn-dark),
        -8px -8px 18px var(--xpn-light) !important;
}
body.xpn-auth button[type="submit"]:active,
body.xpn-auth .bg-primary-600:active {
    transform: translateY(0);
    box-shadow:
        inset 4px 4px 9px rgba(0,0,0,.20),
        inset -3px -3px 8px rgba(255,255,255,.20) !important;
}

/* Social / secondary buttons — soft raised tiles (like the reference) */
body.xpn-auth a[href*="auth/"]:not([href*="password"]),
body.xpn-auth button:not([type="submit"]) {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
         5px  5px 11px var(--xpn-dark),
        -5px -5px 11px var(--xpn-light) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
body.xpn-auth button:not([type="submit"]):active {
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}

/* Text links use the brand */
body.xpn-auth a.text-blue-600,
body.xpn-auth a[class*="text-primary"] { color: var(--color-primary, #e74c3c) !important; }

/* Checkbox keeps the brand tint */
body.xpn-auth input[type="checkbox"] {
    box-shadow: none !important;
    accent-color: var(--color-primary, #e74c3c);
}

/* Dark mode */
.dark body.xpn-auth,
body.xpn-auth.dark { --xpn-bg: #16171b; --xpn-surface: #1d1f24; --xpn-light: rgba(255,255,255,.05); --xpn-dark: rgba(0,0,0,.6); }
.dark body.xpn-auth input,
.dark body.xpn-auth select,
.dark body.xpn-auth textarea { color: #e5e7eb !important; }

/* ---- Selected choice buttons (I am Buyer / I am Seller) ----
   The neumorphic rule above resets non-submit buttons, so the
   active state needs to win: fill it with the brand and press it in. */
body.xpn-auth button.bg-primary-50.border-primary-600,
body.xpn-auth button.bg-primary-50 {
    background: var(--color-primary, #d2412b) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow:
        inset 4px 4px 10px rgba(0, 0, 0, 0.22),
        inset -3px -3px 8px rgba(255, 255, 255, 0.18) !important;
}
body.xpn-auth button.bg-primary-50 svg,
body.xpn-auth button.bg-primary-50 * {
    color: #ffffff !important;
    stroke: currentColor;
}

/* ---- "View more" / section links — were rendering as a tight red
   border with zero padding. Make them proper soft neumorphic pills. ---- */
.xpn-home a.text-primary-600,
.xpn-home a.text-sm.font-semibold.text-primary-600 {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 9px 18px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--xpn-surface) !important;
    color: var(--color-primary, #d2412b) !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-shadow:
         5px  5px 11px var(--xpn-dark),
        -5px -5px 11px var(--xpn-light) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
.xpn-home a.text-primary-600:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
    box-shadow:
         7px  7px 15px var(--xpn-dark),
        -7px -7px 15px var(--xpn-light) !important;
}
.xpn-home a.text-primary-600:active {
    transform: translateY(0);
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}

/* ============================================================
   USER DASHBOARD (seller area) — neumorphic
   Scope: body.xpn-dash
   ============================================================ */
body.xpn-dash { background: var(--xpn-bg) !important; }

/* Panels: stat tiles, charts, tables, order cards */
body.xpn-dash .bg-white.rounded-2xl,
body.xpn-dash .bg-white.rounded-xl,
body.xpn-dash .bg-white.rounded-lg,
body.xpn-dash .bg-white.rounded-md {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 20px !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow:
         7px  7px 16px var(--xpn-dark),
        -7px -7px 16px var(--xpn-light) !important;
}

/* Inner wells (table headers, nested light strips) stay recessed */
body.xpn-dash .bg-slate-50.rounded-2xl,
body.xpn-dash .bg-slate-100.rounded-xl {
    background: var(--xpn-surface) !important;
    border: none !important;
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}

/* Primary actions (Create a new gig, View All) */
body.xpn-dash .bg-primary-600,
body.xpn-dash .bg-red-600 {
    background: var(--color-primary, #d2412b) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    box-shadow:
         5px  5px 12px var(--xpn-dark),
        -5px -5px 12px var(--xpn-light) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
body.xpn-dash .bg-primary-600:hover,
body.xpn-dash .bg-red-600:hover {
    transform: translateY(-1px);
    box-shadow:
         7px  7px 16px var(--xpn-dark),
        -7px -7px 16px var(--xpn-light) !important;
}
body.xpn-dash .bg-primary-600:active,
body.xpn-dash .bg-red-600:active {
    transform: translateY(0);
    box-shadow:
        inset 4px 4px 9px rgba(0,0,0,.20),
        inset -3px -3px 8px rgba(255,255,255,.18) !important;
}

/* Inputs / selects — pressed in */
body.xpn-dash input[type="text"],
body.xpn-dash input[type="search"],
body.xpn-dash input[type="email"],
body.xpn-dash select {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}

/* Round icon buttons → soft pucks */
body.xpn-dash .rounded-full.bg-slate-100 {
    background: var(--xpn-surface) !important;
    box-shadow:
         3px  3px 7px var(--xpn-dark),
        -3px -3px 7px var(--xpn-light) !important;
}

/* Never emboss imagery or charts */
body.xpn-dash img,
body.xpn-dash canvas,
body.xpn-dash svg { box-shadow: none !important; }

/* Dark mode */
.dark body.xpn-dash,
body.xpn-dash.dark { --xpn-bg:#16171b; --xpn-surface:#1d1f24; --xpn-light:rgba(255,255,255,.05); --xpn-dark:rgba(0,0,0,.6); }

/* ---- Dashboard fixes: catch every white surface (sidebar, table
   wrappers, panels without a rounded class) ---- */
body.xpn-dash .bg-white {
    background: var(--xpn-surface) !important;
}

/* Sidebar column — soft panel, no hard divider line */
body.xpn-dash .md\:fixed > .bg-white,
body.xpn-dash .md\:flex-col > .bg-white {
    border: none !important;
    box-shadow: 6px 0 18px var(--xpn-dark) !important;
}

/* Sidebar profile card — softly raised */
body.xpn-dash .xp-sidebar-profile {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow:
         4px  4px 10px var(--xpn-dark),
        -4px -4px 10px var(--xpn-light) !important;
}
body.xpn-dash .xp-sidebar-profile:hover {
    box-shadow:
         6px  6px 14px var(--xpn-dark),
        -6px -6px 14px var(--xpn-light) !important;
}

/* Active nav item must KEEP its pill shape — the generic button rule
   above forced a 12px radius, which flattened it. */
body.xpn-dash .xp-nav-active {
    border-radius: 0 !important;
    border-top-left-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
    box-shadow: none !important;
    transform: none !important;
}
body.xpn-dash [dir="rtl"] .xp-nav-active,
html[dir="rtl"] body.xpn-dash .xp-nav-active {
    border-radius: 0 !important;
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}

/* Table rows: soften the divider lines on the new surface */
body.xpn-dash table tr {
    border-color: rgba(163, 177, 198, 0.28) !important;
}

/* ============================================================
   MESSAGES / INBOX — neumorphic
   Scope: #xp-msg-root  (loaded after xp-messaging.css so it wins)
   ============================================================ */
#xp-msg-root { background: var(--xpn-bg) !important; padding: 6px 0 18px; }

/* The 3-column shell becomes one softly raised slab */
#xp-msg-root .xp-msg-shell {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow:
         10px  10px 26px var(--xpn-dark),
        -10px -10px 26px var(--xpn-light) !important;
}

/* Columns: same surface, hairline dividers instead of hard borders */
#xp-msg-root .xp-msg-list,
#xp-msg-root .xp-msg-chat,
#xp-msg-root .xp-msg-info,
#xp-msg-root .xp-chat-head,
#xp-msg-root .xp-chat-body,
#xp-msg-root .xp-send-card,
#xp-msg-root .xp-list-head {
    background: var(--xpn-surface) !important;
    background-image: none !important;
}
#xp-msg-root .xp-msg-list { border-right: 1px solid rgba(163,177,198,.22) !important; }
#xp-msg-root .xp-msg-info { border-left: 1px solid rgba(163,177,198,.22) !important; }
#xp-msg-root .xp-chat-head { border-bottom: 1px solid rgba(163,177,198,.22) !important; box-shadow: none !important; }
#xp-msg-root .xp-send-card { border-top: 1px solid rgba(163,177,198,.22) !important; box-shadow: none !important; }
#xp-msg-root .xp-send-card::before { display: none !important; }

/* Conversation rows — raised tiles; the open one is pressed in */
#xp-msg-root .xp-list-row {
    border-radius: 14px !important;
    margin: 6px 4px !important;
    background: var(--xpn-surface) !important;
    box-shadow:
         4px  4px 9px var(--xpn-dark),
        -4px -4px 9px var(--xpn-light) !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
}
#xp-msg-root .xp-list-row:hover {
    transform: translateY(-1px);
    box-shadow:
         6px  6px 13px var(--xpn-dark),
        -6px -6px 13px var(--xpn-light) !important;
}
#xp-msg-root .xp-list-row.active {
    transform: none;
    background: var(--xpn-surface) !important;
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}
#xp-msg-root .xp-list-row.active::before {
    background: var(--color-primary, #d2412b) !important;
}

/* Message bubbles */
#xp-msg-root .xp-msg-bubble {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow:
         5px  5px 11px var(--xpn-dark),
        -5px -5px 11px var(--xpn-light) !important;
}
#xp-msg-root .xp-msg-bubble:hover {
    box-shadow:
         7px  7px 15px var(--xpn-dark),
        -7px -7px 15px var(--xpn-light) !important;
}
/* Own messages stay brand red, softly raised */
#xp-msg-root .xp-msg.mine .xp-msg-bubble {
    background: var(--color-primary, #d2412b) !important;
    color: #fff !important;
    box-shadow:
         5px  5px 12px rgba(163,177,198,.55),
        -4px -4px 10px var(--xpn-light) !important;
}
/* Drop the little CSS tails — they clash with soft shadows */
#xp-msg-root .xp-msg-bubble::before { display: none !important; }

/* Composer input — pressed in */
#xp-msg-root .xp-send-card textarea,
#xp-msg-root .xp-send-card input[type="text"] {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}

/* Round icon buttons → soft pucks; primary send keeps the brand */
#xp-msg-root .xp-chat-icon,
#xp-msg-root .xp-attach-btn,
#xp-msg-root .xp-offer-inline {
    background: var(--xpn-surface) !important;
    border: none !important;
    box-shadow:
         4px  4px 9px var(--xpn-dark),
        -4px -4px 9px var(--xpn-light) !important;
}
#xp-msg-root .xp-chat-icon:active,
#xp-msg-root .xp-attach-btn:active {
    box-shadow:
        inset 3px 3px 7px var(--xpn-dark),
        inset -3px -3px 7px var(--xpn-light) !important;
}

/* Info panel sections + search field */
#xp-msg-root .xp-info-section,
#xp-msg-root .xp-list-section {
    background: var(--xpn-surface) !important;
    border: none !important;
}
#xp-msg-root input[type="search"] {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}

/* Avatars/images never embossed */
#xp-msg-root img { box-shadow: none !important; }

/* ============================================================
   GIG / SERVICE PAGE — neumorphic
   Scope: .xpn-gig  (class added to the Livewire component root)
   ============================================================ */
body:has(.xpn-gig) { background: var(--xpn-bg) !important; }

/* Every white panel on the page: side card, packages, summary,
   review cards, tab panels, FAQ blocks */
.xpn-gig .bg-white,
.xpn-gig .bg-slate-50,
.xpn-gig .bg-gray-50 {
    background: var(--xpn-surface) !important;
}
.xpn-gig .bg-white.rounded-xl,
.xpn-gig .bg-white.rounded-2xl,
.xpn-gig .bg-white.rounded-lg,
.xpn-gig .rounded-2xl.border,
.xpn-gig .rounded-xl.border {
    border: none !important;
    border-radius: 20px !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow:
         7px  7px 16px var(--xpn-dark),
        -7px -7px 16px var(--xpn-light) !important;
}

/* Sticky purchase card — ONE raised panel, everything inside stays flat.
   (Raising each child produced nested boxes-in-boxes.) */
.xpn-gig #xp-gig-side-card {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 22px !important;
    padding: 18px !important;
    box-shadow:
         9px  9px 20px var(--xpn-dark),
        -9px -9px 20px var(--xpn-light) !important;
}
/* Flatten every nested surface inside the card */
.xpn-gig #xp-gig-side-card *,
.xpn-gig #xp-gig-side-card .bg-white,
.xpn-gig #xp-gig-side-card .rounded-xl,
.xpn-gig #xp-gig-side-card .rounded-2xl {
    box-shadow: none !important;
}
.xpn-gig #xp-gig-side-card .bg-white { background: transparent !important; }

/* Small info pills (queue / delivery) — gently recessed, not raised */
.xpn-gig #xp-gig-side-card .rounded-xl.bg-slate-50,
.xpn-gig #xp-gig-side-card .bg-slate-50 {
    background: rgba(163,177,198,.10) !important;
    border: none !important;
    border-radius: 12px !important;
}

/* Upgrade rows: hairline separators instead of individual boxes */
.xpn-gig #xp-gig-side-card label,
.xpn-gig #xp-gig-side-card .border {
    border-color: rgba(163,177,198,.22) !important;
}

/* The two CTAs keep their raised treatment */
.xpn-gig #xp-gig-side-card .bg-primary-600,
.xpn-gig #xp-gig-side-card button[style*="linear-gradient"],
.xpn-gig #xp-gig-side-card a[href*="messages/with"] {
    box-shadow:
         6px  6px 14px var(--xpn-dark),
        -6px -6px 14px var(--xpn-light) !important;
}

/* Gallery frame */
.xpn-gig #main-carousel,
.xpn-gig #xp-gig-gallery .rounded-xl {
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow:
         8px  8px 18px var(--xpn-dark),
        -8px -8px 18px var(--xpn-light) !important;
}

/* Primary CTA (Add to cart) — solid brand, softly raised */
.xpn-gig .bg-primary-600,
.xpn-gig button[style*="linear-gradient"] {
    background: var(--color-primary, #d2412b) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 14px !important;
    color: #fff !important;
    box-shadow:
         6px  6px 14px var(--xpn-dark),
        -6px -6px 14px var(--xpn-light) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
.xpn-gig .bg-primary-600:hover,
.xpn-gig button[style*="linear-gradient"]:hover {
    transform: translateY(-1px);
    box-shadow:
         8px  8px 18px var(--xpn-dark),
        -8px -8px 18px var(--xpn-light) !important;
}
.xpn-gig .bg-primary-600:active,
.xpn-gig button[style*="linear-gradient"]:active {
    transform: translateY(0);
    box-shadow:
        inset 4px 4px 9px rgba(0,0,0,.20),
        inset -3px -3px 8px rgba(255,255,255,.18) !important;
}

/* Secondary CTA (Contact seller) — soft raised, brand text */
.xpn-gig a[href*="messages/with"] {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 14px !important;
    color: var(--color-primary, #d2412b) !important;
    box-shadow:
         5px  5px 12px var(--xpn-dark),
        -5px -5px 12px var(--xpn-light) !important;
}

/* Package tabs / chips / pills */
.xpn-gig .rounded-full.bg-gray-100,
.xpn-gig .bg-slate-100.rounded-xl,
.xpn-gig .rounded-full.bg-white {
    background: var(--xpn-surface) !important;
    border: none !important;
    box-shadow:
         3px  3px 8px var(--xpn-dark),
        -3px -3px 8px var(--xpn-light) !important;
}

/* Carousel arrows → soft pucks */
.xpn-gig .splide__arrow {
    background: var(--xpn-surface) !important;
    box-shadow:
         4px  4px 9px var(--xpn-dark),
        -4px -4px 9px var(--xpn-light) !important;
}

/* Inset wells (delivery/queue strips, totals) */
.xpn-gig .bg-slate-50.rounded-xl,
.xpn-gig .rounded-xl.bg-slate-50 {
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
    border: none !important;
}

/* Order options drawer keeps a clean panel look */
.xpn-gig [x-show*="orderDrawer"] .bg-white { background: var(--xpn-surface) !important; }

/* Never emboss media */
.xpn-gig img,
.xpn-gig video,
.xpn-gig iframe { box-shadow: none !important; }

/* ---- Inbox: "Online now" strip + favourite (pinned) rows ---- */
#xp-msg-root .xp-online-strip {
    padding: 10px 12px 4px;
    border-bottom: 1px solid rgba(163,177,198,.22);
}
#xp-msg-root .xp-online-title {
    font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #8b93a3; margin-bottom: 8px;
}
#xp-msg-root .xp-online-avatars {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none;
}
#xp-msg-root .xp-online-avatars::-webkit-scrollbar { display: none; }
#xp-msg-root .xp-online-av {
    position: relative; flex: 0 0 auto; width: 52px;
    background: none !important; border: none !important; box-shadow: none !important;
    padding: 0; cursor: pointer; text-align: center;
}
#xp-msg-root .xp-online-av img {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    display: block; margin: 0 auto;
    box-shadow:
         3px  3px 7px var(--xpn-dark),
        -3px -3px 7px var(--xpn-light) !important;
}
#xp-msg-root .xp-online-av .xp-online-ring {
    position: absolute; top: 32px; right: 5px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #22c55e; border: 2px solid var(--xpn-surface);
}
#xp-msg-root .xp-online-av .xp-online-name {
    display: block; margin-top: 5px; font-size: 10.5px; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#xp-msg-root .xp-online-av:hover img {
    box-shadow:
         5px  5px 11px var(--xpn-dark),
        -5px -5px 11px var(--xpn-light) !important;
}

/* Star toggle on each conversation row */
#xp-msg-root .xp-list-row { position: relative; }
#xp-msg-root .xp-fav-btn {
    /* sits in the flex flow at the far right — never overlaps the timestamp */
    position: static !important;
    flex: 0 0 auto;
    align-self: center;
    width: 26px; height: 26px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: none !important; border-radius: 50%;
    background: transparent !important; box-shadow: none !important;
    color: #c7ccd6; font-size: 15px; cursor: pointer; padding: 0;
    opacity: .35; transition: opacity .15s ease, color .15s ease, transform .15s ease;
}
#xp-msg-root .xp-list-row:hover .xp-fav-btn { opacity: 1; }
#xp-msg-root .xp-fav-btn:hover { transform: scale(1.15); }
/* keep the text column from running under the star */
#xp-msg-root .xp-row-meta { min-width: 0; }
#xp-msg-root .xp-fav-btn.on { opacity: 1; color: var(--color-primary, #d2412b); }
#xp-msg-root .xp-fav-btn:hover { color: var(--color-primary, #d2412b); }

/* Pinned section header */
#xp-msg-root #xp-fav-section { color: var(--color-primary, #d2412b); font-weight: 800; }

/* ---- Gig package tabs (Basic / Standard / Premium) ----
   The card-flattening rules above removed the active tab's white
   background + shadow, leaving no visible selection. Restore it as
   a recessed track with a raised active pill. ---- */
.xpn-gig #xp-gig-side-card .grid.grid-cols-3.rounded-xl {
    background: rgba(163, 177, 198, 0.16) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
        inset 3px 3px 7px var(--xpn-dark),
        inset -3px -3px 7px var(--xpn-light) !important;
}
.xpn-gig #xp-gig-side-card .grid.grid-cols-3 > button {
    border-radius: 10px !important;
    padding: 9px 4px !important;
    color: #6b7280 !important;
    transition: all .16s ease !important;
}
/* Active pill — raised + brand text */
.xpn-gig #xp-gig-side-card .grid.grid-cols-3 > button.bg-white {
    background: var(--xpn-surface) !important;
    color: var(--color-primary, #d2412b) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow:
         4px  4px 9px var(--xpn-dark),
        -4px -4px 9px var(--xpn-light) !important;
}
/* Let long package names wrap to 2 lines instead of hard-truncating */
.xpn-gig #xp-gig-side-card .grid.grid-cols-3 > button .truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}

/* ============================================================
   NAVBAR / HEADER — match the neumorphic surface on styled pages
   ============================================================ */
body:has(.xpn-home) header,
body:has(.xpn-gig) header,
body:has(.xpn-form) header,
body:has(#xp-msg-root) header,
body.xpn-dash header {
    background: var(--xpn-surface) !important;
    border-bottom: none !important;
    box-shadow: 0 6px 18px -10px var(--xpn-dark) !important;
}
/* Category strip under the logo bar */
body:has(.xpn-home) header + nav,
body:has(.xpn-gig) header + nav,
body:has(#xp-msg-root) header + nav,
body:has(.xpn-home) header nav,
body:has(.xpn-gig) header nav {
    background: var(--xpn-surface) !important;
    border-color: rgba(163,177,198,.22) !important;
}

/* Header search — pressed in */
body:has(.xpn-home) header input[type="text"],
body:has(.xpn-home) header input[type="search"],
body:has(.xpn-gig) header input[type="text"],
body:has(.xpn-gig) header input[type="search"],
body:has(.xpn-form) header input[type="text"],
body:has(#xp-msg-root) header input[type="text"],
body.xpn-dash header input[type="text"] {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 12px 0 0 12px !important;
    box-shadow:
        inset 4px 4px 9px var(--xpn-dark),
        inset -4px -4px 9px var(--xpn-light) !important;
}

/* Wallet balance pill + icon buttons → soft pucks */
body:has(.xpn-home) header .rounded-full,
body:has(.xpn-gig) header .rounded-full,
body:has(#xp-msg-root) header .rounded-full {
    box-shadow:
         3px  3px 7px var(--xpn-dark),
        -3px -3px 7px var(--xpn-light);
}
/* …but never emboss avatars or logos */
body:has(.xpn-home) header img,
body:has(.xpn-gig) header img,
body:has(#xp-msg-root) header img,
body.xpn-dash header img { box-shadow: none !important; }

/* ============================================================
   STANDALONE AUTH FORMS on the main layout
   (Reset your password · Resend verification email · Set new password)
   Scope: .xpn-form on the Livewire component root
   ============================================================ */
body:has(.xpn-form) { background: var(--xpn-bg) !important; }

.xpn-form .bg-white,
.xpn-form .bg-gray-50,
.xpn-form .bg-slate-50 {
    background: var(--xpn-surface) !important;
}

/* The form card */
.xpn-form .bg-white.sm\:rounded-lg,
.xpn-form .bg-white.rounded-lg,
.xpn-form .bg-white.rounded-xl,
.xpn-form .bg-white.rounded-2xl,
.xpn-form > div > .bg-white {
    border: none !important;
    border-radius: 22px !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow:
         10px  10px 24px var(--xpn-dark),
        -10px -10px 24px var(--xpn-light) !important;
}

/* Inputs — pressed in */
.xpn-form input[type="text"],
.xpn-form input[type="email"],
.xpn-form input[type="password"],
.xpn-form input[type="tel"],
.xpn-form select,
.xpn-form textarea {
    background: var(--xpn-surface) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #1f2937 !important;
    box-shadow:
        inset 5px 5px 10px var(--xpn-dark),
        inset -5px -5px 10px var(--xpn-light) !important;
}
.xpn-form input:focus,
.xpn-form select:focus,
.xpn-form textarea:focus {
    outline: none !important;
    box-shadow:
        inset 5px 5px 10px var(--xpn-dark),
        inset -5px -5px 10px var(--xpn-light),
        0 0 0 2px rgba(231, 76, 60, .30) !important;
}
.xpn-form ::placeholder { color: #9aa3b2 !important; }

/* Submit button — brand red, softly raised */
.xpn-form button[type="submit"],
.xpn-form .bg-primary-600 {
    background: var(--color-primary, #d2412b) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
         6px  6px 14px var(--xpn-dark),
        -6px -6px 14px var(--xpn-light) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
.xpn-form button[type="submit"]:hover,
.xpn-form .bg-primary-600:hover {
    transform: translateY(-1px);
    box-shadow:
         8px  8px 18px var(--xpn-dark),
        -8px -8px 18px var(--xpn-light) !important;
}
.xpn-form button[type="submit"]:active,
.xpn-form .bg-primary-600:active {
    transform: translateY(0);
    box-shadow:
        inset 4px 4px 9px rgba(0,0,0,.20),
        inset -3px -3px 8px rgba(255,255,255,.18) !important;
}
.xpn-form a[class*="text-primary"],
.xpn-form a.text-blue-600 { color: var(--color-primary, #d2412b) !important; }