@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap");

:root{
  --ink:#0B0B14;
  --muted:#5C5D70;
  --bg:#FFFFFF;
  --bg-soft:#F5F4FA;
  --card:#FFFFFF;

  --violet:#5B4CFF;
  --violet-deep:#3A2AD1;
  --violet-light:#ECE9FF;
  --sky:#00B6FF;
  --sky-light:#E3F7FF;
  --amber:#FFB020;
  --amber-light:#FFF2DA;
  --coral:#FF4066;
  --coral-light:#FFE6EB;
  --lime:#C8FF3E;
  --lime-deep:#8FCB00;

  --pine:var(--violet); --pine-deep:var(--violet-deep); --pine-light:var(--violet-light);
  --rock:#8A8AA0; --rock-light:#EFEFF6;
  --valley:var(--violet);
  --clay:var(--coral); --clay-light:var(--coral-light);
  --sun:var(--amber); --sun-light:var(--amber-light);

  --font-display:"Bricolage Grotesque", ui-sans-serif, sans-serif;

  --line:rgba(11,11,20,.10);
  --line-strong:rgba(11,11,20,.20);

  --glass-bg:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.75);
  --glass-blur:blur(20px) saturate(1.7);
  --glass-shadow:0 20px 60px rgba(20,10,70,.12), inset 0 1px 0 rgba(255,255,255,.6);

  --radius:0px;
  --radius-sm:0px;
  --radius-lg:0px;

  --shadow: 0 24px 60px rgba(20,10,60,.10);
  --shadow-sm: 0 10px 26px rgba(20,10,60,.08);
  --shadow-hover: 0 26px 60px rgba(20,10,60,.16);

  --transition: all .25s cubic-bezier(.4,0,.2,1);
}
*{border-radius:0 !important}
main .page{padding:8px 0 40px}
main .hero{
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  padding:30px;margin:24px 0 24px;
  box-shadow:var(--glass-shadow);
  position:relative;overflow:hidden;
}
main .h-title{margin:10px 0 0;font-size:clamp(26px,3vw,40px);line-height:1.06;font-weight:700}
main .h-sub{margin:14px 0 0;color:var(--muted);max-width:70ch;line-height:1.65;font-size:17px}
main .grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  margin-top:24px;
}
main .card{
  grid-column:span 12;
  background:var(--card);
  border:1px solid var(--line);
  padding:26px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
main .card > h2:first-child{margin-top:0;padding-top:0}
main .card > h2:first-child::before{display:none}
main .card h2:not(:first-child){
  margin-top:28px;padding-top:22px;
  border-top:1px solid var(--line);
}
main .card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
@media(min-width:860px){
main .card.left{grid-column:span 8}
main .card.right{grid-column:span 4}
}
main .kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:520px){
main .kv{grid-template-columns:repeat(3,minmax(0,1fr))}
}
main .k{
  padding:13px 15px;
  border:1px solid var(--line);
  background:var(--bg-soft);
}
main .k span{display:block;font-size:12px;color:var(--muted)}
main .k strong{display:block;margin-top:3px;font-size:14px;font-family:var(--font-display)}
main .badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;
  border:1px solid var(--line);
  background:#fff;
  font-size:13px;
  font-weight:700;
}
main .dot{width:10px;height:10px;background:var(--sky)}
main .dot.easy{background:var(--violet)}
main .dot.med{background:var(--amber)}
main .dot.hard{background:var(--coral)}
main .list{margin:10px 0 0;padding-left:18px;line-height:1.7}
main .list li{margin-bottom:6px}
main .list li:last-child{margin-bottom:0}
main .muted{color:var(--muted)}
main .btn{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(135deg, var(--violet) 0%, var(--sky) 100%);
  padding:12px 18px;font-weight:700;
  box-shadow:0 10px 26px rgba(91,76,255,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition:var(--transition);
}
main .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(91,76,255,.36);
  color:#fff;
}
main .footer{
  margin-top:80px;
  background:var(--ink);
  color:#EDEDF5;
  border-top:0;
  padding-top:0;
}
@media (max-width: 980px){
main .hero{padding:22px;margin:16px 0}
main .grid{gap:14px;margin-top:14px}
main .card{padding:20px}
main .card h2:not(:first-child){margin-top:22px;padding-top:18px}
main .kv{gap:8px}
}
main > section{
  max-width:var(--wrap, 1280px);
  margin-left:auto;
  margin-right:auto;
  padding-left:28px;
  padding-right:28px;
}
@media (max-width: 900px){
  main > section{
    padding-left:20px;padding-right:20px;
  }
}
main #trailMap, main .trailmap{
  height: 544px !important;
  min-height: 544px !important;
  width: 100% !important;
  display: block !important;
  position: relative;
}
main .trailmap .leaflet-container, main #trailMap.leaflet-container{
  height: 100% !important;
  width: 100% !important;
}
main .leaflet-container img{
  max-width: none !important;
}
main .card.mapcard, main .mapcard{
  overflow: visible !important;
  transform: none !important;
}
main .leaflet-pane, main .leaflet-tile, main .leaflet-marker-icon, main .leaflet-marker-shadow{
  image-rendering: auto;
}
main .card.mapcard{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
main .card.elevcard{
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
main .card.mapcard h3{ flex: 0 0 auto; }
main .card.mapcard .trailmap{
  flex: 1 1 auto;
  height: auto !important;
  min-height: 672px;
  width: 100%;
}
main .trailmap__hint{
  position:absolute; z-index:500; top:10px; left:50%; transform:translateX(-50%);
  background:rgba(11,11,20,.75); color:#fff; font-size:12.5px; font-weight:600;
  padding:6px 12px; pointer-events:none; white-space:nowrap;
}
main .trail-pin{
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; border-radius:50%;
  box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.4);
}
main .trail-pin--start{ color:#16a34a; }
main .trail-pin--end{ color:#dc2626; font-size:12px; }
main .webcam-card{ position: relative; overflow: visible !important; }
main .webcam-card a{ display:block; position:relative; }
main .webcam-card .card__img{ transition: transform .5s ease, filter .5s ease; }
main .webcam-card a:hover .card__img{ transform: scale(1.06); filter: saturate(1.08) contrast(1.03); }
main .webcam-badge{
  position:absolute; top:12px; left:12px;
  background: var(--coral); color:#fff; font-weight:800; font-size:12px;
  padding:6px 12px; letter-spacing:.06em;
  z-index:5; box-shadow: 0 8px 20px rgba(255,64,102,.35);
}
main .webcam-badge::before{
  content:""; display:inline-block; width:8px; height:8px; margin-right:6px;
  background:#fff;
  animation: webcam-pulse 1.5s infinite;
}
@keyframes webcam-pulse{
  0%{transform:scale(1);opacity:1}
  70%{transform:scale(1.8);opacity:0}
  100%{transform:scale(1.8);opacity:0}
}
main .card__body.center{ text-align:center; }
main .webcam-note{ display:block; margin-top:0; font-size:13px; font-weight:700; color:var(--muted); line-height:1.2; }
main .grid.cards.webcams,
main .grid.webcams{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
}
main .grid.cards.webcams > .card.webcam-card{
  grid-column:auto !important;
  width:auto !important;
}
@media (max-width: 980px){
main .grid.cards.webcams,
main .grid.webcams{
  grid-template-columns: 1fr !important;
}
}
main .card__body.center h3{
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 4px;
}
main .card__body.center h3::after{
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin: 6px auto 0;
  background: var(--violet);
}
main h1, main h2, main h3{font-family:var(--font-display)}
main .h-title{letter-spacing:-.01em}
main h2{position:relative;padding-top:12px}
main h2::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:3px;
  background:var(--coral);
}
main .h-title::before{display:none}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion: reduce){
main *::before, main *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
main .leaflet-container{z-index:0 !important;isolation:isolate}
main .trail-desc{color:var(--muted);line-height:1.7;margin:0}
main .warnbox{
  margin-top:14px;padding:13px 15px;
  background:var(--coral-light);border:1px solid rgba(255,64,102,.35);
  color:#8A0030;line-height:1.6;
}
main .salvamont{
  margin-top:14px;padding:13px 15px;
  background:var(--sky-light);border:1px solid rgba(0,182,255,.35);
}
main .salvamont p{margin:6px 0 0;color:var(--muted);line-height:1.7}
main .salvamont a{color:var(--violet-deep);font-weight:700}
main .list.similar li{margin-bottom:8px;line-height:1.5}
main .list.similar a{color:var(--violet-deep);font-weight:700}
main .list.similar a:hover{text-decoration:underline}
main .kv .k strong{font-weight:800}

/* FAQ accordion (trail pages) */
.faq{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.faq + div{margin-top:28px !important}
.faq-item{
  border:1px solid var(--line);background:var(--card);padding:11px 15px;
}
.faq-item summary{cursor:pointer;font-weight:700;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;font-weight:800;color:var(--coral)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:8px 0 0;color:var(--muted);line-height:1.6}

/* Tag pills (obiective pages) */
.pill2,.attraction-tags > *{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--glass-brd);color:var(--ink);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 3px 10px rgba(20,10,60,.06), inset 0 1px 0 rgba(255,255,255,.5);
  font-weight:600;font-size:12px;line-height:1;letter-spacing:.005em;
  padding:8px 14px;white-space:nowrap;
}
.attraction-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* Buton "Salveaza traseul" + spatiere hero */
.hero .h-title{margin-bottom:2px}
.hero .h-sub{margin:14px 0 0}
.savebar{margin:18px 0 6px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.savebtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;
  font-weight:800;font-size:15px;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%);
  color:#fff;text-shadow:0 1px 2px rgba(120,0,20,.35);
  box-shadow:0 10px 26px rgba(255,64,102,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s ease, box-shadow .15s ease;
}
.savebtn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,64,102,.36)}
.savebtn.is-saved{
  background:linear-gradient(135deg, var(--violet) 0%, var(--sky) 100%);
  border-color:rgba(255,255,255,.4);
  color:#fff;text-shadow:none;
}
.savehint{color:var(--muted);font-size:13px;font-weight:600}
.savehint a{text-decoration:underline}
#reportWidget{margin-top:18px !important;padding-top:16px;border-top:1px solid var(--line)}
#reportWidget .pill2{padding:10px 16px;font-size:13px}

