/* Önskad / önskelista med reservera-present — SPA-stilar.
   "Fest/firande"-identitet: ljus grädde + lekfull sex-färgs party-palett,
   Fraunces 900 display mot Nunito, sneda sticker-kort med hard shadows. */
:root {
  --cream:#FFF6EC;      /* varm grädde-bakgrund */
  --panel:#FFFDF8;      /* upphöjt kort */
  --ink:#2C2140;        /* druv-bläck (ej svart) */
  --muted:#6B5E82;      /* dämpad grape */
  --line:#EAD9F0;       /* mjuk lila hairline */
  /* party-palett */
  --grape:#7A3EA1;      /* party-lila */
  --coral:#FF6B5E;      /* korall */
  --sun:#FFC24B;        /* sol-gul */
  --mint:#4ECDA4;       /* mynta */
  --sky:#59B8FF;        /* himmelsblå */
  /* semantiska roller */
  --accent:#7A3EA1;
  --accent-ink:#5E2F7E;
  --good:#2f8f6f;
  --danger:#e0503f;
  --shadow:rgba(44,33,64,.18);
  --serif:'Fraunces',Georgia,"Times New Roman",serif;
  --sans:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--grape)}
.wrap{max-width:960px;margin:0 auto;padding:22px 20px 72px}
.narrow{max-width:440px;margin:0 auto}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:2px solid var(--ink);background:var(--panel)}
.logo{display:flex;align-items:center;gap:9px;cursor:pointer}
.logo .logo-mark{display:inline-flex;width:30px;height:30px}
.logo .logo-mark svg{width:30px;height:30px;display:block}
.logo b{font-family:var(--serif);font-weight:900;font-size:1.4rem;letter-spacing:-.02em;color:var(--grape)}
.topbar .right{display:flex;align-items:center;gap:12px;font-size:.9rem}

