/* ==========================================================
   Pump Track UK – Simplified CSS
   Unified headline styling, Apple gradients retained
   ========================================================== */

/* ------------------------------
   Base
------------------------------ */
* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background-color: #f2f2f2;
  color: #0A2647;
  line-height: 1.6;
}

a {
  color: #2C74B3;
  text-decoration: none;
}
a:hover {
  color: #205295;
}

main {
  background-color: #fff;
  padding: 20px;
  min-height: 70vh;
}


/* ==========================================================
   Universal Page Text Container – fully unified, wider
   ========================================================== */
.page-container {
  width: 100%;
  max-width: 900px;      /* wider across all pages */
  margin: 0 auto;
  padding: 0 16px;       /* consistent edge padding on ALL pages */
}

/* On very small mobiles, ensure it always fills the space nicely */
@media (max-width: 480px) {
  .page-container {
    padding: 0 14px;
    max-width: 100%;     /* prevents accidental narrowing */
  }
}

/* Medium screens */
@media (min-width: 600px) {
  .page-container {
    max-width: 85%;
  }
}

/* Larger viewports */
@media (min-width: 900px) {
  .page-container {
    max-width: 720px;    /* same as before */
  }
}

/* ------------------------------
   Header – Apple Gloss Gradient
------------------------------ */
.site-header {
  background: linear-gradient(
    180deg,
    #0A2647 0%,
    #0B2E56 25%,
    #144272 60%,
    #205295 100%
  );
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 9999; !important
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 2px 8px rgba(0,0,0,0.25);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

header .logo img,
.header-logo img {
  height: clamp(50px, 6vw, 100px);
  width: auto;
  transition: height 0.3s ease;
}

/* ------------------------------
   Navigation
------------------------------ */
nav.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
}

nav.main-nav a {
  color: #fff;
  font-weight: 500;
}
nav.main-nav a:hover {
  opacity: 0.85;
}

/* ------------------------------
   Search Bar
------------------------------ */
.header-search form {
  display: flex;
  align-items: center;
  background: rgba(32,82,149,0.9);
  border-radius: 22px;
  padding: 4px 10px;
}
.header-search input {
  border: none;
  background: transparent;
  color: #fff;
  padding: 6px 8px;
  width: 170px;
  outline: none;
  font-size: 0.95rem;
  transition: width 0.3s ease;
}
.header-search input::placeholder {
  color: rgba(255,255,255,0.7);
}
.header-search button {
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 1rem;
}

/* ------------------------------
   Burger Menu (SVG)
------------------------------ */
.burger {
  display: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.burger img.burger-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  transition: transform 0.2s ease;
}
.burger:hover img.burger-icon {
  transform: scale(1.08);
}

/* ------------------------------
   Forms (Floating Labels)
------------------------------ */
.apple-contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.apple-contact-form .form-group {
  position: relative;
}

.apple-contact-form input,
.apple-contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #205295;
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
}

.apple-contact-form label {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #205295;
  pointer-events: none;
  transition: 0.2s all;
  background: #fff;
}

/* Floating label behaviour */
.apple-contact-form input:focus + label,
.apple-contact-form input:not(:placeholder-shown) + label,
.apple-contact-form textarea:focus + label,
.apple-contact-form textarea:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #2C74B3;
  padding: 0 4px;
}

.apple-contact-form button {
  background-color: #205295;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.apple-contact-form button:hover {
  background-color: #2C74B3;
}

/* ------------------------------
   Track List (Legacy list layout)
------------------------------ */
.track-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #ccc;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.track-row:hover {
  transform: scale(1.01);
}
.track-row img {
  max-width: 150px;
  border-radius: 8px;
}
.track-row a {
  color: #0A2647;
  text-decoration: none;
}
.track-row a:hover {
  text-decoration: underline;
}

/* ------------------------------
   Map
------------------------------ */
#map {
  height: 600px;
  width: 100%;
  margin: 20px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #e9eef7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ------------------------------
   Footer – Apple Gloss Gradient
