/* ===== Portal theme, part 2 ===== */
html{scrollbar-gutter:stable}
.public-main{min-height:0}
.public-footer{margin-top:48px}
.prototype-tools{display:none}

/* hearts: keep the pink fill */
.save.selected .heart-f{display:block;fill:#ff5b89}
.save .heart-o{fill:#fff}
.save.selected .heart-o{fill:#fff}
.circle[data-action="save"].selected .heart-f{fill:#ff5b89}

/* hover labels also on banner / reward / route photos */
.qp:is(:hover,:focus,.event-card:hover *,.photo-banner:hover *,.reward-card:hover *,.route-card:hover *) .q{opacity:0;scale:.5}
.qp:is(:hover,:focus,.event-card:hover *,.photo-banner:hover *,.reward-card:hover *,.route-card:hover *) .t{grid-template-columns:1fr;opacity:1}
.reward-photo>.qp,.route-photo>.qp{position:absolute;top:15px;left:15px}

/* ---------- forms ---------- */
.field input,.field textarea{border-radius:14px;background:#fff;border:1px solid #dce5eb;padding:14px 16px;font-size:13px;transition:border-color .25s,box-shadow .25s}
.field input:hover,.field textarea:hover{border-color:#bfcbf3}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px #4261ee1a}
.field{font-size:12px;color:var(--ink)}
.notice{border-radius:16px;background:#eef2ff;border:1px solid #e1e8fb;color:#5a6f8c}
.notice.amber{background:#fdf4e3;border-color:#f3e4c4;color:#93744a}
.notice.green{background:#e6f2ec;border-color:#d3e8de}
.answer{border-radius:14px;transition:border-color .25s,background-color .25s}
.answer:hover{border-color:#bfcbf3;background:#f6f8ff}
.stars button{transition:transform .3s var(--spring),color .2s}
.stars button:hover{transform:scale(1.2)}
.stars .active{color:#f5b942}
.switch{background:#d5dfe8;transition:background-color .3s}
.switch:checked{background:var(--blue)}
.switch:after{transition:left .3s var(--spring);box-shadow:0 2px 5px #0003}
.consent input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;border:1.5px solid #c3d0db;border-radius:7px;background:#fff;display:grid;place-content:center;margin:1px 0 0;cursor:pointer;transition:background-color .25s,border-color .25s}
.consent input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
.consent input[type=checkbox]:checked:after{content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;rotate:-45deg;translate:0 -1px}
.upload-zone>label{transition:border-color .3s,background-color .3s}
.upload-zone>label:hover{border-color:var(--blue);background:#f4f7ff}
.invite-link button{transition:background-color .3s,color .3s}.invite-link button:hover{background:var(--blue);color:#fff}
.search-field{transition:border-color .3s}.search-field:focus-within{border-color:var(--blue)}
.search-field input:focus{outline:none}
.filter-grid label{transition:color .3s}.filter-grid label:hover{color:var(--blue)}

/* custom select */
.cs-native{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important}
.cs{position:relative;margin-top:8px}
.cs-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 16px;border:1px solid #dce5eb;border-radius:14px;background:#fff;font-size:13px;line-height:1.4;color:var(--ink);cursor:pointer;transition:border-color .25s,box-shadow .25s;text-align:left;-webkit-user-select:none;user-select:none}
.cs-btn:hover{border-color:#bfcbf3}
.cs-btn:focus-visible,.cs.open .cs-btn{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px #4261ee1a}
.cs-btn.ph{color:#8fa0a9}
.cs-btn>svg{width:16px;height:16px;flex:none;transition:rotate .35s var(--ease2);color:#8ba0ad}
.cs.open .cs-btn>svg{rotate:180deg;color:var(--blue)}
.cs-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;max-height:280px;overflow:auto;padding:6px;border-radius:16px;background:#fff;border:1px solid #e3e9f0;box-shadow:0 24px 50px -18px #2a4a6a66;transform-origin:50% 0;opacity:0;scale:.96;translate:0 -6px;pointer-events:none;visibility:hidden;transition:opacity .2s,scale .3s var(--ease2),translate .3s var(--ease2),visibility 0s .3s}
.cs.open .cs-list{opacity:1;scale:1;translate:0 0;pointer-events:auto;visibility:visible;transition:opacity .2s,scale .3s var(--ease2),translate .3s var(--ease2)}
.cs-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:11px;font-size:13px;cursor:pointer;color:var(--ink);transition:background-color .2s,color .2s}
.cs-opt:hover,.cs-opt.hl{background:#eef2ff;color:var(--blue)}
.cs-opt.on{color:var(--blue);font-weight:500}
.cs-opt.on:after{content:'';width:9px;height:5px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);rotate:-45deg;translate:0 -2px;flex:none}
.filter-grid .cs{margin-top:0}
.filter-grid .cs-btn{border:0;background:transparent;padding:7px 0 0;font-size:11px;border-radius:0;box-shadow:none}
.filter-grid .cs-list{min-width:220px;right:auto}

/* ---------- FAQ cards ---------- */
.panel.faq details{border:1px solid #e1e6eb;border-radius:16px;padding:0;margin-bottom:10px;background:#fff;overflow:hidden;transition:border-color .35s,box-shadow .35s}
.panel.faq details:last-of-type{margin-bottom:0}
.panel.faq details[open]{border-color:#c3cffb;box-shadow:0 12px 28px #4261ee14}
.panel.faq details[open]:not(.is-open){border-color:#e1e6eb;box-shadow:none}
.panel.faq summary{padding:18px 22px;font-size:15px;align-items:center;transition:color .3s}
.panel.faq summary:hover{color:var(--blue)}
.panel.faq summary::-webkit-details-marker{display:none}
.panel.faq summary:after{content:'+';display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#eef2ff;color:var(--blue);font-size:18px;transition:rotate .5s var(--spring),background-color .3s,color .3s}
.panel.faq details[open] summary:after{content:'+';rotate:45deg;background:var(--blue);color:#fff}
.panel.faq details[open]:not(.is-open) summary:after{rotate:0deg;background:#eef2ff;color:var(--blue)}
.panel.faq details p{margin:0;padding:0 22px 20px}
.panel.faq details[open] p{animation:rise .6s var(--ease) both}

/* ---------- sidebar (collapsible, expands on hover) ---------- */
.sidebar .side-logo{display:block;position:relative;height:60px;margin:0 0 20px 6px;flex:none}
.sidebar .logo-mark{position:absolute;left:0;top:8px;width:44px;height:44px;object-fit:contain;transition:opacity .3s}
.sidebar .logo-full{position:absolute;left:0;top:0;width:160px;margin:0;opacity:0;transition:opacity .35s .05s}
.sidebar nav>a{position:relative;gap:14px;padding:0 14px;height:46px;min-height:0;font-size:12px;color:#5c7687;white-space:nowrap;border-radius:14px}
.sidebar nav>a svg{width:20px;height:20px;flex:none;transition:transform .4s var(--spring)}
.sidebar nav>a:hover svg{transform:scale(1.15)}
.sidebar nav>a.active{background:var(--blue);color:#fff;box-shadow:0 12px 22px -12px #4261ee99}
.sidebar nav>a small{background:#4261ee1a;color:var(--blue);font-weight:500;padding:3px 8px;border-radius:999px;font-size:10px}
.sidebar nav>a.active small{background:#ffffff33;color:#fff}
.sidebar .side-bottom a{gap:14px;white-space:nowrap;padding:8px 0;font-size:12px;transition:color .3s}
.sidebar .side-bottom a:hover{color:var(--blue)}
.sidebar .side-user{gap:12px;white-space:nowrap}
.sidebar .side-user:hover .avatar{background:var(--blue);color:#fff}
@media(min-width:761px){
.account{padding-left:88px}
.sidebar{width:76px;padding:22px 12px 14px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;transition:width .45s var(--ease2),box-shadow .45s;z-index:40}
.sidebar::-webkit-scrollbar{display:none}
.sidebar:is(:hover,.exp),.sidebar:has(:focus-visible){width:262px;box-shadow:30px 0 70px -34px #2a4a6a55}
.sidebar .nav-label{opacity:0;height:8px;margin:0 16px 12px;white-space:nowrap;transition:opacity .3s}
.sidebar nav>a>span,.sidebar nav>a>small,.sidebar .side-bottom a>span,.sidebar .side-user>span:not(.avatar),.sidebar .side-user>svg{opacity:0;transition:opacity .25s}
.sidebar .side-photo{max-height:0;margin:0;opacity:0;min-height:0;transition:max-height .5s var(--ease2),margin .5s var(--ease2),opacity .3s}
.sidebar:is(:hover,.exp) .logo-mark,.sidebar:has(:focus-visible) .logo-mark{opacity:0}
.sidebar:is(:hover,.exp) .logo-full,.sidebar:has(:focus-visible) .logo-full{opacity:1}
.sidebar:is(:hover,.exp) .nav-label,.sidebar:has(:focus-visible) .nav-label{opacity:1}
.sidebar:is(:hover,.exp) nav>a>span,.sidebar:is(:hover,.exp) nav>a>small,.sidebar:is(:hover,.exp) .side-bottom a>span,.sidebar:is(:hover,.exp) .side-user>span:not(.avatar),.sidebar:is(:hover,.exp) .side-user>svg,.sidebar:has(:focus-visible) nav>a>span,.sidebar:has(:focus-visible) nav>a>small,.sidebar:has(:focus-visible) .side-bottom a>span,.sidebar:has(:focus-visible) .side-user>span:not(.avatar),.sidebar:has(:focus-visible) .side-user>svg{opacity:1;transition-delay:.12s}
.sidebar:is(:hover,.exp) .side-photo,.sidebar:has(:focus-visible) .side-photo{max-height:160px;min-height:151px;margin:22px 0 14px;opacity:1}
.sidebar .side-bottom{padding:10px 12px}
.sidebar .side-user{margin:6px 0 0;padding-top:16px}
.content{padding-left:32px}
}
@media(max-width:760px){
.sidebar{width:268px;padding:22px 14px 14px}
.sidebar .logo-mark{opacity:0}.sidebar .logo-full{opacity:1}
.sidebar .side-photo{min-height:140px}
}

/* ---------- quick search ---------- */
.top-search{background:#fff;border:1px solid #e3e9f0;border-radius:999px;padding:9px 14px;cursor:pointer;transition:border-color .3s,box-shadow .3s,color .3s}
.top-search:hover{border-color:#bfcbf3;box-shadow:0 10px 22px -14px #4261ee88;color:var(--blue)}
.top-search kbd{font:inherit;font-size:10px;padding:2px 7px;border-radius:6px;background:#eef2ff;color:var(--blue);margin-left:6px}
.qs{position:fixed;inset:0;z-index:120;display:grid;justify-items:center;align-items:start;padding:12vh 16px 16px;background:#182b3466;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.qs.open{opacity:1;visibility:visible;transition:opacity .25s}
.qs-box{width:min(620px,100%);background:#fff;border-radius:22px;box-shadow:0 40px 90px -30px #182b34aa;overflow:hidden;scale:.96;translate:0 -10px;transition:scale .4s var(--spring),translate .4s var(--spring)}
.qs.open .qs-box{scale:1;translate:0 0}
.qs-input{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #eef1f5}
.qs-input svg{width:20px;height:20px;color:#8ba0ad}
.qs-input input{flex:1;border:0;outline:0;font-size:16px;background:none;color:var(--ink)}
.qs-input kbd{font:inherit;font-size:10px;padding:3px 8px;border-radius:6px;background:#eef2ff;color:var(--blue)}
.qs-list{max-height:min(52vh,420px);overflow:auto;padding:8px}
.qs-item{display:flex;align-items:center;gap:14px;padding:10px;border-radius:14px;color:var(--ink);transition:background-color .2s}
.qs-item:hover,.qs-item.hl{background:#eef2ff}
.qs-item img{width:56px;height:46px;border-radius:10px;object-fit:cover;flex:none}
.qs-item b{display:block;font-weight:500;font-size:14px}
.qs-item small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.qs-empty{padding:26px;text-align:center;color:var(--muted);font-size:13px}