/* Buttons — chunky, rounded, playful hard-shadow */
.btn{font:inherit;font-family:var(--sans);font-weight:800;font-size:.95rem;border:2.5px solid var(--ink);background:var(--coral);color:#fff;padding:11px 20px;border-radius:44px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;box-shadow:3px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{background:var(--coral);transform:translateY(-2px) rotate(-1deg);box-shadow:4px 6px 0 var(--ink)}
.btn:active{transform:translateY(0);box-shadow:2px 2px 0 var(--ink)}
.btn.sm{padding:7px 15px;font-size:.85rem;box-shadow:2px 3px 0 var(--ink)}
.btn.sm:hover{box-shadow:3px 4px 0 var(--ink)}
.btn.subtle{background:var(--cream);color:var(--ink);border-color:var(--ink);box-shadow:3px 4px 0 var(--mint)}
.btn.subtle:hover{background:#fff;box-shadow:4px 6px 0 var(--mint)}
.btn.danger{background:transparent;color:var(--danger);border-color:transparent;box-shadow:none;font-weight:700}
.btn.danger:hover{background:#e0503f14;transform:none;box-shadow:none}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.linkbtn{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-weight:700;font-size:.86rem;padding:4px;text-decoration:none}
.linkbtn:hover{color:var(--grape)}

/* Cards / forms */
.card{background:var(--panel);border:2.5px solid var(--ink);border-radius:20px;padding:22px;box-shadow:5px 6px 0 var(--shadow)}
h1{font-family:var(--serif);font-weight:900;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
h2{font-family:var(--serif);font-weight:900;letter-spacing:-.01em}
h3{font-family:var(--serif);font-weight:700}
label{display:block;font-size:.85rem;font-weight:700;color:var(--muted);margin:12px 0 4px}
input,select,textarea{font:inherit;width:100%;padding:10px 13px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--grape);box-shadow:0 0 0 3px #7A3EA133}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1}
.err{color:var(--danger);font-size:.86rem;font-weight:700;margin-top:8px}
.pill{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.03em;color:var(--ink);background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:4px 13px;box-shadow:2px 2px 0 var(--ink)}
.pill.pro{background:var(--grape);color:#fff;border-color:var(--ink)}
.muted{color:var(--muted)}
.divider{border:0;height:0;margin:38px 0;position:relative}
.foot{margin-top:40px;color:var(--muted);font-size:.82rem;font-weight:600;text-align:center}

/* Wavy divider (SVG bg) */
.wave-divider{display:block;width:100vw;position:relative;left:50%;transform:translateX(-50%);height:64px;margin:8px 0}

/* ── Landing ─────────────────────────────────────────── */
.landing-hero{position:relative;padding:34px 0 8px}
.confetti{position:absolute;inset:-10px 0 auto 0;height:100%;overflow:hidden;pointer-events:none;z-index:0}
.confetti svg{position:absolute}
.hero{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin:8px 0}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:28px}}
.hero .tag{display:inline-block;background:var(--sun);color:var(--ink);font-weight:800;font-size:.8rem;padding:7px 16px;border-radius:40px;transform:rotate(-2deg);margin-bottom:18px;box-shadow:3px 3px 0 var(--ink);border:2px solid var(--ink)}
.hero h1{font-size:clamp(2.6rem,6vw,4.2rem);line-height:.96;margin:.1em 0 .2em}
.hero h1 .u{color:var(--coral);position:relative;display:inline-block}
.hero h1 .u svg{position:absolute;left:-3%;right:-3%;bottom:-.12em;width:106%;height:.22em}
.hero p{font-size:1.1rem;color:var(--muted);max-width:44ch;font-weight:500}
.hero .cta-row{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap}

.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:560px){.plan-grid{grid-template-columns:1fr}}
.plan{border:2.5px solid var(--ink);border-radius:22px;padding:26px 24px;background:#fff;box-shadow:5px 6px 0 var(--sky)}
.plan.pro{background:var(--ink);color:var(--cream);box-shadow:5px 6px 0 var(--coral);position:relative}
.plan.pro h3{color:#fff}
.plan.pro .muted{color:#C9B8DE}
.price{font-family:var(--serif);font-weight:900;font-size:2.2rem;margin:8px 0}
.plan.pro .price{color:var(--sun)}
.feat{list-style:none;padding:0;margin:14px 0 18px;font-size:.94rem;font-weight:600}
.feat li{padding:6px 0 6px 28px;position:relative}
.feat li:before{content:"";position:absolute;left:0;top:.5em;width:18px;height:18px;border-radius:50%;background:var(--mint)}
.feat li:after{content:"";position:absolute;left:5px;top:.72em;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.plan.pro .feat li:before{background:var(--sun)}

/* How it works — sneda sticker-kort */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:900px;margin:26px auto 0}
@media(max-width:680px){.how-grid{grid-template-columns:1fr}}
.how-step{position:relative;text-align:left;background:var(--panel);border:2.5px solid var(--ink);border-radius:20px;padding:30px 24px 24px;box-shadow:4px 6px 0 var(--shadow)}
.how-step:nth-child(1){transform:rotate(-1.4deg)}
.how-step:nth-child(2){transform:rotate(1deg);margin-top:12px}
.how-step:nth-child(3){transform:rotate(-.6deg)}
.how-num{position:absolute;top:-18px;left:22px;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:2.5px solid var(--ink);font-family:var(--serif);font-weight:900;font-size:1.1rem;color:#fff;box-shadow:2px 3px 0 var(--ink)}
.how-step:nth-child(1) .how-num{background:var(--coral)}
.how-step:nth-child(2) .how-num{background:var(--mint);color:var(--ink)}
.how-step:nth-child(3) .how-num{background:var(--sun);color:var(--ink)}
.how-icon{width:56px;height:56px;margin:8px 0 12px;display:block}
.how-step h3{font-size:1.15rem;margin:2px 0 6px}
.how-step p{color:var(--muted);font-size:.94rem;font-weight:500;margin:0}
@media(max-width:680px){.how-step{transform:none!important;margin-top:22px!important}}

/* Secret-band (differentierande budskap) — gul highlight sticker */
.secret-band{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin:42px auto 0;max-width:820px;padding:26px 30px;background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);border-radius:24px;box-shadow:6px 7px 0 var(--shadow);transform:rotate(-.5deg)}
.secret-icon{width:66px;height:66px;flex:none}
.secret-icon svg{width:66px;height:66px;display:block}
.secret-band h3{font-size:1.3rem;color:var(--ink)}
.secret-band p{font-weight:600}
@media(max-width:560px){.secret-band{grid-template-columns:1fr;text-align:center}.secret-icon{margin:0 auto}}

/* Section headings on cream */
.sec-head{text-align:center;font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:6px}
.sec-sub{text-align:center;color:var(--muted);font-weight:600;margin:0 0 8px}

/* Demo-kort — sneda sticker */
.demo-col{position:relative}
.demo-card{padding:20px;transform:rotate(1.4deg);box-shadow:6px 7px 0 var(--grape)}
.demo-head{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:900;font-size:1.15rem;margin-bottom:14px}
.demo-emoji{display:inline-flex;width:26px;height:26px}
.demo-emoji svg{width:26px;height:26px}
.demo-list{display:flex;flex-direction:column;gap:9px}
.demo-wrow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff}
.demo-wrow.is-reserved{opacity:.6;background:var(--cream)}
.demo-foot{font-size:.8rem;font-weight:600;margin-top:14px;text-align:center}
.res-free{font-size:.82rem;color:var(--grape);font-weight:800;white-space:nowrap}

/* Dashboard tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:20px}
.tile{border:2.5px solid var(--ink);border-radius:18px;padding:18px 20px;background:var(--panel);cursor:pointer;box-shadow:4px 5px 0 var(--shadow);transition:transform .12s,box-shadow .12s}
.tile:hover{transform:translateY(-3px);box-shadow:5px 7px 0 var(--coral)}
.tile-occ{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--coral);font-weight:800;min-height:1em}
.tile h3{margin:4px 0 6px;font-size:1.15rem}

/* Occasion tag */
.occ-tag{display:inline-block;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);font-weight:800;background:var(--mint);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;box-shadow:2px 2px 0 var(--ink)}

/* Owner note (surprise-safe banner) */
.owner-note{display:flex;gap:10px;align-items:flex-start;margin:20px 0 8px;padding:14px 18px;background:var(--mint);border:2.5px solid var(--ink);border-radius:16px;font-size:.92rem;font-weight:600;color:var(--ink);box-shadow:3px 4px 0 var(--shadow)}
.owner-note .note-ic{flex:none;width:24px;height:24px}
.owner-note .note-ic svg{width:24px;height:24px;display:block}

/* Guest intro */
.guest-intro{margin:18px 0 8px;padding:14px 18px;background:var(--sun);border:2.5px solid var(--ink);border-radius:16px;font-size:.92rem;font-weight:600;box-shadow:3px 4px 0 var(--shadow)}

/* Wishlist rows */
.wishlist{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.wrow{display:flex;gap:14px;align-items:flex-start;border:2.5px solid var(--ink);border-radius:16px;padding:15px 17px;background:#fff;box-shadow:3px 4px 0 var(--shadow)}
.wrow.is-reserved{opacity:.66;background:var(--cream)}
.wimg{width:60px;height:60px;object-fit:cover;border-radius:12px;flex:none;background:var(--cream);border:2px solid var(--line)}
.wrow-main{flex:1;min-width:0}
.wtitle{font-weight:800;font-size:1.04rem;line-height:1.3}
.wmeta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:3px;font-size:.88rem}
.wprice{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.wlink{font-size:.86rem;font-weight:800;text-decoration:none;color:var(--grape)}
.wlink:hover{text-decoration:underline}
.wnote{margin-top:6px;font-size:.88rem;color:var(--muted);font-weight:500}
.wrow-actions{flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.wrow-res{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.res-badge{display:inline-block;font-size:.78rem;font-weight:800;color:var(--ink);background:var(--cream);border:2px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap}
.res-badge.mine{color:var(--ink);background:var(--mint);border-color:var(--ink)}
.add-wish{margin-top:18px;width:100%}
@media(max-width:560px){
  .wrow{flex-wrap:wrap}
  .wrow-actions{flex-direction:row;width:100%;justify-content:flex-end;margin-top:4px}
  .wrow-res{flex-direction:row;align-items:center}
}

/* Share CTA on guest view */
.share-cta{margin-top:30px;text-align:center}

/* QR / share modal */
.qr-tile{display:flex;justify-content:center;padding:16px;background:#fff;border:2.5px solid var(--ink);border-radius:14px}
.qr-tile #qr{display:flex;line-height:0}
.share-link{display:flex;gap:8px;margin-top:14px}
.share-link input{flex:1;min-width:0;font-size:.82rem;color:var(--muted)}
.share-link .btn{flex:0 0 auto;white-space:nowrap}

/* Consent bar */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;background:var(--panel);border:2.5px solid var(--ink);border-radius:16px;box-shadow:5px 6px 0 var(--shadow);padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;max-width:640px;margin:0 auto}
.consent-lead{font-size:.9rem;font-weight:600;color:var(--ink)}
.consent-btns{display:flex;gap:8px;flex:0 0 auto}

/* Install button */
.installbtn{position:fixed;left:16px;bottom:16px;z-index:150;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;background:var(--panel);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 4px 0 var(--shadow);font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}
.installbtn:hover{color:var(--grape)}
.installbtn svg{display:block}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream);padding:11px 18px;border-radius:12px;font-size:.88rem;font-weight:700;z-index:50;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}

/* Modal */
.modal-bg{position:fixed;inset:0;background:#2C214066;display:grid;place-items:center;z-index:40;padding:16px;overflow:auto}
.modal{background:var(--panel);border:2.5px solid var(--ink);border-radius:22px;padding:24px;max-width:440px;width:100%;margin:auto;box-shadow:6px 8px 0 var(--shadow)}
.modal h2{margin:0 0 4px}

:focus-visible{outline:3px solid var(--grape);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  .confetti{display:none}
}