/*! SimpleJob – Offers skin (CSS) v3.  Drop-in replacement for the old "CSS File offers".
   Styles the network locker (#my-locker …) + the search/filters/cards that offers.js builds.
   Every rule is scoped to #my-locker or an .sj-* class, and uses !important only where the network's own CSS would otherwise win. */

/* ---------------------------------------------------------------- locker reset (network defaults off) */
html.sj-frame,html.sj-frame body,html.sj-frame body.theme-list,html.sj-frame body.mobile{background:#0a1230!important;background-image:none!important;margin:0!important;padding:0!important}
body.mobile,body.editing.mobile{margin:0!important;padding:0!important}
#my-locker{position:relative;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;
color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;letter-spacing:0!important;box-shadow:none!important;overflow:visible!important;box-sizing:border-box}
body.editing #my-locker{margin:0!important;max-width:100%!important}
#my-locker *,#my-locker *::before,#my-locker *::after{box-sizing:border-box}
#my-locker #my-locker-top,#my-locker #my-locker-bottom,#my-locker .my-locker-body-text-top,#my-locker .my-locker-body-text-bottom,#my-locker #custom-heading,#my-locker-background{display:none!important}
#my-locker #my-locker-body,#my-locker #my-locker-body-offers{padding:0!important;margin:0!important;width:100%;background:transparent!important;border:0!important}
#my-locker #my-locker-body-offers #my-locker-body-offers-list{margin:0!important;padding:0!important}

#my-locker a.hidden,#my-locker .sj-card.hidden{display:none!important}

/* ---------------------------------------------------------------- toolbar: search + filters + chips */
#my-locker .sj-bar{margin:0 0 16px}
#my-locker .sj-top{display:flex;gap:12px;flex-wrap:wrap}
#my-locker .sj-search{flex:1 1 320px;display:flex;align-items:center;gap:12px;height:54px;padding:0 18px;border-radius:16px;background:#101c56;border:1px solid #2a3b86;color:#8fa2ec;cursor:text;transition:.15s}
#my-locker .sj-search:focus-within{border-color:#3d8bff;box-shadow:0 0 0 3px #2f8bff33}
#my-locker .sj-search svg{width:22px;height:22px;flex:none}
#my-locker .sj-search input{flex:1;min-width:0;height:100%;margin:0;padding:0;background:transparent;border:0;outline:0;box-shadow:none;color:#fff;font:600 16px system-ui,sans-serif}
#my-locker .sj-search input::placeholder{color:#8396e0;opacity:1}
#my-locker .sj-search input::-webkit-search-cancel-button{filter:invert(1)}
#my-locker .sj-sels{display:flex;gap:12px;flex-wrap:wrap}
#my-locker .sj-sel{position:relative;display:flex;align-items:center;height:54px;min-width:196px;border-radius:16px;background:#101c56;border:1px solid #2a3b86;color:#d8e1ff;transition:.15s}
#my-locker .sj-sel:hover,#my-locker .sj-sel:focus-within{border-color:#3d8bff}
#my-locker .sj-si{position:absolute;left:15px;display:grid;pointer-events:none;color:#9db0f4}
#my-locker .sj-si svg{width:20px;height:20px}
#my-locker .sj-sel select{-webkit-appearance:none;appearance:none;width:100%;height:100%;margin:0;padding:0 40px 0 46px;background:transparent;border:0;outline:0;box-shadow:none;color:#e8eeff;font:600 15px system-ui,sans-serif;cursor:pointer}
#my-locker .sj-sel select option{background:#0f1a4d;color:#fff}
#my-locker .sj-chev{position:absolute;right:13px;display:grid;pointer-events:none;color:#8fa2ec}
#my-locker .sj-chev svg{width:16px;height:16px}
#my-locker .sj-chips{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#my-locker .sj-chips::-webkit-scrollbar{display:none}
#my-locker .sj-chip{flex:none;display:flex;align-items:center;gap:9px;height:42px;margin:0;padding:0 8px 0 17px;border-radius:99px;background:#101c56;border:1px solid #2a3b86;color:#cdd8ff;font:700 14.5px system-ui,sans-serif;cursor:pointer;transition:.15s}
#my-locker .sj-chip:hover{background:#17276f}
#my-locker .sj-chip b{display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:99px;background:rgba(255,255,255,.1);font-size:12.5px}
#my-locker .sj-chip.on{background:linear-gradient(180deg,#3593ff,#1463ff);border-color:#58a8ff;color:#fff;box-shadow:0 10px 22px -12px #2a7bff}
#my-locker .sj-chip.on b{background:rgba(255,255,255,.22)}
#my-locker .sj-count{margin:10px 4px 0;color:#8fa2ec;font-size:13.5px}

