/* Extension-demo: fejk-webbläsare + extension-popup + ping-notis */

.stage-wrap { padding: var(--sp-5) 0 var(--sp-7); }
.demo-lead { text-align:center; max-width:640px; margin:0 auto var(--sp-5); }
.demo-lead h1 { margin-bottom:8px; }
.demo-lead p { color:var(--ink-700); }

/* Fejk-webbläsare */
.browser {
  max-width: 960px; margin: 0 auto; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow: var(--sh-3); position:relative;
}
.browser-chrome {
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  background:#eef1ee; border-bottom:1px solid var(--line);
}
.dots { display:flex; gap:7px; flex:none; }
.dots i { width:12px; height:12px; border-radius:50%; display:block; }
.dots i:nth-child(1){ background:#ff5f57; } .dots i:nth-child(2){ background:#febc2e; } .dots i:nth-child(3){ background:#28c840; }
.addr {
  flex:1; display:flex; align-items:center; gap:8px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 14px;
  color:var(--ink-700); font-size:.9rem; min-width:0;
}
.addr .lock { color:var(--gr-500); }
.addr .url { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toolbar { display:flex; align-items:center; gap:6px; flex:none; }
.ext-icon {
  position:relative; width:34px; height:34px; border-radius:9px; border:1px solid transparent;
  background:var(--gr-50); display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; transition:border-color .12s, background .12s;
}
.ext-icon:hover { border-color:var(--gr-200); }
.ext-icon.buzz { animation: buzz .5s ease 2; }
@keyframes buzz { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px) rotate(-6deg)} 75%{transform:translateX(2px) rotate(6deg)} }
.ext-icon .dot-badge { position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:var(--coral-500); border:2px solid #eef1ee; }

.browser-view { min-height:420px; position:relative; background:var(--bg); }

/* Butikssidan inuti webbläsaren */
.site { }
.site-hd { background:var(--paper); border-bottom:1px solid var(--line); padding:14px 22px; display:flex; align-items:center; justify-content:space-between; }
.site-hd .logo { font-weight:800; display:flex; align-items:center; gap:8px; }
.site-hd .logo .m { width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#3b6f8f,#2b5068);display:inline-flex;align-items:center;justify-content:center;color:#fff; }
.site-hd .nav { display:flex; gap:18px; color:var(--ink-500); font-size:.9rem; }
.site-body { padding: var(--sp-6) 22px; }
.pdp { display:grid; grid-template-columns: 200px 1fr; gap:var(--sp-5); align-items:start; }
.pdp .img { aspect-ratio:1; background:var(--gr-50); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:4rem; }
.pdp h2 { margin:0 0 6px; }
.pdp .price { font-size:1.5rem; font-weight:800; margin:10px 0; }
.pdp .buy { margin-top:14px; }

/* Kvittosida */
.receipt { text-align:center; padding: var(--sp-7) 22px; }
.receipt .chk { width:56px;height:56px;border-radius:50%;background:var(--gr-100);color:var(--gr-600);display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:12px; }
.receipt .ordbox { max-width:420px; margin:var(--sp-4) auto 0; text-align:left; }
.receipt .ordbox .row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink-700); }
.receipt .ordbox .row.tot { font-weight:800; color:var(--ink-900); border-bottom:0; }