/* ---- Traseu pro: acțiuni, meteo, profil (adăugat) ---- */
main .trail-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
main .btn--ghost{
  background:#fff; color:var(--ink, #14103c);
  border:1px solid rgba(15,23,42,.16);
  box-shadow:0 6px 16px rgba(20,10,60,.06);
}
main .btn--ghost:hover{ color:var(--ink, #14103c); transform:translateY(-2px); box-shadow:0 12px 26px rgba(20,10,60,.12); }

main .card.weathercard{ grid-column:1 / -1 !important; width:100% !important; }
main .wx-row{ display:flex; align-items:center; gap:18px; }
main .wx-temp{ font-family:var(--font-display); font-size:44px; font-weight:800; line-height:1; letter-spacing:-.02em; }
main .wx-info{ display:flex; flex-direction:column; gap:3px; }
main .wx-desc{ font-size:16px; font-weight:700; }
main .wx-meta{ color:var(--muted); font-size:13.5px; }
main .wx-loc{ margin-top:1px; }

main .elevWrap{ position:relative; }
main .elevWrap svg{ display:block; width:100%; height:auto; touch-action:none; }
main .egChips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
main .egChip{
  font-size:12px; padding:6px 11px;
  border:1px solid rgba(15,23,42,.12); background:var(--bg-soft, #f6f6fb);
}
main .egChip b{ color:#16a34a; font-weight:800; }
main .egTip{
  position:absolute; pointer-events:none; z-index:5;
  background:rgba(11,11,20,.85); color:#fff; font-size:11px; font-weight:700;
  padding:5px 8px; white-space:nowrap; transform:translate(-50%,-140%);
  opacity:0; transition:opacity .1s ease;
}
@media (max-width:560px){
  main .wx-temp{ font-size:36px; }
}

/* Marcaje start/sosire pe hartă (icon SVG, fără fundal Leaflet implicit) */
main .trail-marker{ background:transparent !important; border:0 !important; }
main .trail-marker svg{ display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

/* ---- POI pe traseu (OSM) ---- */
main .mapLegend{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px; }
main .mapLegend span{ display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); font-weight:700; }
main .mapLegend i{ width:10px; height:10px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
main .card.poi-section{ grid-column:1 / -1 !important; width:100% !important; }
main .poi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
main .poi-card{ border:1px solid var(--line); background:var(--bg-soft); padding:14px 16px; }
main .poi-card h3{ margin:0 0 8px; font-size:13px; display:flex; align-items:center; gap:8px; font-weight:800; }
main .poi-card h3 i{ width:10px; height:10px; border-radius:50%; }
main .poi-card h3 b{ margin-left:auto; font-size:11px; color:var(--muted); font-weight:700; }
main .poi-list{ list-style:none; margin:0; padding:0; }
main .poi-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:5px 0; font-size:13.4px; border-top:1px solid var(--line); }
main .poi-list li:first-child{ border-top:0; }
main .poi-list .poi-km{ font-size:11px; color:var(--muted); white-space:nowrap; }
@media (max-width:560px){ main .poi-grid{ grid-template-columns:1fr; } }

/* ---- Meteo extins (5 zile + cea mai bună zi + badge ANM) ---- */
main .wx-anm{ margin-bottom:2px; }
main .wx-badge{ display:inline-block; color:#fff; font-weight:800; font-size:12px; padding:5px 11px; margin-bottom:8px; }
main .wx-days{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px; }
main .wx-day{ border:1px solid var(--line); background:var(--bg-soft); padding:9px 8px; text-align:center; }
main .wx-day-n{ font-weight:800; font-size:12px; }
main .wx-day-d{ font-size:11px; color:var(--muted); margin-top:2px; }
main .wx-day-t{ font-weight:800; font-size:14px; margin-top:4px; }
main .wx-day-t span{ color:var(--muted); font-weight:600; font-size:12px; }
main .wx-day-p{ font-size:11px; color:#0ea5e9; font-weight:700; margin-top:2px; min-height:14px; }
main .wx-day.is-best{ border-color:#16a34a; box-shadow:inset 0 0 0 1px #16a34a; background:rgba(34,197,94,.08); }
main .wx-day.is-storm{ border-color:#dc2626; background:rgba(248,113,113,.10); }
main .wx-best{ margin-top:10px; font-size:13px; font-weight:700; }
main .wx-best b{ color:#166534; text-transform:capitalize; }
@media (max-width:560px){
  main .wx-days{ grid-template-columns:repeat(3,1fr); }
}

/* ---- Trimite planul turei (siguranță) ---- */
main .safety-plan{ margin-top:12px; }
main .safety-btn{ cursor:pointer; border:1px solid rgba(15,23,42,.14); background:#fff; }
main .safety-form{ margin-top:10px; max-width:460px; border:1px solid var(--line); background:var(--bg-soft); padding:14px; }
main .safety-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:9px; }
main .safety-field span{ font-size:12px; font-weight:800; color:var(--muted); }
main .safety-field input{ padding:9px 10px; border:1px solid rgba(15,23,42,.16); background:#fff; font:inherit; }
main .safety-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
main .safety-emerg{ margin-top:10px; font-size:13px; font-weight:700; }
main .safety-emerg a{ color:#dc2626; }

/* ---- Continuă tura ---- */
main .card.cont-section{ grid-column:1 / -1 !important; width:100% !important; }
main .cont-list{ list-style:none; margin:0; padding:0; }
main .cont-list li{ padding:8px 0; border-top:1px solid var(--line); }
main .cont-list li:first-child{ border-top:0; }
main .cont-list a{ color:inherit; }
main .cont-gap{ display:inline-block; margin-left:6px; font-size:11px; font-weight:800; color:#166534; }

/* ---- Marcaje desenate ---- */
main .mark-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
main .mark-row .mark-lead{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
main .mark-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 11px 6px 7px; border:1px solid var(--line); background:#fff; border-radius:999px; }
main .mark-chip .mk{ display:flex; flex-direction:column; line-height:1.15; }
main .mark-chip .mk b{ font-size:13px; font-weight:800; text-transform:capitalize; }
main .mark-chip .mk span{ font-size:10px; font-weight:700; color:var(--muted); }
main .mark-badge{ display:inline-flex; }
main .mark-badge svg{ width:22px; height:22px; display:block; }