/* ---------------------------------------------------------------- the offer list */
#my-locker #my-locker-body-offers-list.sj-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:14px;align-items:stretch}

#my-locker #my-locker-body-offers #my-locker-body-offers-list a.sj-card{background:#fff!important;border:0!important;color:#161d45!important;text-decoration:none!important}
#my-locker #my-locker-body-offers #my-locker-body-offers-list a.sj-card:hover,
#my-locker #my-locker-body-offers #my-locker-body-offers-list a.sj-card:focus{background:#fff!important;color:#161d45!important;text-decoration:none!important}
#my-locker .sj-card{position:relative;display:grid!important;grid-template-columns:92px minmax(0,1fr) auto;grid-template-areas:"av main btn";align-items:center;gap:15px;
margin:0!important;padding:15px 16px 15px 14px!important;border:0!important;border-radius:20px!important;background:#fff!important;width:auto!important;max-width:none!important;text-align:left!important;font-weight:400!important;color:#161d45!important;font-size:14px!important;line-height:1.3;
text-decoration:none!important;opacity:1;box-shadow:0 14px 30px -18px #000d,0 0 0 1px #ffffff14 inset;transition:transform .16s,box-shadow .16s;animation:sj-in .5s both;animation-delay:calc(var(--i,0)*45ms);overflow:visible}
#my-locker .sj-card:hover{transform:translateY(-3px);box-shadow:0 22px 38px -18px #000f}
#my-locker .sj-card[hidden]{display:none!important}
#my-locker .sj-card>*{font-size:inherit}
@keyframes sj-in{from{opacity:0;transform:translateY(14px)}}
#my-locker .sj-card.sj-pulse{animation:sj-pulse 1s ease-in-out 2}
@keyframes sj-pulse{50%{box-shadow:0 0 0 4px #ffc247,0 0 34px 6px #ffb52e99;transform:scale(1.015)}}

#my-locker .sj-avw{grid-area:av;display:flex;flex-direction:column;align-items:center;gap:8px;width:92px;align-self:center}
#my-locker .sj-av{position:relative;display:block;width:88px;height:88px;max-width:none;padding:0;margin:0}
#my-locker .sj-av img{display:block;width:100%;height:100%;margin:0;object-fit:cover;border-radius:20px;background:linear-gradient(135deg,#dfe4fb,#c9d2f7)}
#my-locker .sj-av.sj-icon{display:grid;place-items:center;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -10px 18px -8px rgba(0,0,0,.28),0 12px 22px -12px rgba(0,0,0,.6);overflow:hidden}
#my-locker .sj-av.sj-icon::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.06) 40%,transparent 58%);pointer-events:none}
#my-locker .sj-av .sj-ic{position:relative;width:60%;height:60%;max-width:none;object-fit:contain;border-radius:0;background:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
#my-locker .sj-ok{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1fb86a;border:3px solid #fff;color:#fff}
#my-locker .sj-ok svg{width:13px;height:13px}

#my-locker .sj-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}
#my-locker .sj-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:17.5px!important;font-weight:800!important;line-height:1.25;color:#141b42;margin:0!important;padding:0!important}
#my-locker .sj-hb .sj-title{padding-right:72px!important}
#my-locker .sj-desc{display:-webkit-box;-webkit-line-clamp:2;margin-bottom:1px;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:500;color:#677093}
#my-locker .sj-by{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:800;color:#3b4cc0;text-align:center}
#my-locker .sj-meta{display:flex;align-items:center;gap:7px;font-size:13px;color:#8890b0}
#my-locker .sj-meta em{font-style:normal}
#my-locker .sj-stars{font-size:15px;letter-spacing:1.5px;line-height:1;background:linear-gradient(90deg,#ffb020 var(--p,80%),#d8ddef var(--p,80%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#my-locker .sj-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px}
#my-locker .sj-tags u{text-decoration:none;padding:4px 12px;border-radius:9px;background:#eef0f9;color:#586086;font-size:12.5px;font-weight:700}

#my-locker .sj-badge{position:absolute;top:13px;right:15px;padding:4px 13px;border-radius:8px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.2px;box-shadow:0 6px 14px -8px #0008}
#my-locker .sj-b-hot{background:linear-gradient(180deg,#ff5a6e,#e5233f)}
#my-locker .sj-b-easy{background:linear-gradient(180deg,#34cd80,#17a45f)}
#my-locker .sj-b-popular{background:linear-gradient(180deg,#ffae45,#ff8800)}
#my-locker .sj-b-featured{background:linear-gradient(180deg,#9355ff,#6a2cf0)}
#my-locker .sj-b-new{background:linear-gradient(180deg,#ff58ae,#ee2486)}

#my-locker .sj-btn{grid-area:btn;align-self:end;display:flex;align-items:center;justify-content:center;gap:9px;min-width:130px;height:50px;margin:0;padding:0 20px;
border:0;border-bottom:4px solid #0a48c2;border-radius:14px;background:linear-gradient(180deg,#34a0ff,#0b63ff);color:#fff;font:800 20px/1 system-ui,sans-serif;text-transform:none;
box-shadow:0 14px 24px -14px #0b63ff;transition:.15s}
#my-locker .sj-card:hover .sj-btn{filter:brightness(1.08)}
#my-locker .sj-card:active .sj-btn{transform:translateY(2px);border-bottom-width:2px}
#my-locker .sj-coin{position:relative;flex:none;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff4b8,#ffc21f 55%,#e08a00);box-shadow:inset 0 0 0 2px #fff1b8aa,0 2px 5px #0006}
#my-locker .sj-coin::after{content:"\2605";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:#fff8d6;text-shadow:0 1px 1px #b36a00}

/* ---------------------------------------------------------------- pager */
#my-locker .sj-pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:24px 0 6px}
#my-locker .sj-pager[hidden]{display:none}
#my-locker .sj-pg{min-width:46px;height:46px;margin:0;padding:0 16px;border-radius:14px;background:#101c56;border:1px solid #2a3b86;color:#cdd8ff;font:800 15px system-ui,sans-serif;cursor:pointer;transition:.15s}
#my-locker .sj-pg:hover:not(:disabled){background:#17276f;border-color:#3d8bff}
#my-locker .sj-pg.on{background:linear-gradient(180deg,#3593ff,#1463ff);border-color:#58a8ff;color:#fff;box-shadow:0 10px 22px -12px #2a7bff}
#my-locker .sj-pg:disabled{opacity:.35;cursor:default}
#my-locker .sj-gap{color:#8fa2ec;padding:0 2px}

/* ---------------------------------------------------------------- empty state + loading skeleton */
#my-locker .sj-none{grid-column:1/-1;padding:44px 20px;border:1px dashed #3a4c9f;border-radius:20px;text-align:center;color:#9db0f4}
#my-locker .sj-none[hidden]{display:none}
#my-locker .sj-none b{display:block;margin-bottom:4px;color:#fff;font-size:18px}
#my-locker .sj-none span{display:block}
#my-locker .sj-none button{margin-top:16px;padding:11px 22px;border:0;border-radius:12px;background:linear-gradient(180deg,#34a0ff,#0b63ff);color:#fff;font:800 15px system-ui,sans-serif;cursor:pointer}
#my-locker .sj-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:14px}
#my-locker .sj-sk{height:120px;border-radius:20px;background:linear-gradient(90deg,#14216b,#1d2e8c,#14216b);background-size:220% 100%;animation:sj-sh 1.3s linear infinite}
@keyframes sj-sh{to{background-position:-220% 0}}

/* ---------------------------------------------------------------- small screens */
@media(max-width:720px){
#my-locker .sj-top{gap:10px}
#my-locker .sj-search{flex:1 1 100%;height:50px}
#my-locker .sj-sels{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
#my-locker .sj-sel{min-width:0;height:48px}
#my-locker .sj-sel:last-child{grid-column:1/-1}
#my-locker .sj-sel select{font-size:14px;padding-left:42px}
#my-locker #my-locker-body-offers-list.sj-list{grid-template-columns:1fr;gap:12px}
#my-locker .sj-card{grid-template-columns:68px minmax(0,1fr);grid-template-areas:"av main" "btn btn";gap:12px 13px;padding:13px 13px 13px 12px!important;border-radius:18px!important}
#my-locker .sj-avw{width:70px;gap:6px}
#my-locker .sj-av{width:68px;height:68px}
#my-locker .sj-av.sj-icon{border-radius:18px}
#my-locker .sj-pg{min-width:42px;height:42px;padding:0 12px}
#my-locker .sj-by{font-size:10.5px}
#my-locker .sj-av img{border-radius:16px}
#my-locker .sj-ok{width:22px;height:22px;right:-6px;bottom:-6px}
#my-locker .sj-title{font-size:16px!important}
#my-locker .sj-desc{font-size:13px}
#my-locker .sj-btn{width:100%;height:46px;font-size:18px}
#my-locker .sj-badge{top:11px;right:12px}
#my-locker .sj-hb .sj-title{padding-right:62px!important}
}
@media(prefers-reduced-motion:reduce){#my-locker .sj-card,#my-locker .sj-sk{animation:none}}