------------------------------ */
.site-footer {
  background: linear-gradient(
    180deg,
    #205295 0%,
    #144272 40%,
    #0B2E56 75%,
    #0A2647 100%
  );
  color: rgba(255,255,255,0.9);
  text-align: center;
  padding: 2rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 -2px 10px rgba(0,0,0,0.3);
}
.footer-container {
  max-width: 1100px;
  margin: 0 auto;
}
.footer-links {
  margin-bottom: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.footer-links a {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-links a:hover {
  color: #d9e9ff;
  transform: translateY(-2px);
}
.footer-links a[href*="privacy"],
.footer-links a[href*="terms"],
.footer-links a[href*="cookie-policy"]{
  color: rgba(255,255,255,0.65);
  font-weight: 400;
}
.footer-links a[href*="privacy"]:hover,
.footer-links a[href*="terms"]:hover {
  color: #d9e9ff;
}
.site-footer p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  opacity: 0.9;
}






/* ============================
   CTA POPUP MODAL
=============================== */

/* ================================
   CTA POPUP MODAL (NEW VERSION)
   ================================ */

#ctaModal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 9999;
}

#ctaModal.show {
    display: grid;
}

/* Background overlay */
#ctaModal .cta-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

/* Popup box */
#ctaModal .cta-box {
    position: relative;
    z-index: 10000;
    background: linear-gradient(
        135deg,
        #0A2647 0%,
        #144272 50%,
        #205295 100%
    );
    color: white;
    width: min(92%, 520px);
    padding: 45px 32px 50px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 10px 45px rgba(0,0,0,0.4);
    animation: ctaPop 0.35s ease;
}

@keyframes ctaPop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Close button */
#ctaModal .cta-close {
    position: absolute;
    top: -18px;
    right: 50%;
    transform: translateX(50%);
    background: white;
    color: #0A2647;
    font-size: 22px;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Text */
#ctaModal h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: #fff;
}

#ctaModal p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 28px;
    color: #f2f7ff;
}

/* Button */
#ctaModal .cta-btn {
    display: inline-block;
    background: white;
    color: #0A2647;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 1.15rem;
    text-decoration: none;
    transition: 0.25s ease;
}

#ctaModal .cta-btn:hover {
    background: #dce5ff;
}








/* ------------------------------
   Headlines (Simplified)
------------------------------ */
h1, h2, h3 {
  text-align: center;
  color: #0A2647;
  margin: 2rem auto 1rem;
  line-height: 1.3;
  letter-spacing: 0.3px;
}

h1 {
  font-size: 2.4rem;
  font-weight: 700;
}
h2 {
  font-size: 1.8rem;
  font-weight: 600;
}
h3 {
  font-size: 1.4rem;
  font-weight: 500;
}

/* ------------------------------
   Home Page Image + Intro
------------------------------ */
.home-featured-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem auto;
  max-width: 1000px;
  padding: 0 1rem;
}
.home-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.home-intro {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
  padding: 2.5rem 0.5rem;
}
.home-intro-content {
  width: 100%;
  text-align: justify;
  text-justify: inter-word;
  font-size: 1.08rem;
  line-height: 1.8;
  opacity: 0.96;
  margin: 0 auto;
}

/* ------------------------------
   Responsive Adjustments
------------------------------ */
@media (max-width: 768px) {
  nav.main-nav {
    display: none;
    width: 100%;
    background: transparent;
  }
  nav.main-nav.nav-open {
    display: block;
  }
  nav.main-nav ul {
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
  }
  .burger {
    display: block;
  }
  .header-search {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }
  .header-search input {
    width: 120px;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.6rem;
  }
  h3 {
    font-size: 1.3rem;
  }
  .home-intro-content {
    padding: 0 1rem;
    font-size: 1rem;
    line-height: 1.7;
  }
  #map {
    height: 400px;
  }
  .track-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .track-row img {
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
  }
}

