/* assets/portal.css */

/* Accessibility: skip link */
.skip{
  position:absolute;
  left:-999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.skip:focus{
  left:16px; top:16px;
  width:auto; height:auto;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.22);
  background:rgba(2,6,23,0.85);
  z-index:9999;
}

:root{
  --bg0:#050814;
  --bg1:#0b1020;
  --card:rgba(15,23,42,0.78);
  --card2:rgba(2,6,23,0.35);
  --border:rgba(148,163,184,0.22);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --blue:#60a5fa;
  --purple:#a78bfa;
  --pink:#fb7185;
  --orange:#fb923c;
  --shadow:0 24px 70px rgba(0,0,0,0.55);
  --shadow2:0 12px 40px rgba(0,0,0,0.35);
  --ring:0 0 0 4px rgba(96,165,250,0.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 520px at 15% -10%, rgba(96,165,250,0.25), transparent 60%),
    radial-gradient(950px 460px at 95% 0%, rgba(167,139,250,0.22), transparent 60%),
    radial-gradient(900px 520px at 40% 110%, rgba(251,113,133,0.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  min-height:100vh;
}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:16px 16px 46px}

/* Sticky header */
header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px);
  background:linear-gradient(90deg, rgba(15,23,42,0.92), rgba(2,6,23,0.92));
  border-bottom:1px solid var(--border);
}
.header-row{
  max-width:1180px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.brand{display:flex;flex-direction:column;gap:2px}
.brand h1{margin:0;font-size:1rem;letter-spacing:.12em;text-transform:uppercase}
.brand p{margin:0;color:var(--muted);font-size:.86rem}

.nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(2,6,23,0.40);
  color:#cbd5e1;font-size:.8rem;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,23,42,0.55);
  text-decoration:none;font-size:.86rem;color:var(--text);
  transition:transform .10s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 10px 26px rgba(0,0,0,0.18);
}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:none;box-shadow:var(--ring), 0 10px 30px rgba(0,0,0,0.28)}
.btn.primary{border:none;background:linear-gradient(135deg, var(--blue), var(--purple));color:#081026;font-weight:900}
.btn.warm{border:none;background:linear-gradient(135deg, var(--pink), var(--orange));color:#081026;font-weight:900}
.btn.soft{background:rgba(15,23,42,0.35)}
.btn.small{padding:8px 10px;font-size:.82rem}

/* 5 tabs */
.tabs-row{
  max-width:1180px;margin:0 auto;
  padding:0 16px 12px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(148,163,184,0.22);
  background:rgba(2,6,23,0.30);
  text-decoration:none;font-size:.86rem;color:#e5e7eb;
  transition:transform .10s ease, background .12s ease;
}
.tab:hover{transform:translateY(-1px)}
.tab.active{
  border:none;
  background:linear-gradient(135deg, rgba(96,165,250,0.95), rgba(167,139,250,0.95));
  color:#081026;
  font-weight:950;
}

/* Hero */
.hero{padding:18px 0 10px}
.hero-wrap{
  border:1px solid rgba(148,163,184,0.16);
  background:linear-gradient(180deg, rgba(2,6,23,0.36), rgba(2,6,23,0.18));
  border-radius:22px;
  box-shadow:var(--shadow2);
  overflow:hidden;
  position:relative;
}
.hero-wrap::before{
  content:"";
  position:absolute;inset:-2px;
  background:radial-gradient(900px 420px at 20% 10%, rgba(96,165,250,0.14), transparent 60%),
             radial-gradient(820px 420px at 90% 0%, rgba(167,139,250,0.14), transparent 60%),
             radial-gradient(760px 380px at 55% 110%, rgba(251,113,133,0.10), transparent 60%);
  pointer-events:none;
  filter:blur(2px);
}
.hero-inner{position:relative;padding:18px 16px}
@media(min-width:920px){ .hero-inner{padding:22px 22px} }
.kicker{
  display:inline-flex;gap:8px;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(2,6,23,0.28);
  color:rgba(229,231,235,0.82);
  font-size:.82rem;
}
.hero h2{
  margin:10px 0 0;
  font-size:1.55rem;
  letter-spacing:-0.02em;
  line-height:1.14;
}
@media(min-width:920px){ .hero h2{font-size:2.15rem} }
.hero .sub{
  margin:10px 0 0;
  color:rgba(229,231,235,0.74);
  max-width:860px;
  line-height:1.45;
  font-size:.96rem;
}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hero-ctas .btn{padding:10px 14px}
.statbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.stat{
  padding:10px 12px;border-radius:16px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(2,6,23,0.30);
  box-shadow:0 10px 30px rgba(0,0,0,0.22);
  min-width:140px;
}
.stat .k{font-size:.78rem;color:rgba(156,163,175,0.92)}
.stat .v{font-size:1.08rem;font-weight:950;margin-top:2px}

/* Cards */
.grid{display:grid;gap:14px}
.core{margin-top:16px;grid-template-columns:repeat(12,1fr)}
.core .card{grid-column:span 12}
@media(min-width:920px){ .core .card{grid-column:span 3} }
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow2);
  overflow:hidden;
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(147,197,253,0.34);
  box-shadow:0 18px 60px rgba(0,0,0,0.45);
}
.card-inner{padding:14px}
.head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.title{margin:0;font-weight:950;font-size:1rem}
.meta{margin:2px 0 0;color:rgba(156,163,175,0.95);font-size:.83rem}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,0.20);
  background:rgba(2,6,23,0.35);
  color:#cbd5e1;font-size:.78rem;white-space:nowrap;
}
.desc{margin:10px 0 0;color:#cbd5e1;font-size:.90rem;line-height:1.42}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* Search */
.section-title{margin:22px 0 8px;font-size:1.12rem}
.section-sub{margin:0 0 14px;color:rgba(229,231,235,0.70);font-size:.9rem}
.searchwrap{
  margin-top:18px;
  border:1px solid rgba(148,163,184,0.16);
  background:rgba(2,6,23,0.24);
  border-radius:22px;
  padding:14px;
  box-shadow:var(--shadow2);
}
.searchbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:12px;border-radius:18px;border:1px solid rgba(148,163,184,0.18);
  background:rgba(2,6,23,0.30);
}
.searchbar input{
  flex:1 1 280px;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(148,163,184,0.28);
  background:rgba(2,6,23,0.35);
  color:#e5e7eb;font-size:.95rem;
  outline:none;
}
.searchbar input:focus{box-shadow:var(--ring);border-color:rgba(147,197,253,0.35)}
.searchbar .hint{color:rgba(229,231,235,0.62);font-size:.85rem}

