/* Add here all your CSS customizations */
/* ====== Paleta alinhada ao Porto Theme ====== */
:root{
  --primary: #0088cc;     /* Porto primary */
  --primary-2:#006aa0;
  --soft-bg:#f5f7f9;
  --text-1:#212529;
  --text-2:#6c757d;
  --card-radius: .75rem;
}

/* ====== Hero / Header da trilha ====== */
.trail-header{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color:#fff;
  padding: 70px 0;       /* Porto costuma usar espaços generosos */
  margin-bottom: 40px;
  position: relative;
}
.trail-header h1{
  font-weight: 700;
  letter-spacing:.2px;
}
.trail-header .lead{
  opacity:.95;
}

/* ====== Cards / boxes ====== */
.trail-info{
  background:#fff;
  border-radius: var(--card-radius);
  padding: 28px;
  box-shadow: 0 8px 24px rgba(31,45,61,.06);
  border: 1px solid rgba(0,0,0,.04);
  margin-bottom: 30px;
}
.trail-info h4,.trail-info h5,.trail-info h6{
  font-weight:600;
  margin-bottom:18px;
}

/* ====== Stats ====== */
.trail-stats{
  background: var(--soft-bg);
  border-radius: var(--card-radius);
  padding: 18px 10px;
  margin-bottom: 30px;
  border: 1px solid rgba(0,0,0,.04);
}
.stat-item{
  text-align:center;
  padding: 14px 6px;
}
.stat-icon{
  font-size: 1.75rem;
  color: var(--primary);
  margin-bottom: 6px;
}
.stat-value{
  font-size: 1.35rem;
  font-weight:700;
  color: var(--text-1);
  line-height:1.1;
}
.stat-label{
  color: var(--text-2);
  font-size:.85rem;
}

/* ====== POIs ====== */
.poi-item{
  background: #fff;
  border-left: 4px solid var(--primary);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  margin-bottom:12px;
  box-shadow: 0 4px 14px rgba(31,45,61,.05);
  border: 1px solid rgba(0,0,0,.04);
}
.poi-title{
  font-weight:600;
  color: var(--text-1);
  margin-bottom:4px;
}
.poi-description{
  color: var(--text-2);
  font-size:.92rem;
}

/* ====== Botões / CTA ====== */
.app-button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color:#fff !important;
  padding: 14px 26px;
  border-radius: 50px;
  font-size:1.05rem;
  font-weight:700;
  text-decoration:none !important;
  box-shadow: 0 10px 24px rgba(0,136,204,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.app-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,136,204,.32);
}

/* ====== Dificuldade (usa estilo de badge do Porto/Bootstrap) ====== */
.difficulty-badge{
  display:inline-block;
  padding: .35rem .85rem;
  border-radius: 2rem;
  font-size: .75rem;
  font-weight:700;
  letter-spacing:.3px;
  text-transform: uppercase;
  vertical-align:middle;
}
.difficulty-easy{
  background:#d4edda; color:#155724; border:1px solid #c3e6cb;
}
.difficulty-medium{
  background:#fff3cd; color:#856404; border:1px solid #ffeeba;
}
.difficulty-hard{
  background:#f8d7da; color:#721c24; border:1px solid #f5c6cb;
}

/* ====== Share code ====== */
.share-code{
  background:#fff;
  border-radius: var(--card-radius);
  padding: 20px;
  text-align:center;
  margin: 22px 0 30px;
  box-shadow: 0 8px 24px rgba(31,45,61,.06);
  border: 1px solid rgba(0,0,0,.05);
}
.share-code h5{ font-weight:700; }
.share-code-text{
  font-family: "Courier New", monospace;
  font-size: 1.6rem;
  font-weight:800;
  color: var(--primary);
  letter-spacing: .12rem;
}

/* ====== Imagem do header ====== */
.trail-header .img-fluid{
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.15);
}

/* ====== Rodapé ====== */
footer.bg-dark{
  background:#0c0f13 !important;
}
footer .container p, footer h5{
  margin:0;
}

/* ====== Utilidades finas ====== */
.mt-40{ margin-top:40px !important; }
.mb-40{ margin-bottom:40px !important; }

.trail-page .trail-header{ background:linear-gradient(135deg,#eb6a01 0%,#eb6a01 100%) !important; color:#fff !important; padding:70px 0 !important; margin-bottom:40px !important; }
.trail-page .trail-info{ background:#fff !important; border-radius:.75rem !important; padding:28px !important; box-shadow:0 8px 24px rgba(31,45,61,.06) !important; border:1px solid rgba(0,0,0,.04) !important; }
.trail-page .trail-stats{ background:#f5f7f9 !important; border-radius:.75rem !important; padding:18px 10px !important; border:1px solid rgba(0,0,0,.04) !important; }
.trail-page .poi-item{ background:#fff !important; border-left:4px solid #eb6a01 !important; border-radius:.75rem !important; }
.trail-page .app-button{ display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,#eb6a01 0%,#eb6a01 100%) !important; color:#fff !important; border:none; padding:14px 26px; border-radius:50px; font-weight:700; box-shadow:0 10px 24px rgba(0,136,204,.25); }
.trail-page .share-code{ background:#fff !important; border-radius:.75rem !important; box-shadow:0 8px 24px rgba(31,45,61,.06) !important; border:1px solid rgba(0,0,0,.05) !important; }
.trail-page .difficulty-badge{ padding:.35rem .85rem; border-radius:2rem; font-weight:700; text-transform:uppercase; }

/* Leaflet */
#trail-map{
  height: 420px;          /* ajuste como preferir */
  border-radius: .75rem;
}
@media (min-width: 992px){
  #trail-map{ height: 520px; }
}
.leaflet-container{
  width: 100%;
  border-radius: .75rem;
}


/* Ícone do POI (bolinha laranja com contorno branco) */
.leaflet-div-icon.poi-icon {
  background: transparent;
  border: 0;
}
.poi-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff7a00;           /* laranja */
  border: 2px solid #fff;         /* aro branco */
  box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}