/* Tips på kartan, sevärdheter och Vart ska du? (tips.js). Klasser börjar med tp-. */
.tp-pin{width:30px;height:30px;border-radius:9px 9px 9px 2px}
.tp-pin.sev{border-radius:7px}
.tp-pin.big{width:38px;height:38px}
.tp-pin.big svg{width:19px;height:19px}
.tp-kind{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6A4C93;margin-bottom:2px}
.tp-kind.sev{color:#8A5A1F}
.tp-kind.warn{color:#B3261E}
.tp-peek .pb{padding-bottom:10px}
.tp-peek p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tp-co{font-size:12px!important;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:4px!important}
.tp-co .linkbtn{font-size:12px}
.tp-dest .tp-co{display:block;margin-top:2px!important}
.tp-acts{display:flex;align-items:center;gap:14px;margin-top:8px}
.tp-acts .linkbtn{font-size:13px;color:var(--muted)}
.tp-like{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:500;color:var(--ink)}
.tp-like svg{width:15px;height:15px}
.tp-like b{font-weight:600}
.tp-like.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tp-row{cursor:default}
.tp-name{all:unset;cursor:pointer;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.tp-name:hover{color:var(--act)}
.tp-name:focus-visible{outline:2px solid var(--act);outline-offset:2px;border-radius:4px}
.tp-name small{font-size:13px;font-weight:400;color:var(--muted);margin-left:4px}
.tp-rowacts{margin-top:8px}

/* Knappen på Utforskas karta */
.ux-tipbtn{position:absolute;right:12px;top:12px;z-index:700;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border:0;border-radius:999px;background:var(--act);color:#fff;font-size:14px;font-weight:600;box-shadow:0 2px 10px rgba(23,25,28,.25)}
.ux-tipbtn svg{width:16px;height:16px}
.ux-tipbtn:hover{background:var(--act-d)}
.ux-hacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Rutan */
.tp-sheet{max-width:600px}
.tp-mapwrap{position:relative;height:240px;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-top:10px}
.tp-mapwrap>div:first-child{position:absolute;inset:0}
.tp-here{position:absolute;left:10px;bottom:10px;z-index:700;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid rgba(23,25,28,.12);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);box-shadow:0 1px 6px rgba(23,25,28,.18)}
.tp-here svg{width:16px;height:16px}
.tp-kinds{border:0;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tp-kinds label{position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 13px;min-height:40px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;background:#fff}
.tp-kinds label svg{width:16px;height:16px;display:block}
.tp-kinds input{position:absolute;opacity:0;pointer-events:none}
.tp-kinds label.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tp-kinds label.on span{color:#fff!important}
.tp-kinds label:focus-within{outline:2px solid var(--act);outline-offset:2px}
.tp-photo{display:flex;align-items:center;gap:12px;margin-top:14px}
.tp-photo img{width:96px;height:72px;object-fit:cover;border-radius:10px}
.tp-photo .btn svg{width:16px;height:16px}
.tp-note{margin-top:12px}

/* I närheten (områdesguiden och vägsidan) */
.tp-gsec h2 svg{color:inherit}
.tp-mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tp-mlist li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.tp-mlist li:first-child{border-top:0}
.tp-mlist b{display:block;font-size:16px;font-weight:600}
.tp-mlist small{display:block;font-size:13px;color:var(--muted)}
.tp-mlist span>span{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.tp-mi{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:#fff}
.tp-mi svg{width:17px;height:17px}
.tp-gacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tp-gacts .btn svg{width:16px;height:16px}
.tp-near{margin-top:24px}
.tp-near h3{font-size:17px;margin-bottom:6px}
.tp-near>a{display:inline-block;margin-top:6px;font-weight:500}

/* Konto */
.tp-klist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tp-krow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.tp-krow:first-child{border-top:0}
.tp-krow>span:nth-child(2){flex:1;min-width:0}
.tp-krow b{display:block;font-weight:600}
.tp-krow small{font-size:13px;color:var(--muted)}
.tp-krow .linkbtn{font-size:14px;color:var(--muted)}

/* Vart ska du? */
#tripMap{position:absolute;inset:0}
.tp-q{margin-bottom:10px}
.tp-sugs{display:flex;flex-direction:column;border-radius:14px;overflow:hidden}
.tp-sugs:not(:empty){border:1px solid var(--line);margin-bottom:14px}
.tp-sug{all:unset;cursor:pointer;display:flex;flex-direction:column;padding:11px 16px;border-top:1px solid var(--line);background:#fff}
.tp-sug:first-child{border-top:0}
.tp-sug:hover,.tp-sug:focus-visible{background:var(--mist)}
.tp-sug b{font-weight:600}
.tp-sug small{font-size:13px;color:var(--muted)}
.tp-nosug{padding:12px 16px;margin:0}
.tp-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
.tp-dest{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--mist);margin-bottom:14px}
.tp-dest>div:first-child{flex:1;min-width:140px}
.tp-dest small{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tp-dest b{font-size:20px;font-weight:600}
.tp-dest .linkbtn{font-size:14px}
.tp-radii{background:#fff}
.tp-rsec h2{font-size:18px;margin:22px 0 10px}
.tp-rsec h2 small{font-size:14px;font-weight:500;color:var(--muted);margin-left:2px}
.tp-rlist{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tp-rlist>.fo-row{border-radius:0}
.tp-rrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;background:#fff}
.tp-rrow:first-child{border-top:0}
.tp-rrow:hover{background:var(--mist)}
.tp-rrow>span:nth-child(2){flex:1;min-width:0}
.tp-rrow b{display:block;font-weight:600}
.tp-rrow small{font-size:13px;color:var(--muted)}
.tp-rrow>svg{flex:none;width:18px;height:18px;color:var(--muted)}
.tp-goal{position:absolute;transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:5px 11px 5px 8px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(23,25,28,.3)}
.tp-goal svg{width:15px;height:15px}

@media (max-width:860px){
  .ux-head{flex-direction:column;align-items:stretch}
  .ux-hacts{justify-content:flex-start}
  .tp-trip .fo-dirgrid{display:flex;flex-direction:column;align-items:stretch}
  .tp-trip .fo-mapcol{display:block;order:-1;height:300px;margin:0 -16px 16px}
  .tp-mapwrap{height:210px}
  .tp-row .fo-row-ph{width:88px}
}