/* Map Controls */
.map-controls {
  display: flex;
  justify-content: center;
  margin: 1rem auto;
}

#locateBtn {
  background: linear-gradient(180deg, #2C74B3 0%, #205295 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

#locateBtn:hover {
  background: linear-gradient(180deg, #3b82d2 0%, #205295 100%);
  transform: translateY(-1px);
}

/* Locate Me Button Glow Animation */
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(44,116,179,0.4); }
  50% { box-shadow: 0 0 16px 4px rgba(44,116,179,0.6); }
  100% { box-shadow: 0 0 0 rgba(44,116,179,0.4); }
}

#locateBtn.glow {
  animation: glowPulse 1.2s ease-in-out 2;
}


/* ==========================================
   Pumptrack List (Card layout)
   ========================================== */
.tracklist-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.track-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.track-card:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.track-image {
  flex: 0 0 200px;
  max-width: 200px;
  overflow: hidden;
}

.track-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.track-info {
  flex: 1;
  padding: 1rem 1.5rem;
}

.track-name {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #0A2647;
  margin-bottom: 0.4rem;
  text-decoration: none;
}

.track-name:hover {
  color: #2C74B3;
}

.track-address {
  font-size: 1rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.track-meta {
  font-size: 1rem;
  color: #144272;
}

.weather {
  font-size: 1.3rem;
  font-weight: 600;
  margin-right: 8px;
}

.directions-link {
  color: #2C74B3;
  text-decoration: none;
  font-weight: 500;
}

.directions-link:hover {
  text-decoration: underline;
}

/* --- Responsive Mobile --- */
@media (max-width: 768px) {
  .track-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .track-image {
    width: 100%;
    max-width: none;
  }
  .track-info {
    padding: 1rem;
  }
  .track-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* Sorting bar styling */
.track-sort-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem auto;
  flex-wrap: wrap;
}

.track-sort-bar input[type="text"],
.track-sort-bar select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background-color: #fff;
}

