/* Topo GPS Route Search — stylesheet */

#tgps-route-search * { box-sizing: border-box; }

/* ── Page title ── */
.tgps-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1.2rem;
  padding: 0;
  line-height: 1.2;
}

/* ── Card map image ── */
.tgps-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #f0f0ee;
}

/* ── Search page breadcrumb ── */
.tgps-breadcrumb {
  font-size: 13px;
  color: #888;
  margin-bottom: 0.8rem;
}
.tgps-breadcrumb a {
  color: #48af4b;
  text-decoration: none;
}
.tgps-breadcrumb a:hover { text-decoration: underline; }
.tgps-bc-sep { margin: 0 4px; color: #ccc; }

#tgps-route-search {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: #222;
  padding: 1rem 0 2rem;
}

/* ── Search bar ── */
.tgps-search-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.tgps-search-row input[type="text"] {
  flex: 1;
  min-width: 180px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.tgps-search-row select {
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.tgps-btn-green {
  height: 40px;
  padding: 0 18px;
  background: #48af4b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.tgps-btn-green:hover { background: #3a9a3d; }
.tgps-btn-outline {
  height: 40px;
  padding: 0 14px;
  background: #fff;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.tgps-btn-outline:hover { background: #f5f5f5; }

/* ── Filter bar ── */
.tgps-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 18px;
  background: #f7f7f5;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.tgps-fg { display: flex; flex-direction: column; gap: 6px; }
.tgps-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tgps-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tgps-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 99px;
  cursor: pointer;
  background: #fff;
  color: #555;
  line-height: 1;
  transition: all .15s;
}
.tgps-pill:hover  { border-color: #48af4b; color: #48af4b; }
.tgps-pill.active { background: #48af4b; color: #fff; border-color: #48af4b; }
.tgps-pill svg    { flex-shrink: 0; }
.tgps-more-sel {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 99px;
  background: #fff;
  color: #555;
  cursor: pointer;
}
.tgps-more-sel.sel-active { border-color: #48af4b; color: #3a9a3d; font-weight: 600; }
.tgps-rrow { display: flex; align-items: center; gap: 8px; }
.tgps-rrow input[type=range] { width: 120px; }
.tgps-rval { font-size: 12px; font-weight: 600; color: #333; min-width: 56px; }

/* ── Top bar ── */
.tgps-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tgps-vtoggle {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}
.tgps-vbtn {
  padding: 7px 18px;
  font-size: 13px;
  border: none;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all .15s;
}
.tgps-vbtn.active { background: #48af4b; color: #fff; }
.tgps-vbtn:hover:not(.active) { background: #f5f5f5; }
.tgps-count { font-size: 13px; color: #777; }
.tgps-sort {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  color: #333;
}

/* ── Status / loading ── */
.tgps-status {
  padding: 2rem 1rem;
  text-align: center;
  color: #777;
  font-size: 14px;
}
.tgps-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #e5e5e5;
  border-top-color: #48af4b;
  border-radius: 50%;
  animation: tgps-spin .7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}
@keyframes tgps-spin { to { transform: rotate(360deg); } }

/* ── Card grid ── */
.tgps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 10px;
}
.tgps-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.tgps-card:hover { border-color: #48af4b; box-shadow: 0 2px 8px rgba(72,175,75,.12); }
.tgps-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.4;
}
.tgps-card-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1a1a1a;
}
.tgps-card-loc {
  font-size: 11px;
  color: #888;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tgps-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tgps-stat { font-size: 11px; color: #999; }
.tgps-stat strong { font-weight: 600; color: #333; display: block; font-size: 12px; }
.tgps-dist { font-size: 11px; color: #3a9a3d; font-weight: 600; margin-top: 5px; }

/* Type colour tokens */
.t-walking        { background: #eaf3de; color: #3b6d11; }
.t-cycling        { background: #e6f1fb; color: #185fa5; }
.t-running        { background: #faeeda; color: #854f0b; }
.t-mountaineering { background: #faece7; color: #993c1d; }
.t-mtb            { background: #eaf3de; color: #27500a; }
.t-skiing         { background: #eeedfe; color: #3c3489; }
.t-kayaking       { background: #e1f5ee; color: #085041; }
.t-horseriding    { background: #faeeda; color: #633806; }
.t-skating        { background: #fce8f7; color: #8c2e70; }
.t-sailing        { background: #e0eef8; color: #0f5b8c; }
.t-other          { background: #f2f2f0; color: #666; }

/* ── Map view ── */
#tgps-map-wrap {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
}
#tgps-map { height: 500px; }

/* ── Author link in cards ── */
.tgps-card-author {
  font-size: 11px;
  color: #48af4b;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.tgps-card-author:hover { text-decoration: underline; }

/* ── Author filter banner ── */
.tgps-author-banner {
  background: #f0fbf0;
  border: 1px solid #b2ddb4;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 1rem;
  font-size: 13px;
  color: #2a7a2d;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tgps-author-banner button {
  margin-left: auto;
  background: none;
  border: 1px solid #b2ddb4;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  color: #2a7a2d;
  cursor: pointer;
}
.tgps-author-banner button:hover { background: #d8f0d9; }

/* ── Empty state ── */
.tgps-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #999;
  grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════
   ROUTE DETAIL PAGE  (.tgps-route-page)
   ═══════════════════════════════════════════════════ */

.tgps-route-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: #222;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem;
  box-sizing: border-box;
}
.tgps-route-page * { box-sizing: border-box; }

/* ── Route page breadcrumb (outside .tgps-route-page, in normal page flow) ── */
.tgps-rp-breadcrumb {
  font-size: 13px;
  color: #888;
  padding: 8rem 1rem 0;     /* top clears the theme's fixed nav */
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}
.tgps-rp-breadcrumb a {
  color: #48af4b;
  text-decoration: none;
}
.tgps-rp-breadcrumb a:hover { text-decoration: underline; }
.tgps-rp-sep { margin: 0 5px; color: #ccc; }

/* ── Header: badge + title + location ── */
.tgps-rp-header { margin-bottom: 1.5rem; }
.tgps-rp-header .tgps-badge { margin-bottom: 10px; font-size: 12px; }
.tgps-rp-title {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
  line-height: 1.2;
}
.tgps-rp-location {
  font-size: 14px;
  color: #888;
  margin: 0;
}

/* ── Body: two-column grid ── */
.tgps-rp-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
  margin-bottom: 2rem;
}
@media (max-width: 760px) {
  .tgps-rp-body { grid-template-columns: 1fr; }
  .tgps-rp-sidebar { order: -1; }   /* stats above map on mobile */
}

/* ── Map image ── */
.tgps-rp-map-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: #f0f0ee;
  margin-bottom: 20px;
  border: 1px solid #e5e5e5;
}
.tgps-rp-map-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Description ── */
.tgps-rp-description {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 20px;
}
.tgps-rp-description p { margin: 0 0 1em; }

/* ── Photo gallery ── */
.tgps-rp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.tgps-rp-photo {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0ee;
}
.tgps-rp-photo img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  transition: transform .2s;
}
.tgps-rp-photo:hover img { transform: scale(1.04); }

/* ── Sidebar: stats card ── */
.tgps-rp-stats-card {
  background: #f7f7f5;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.tgps-rp-stat-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #ebebeb;
}
.tgps-rp-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.tgps-rp-stat-row:first-child { padding-top: 0; }
.tgps-rp-stat-icon {
  font-size: 16px;
  color: #48af4b;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.tgps-rp-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.tgps-rp-stat-val {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

/* ── Download buttons ── */
.tgps-rp-downloads {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.tgps-rp-dl-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, box-shadow .15s;
}
.tgps-rp-dl-gpx {
  background: #48af4b;
  color: #fff;
}
.tgps-rp-dl-gpx:hover { background: #3a9a3d; box-shadow: 0 2px 8px rgba(72,175,75,.25); }
.tgps-rp-dl-zip {
  background: #fff;
  color: #444;
  border: 1px solid #d5d5d5;
}
.tgps-rp-dl-zip:hover { background: #f5f5f5; }
.tgps-rp-dl-arrow { font-size: 16px; }
.tgps-rp-dl-label { flex: 1; }
.tgps-rp-dl-size {
  font-size: 11px;
  font-weight: 400;
  opacity: .75;
}

/* ── Meta (date / author) ── */
.tgps-rp-meta {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
}
.tgps-rp-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  color: #444;
}
.tgps-rp-meta-item:last-child { border-bottom: none; }
.tgps-rp-meta-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tgps-rp-meta-item a { color: #48af4b !important; text-decoration: none; word-break: break-word; }
.tgps-rp-meta-item a:hover { text-decoration: underline; }

/* ── Prev / Next navigation ── */
.tgps-rp-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid #e8e8e8;
  gap: 12px;
}
.tgps-rp-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  background: #fff;
  transition: border-color .15s, color .15s, background .15s;
}
.tgps-rp-nav-btn:hover {
  border-color: #48af4b;
  color: #48af4b;
  background: #f3fbf3;
}

/* ── List view pagination ── */
.tgps-list-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid #e8e8e8;
  gap: 12px;
}
.tgps-list-nav-spacer { flex: 1; }

/* ── Pagination nav (below list and map) ── */
#tgps-page-nav { margin-top: 1rem; }
.tgps-list-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 1.2rem 0 0.5rem;
  border-top: 1px solid #e8e8e8;
}
.tgps-list-nav-spacer { flex: 1; }
.tgps-page-info {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #888;
}