/* Results / Store list */
.stores{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.store-top{display:flex;gap:10px;align-items:center}
.logo{width:46px;height:46px;border-radius:50%;object-fit:cover;background:rgba(148,163,184,0.18);border:1px solid rgba(148,163,184,0.25)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:.74rem;padding:3px 8px;border-radius:999px;background:rgba(148,163,184,0.12);border:1px solid rgba(148,163,184,0.20);color:#e5e7eb}
.preview{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pitem{
  display:flex;gap:10px;align-items:center;
  padding:9px;border-radius:14px;border:1px solid rgba(148,163,184,0.18);
  background:rgba(2,6,23,0.26);
  text-decoration:none;
}
.pimg{width:44px;height:44px;border-radius:12px;object-fit:cover;background:rgba(148,163,184,0.18);border:1px solid rgba(148,163,184,0.22)}
.pname{font-weight:900;font-size:.9rem;line-height:1.15;margin:0}
.pmeta{margin:2px 0 0;font-size:.8rem;color:rgba(156,163,175,0.95);line-height:1.2}
.price{color:#e5e7eb;font-weight:950}
.strike{text-decoration:line-through;color:#94a3b8;margin-left:6px;font-weight:700}

.note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(2,6,23,0.25);
  color:rgba(229,231,235,0.75);
  font-size:.86rem;
}

.mini{margin-top:12px;border-top:1px solid rgba(148,163,184,0.16);padding-top:12px}
.mini h4{margin:0 0 8px;font-size:.78rem;color:#cbd5e1;text-transform:uppercase;letter-spacing:.08em}
.mini-list{display:flex;flex-direction:column;gap:8px}
.mini-item{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px;border-radius:14px;border:1px solid rgba(148,163,184,0.18);
  background:rgba(2,6,23,0.28);
}
.mini-item .left{min-width:0}
.mini-item .name{font-weight:900;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-item .sub{color:rgba(156,163,175,0.95);font-size:.8rem;margin-top:2px}
.mini-item a{color:#93c5fd;text-decoration:underline;font-size:.84rem}

footer{
  border-top:1px solid rgba(148,163,184,0.16);
  margin-top:24px;padding-top:14px;
  color:rgba(229,231,235,0.68);font-size:.86rem;
}
.muted{color:var(--muted)}
.fadein{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}


/* ---------------- Vibe dropdown ---------------- */
.mf-vibe{ display:flex; align-items:center; gap:8px; margin-right:10px; }
.mf-vibe__label{ opacity:.85; font-size:.9rem; }
.mf-vibe select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,0.20);
  color: inherit;
  padding: 8px 10px;
  border-radius: 10px;
}

/* ---------------- Hero background image support ---------------- */
.hero-wrap.hero-wrap-img{
  background:
    linear-gradient(180deg, rgba(2,6,23,0.60), rgba(2,6,23,0.18)),
    var(--mf-hero-image) center/cover no-repeat !important;
  position: relative;
}
.hero-wrap.hero-wrap-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(96,165,250,0.18), transparent 60%),
    radial-gradient(820px 420px at 90% 0%, rgba(167,139,250,0.18), transparent 60%),
    radial-gradient(760px 380px at 55% 110%, rgba(251,113,133,0.12), transparent 60%);
  pointer-events:none;
}
.hero-wrap.hero-wrap-img > *{ position:relative; z-index:1; }

/* ---------------- Card background image support ---------------- */
.card.card--img{ position:relative; overflow:hidden; }
.card.card--img::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(2,6,23,0.66), rgba(2,6,23,0.32)),
    var(--mf-card-image) center/cover no-repeat;
  opacity:.40;
  transform: scale(1.02);
  pointer-events:none;
}
.card.card--img .card-inner{ position:relative; z-index:1; }

/* ---------- Premium motion (subtle) ---------- */
.hero-wrap-img{
  background-size: 105%;
  transition: background-size .6s ease;
}
.hero-wrap-img:hover{
  background-size: 110%;
}
.card--img::before{
  transition: transform .6s ease, opacity .4s ease;
}
.card--img:hover::before{
  transform: scale(1.08);
  opacity: .55;
}