.track-sort-bar button {
  background: linear-gradient(180deg, #2C74B3 0%, #205295 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.2s ease, transform 0.2s ease;
}

.track-sort-bar button:hover {
  background: linear-gradient(180deg, #3b82d2 0%, #205295 100%);
  transform: translateY(-1px);
}

/* ==========================================
   Track View Page
========================================== */
.trackview {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  overflow-wrap: anywhere;
}

.trackview p{
  overflow-wrap: anywhere;
}

.track-info-card {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
  overflow-wrap: anywhere;
}

.track-info-left {
  flex: 1 1 50%;
  font-size: 1.05rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.track-info-right {
  flex: 1 1 45%;
  text-align: center;
}

.track-main-image,
.track-video {
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.additional-images h2,
.reviews h2 {
  text-align: center;
  margin-top: 2rem;
}

.additional-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.additional-gallery img {
  width: 180px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s ease;
}

.additional-gallery img:hover {
  transform: scale(1.05);
}

.review-card {
  background: #f9fafc;
  border-radius: 10px;
  padding: 1rem;
  margin: 0.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.review-form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  font-size: 1rem;
  resize: vertical;
}

.review-form button {
  background-color: #205295;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
}

.review-form button:hover {
  background-color: #2C74B3;
}

.review-message {
  background: #e6f2ff;
  border-left: 3px solid rgba(44,116,179,0.4);
  padding: 12px 16px;
  margin: 1rem 0;
  border-radius: 6px;
  font-size: 1.05rem;
  color: #0A2647;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  opacity: 0;
  transform: translateY(-4px);
  animation: fadeInOut 6s ease forwards;
}

.directions-btn {
  display: inline-block;
  margin-top: 0.5rem;
  background: linear-gradient(180deg, #2C74B3 0%, #205295 100%);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}
.directions-btn:hover {
  background: linear-gradient(180deg, #3b82d2 0%, #205295 100%);
}

/* Responsive */
@media (max-width: 768px) {
  .track-info-card {
    flex-direction: column;
  }
  .track-info-left, .track-info-right {
    flex: 1 1 100%;
  }
}

/* ==========================================
   Track View – Media row (video + map)
========================================== */
.track-media-row {
  max-width: 1100px;
  margin: 2rem auto;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.track-media-video,
.track-media-map {
  flex: 1 1 50%;
}

/* When there is no video, map goes full width */
.track-media-row.single-map .track-media-map {
  flex: 1 1 100%;
}

.track-media-map #trackMap {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Responsive */
@media (max-width: 768px) {
  .track-media-row {
    flex-direction: column;
  }
  .track-media-video,
  .track-media-map {
    flex: 1 1 100%;
  }
}

/* Container */
.track-info-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

/* Left + Right shared rules */
.track-info-left,
.track-info-right {
  flex: 1 1 300px;
}

/* Desktop: forcibly 50/50 split */
@media (min-width: 800px) {
  .track-info-left,
  .track-info-right {
    flex: 0 0 50%;
  }

  .track-info-right img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
  }
}

/* Description always full width */
.track-description {
  width: 100%;
  margin: 20px 0;
}

@media (max-width: 768px) {
  .track-media-video,
  .track-media-map {
    width: 100%;
    flex: 0 0 100%;
  }
}

.video-placeholder {
    width: 100%;
    max-width: 460px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
}

.video-upload-invite:hover .video-placeholder {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}



/* ==========================================
   Track View Map & Weather
========================================== */
.track-map {
  margin: 2rem auto;
  text-align: center;
}

#trackMap {
  height: 300px;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-top: 1rem;
}

.directions-weather {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
}

.weather-box {
  background: linear-gradient(180deg, #205295 0%, #144272 100%);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, background 0.2s ease;
}
.weather-box:hover {
  transform: scale(1.05);
  background: linear-gradient(180deg, #2C74B3 0%, #205295 100%);
}

.credit {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #555;
}

/* ==========================================
   Weather Modal (Wind, Feels Like & Rain)
========================================== */
.weather-modal .modal-content {
  text-align: center;
}

.weather-modal h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #d9e9ff;
}

.current-temp {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #fff;
}

.wind {
  font-size: 1rem;
  font-weight: 500;
  color: #d9e9ff;
  margin-bottom: 1rem;
}

.forecast {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.95rem;
  color: #fff;
  margin: 0.5rem;
}

.forecast-day .rain {
  font-size: 0.85rem;
  color: #bcd7ff;
}

.modal-box.weather-modal {
  background: linear-gradient(135deg, #0A2647 0%, #144272 50%, #2C74B3 100%);
  border-radius: 16px;
}

.modal-box.weather-modal .forecast-day span:first-child {
  font-weight: 600;
  color: #d9e9ff;
}

@media (max-width: 600px) {
  .forecast {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* -------------------------------------
   Image Lightbox Modal with Caption
-------------------------------------- */
.image-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.image-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.image-modal img {
  max-width: 90%;
  max-height: 75vh;
  border-radius: 14px;
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4);
  animation: fadeInZoom 0.4s ease;
}

.image-modal img.fade-out {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.image-modal img.fade-in {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes fadeInZoom {
  from {
    transform: scale(0.95);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.image-modal::after {
  content: '✕';
  position: absolute;
  top: 20px;
  right: 28px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.image-modal::after:hover {
  transform: scale(1.1);
}

/* Caption text */
.image-caption {
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  color: #e8f1ff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* -------------------------------------
   Image Modal Navigation Arrows
-------------------------------------- */
.image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #e8f1ff;
  cursor: pointer;
  user-select: none;
  padding: 0 12px;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10000;
}

.image-nav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.image-nav.left { left: 20px; }
.image-nav.right { right: 20px; }

/* For smaller screens, reduce arrow size */
@media (max-width: 768px) {
  .image-nav {
    font-size: 2.2rem;
    padding: 0 8px;
  }
}

/* -------------------------------------------
   Review message animation (fade in/out)
------------------------------------------- */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ==========================================================
   Universal Submitted Form Message – centered, fade + pulse
   ========================================================== */
.form-message {
  background: #e6f2ff;
  border-left: 3px solid rgba(44,116,179,0.4);
  padding: 12px 16px;
  margin: 1rem auto;
  border-radius: 6px;
  font-size: 1.05rem;
  color: #0A2647;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  text-align: center;
  max-width: 700px;
  opacity: 0;
  transform: translateY(-4px);
  animation: fadeInPulse 6s ease forwards;
}

@keyframes fadeInPulse {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(44,116,179,0.3);
  }
  25% {
    box-shadow: 0 0 10px rgba(44,116,179,0.4);
  }
  45% {
    box-shadow: 0 0 0 rgba(44,116,179,0.3);
  }
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Mobile — keep visible, no fade-out */
@media (max-width: 768px) {
  .form-message {
    animation: fadeInMobile 0.6s ease forwards;
  }

  @keyframes fadeInMobile {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ==========================================================
   Duplicate warning & checkbox fixes
   ========================================================== */
   
.guidelines-banner {
    max-width: 900px;
    margin: 0 auto 25px;
    padding: 14px 18px;
    background: #f0f4ff;
    border-left: 5px solid #205295;
    border-radius: 8px;
    text-align: center;
    font-size: 1.05rem;
    color: #0A2647;
}

.guidelines-banner a {
    color: #205295;
    font-weight: 600;
    text-decoration: none;
}

.guidelines-banner a:hover {
    text-decoration: underline;
}

   

/* Prevent floating-label styles from affecting the duplicate checkbox section */
.duplicate-warning-inline ~ .form-group label {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  pointer-events: auto !important;
}

.duplicate-warning-inline ~ .form-group input[type="checkbox"] {
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ensure nothing overlays the checkbox */
.duplicate-warning-inline,
.duplicate-warning-inline ~ .form-group {
  position: relative;
  z-index: 20;
}

/* Restore normal checkbox appearance inside floating form */
.apple-contact-form input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  position: static !important;
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  pointer-events: auto !important;
}

/* Force consistent select text across desktop + mobile */
.track-sort-bar select {
    color: #0A2647 !important;        /* your site’s dark blue */
    background-color: #fff !important;
    -webkit-text-fill-color: #0A2647 !important; /* iOS override */
    appearance: none;                 /* standardises browser styles */
    -webkit-appearance: none;
}

/* --------------------------------
   TOP SECTION – Image + Info
-----------------------------------*/

.track-info-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-bottom: 2rem;
}

.track-media img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 10px;
}

.track-video {
  width: 100%;
  max-height: 340px;
  border-radius: 10px;
  margin-top: 1rem;
}

/* Right-side content */
.track-details p {
  margin-bottom: 1rem;
  line-height: 1.35;
}

/* MOBILE: stack everything */
@media (max-width: 768px) {
  .track-info-card {
    grid-template-columns: 1fr;
  }

  .track-media img,
  .track-video {
    max-height: none;
  }
}

/* --------------------------------
   VIDEO + MAP SECTION
-----------------------------------*/

.track-map-media {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
}

/* 50/50 layout when BOTH exist */
.map-half, 
.video-half {
  flex: 1;
}

.map-half h2,
.video-half h2 {
  margin-top: 0;
}

.track-map-media {
  grid-template-columns: 1fr 1fr;
}

/* Map container */
#trackMap,
.map-full {
  width: 100%;
  height: 350px;
  border-radius: 12px;
  overflow: hidden;
}

/* Video in 50/50 mode */
.track-video-small {
  width: 100%;
  border-radius: 12px;
  max-height: 350px;
  object-fit: cover;
}

/* If video missing → map 100% width */
.track-map-media:has(.map-full) {
  grid-template-columns: 1fr;
}

/* Mobile: stack video & map */
@media (max-width: 900px) {
  .track-map-media {
    grid-template-columns: 1fr;
  }
}


.video-map-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  align-items: start;
}

.video-col video {
  width: 100%;
  border-radius: 10px;
  max-height: 350px;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0,0,0,0.18);
}

.map-col #trackMap {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.18);
}

/* Mobile stacking */
@media (max-width: 900px) {
  .video-map-row {
    grid-template-columns: 1fr;
  }

  .map-col #trackMap,
  .video-col video {
    height: 250px;
  }
}

.additional-images {
  margin-top: 2rem;
}

.additional-gallery {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 4px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #888 #e2e2e2;
}

.additional-gallery::-webkit-scrollbar {
  height: 10px;
}
.additional-gallery::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
.additional-gallery::-webkit-scrollbar-track {
  background: #e2e2e2;
}

.additional-gallery img {
  flex: 0 0 auto;
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.additional-gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.additional-images {
    overflow: hidden;
}

.additional-gallery {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
}

.additional-gallery img {
    flex: 0 0 auto; /* prevents wrapping */
}

.report-issue a {
    color: #b30000 !important;
    font-weight: 600;
    display: inline-block;
    padding: 10px 0;
    z-index: 10000;
}

#reportModal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999 !important;
    background: rgba(0,0,0,0.6);
    display: none;
}

#reportModal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

#reportModal .modal-box {
    background: white;
    padding: 20px;
    border-radius: 12px;
    max-width: 90%;
}

#reportModal .modal-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px 25px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    font-family: inherit;
}

#reportModal h2 {
    margin-top: 0;
    color: #205295;
    font-size: 1.6rem;
    text-align: center;
}

#reportModal p {
    color: #444;
    text-align: center;
}

#reportModal textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 1rem;
    resize: vertical;
    margin-top: 10px;
}

.modal-btn {
    background: #205295;
    color: white;
    border: none;
    padding: 10px 16px;
    margin-top: 15px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
}

.modal-btn.cancel {
    background: #888;
    margin-top: 10px;
}

.modal-btn:hover {
    opacity: 0.9;
}

/* Force all Leaflet UI behind the header */
.leaflet-pane,
.leaflet-control,
.leaflet-top,
.leaflet-bottom,
.leaflet-control-attribution {
    z-index: 10 !important;
}


#ctaModal.modal-overlay.show .modal-content h2 {
    color: #ffffff !important;
}

#installModal h2{
    color:#ffffff !important;
}

#ctaModal h2{
    color:#ffffff !important;
}


/* ==========================================
   WEATHER MODAL — FULLY NAMESPACED
========================================== */

.wt-modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 99999; /* ABOVE EVERYTHING */
}

.wt-modal.show {
    display: grid;
}

/* Backdrop */
.wt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
}

/* Weather box */
.wt-box {
    position: relative;
    z-index: 100000;
    background: linear-gradient(135deg, #0A2647 0%, #144272 50%, #205295 100%);
    width: min(92%, 540px);
    padding: 40px 28px 50px;
    border-radius: 22px;
    box-shadow: 0 10px 45px rgba(0,0,0,0.4);
    text-align: center;
    animation: wtPop 0.35s ease;
}

@keyframes wtPop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Close button top-centre */
.wt-close {
    position: absolute;
    top: -18px;
    right: 50%;
    transform: translateX(50%);
    width: 38px;
    height: 38px;
    background: #fff;
    color: #0A2647;
    font-size: 22px;
    font-weight: bold;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Content */
.wt-content h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: #fff;
}

.wt-content p {
    color: #d9e9ff;
    margin-bottom: 22px;
}

/* Forecast layout */
.wt-forecast {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.wt-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 6px;
    color: #fff;
}

.wt-day span:first-child {
    font-weight: 700;
    color: #d9e9ff;
}

.wt-rain {
    color: #bcd7ff;
    font-size: 0.85rem;
}

/* Close button bottom */
.wt-btn {
    margin-top: 18px;
    padding: 12px 22px;
    border-radius: 14px;
    background: white;
    color: #0A2647;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
}

.wt-btn:hover {
    background: #e9efff;
}

/* Mobile tweak */
@media (max-width: 600px) {
    .wt-forecast {
        flex-direction: column;
    }
}


/* ==========================================
   Track Report Modal (ring-fenced)
   ========================================== */

#reportModal {
  position: fixed;
  inset: 0;
  display: none;              /* hidden by default */
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 6000;              /* above page, below install banners etc */
  padding: 1.5rem;
}

#reportModal.show {
  display: flex;              /* JS toggles this class */
}