/* Extension-popup (ankrad under ikonen, uppe till höger) */
.ext-popup {
  position:absolute; top:8px; right:12px; z-index:30; width:340px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow: var(--sh-3); overflow:hidden;
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.ext-popup.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.ext-popup::before { content:""; position:absolute; top:-6px; right:20px; width:12px; height:12px; background:var(--paper); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); }
.pop-hd { display:flex; align-items:center; gap:9px; padding:13px 15px; border-bottom:1px solid var(--line); }
.pop-hd .h { width:26px;height:26px;border-radius:7px;background:var(--gr-500);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem; }
.pop-hd b { font-size:.95rem; }
.pop-hd .x { margin-left:auto; background:none;border:0;font-size:1.2rem;color:var(--ink-400);cursor:pointer;line-height:1; }
.pop-body { padding:15px; }
.pop-status { display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--gr-700); background:var(--gr-50); border-radius:var(--r-sm); padding:8px 11px; margin-bottom:12px; }
.pop-amount { font-size:1.15rem; font-weight:800; }
.pop-amount .sub { display:block; font-size:.8rem; font-weight:500; color:var(--ink-500); margin-top:2px; }
.pop-camp { display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:650; padding:8px 11px; border-radius:var(--r-sm); margin:11px 0; background:linear-gradient(100deg,#fff4e2,#ffe9e2); color:#a24218; border:1px solid #f6d3ba; }
.pop-charity { display:flex; align-items:center; gap:9px; border:1px solid var(--gr-100); background:var(--gr-50); border-radius:var(--r-sm); padding:9px 11px; margin:11px 0; }
.pop-charity .em { font-size:1.3rem; }
.pop-charity .g { flex:1; min-width:0; }
.pop-charity .nm { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pop-charity .ct { font-size:.75rem; color:var(--ink-500); }
.pop-charity .byt { background:none;border:0;color:var(--gr-600);font-weight:700;font-size:.82rem;cursor:pointer;flex:none; }
.pop-list { max-height:190px; overflow-y:auto; margin:10px -4px 0; }
.pop-filters { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.pop-filters .f { font-size:.72rem; padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink-700); }
.pop-filters .f.on { background:var(--gr-500); color:#fff; border-color:var(--gr-500); }
.pop-orow { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:1px solid transparent; border-radius:var(--r-sm); padding:7px 8px; cursor:pointer; font:inherit; }
.pop-orow:hover { background:var(--gr-50); }
.pop-orow.sel { border-color:var(--gr-200); background:var(--gr-50); }
.pop-orow .em { font-size:1.2rem; flex:none; }
.pop-orow .g { flex:1; min-width:0; }
.pop-orow .nm { font-weight:600; font-size:.85rem; }
.pop-orow .ct { font-size:.72rem; color:var(--ink-500); }
.pop-orow .tk { color:var(--gr-600); font-weight:800; opacity:0; }
.pop-orow.sel .tk { opacity:1; }
.pop-free { font-size:.76rem; color:var(--ink-500); margin-top:6px; }

/* Ping-notis (toast) */
.ext-toast {
  position:absolute; top:8px; right:12px; z-index:25; width:320px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow: var(--sh-3); padding:13px 15px; display:flex; gap:11px;
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.ext-toast.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.ext-toast .ti { width:34px;height:34px;border-radius:9px;background:var(--gr-50);display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none; }
.ext-toast .tg { flex:1; }
.ext-toast .tt { font-weight:700; font-size:.9rem; margin-bottom:2px; }
.ext-toast .td { font-size:.8rem; color:var(--ink-500); line-height:1.35; }
.ext-toast .ta { display:flex; gap:8px; margin-top:9px; }
.ext-toast .ta button { font:inherit; font-size:.82rem; font-weight:700; border-radius:var(--r-pill); padding:6px 14px; cursor:pointer; border:0; }
.ext-toast .ta .prim { background:var(--gr-500); color:#fff; }
.ext-toast .ta .sec { background:none; color:var(--ink-500); }

/* Aktiverad-bekräftelse i popup */
.pop-done { text-align:center; padding:8px 4px 4px; }
.pop-done .big { font-size:2rem; }
.reward-mini { display:flex; align-items:center; gap:11px; text-align:left; background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px; margin-top:12px; }
.reward-mini .seed { font-size:1.6rem; animation:pop .5s ease; }
@keyframes pop { 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }

/* Stegkontroller under webbläsaren */
.demo-controls { max-width:960px; margin:var(--sp-5) auto 0; display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.demo-hint { font-size:.85rem; color:var(--ink-500); }

@media (max-width: 720px) {
  .pdp { grid-template-columns:1fr; }
  .site-hd .nav { display:none; }
  .ext-popup, .ext-toast { width:calc(100% - 24px); }
}