#reportModal .modal-box {
  background: #ffffff;
  max-width: 520px;
  width: 100%;
  border-radius: 16px;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

/* Heading + body text */
#reportModal h2 {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0A2647;
}

#reportModal p {
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #394b63;
}

/* Textarea */
#reportModal textarea#reportText {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid #ccd6ea;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
}

/* Buttons row */
#reportModal .modal-btn {
  display: inline-block;
  min-width: 140px;
  padding: 0.7rem 1.6rem;
  margin: 0.25rem 0.35rem;
  border-radius: 999px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* Primary (Submit) */
#reportModal #submitReport.modal-btn {
  background: #205295;
  color: #ffffff;
}

#reportModal #submitReport.modal-btn:hover {
  background: #2C74B3;
  transform: translateY(-1px);
}

/* Secondary (Cancel) */
#reportModal #closeReport.modal-btn.cancel {
  background: #e4e7f0;
  color: #222;
}

#reportModal #closeReport.modal-btn.cancel:hover {
  background: #d2d7e6;
  transform: translateY(-1px);
}

/* Feedback message */
#reportModal #reportMsg {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: #205295;
}

/* Small tweak for mobile */
@media (max-width: 600px) {
  #reportModal .modal-box {
    padding: 1.6rem 1.2rem 1.4rem;
    border-radius: 18px;
  }
}

#reportModal #reportMsg.report-success {
    font-size: 1.1rem;
    font-weight: 700;
    color: #205295;  /* deep blue brand colour */
    margin-top: 12px;
    text-align: center;
}

/* Review form: make name and review look the same */
.reviews .review-form input[type="text"],
.reviews .review-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d0d7e2;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
}

.reviews .review-form input[type="text"] {
  margin-bottom: 8px;
}

/* Reviewer credit under each review */
.review-card .review-credit {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #667088;
}

.review-card .review-credit a {
  color: #205295;
  text-decoration: none;
}

.review-card .review-credit a:hover {
  text-decoration: underline;
}

/* TRACKLIST PAGINATION — MATCHES SCREENSHOT STYLE */
.tlv-pagination {
    text-align: center;
    margin: 2.5rem 0;
}

.tlv-pagination a,
.tlv-pagination span {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

/* Default button style (pale blue) */
.tlv-page-btn {
    background: #e6eefc;
    color: #1e3e8a;
}

.tlv-page-btn:hover {
    background: #d0defc;
}

/* Active page (solid dark blue) */
.tlv-page-current {
    background: #1e3e8a;
    color: #ffffff;
    font-weight: 700;
}

/* ================================
   MOBILE PAGINATION COMPRESSION
   ================================ */
@media (max-width: 600px) {

    /* Reduce padding + spacing */
    .tlv-pagination a,
    .tlv-pagination span {
        padding: 6px 10px;
        margin: 0 2px;
        font-size: 0.85rem;
    }

    /* Hide most number buttons */
    .tlv-pagination a:not(.tlv-page-btn-prev):not(.tlv-page-btn-next),
    .tlv-pagination span {
        display: none;
    }

    /* Show current page ONLY */
    .tlv-page-current {
        display: inline-block !important;
    }

    /* Show prev/next */
    .tlv-pagination .tlv-page-btn-prev,
    .tlv-pagination .tlv-page-btn-next {
        display: inline-block !important;
    }

    /* Soften layout */
    .tlv-pagination {
        margin: 1.5rem 0;
    }
}