:root {
  --dark-blue: #003d4d;
  --turquoise: #00a8cc;
  --light-turquoise: #00d4ff;
  --orange: #ff8c1a;
  --squalo-pool-blue: #66e0ff;
  --squalo-aqua: #7ff3ff;
  --squalo-deep-blue: #063b7a;
  --squalo-orange: #ff8c1a;
  --squalo-neon-orange: #ff9f00;
  --white: #ffffff;
  --light-gray: #f5f5f5;
  --text-dark: #1a1a1a;
  --text-light: #666666;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  background-color: var(--light-gray);
  color: var(--text-dark);
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--white);
  overflow: hidden;
}

/* Water-shimmer background */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 30% 40%, rgba(102, 224, 255, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 100% 50% at 70% 60%, rgba(127, 243, 255, 0.5) 0%, transparent 65%),
    linear-gradient(165deg, #4dd8ff 0%, #66e0ff 25%, #7ff3ff 50%, #66e0ff 75%, #4dd8ff 100%);
  background-size: 200% 200%;
  animation: waterShimmer 8s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes waterShimmer {
  0%   { background-position: 0% 40%; }
  50%  { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}

/* Caustic light pattern overlay – realistic pool glisten */
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 140px 60px at 20% 30%, rgba(255,255,255,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 120px 50px at 50% 20%, rgba(255,255,255,0.22) 0%, transparent 50%),
    radial-gradient(ellipse 160px 70px at 75% 40%, rgba(255,255,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 120px 55px at 35% 70%, rgba(255,255,255,0.25) 0%, transparent 50%),
    radial-gradient(ellipse 150px 60px at 65% 75%, rgba(255,255,255,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 100px 40px at 85% 25%, rgba(255,255,255,0.28) 0%, transparent 50%),
    radial-gradient(ellipse 110px 45px at 10% 60%, rgba(255,255,255,0.24) 0%, transparent 50%);
  background-size: 300% 300%;
  animation: causticsMove 8s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

.caustics-intense {
  background: radial-gradient(ellipse 200px 80px at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
  animation: causticsPulse 4s ease-in-out infinite alternate;
}

@keyframes causticsMove {
  0%   { background-position: 0% 0%; opacity: 0.4; }
  33%  { background-position: 50% 50%; opacity: 0.85; }
  66%  { background-position: 80% 30%; opacity: 1.0; }
  100% { background-position: 100% 0%; opacity: 0.4; }
}

@keyframes causticsPulse {
  0%   { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(1.1); }
}

/* Realistic water caustic overlay – light refraction patterns like in a pool */
.header-caustics {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Broad flowing light bands */
.header-caustics::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0px,
      rgba(255,255,255,0.12) 30px,
      transparent 60px,
      rgba(255,255,255,0.06) 90px,
      transparent 130px
    ),
    repeating-linear-gradient(
      10deg,
      transparent 0px,
      rgba(255,255,255,0.10) 45px,
      transparent 80px,
      rgba(255,255,255,0.05) 110px,
      transparent 150px
    );
  animation: causticsFlow 18s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  opacity: 1.0;
}

/* Secondary finer pattern that moves differently */
.header-caustics::after {
  content: '';
  position: absolute;
  inset: -15%;
  background:
    repeating-linear-gradient(
      65deg,
      transparent 0px,
      rgba(255,255,255,0.08) 25px,
      transparent 50px,
      rgba(255,255,255,0.04) 75px,
      transparent 100px
    ),
    repeating-linear-gradient(
      140deg,
      transparent 0px,
      rgba(255,255,255,0.06) 40px,
      transparent 75px,
      rgba(255,255,255,0.03) 110px,
      transparent 140px
    );
  animation: causticsFlow 22s cubic-bezier(0.4, 0.0, 0.6, 1.0) infinite reverse;
  opacity: 0.75;
}

@keyframes causticsFlow {
  0%   { transform: translateX(0) translateY(0); }
  20%  { transform: translateX(4%) translateY(-3%); }
  40%  { transform: translateX(-1%) translateY(2%); }
  55%  { transform: translateX(5%) translateY(-1%); }
  70%  { transform: translateX(-3%) translateY(4%); }
  85%  { transform: translateX(2%) translateY(-2%); }
  100% { transform: translateX(0) translateY(0); }
}

.site-header .container {
  position: relative;
  z-index: 2;
}

/* ── Top Orange Accent Bar ── */
.top-bar {
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, var(--squalo-neon-orange) 0%, #ff7a00 100%);
  padding: 3px 0;
  box-shadow: 0 1px 6px rgba(255, 159, 0, 0.3);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.shark-icon {
  font-size: 15px;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  transition: transform 0.3s ease;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.shark-icon:hover {
  transform: scale(1.15) rotate(-5deg);
}

.top-bar-link {
  color: var(--white);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}

.top-bar-link:hover {
  background: rgba(0, 0, 0, 0.1);
}

.top-bar-link.active {
  background: rgba(255, 255, 255, 0.18);
}

.admin-top-link {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.admin-top-link:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Header Main (water background area) ── */
.header-main {
  position: relative;
  z-index: 2;
  padding: 20px 0 16px;
}

.header-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Logo section ── */
.logo-section {
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
}

.logo-img {
  height: 175px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
  transition: all 0.3s ease;
  position: relative;
}

.logo-img:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* ── Brand title ── */
.brand-title {
  font-family: 'Righteous', cursive;
  font-size: 48px;
  font-weight: 900;
  margin: 0;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 6px;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--squalo-neon-orange), #ff7a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(255, 159, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 122, 0, 0.3));
  position: relative;
}

/* ── Lane Navigation ── */
.lane-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 18px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.lane-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 20px;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  position: relative;
  transition: all 0.3s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: -1px; /* collapse borders */
}

.lane-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.lane-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Lane rope glow on hover / active */
.lane-item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: transparent;
  transition: all 0.4s ease;
  z-index: 1;
}

.lane-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: transparent;
  transition: all 0.4s ease;
  z-index: 1;
}

.lane-item:hover::before,
.lane-item:hover::after,
.lane-item.active::before,
.lane-item.active::after {
  background: linear-gradient(90deg,
    transparent 5%,
    var(--squalo-neon-orange) 20%,
    rgba(255, 159, 0, 0.5) 50%,
    var(--squalo-neon-orange) 80%,
    transparent 95%
  );
  height: 2px;
}

/* Subtle lane background on hover */
.lane-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.lane-item.active {
  background: rgba(255, 159, 0, 0.08);
}

/* Buoy markers on left/right of each lane – hidden for clean nav */
.lane-buoy-marker {
  display: none;
}

.lane-item:hover .lane-buoy-marker,
.lane-item.active .lane-buoy-marker {
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(255, 159, 0, 0.5);
}

.lane-label {
  flex: 1;
  text-align: center;
  transition: all 0.3s ease;
}

.lane-item:hover .lane-label,
.lane-item.active .lane-label {
  color: var(--squalo-neon-orange);
  text-shadow: 0 0 20px rgba(255, 159, 0, 0.3);
}

/* ── Lane Dividers between nav items ── */
.lane-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  position: relative;
  height: 18px;
  flex: 1;
  min-width: 0;
}

/* Extended lane rope line through divider */
.lane-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255, 159, 0, 0.08),
    rgba(255, 159, 0, 0.45) 15%,
    var(--squalo-neon-orange) 40%,
    var(--squalo-neon-orange) 60%,
    rgba(255, 159, 0, 0.45) 85%,
    rgba(255, 159, 0, 0.08)
  );
  transform: translateY(-50%);
}

.divider-buoy {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.divider-buoy:nth-child(4n+2) { width: 7px; height: 7px; }
.divider-buoy:nth-child(4n)   { width: 4px; height: 4px; }

.divider-buoy:nth-child(odd) {
  background: var(--squalo-neon-orange);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.divider-buoy:nth-child(even) {
  background: #ffffff;
  border: 1px solid rgba(255, 159, 0, 0.2);
}

/* ══════════════════════════════════════
   POOL TILE STRIP – Premium pool-edge tiles
   ══════════════════════════════════════ */
.pool-tile-strip {
  position: relative;
  height: 14px;
  margin: 12px auto;
  max-width: 100%;
  overflow: hidden;
  /* Premium pool tile segments with grout */
  background:
    /* Vertical grout lines between tiles */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 78px,
      rgba(180, 195, 210, 0.35) 78px,
      rgba(180, 195, 210, 0.35) 80px
    ),
    /* Subtle marble veining within tiles */
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 40px,
      rgba(170, 185, 195, 0.05) 40px,
      rgba(170, 185, 195, 0.05) 41px
    ),
    /* Main tile gradient */
    linear-gradient(135deg,
      #dfe6ec 0%,
      #eaf1f5 20%,
      #d6e0e8 40%,
      #eef4f8 60%,
      #e0e9ef 80%,
      #e6edf3 100%
    );
  /* Soft grout borders */
  border-top: 1px solid rgba(180, 195, 210, 0.4);
  border-bottom: 1px solid rgba(180, 195, 210, 0.4);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(0, 0, 0, 0.03),
    0 1px 4px rgba(0, 61, 77, 0.06);
}

/* Glossy tile sheen */
.pool-tile-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 30%,
      transparent 50%,
      rgba(255, 255, 255, 0.08) 70%,
      rgba(255, 255, 255, 0.28) 100%
    );
  pointer-events: none;
}

/* ══════════════════════════════════════
   STARTING BLOCKS – Pool lane starting platforms
   ══════════════════════════════════════ */
.starting-block {
  width: 24px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  margin-left: 12px;
  /* Top platform surface */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(235, 242, 247, 0.92) 45%,
    rgba(215, 227, 235, 0.88) 100%
  );
  border: 1px solid rgba(175, 190, 205, 0.4);
  border-radius: 2px 2px 0 0;
  box-shadow:
    0 -1px 3px rgba(0, 0, 0, 0.05),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Front face of the starting block */
.starting-block::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(180deg,
    rgba(195, 208, 218, 0.75) 0%,
    rgba(175, 190, 200, 0.85) 100%
  );
  border-radius: 0 0 1px 1px;
}

/* Grip texture on top */
.starting-block::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  right: 3px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(180, 195, 210, 0.3) 0px,
    rgba(180, 195, 210, 0.3) 2px,
    transparent 2px,
    transparent 4px
  );
}

/* Lane divider buoy – always floating */
.lane-divider .divider-buoy {
  animation: buoyBob 1.8s ease-in-out infinite;
}

.lane-divider .divider-buoy:nth-child(2n) {
  animation-delay: 0.2s;
}

.lane-divider .divider-buoy:nth-child(3n) {
  animation-delay: 0.5s;
}

.lane-divider .divider-buoy:nth-child(5n) {
  animation-delay: 0.8s;
}

.lane-divider .divider-buoy:nth-child(7n) {
  animation-delay: 1.1s;
}

@keyframes buoyBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Main */
.page-main {
  min-height: calc(100vh - 200px);
}

main {
  padding: 40px 0;
  min-height: calc(100vh - 200px);
}

/* Flashes */
.flashes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.flash {
  padding: 16px;
  border-radius: 6px;
  font-weight: 500;
}

.flash-success {
  background-color: #d4edda;
  color: #155724;
  border-left: 4px solid var(--success);
}

.flash-danger {
  background-color: #f8d7da;
  color: #721c24;
  border-left: 4px solid var(--danger);
}

.flash-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border-left: 4px solid var(--turquoise);
}

/* ══════════════════════════════════════
   MAP AREA – 3-Column Grid
   ══════════════════════════════════════ */
.map-area {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
  margin-bottom: 40px;
}

/* ── Map Section (center, wide) ── */
.map-section {
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  padding: 24px 28px 28px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 109, 143, 0.1);
}

.map-section h2 {
  color: var(--squalo-deep-blue);
  margin: 0 0 4px 0;
  font-size: 28px;
  font-weight: 700;
}

.map-section h2.baywatch-title {
  color: var(--squalo-neon-orange);
  font-family: 'Righteous', cursive;
  font-size: 32px;
  letter-spacing: 1px;
  text-transform: uppercase;
  filter: drop-shadow(0 0 12px rgba(255, 159, 0, 0.25));
}

.map-section > p {
  margin: 0 0 12px 0;
  color: var(--text-light);
  font-size: 15px;
}

/* ── Region Filter Bar ── */
.region-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.region-btn {
  padding: 8px 16px;
  border: 2px solid rgba(0, 109, 143, 0.2);
  border-radius: 20px;
  background: #fff;
  color: var(--squalo-deep-blue, #003d4d);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.region-btn:hover {
  border-color: var(--turquoise, #00a8cc);
  background: rgba(0, 168, 204, 0.08);
}

.region-btn.active {
  background: var(--turquoise, #00a8cc);
  color: #fff;
  border-color: var(--turquoise, #00a8cc);
}

.region-btn-locate {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.3);
  color: #2e7d32;
}

.region-btn-locate:hover {
  background: rgba(76, 175, 80, 0.15);
  border-color: #4CAF50;
}

/* ── Map Status Bar ── */
.map-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  margin-bottom: 10px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 8px;
  font-size: 13px;
  color: #2e7d32;
}

.map-status-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #2e7d32;
  cursor: pointer;
  padding: 0 4px;
}

/* ── User Location Marker ── */
.squalo-marker-user {
  background: #4CAF50;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #4CAF50, 0 4px 12px rgba(0,0,0,0.3);
}

#map {
  width: 100%;
  height: 550px;
  border-radius: 12px;
  margin: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
}

#map:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ── Community Feed (left) ── */
.community-feed {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 109, 143, 0.08);
  position: relative;
  overflow: hidden;
}

.community-feed h3 {
  margin: 0 0 12px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--squalo-deep-blue);
}

.feed-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.feed-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.feed-textarea:focus {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.1);
}

.feed-login-hint {
  font-size: 13px;
  color: var(--text-light);
  margin: 0 0 16px 0;
  padding: 12px;
  background: #f0f7ff;
  border-radius: 8px;
  line-height: 1.5;
}

.feed-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feed-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid var(--turquoise);
}

.feed-author {
  font-weight: 700;
  font-size: 12px;
  color: var(--turquoise);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feed-text {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.4;
}

.feed-time {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
  opacity: 0.7;
}

.feed-empty {
  font-size: 13px;
  color: var(--text-light);
  padding: 20px 12px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 8px;
  font-style: italic;
  line-height: 1.5;
}

/* ── Promo Panel (right) ── */
.promo-panel {
  position: relative;
  border-radius: 16px;
  padding: 24px 18px 140px;
  overflow: hidden;
  min-height: 860px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(102, 224, 255, 0.2);
  background: linear-gradient(165deg, #4dd8ff 0%, #66e0ff 25%, #7ff3ff 50%, #66e0ff 75%, #4dd8ff 100%);
  background-size: 200% 200%;
  animation: promoShimmer 8s ease-in-out infinite alternate;
}

@keyframes promoShimmer {
  0%   { background-position: 0% 40%; }
  50%  { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}

/* Caustic overlay */
.promo-shimmer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40px 40px at 25% 30%, rgba(255,255,255,0.40) 0%, transparent 65%),
    radial-gradient(ellipse 50px 30px at 55% 18%, rgba(255,255,255,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60px 35px at 75% 45%, rgba(255,255,255,0.30) 0%, transparent 65%),
    radial-gradient(ellipse 35px 45px at 40% 72%, rgba(255,255,255,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 45px 40px at 65% 78%, rgba(255,255,255,0.32) 0%, transparent 65%),
    radial-gradient(ellipse 30px 30px at 85% 22%, rgba(255,255,255,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 35px 35px at 12% 65%, rgba(255,255,255,0.35) 0%, transparent 60%);
  background-size: 250% 250%;
  animation: promoCaustics 10s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

@keyframes promoCaustics {
  0%   { background-position: 0% 0%; opacity: 0.5; }
  50%  { background-position: 50% 50%; opacity: 1.0; }
  100% { background-position: 100% 0%; opacity: 0.5; }
}

/* Additional wave overlay for more underwater depth */
.promo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      85deg,
      transparent 0px,
      rgba(255,255,255,0.06) 60px,
      transparent 120px,
      rgba(255,255,255,0.03) 180px,
      transparent 240px
    ),
    repeating-linear-gradient(
      175deg,
      transparent 0px,
      rgba(255,255,255,0.04) 80px,
      transparent 160px,
      rgba(255,255,255,0.02) 240px,
      transparent 320px
    );
  animation: promoWaves 15s linear infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes promoWaves {
  0%   { transform: translateX(0) translateY(0); }
  33%  { transform: translateX(2%) translateY(-1%); }
  66%  { transform: translateX(-1%) translateY(2%); }
  100% { transform: translateX(0) translateY(0); }
}

.promo-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  margin-top: 0;
  text-align: center;
}

.promo-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
  animation: promoShark 8s ease-in-out infinite;
  display: inline-block;
}

@keyframes promoShark {
  0%      { transform: translate(0, 0) scaleX(1); }
  12%     { transform: translate(90px, -40px) scaleX(1); }   /* top-left to upper-right */
  25%     { transform: translate(160px, -20px) scaleX(1); }  /* across the top */
  35%     { transform: translate(140px, 30px) scaleX(-1); }  /* turn, swim right to left mid */
  50%     { transform: translate(40px, 80px) scaleX(-1); }   /* down-right to lower area */
  60%     { transform: translate(-20px, 100px) scaleX(-1); } /* continue left, lower */
  72%     { transform: translate(-60px, 60px) scaleX(1); }   /* turn back, head up */
  85%     { transform: translate(-20px, 20px) scaleX(1); }   /* swim up-left */
  100%    { transform: translate(0, 0) scaleX(1); }
}

.promo-content h3 {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
  line-height: 1.2;
}

.promo-squalo {
  color: var(--squalo-neon-orange);
  filter: drop-shadow(0 0 12px rgba(255, 159, 0, 0.4));
}

.promo-premium {
  color: #ffffff;
  font-weight: 700;
}

.promo-content p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.9;
}

/* ── Underwater decoration (plants, stones) ── */
.promo-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.seaweed {
  position: absolute;
  bottom: 0;
  font-size: 28px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
  animation: seaweedSway 4s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

.seaweed-1 { left: 4%;  animation-duration: 3.5s; animation-delay: 0s;   font-size: 34px; }
.seaweed-2 { left: 15%; animation-duration: 4.2s; animation-delay: 0.8s; font-size: 38px; }
.seaweed-3 { left: 26%; animation-duration: 3.8s; animation-delay: 0.3s; font-size: 30px; }
.seaweed-4 { left: 38%; animation-duration: 4.5s; animation-delay: 1.2s; font-size: 32px; }
.seaweed-5 { left: 48%; animation-duration: 4.0s; animation-delay: 0.5s; font-size: 36px; }
.seaweed-6 { left: 59%; animation-duration: 4.8s; animation-delay: 1.5s; font-size: 28px; }
.seaweed-7 { left: 70%; animation-duration: 3.6s; animation-delay: 0.9s; font-size: 32px; }
.seaweed-8 { left: 81%; animation-duration: 4.3s; animation-delay: 0.2s; font-size: 30px; }
.seaweed-9 { left: 90%; animation-duration: 4.6s; animation-delay: 1.1s; font-size: 26px; }
.seaweed-10 { left: 96%; animation-duration: 3.9s; animation-delay: 0.6s; font-size: 28px; }

@keyframes seaweedSway {
  0%   { transform: rotate(-5deg); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(-4deg); }
}



/* ── Sea creatures / fishes ── */
.promo-fishes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.small-fish {
  position: absolute;
  font-size: 15px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
  animation: fishSwim 12s ease-in-out infinite;
}

.fish-1 {
  top: 80%;
  left: -24px;
  animation-duration: 14s;
  animation-delay: 0s;
  font-size: 13px;
}

.fish-2 {
  top: 85%;
  left: -30px;
  animation-duration: 16s;
  animation-delay: 3s;
  font-size: 11px;
}

.fish-3 {
  top: 90%;
  left: -18px;
  animation-duration: 12s;
  animation-delay: 6s;
  font-size: 10px;
}

.fish-4 {
  top: 94%;
  left: -35px;
  animation-duration: 18s;
  animation-delay: 2s;
  font-size: 12px;
}

.fish-5 {
  top: 46%;
  left: -40px;
  animation-duration: 28s;
  animation-delay: 12s;
  font-size: 18px;
  animation-name: octopusSwim;
}

.fish-6 {
  top: 36%;
  left: -80px;
  animation-duration: 38s;
  animation-delay: 18s;
  font-size: 24px;
  animation-name: whaleGlide;
}

@keyframes fishSwim {
  0%   { transform: translateX(0) scaleX(1); opacity: 0; }
  4%   { opacity: 0.9; }
  30%  { transform: translateX(240px) scaleX(1); opacity: 1; }
  33%  { transform: translateX(260px) scaleX(-1); opacity: 0.8; }
  55%  { transform: translateX(180px) scaleX(-1); opacity: 0.9; }
  58%  { transform: translateX(160px) scaleX(1); opacity: 0.6; }
  75%  { transform: translateX(80px) scaleX(1); opacity: 0.7; }
  78%  { transform: translateX(60px) scaleX(-1); opacity: 0.5; }
  92%  { transform: translateX(10px) scaleX(-1); opacity: 0.6; }
  96%  { transform: translateX(0) scaleX(1); opacity: 0.3; }
  100% { transform: translateX(-5px) scaleX(1); opacity: 0; }
}

@keyframes octopusSwim {
  0%   { transform: translateX(0) translateY(0) scaleX(1); opacity: 0; }
  10%  { opacity: 0.7; }
  35%  { transform: translateX(250px) translateY(-8px) scaleX(1); opacity: 0.9; }
  40%  { transform: translateX(270px) translateY(-10px) scaleX(-1); opacity: 0.7; }
  70%  { transform: translateX(30px) translateY(5px) scaleX(-1); opacity: 0.8; }
  75%  { transform: translateX(10px) translateY(3px) scaleX(1); opacity: 0.5; }
  100% { transform: translateX(-20px) translateY(0) scaleX(1); opacity: 0; }
}

@keyframes whaleGlide {
  0%   { transform: translateX(0) scaleX(1); opacity: 0; }
  8%   { opacity: 0.3; }
  30%  { transform: translateX(280px) scaleX(1); opacity: 0.4; }
  45%  { transform: translateX(310px) scaleX(-1); opacity: 0.25; }
  75%  { transform: translateX(40px) scaleX(-1); opacity: 0.3; }
  85%  { transform: translateX(10px) scaleX(1); opacity: 0.2; }
  100% { transform: translateX(-30px) scaleX(1); opacity: 0; }
}

/* ── Bubbles decoration ── */
.promo-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: -10px;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.30);
  border-radius: 50%;
  animation: bubbleUp 6s ease-in-out infinite;
}

.bubble:nth-child(1)  { left: 8%;   width: 10px; height: 10px; animation-delay: 0s;   animation-duration: 5.5s; }
.bubble:nth-child(2)  { left: 22%;  width: 5px;  height: 5px;  animation-delay: 1.0s; animation-duration: 4.8s; }
.bubble:nth-child(3)  { left: 38%;  width: 14px; height: 14px; animation-delay: 2.2s; animation-duration: 7.5s; }
.bubble:nth-child(4)  { left: 52%;  width: 7px;  height: 7px;  animation-delay: 0.6s; animation-duration: 5.2s; }
.bubble:nth-child(5)  { left: 65%;  width: 6px;  height: 6px;  animation-delay: 1.8s; animation-duration: 4.5s; }
.bubble:nth-child(6)  { left: 76%;  width: 11px; height: 11px; animation-delay: 3.0s; animation-duration: 6.8s; }
.bubble:nth-child(7)  { left: 88%;  width: 8px;  height: 8px;  animation-delay: 0.9s; animation-duration: 5.8s; }
.bubble:nth-child(8)  { left: 95%;  width: 5px;  height: 5px;  animation-delay: 2.6s; animation-duration: 4.2s; }

@keyframes bubbleUp {
  0%   { transform: translateY(0)   scale(0.8); opacity: 0;   }
  15%  { transform: translateY(-40px) scale(1);   opacity: 0.8; }
  60%  { transform: translateY(-180px) scale(1.1); opacity: 0.5; }
  100% { transform: translateY(-400px) scale(0.6); opacity: 0;   }
}

/* ── Custom Blue Marker ── */
.custom-marker {
  background: none !important;
  border: none !important;
}

/* ══════════════════════════════════════
   LEFT COLUMN (Community + Swim Knowledge)
   ══════════════════════════════════════ */
.left-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Swim Knowledge Slideshow ── */
.swim-knowledge {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 109, 143, 0.08);
}

.swim-knowledge h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--squalo-deep-blue);
}

.swim-slideshow {
  position: relative;
  min-height: 140px;
}

.swim-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  text-align: center;
  padding: 12px 8px;
}

.swim-slide.active {
  display: block;
  opacity: 1;
}

.swim-slide-icon {
  font-size: 28px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.swim-slide h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 1.3;
}

.swim-slide p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-light);
}

.swim-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.swim-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 109, 143, 0.2);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.swim-dot.active {
  background: var(--turquoise);
  width: 20px;
  border-radius: 4px;
}

.swim-dot:hover {
  background: rgba(0, 109, 143, 0.4);
}

/* ── Promo Slideshow ── */
.promo-features {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 4px;
  margin-top: 8px;
  min-height: 80px;
}

.promo-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  flex-direction: column;
  gap: 10px;
}

.promo-slide.active {
  display: flex;
  opacity: 1;
}

.promo-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease;
}

.promo-feature-item:hover {
  background: rgba(255, 255, 255, 0.35);
}

.promo-feature-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.promo-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.promo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.promo-dot.active {
  background: #fff;
  width: 16px;
  border-radius: 3px;
}

.promo-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* ── Promo CTA / Coming Soon ── */
.promo-cta {
  position: relative;
  z-index: 3;
  margin-top: 14px;
  text-align: center;
}

.promo-coming-soon {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.marker-dot {
  width: 28px;
  height: 28px;
  background: #0055cc;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 85, 204, 0.5);
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.marker-emoji {
  font-size: 12px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.marker-dot:hover {
  transform: scale(1.3);
}

/* ── District Labels ── */
.district-label {
  background: rgba(255, 106, 0, 0.85);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.district-label::before {
  border-right-color: rgba(255, 106, 0, 0.85);
}

/* ── Popup Card ── */
.leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  padding: 0;
}

.leaflet-popup-content {
  margin: 0;
  min-width: 240px;
}

.popup-card {
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.popup-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  color: #003d4d;
  line-height: 1.3;
}

.popup-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.popup-type,
.popup-district {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
}

.popup-type {
  background: #00a8cc;
  color: #fff;
}

.popup-district {
  background: #ff6a00;
  color: #fff;
}

.popup-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 13px;
}

.popup-table td {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.popup-table td:first-child {
  font-weight: 600;
  color: #555;
  width: 50%;
}

.popup-table .status-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.popup-table .status-offen,
.popup-table .status-badge.status-offen {
  background: #d4edda;
  color: #155724;
}

.popup-table .status-badge.status-geschlossen {
  background: #f8d7da;
  color: #721c24;
}

.popup-table .crowd-low {
  color: #155724;
  font-weight: 600;
}

.popup-table .crowd-mid {
  color: #856404;
  font-weight: 600;
}

.popup-table .crowd-high {
  color: #721c24;
  font-weight: 600;
}

.popup-route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #00a8cc;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.popup-route:hover {
  background: #008fa8;
}

.popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.popup-book {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ff6a00;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.popup-book:hover {
  background: #e55d00;
}

.popup-link {
  color: var(--turquoise);
  text-decoration: none;
  font-weight: 600;
}

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

/* Forms */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-dark);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.1);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--turquoise), var(--light-turquoise));
  color: var(--white);
  box-shadow: 0 4px 12px rgba(0, 168, 204, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--light-turquoise), var(--turquoise));
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 168, 204, 0.4);
}

.btn-secondary {
  background: linear-gradient(135deg, #666, #888);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #555, #777);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, var(--turquoise), var(--light-turquoise));
  color: var(--white);
  box-shadow: 0 4px 12px rgba(0, 168, 204, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0096b8, #00b8e6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 168, 204, 0.4);
}

.btn-success {
  background: linear-gradient(135deg, var(--success), #3db544);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #e74c3c);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-small {
  padding: 10px 16px;
  font-size: 14px;
  margin: 4px;
}

/* ── Hero ── */
.hero {
  position: relative;
  text-align: center;
  padding: 120px 20px 100px;
  background:
    url('../images/hero-bg.jpg') center / cover no-repeat;
  color: var(--white);
  border-radius: 12px;
  margin-bottom: 60px;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Orange dynamic swoosh line – transition from header */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 8%,
    var(--squalo-neon-orange) 25%,
    #ff7a00 45%,
    transparent 60%,
    transparent 100%
  );
  opacity: 0.85;
  z-index: 3;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 5%,
    #000 20%,
    #000 40%,
    transparent 55%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 5%,
    #000 20%,
    #000 40%,
    transparent 55%,
    transparent 100%
  );
  animation: orangeSwoosh 2s ease-out forwards;
  transform-origin: left center;
}

@keyframes orangeSwoosh {
  0%   { transform: scaleX(0); opacity: 0; }
  50%  { transform: scaleX(1.02); opacity: 0.9; }
  100% { transform: scaleX(1); opacity: 0.85; }
}

/* Warm amber/orange dusk overlay – urban rooftop sunset feel */
.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(230, 160, 60, 0.05) 0%,
    rgba(210, 130, 45, 0.09) 25%,
    rgba(180, 100, 35, 0.12) 50%,
    rgba(120, 70, 30, 0.22) 100%
  );
  z-index: 1;
}

/* Aquamarine pool glow – subtle radiant hotspot at bottom center */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 40%;
  background: radial-gradient(
    ellipse 100% 60% at center bottom,
    rgba(102, 224, 255, 0.25) 0%,
    rgba(127, 243, 255, 0.10) 35%,
    transparent 70%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0;
}

.hero-title {
  font-family: 'Righteous', cursive;
  font-size: 64px;
  font-weight: 900;
  margin: 0 0 8px 0;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 6px;
  background: linear-gradient(135deg, var(--squalo-neon-orange), #ff7a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(255, 159, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 122, 0, 0.2));
}

.hero-tagline {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.5px;
}

.hero-description {
  font-size: 18px;
  margin: 0 0 40px 0;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-hero-primary {
  background: linear-gradient(135deg, var(--orange), #ff8533);
  color: var(--white);
  padding: 16px 36px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 6px 24px rgba(255, 106, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.btn-hero-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn-hero-primary:hover::before {
  left: 100%;
}

.btn-hero-primary:hover {
  background: linear-gradient(135deg, #ff8533, var(--orange));
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(255, 106, 0, 0.6);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  padding: 16px 36px;
  font-size: 18px;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  backdrop-filter: blur(8px);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--white);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════
   HERO ENTRANCE ANIMATIONS
   ══════════════════════════════════════════════════════════ */

/* Base: all animated hero elements start hidden */
.hero-anim {
  opacity: 0;
  will-change: opacity, transform, filter;
}

/* ── 1. Title sunrise animation ── */
.hero-anim-sunrise {
  animation: heroSunrise 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
}

@keyframes heroSunrise {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: drop-shadow(0 0 0px rgba(255, 159, 0, 0)) brightness(0.6);
  }
  40% {
    opacity: 0.7;
    filter: drop-shadow(0 0 20px rgba(255, 159, 0, 0.3)) brightness(0.85);
  }
  70% {
    opacity: 0.95;
    transform: translateY(-4px) scale(1.01);
    filter: drop-shadow(0 0 40px rgba(255, 159, 0, 0.5)) brightness(1.05);
  }
  85% {
    transform: translateY(2px) scale(0.998);
    filter: drop-shadow(0 0 28px rgba(255, 159, 0, 0.4)) brightness(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 24px rgba(255, 159, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 122, 0, 0.2)) brightness(1);
  }
}

/* ── 2. Fog / mist text fade-in ── */
.hero-anim-fog {
  animation: heroFog 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-tagline.hero-anim-fog {
  animation-delay: 0.7s;
}

.hero-description.hero-anim-fog {
  animation-delay: 1.1s;
}

@keyframes heroFog {
  0% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(10px);
  }
  30% {
    opacity: 0.3;
    filter: blur(6px);
  }
  60% {
    opacity: 0.7;
    transform: translateY(3px);
    filter: blur(2px);
  }
  80% {
    opacity: 0.92;
    transform: translateY(-1px);
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── 3. Buoy rise animation for button container ── */
.hero-anim-buoy {
  animation: heroBuoy 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}

@keyframes heroBuoy {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  35% {
    opacity: 0.5;
    transform: translateY(-8px) scale(1.02);
  }
  55% {
    transform: translateY(4px) scale(0.99);
  }
  75% {
    opacity: 0.95;
    transform: translateY(-3px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── 3b. Individual button stagger from left/right ── */
.btn-hero-primary.hero-btn-water {
  animation: heroBtnFromLeft 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s forwards,
             heroBtnFloat 4s ease-in-out 3.2s infinite;
}

.btn-hero-secondary.hero-btn-water {
  animation: heroBtnFromRight 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.75s forwards,
             heroBtnFloat 4s ease-in-out 3.4s infinite;
}

@keyframes heroBtnFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes heroBtnFromRight {
  0% {
    opacity: 0;
    transform: translateX(20px) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes heroBtnFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ── 4. Waterdrop / wet-look effects on buttons ── */
.hero-btn-water {
  position: relative;
  overflow: hidden;
}

/* Water shimmer highlight — sweeping across like light on wet surface */
.hero-btn-water::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 70%
  );
  transform: skewX(-20deg);
  animation: waterShimmerSlide 3.5s ease-in-out 3s forwards;
  pointer-events: none;
}

@keyframes waterShimmerSlide {
  0% {
    left: -80%;
    opacity: 1;
  }
  60% {
    left: 120%;
    opacity: 1;
  }
  61% {
    opacity: 0;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

/* Small water drop highlights using radial gradients */
.hero-btn-water::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle 2.5px at 18% 25%, rgba(255, 255, 255, 0.45) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 42% 18%, rgba(255, 255, 255, 0.35) 0%, transparent 100%),
    radial-gradient(circle 3px at 68% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 82% 22%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
    radial-gradient(circle 2px at 55% 70%, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
  opacity: 0;
  animation: waterDropsAppear 1s ease-out 3.4s forwards;
  pointer-events: none;
  z-index: 1;
}

@keyframes waterDropsAppear {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════
   ACTIVITY STATS (Coach Panel)
   ══════════════════════════════════════════════════════════ */
.activity-stats {
  background: var(--white);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.activity-title {
  font-family: 'Righteous', cursive;
  font-size: 16px;
  color: var(--dark-blue);
  margin: 0 0 14px 0;
}

.activity-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.activity-card {
  flex: 1;
  min-width: 120px;
  background: linear-gradient(135deg, rgba(0,168,204,0.06), rgba(102,224,255,0.1));
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(0,168,204,0.12);
}

.activity-number {
  display: block;
  font-family: 'Righteous', cursive;
  font-size: 32px;
  color: var(--turquoise);
  line-height: 1.1;
}

.activity-label {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
  font-weight: 500;
}

.activity-visitors {
  margin-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 12px;
}

.activity-visitors-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.activity-visitor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

.activity-visitor:last-child {
  border-bottom: none;
}

.activity-visitor-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.activity-visitor-label {
  font-weight: 600;
  color: var(--text-dark);
  min-width: 80px;
}

.activity-visitor-time {
  color: var(--text-light);
  font-size: 12px;
  min-width: 100px;
}

.activity-visitor-path {
  color: var(--turquoise);
  font-family: monospace;
  font-size: 12px;
}

/* Mobile: activity stats */
@media (max-width: 768px) {
  .activity-grid {
    gap: 10px;
  }
  .activity-card {
    min-width: 90px;
    padding: 12px;
  }
  .activity-number {
    font-size: 24px;
  }
  .activity-visitor {
    flex-wrap: wrap;
    gap: 4px;
  }
  .activity-visitor-time,
  .activity-visitor-path {
    font-size: 11px;
  }
}

/* Sections */
.locations-section,
.info-section,
.dashboard-section {
  margin-bottom: 40px;
}

.locations-section h2,
.info-section h2,
.dashboard-section h3 {
  color: var(--dark-blue);
  font-size: 28px;
  margin-bottom: 10px;
}

.locations-section > p,
.info-section > p {
  color: var(--text-light);
  font-size: 16px;
  margin-bottom: 20px;
}

/* Locations Grid */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.location-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

.location-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--turquoise), var(--orange));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.location-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.location-card:hover::before {
  opacity: 1;
}

.location-header {
  background: linear-gradient(135deg, var(--dark-blue), #005577);
  color: var(--white);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.location-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.location-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.location-type {
  background: linear-gradient(135deg, var(--turquoise), var(--light-turquoise));
  padding: 6px 16px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 168, 204, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.location-body {
  padding: 16px;
}

.location-body p {
  margin: 8px 0;
  font-size: 14px;
  color: var(--text-dark);
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-offen {
  background-color: #d4edda;
  color: #155724;
}

.status-open {
  background-color: #d4edda;
  color: #155724;
}

.status-geschlossen {
  background-color: #f8d7da;
  color: #721c24;
}

.crowd-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.crowd-niedrig {
  background-color: #d4edda;
  color: #155724;
}

.crowd-mittel {
  background-color: #fff3cd;
  color: #856404;
}

.crowd-hoch {
  background-color: #f8d7da;
  color: #721c24;
}

.crowd-geschlossen {
  background-color: #e0e0e0;
  color: #666666;
  font-style: italic;
}

.location-footer {
  padding: 0 16px 16px 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-small {
  font-size: 14px;
  padding: 8px 12px;
  display: inline-block;
  color: var(--white);
  background: var(--turquoise);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.btn-small:hover {
  background: var(--light-turquoise);
}

.btn-route {
  background: var(--turquoise);
}

.btn-route:hover {
  background: var(--light-turquoise);
}

.btn-booking {
  background: var(--squalo-neon-orange);
}

.btn-booking:hover {
  background: var(--orange);
}

/* ══════════════════════════════════════
   INFO CARDS – Modern Glassmorphism
   ══════════════════════════════════════ */
.info-section {
  background: linear-gradient(135deg, rgba(0,61,77,0.03) 0%, rgba(0,168,204,0.04) 100%);
  border-radius: 16px;
  padding: 40px 32px;
  margin-bottom: 40px;
}

.info-section h2 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 8px;
  color: var(--squalo-neon-orange);
}

.info-section > p {
  text-align: center;
  margin-bottom: 32px;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 0;
  align-items: stretch;
}

.info-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 28px 20px 28px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 180px;
  box-shadow:
    0 4px 16px rgba(0, 61, 77, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Step-colored accent line: odd = blue, even = orange */
.info-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--turquoise);
  opacity: 0;
  transition: opacity 0.35s ease, height 0.3s ease;
}
.info-card-link[data-step="2"] .info-card::after,
.info-card-link[data-step="4"] .info-card::after {
  background: var(--squalo-neon-orange);
}

.info-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.info-card-link:hover {
  text-decoration: none;
  color: inherit;
}

.info-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 32px rgba(0, 61, 77, 0.12),
    0 4px 8px rgba(255, 159, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 159, 0, 0.25);
  cursor: pointer;
}

.info-card:hover::after {
  opacity: 1;
  height: 4px;
}

.info-card h3 {
  color: var(--dark-blue);
  margin-top: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
}

.info-card p {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 0;
  line-height: 1.6;
  flex: 1;
}

/* ── SEO Section ── */
.seo-section {
  max-width: 900px;
  margin: 3rem auto 2rem;
  padding: 0 20px;
}

.seo-section h2 {
  font-family: 'Righteous', cursive;
  font-size: 24px;
  color: var(--dark-blue);
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.seo-card {
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.seo-card h3 {
  font-size: 16px;
  color: var(--dark-blue);
  margin: 0 0 0.5rem;
}

.seo-card p {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 600px) {
  .seo-grid {
    grid-template-columns: 1fr;
  }
}

/* Auth Forms */
.auth-form-container {
  max-width: 400px;
  margin: 40px auto;
  background: var(--white);
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auth-form-container h2 {
  color: var(--dark-blue);
  margin-top: 0;
  text-align: center;
}

.auth-form-container form {
  margin-bottom: 20px;
}

.auth-link {
  text-align: center;
  margin: 0;
  color: var(--text-light);
}

.auth-link a {
  color: var(--turquoise);
  text-decoration: none;
  font-weight: 600;
}

.auth-link a:hover {
  text-decoration: underline;
}

/* Booking Form */
.booking-form-container {
  max-width: 600px;
  margin: 40px auto;
  background: var(--white);
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.booking-form-container h2 {
  color: var(--dark-blue);
  margin-top: 0;
}

.booking-form-container > p {
  color: var(--text-light);
  margin-bottom: 30px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

/* Dashboard */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.dashboard-header h2 {
  color: var(--dark-blue);
  margin: 0;
}

.bookings-list {
  display: grid;
  gap: 16px;
}

.booking-card {
  background: var(--white);
  border-left: 4px solid var(--turquoise);
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.booking-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.status-angefragt {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.status-bestätigt {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-abgelehnt {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.booking-content p {
  margin: 8px 0;
  color: var(--text-dark);
}

.booking-date {
  font-size: 16px;
  font-weight: 600;
}

.booking-locations ul {
  margin: 8px 0;
  padding-left: 20px;
}

.booking-locations li {
  margin: 4px 0;
}

.confirmed-location {
  background: #d4edda;
  padding: 12px;
  border-radius: 4px;
  color: #155724;
  font-weight: 600;
  margin-top: 12px;
}

.admin-note {
  background: #d1ecf1;
  padding: 12px;
  border-radius: 4px;
  color: #0c5460;
  margin-top: 8px;
}

/* ── Dashboard Tabs ── */
.dash-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.dash-tab {
  flex: 1;
  min-width: 140px;
  padding: 14px 16px;
  border: 2px solid var(--turquoise);
  background: rgba(255, 255, 255, 0.7);
  color: var(--dark-blue);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  white-space: nowrap;
}

.dash-tab:hover {
  background: rgba(0, 168, 204, 0.08);
  border-color: var(--dark-blue);
}

.dash-tab.active {
  background: var(--turquoise);
  color: #fff;
  border-color: var(--turquoise);
  box-shadow: 0 4px 12px rgba(0, 168, 204, 0.25);
}

.dash-panel {
  display: none;
}

.dash-panel.active {
  display: block;
}

.dash-subsection {
  margin-bottom: 28px;
}

.dash-subsection h3 {
  font-size: 20px;
  color: var(--dark-blue);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(0, 168, 204, 0.15);
}

/* ── Booking Card Variants ── */
.card-pending {
  border-left: 4px solid #ffc107;
}

.card-confirmed {
  border-left: 4px solid #28a745;
}

.card-rejected {
  border-left: 4px solid #dc3545;
  opacity: 0.75;
}

/* ── Calendar Export Button ── */
.btn-calendar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--turquoise), #008ba3);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-calendar:hover {
  background: linear-gradient(135deg, #008ba3, var(--dark-blue));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 168, 204, 0.3);
}

.calendar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.calendar-actions .btn {
  font-size: 13px;
  padding: 8px 16px;
}

/* ── Placeholder Cards ── */
.dash-placeholder {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px dashed rgba(0, 168, 204, 0.3);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  color: var(--text-light);
}

.dash-placeholder .placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.dash-placeholder h3 {
  color: var(--dark-blue);
  font-size: 22px;
  margin-bottom: 12px;
}

.dash-placeholder p {
  max-width: 480px;
  margin: 0 auto 8px;
  line-height: 1.6;
}

.placeholder-note {
  color: var(--turquoise);
  font-weight: 600;
  font-size: 14px;
  margin-top: 16px !important;
}

.empty-state {
  background: var(--white);
  padding: 40px;
  border-radius: 8px;
  text-align: center;
  color: var(--text-light);
}

.empty-state p {
  margin-bottom: 20px;
  font-size: 16px;
}

/* Admin */
.admin-section {
  background: var(--white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.bookings-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.bookings-table thead {
  background: var(--dark-blue);
  color: var(--white);
}

.bookings-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
}

.bookings-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.booking-row td:first-child {
  font-weight: 600;
}

.booking-details {
  background-color: #f9f9f9;
  font-size: 13px;
}

.booking-details td {
  padding: 16px;
  line-height: 1.6;
}

.locations-cell ul {
  margin: 0;
  padding-left: 20px;
}

.admin-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.location-select,
.note-input {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}

.location-select {
  min-width: 120px;
}

.note-input {
  flex: 1;
  min-width: 120px;
}

/* ── Booking History ── */
.history-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 1.5rem 0 1rem;
}

.history-stat {
  background: var(--white);
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-align: center;
  min-width: 80px;
}

.history-stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--dark-blue);
  font-family: 'Righteous', cursive;
}

.history-stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}

.history-stat-pending .history-stat-number { color: #e67e22; }
.history-stat-confirmed .history-stat-number { color: #27ae60; }
.history-stat-past .history-stat-number { color: #95a5a6; }
.history-stat-future .history-stat-number { color: var(--turquoise); }

.history-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.history-filter {
  background: var(--white);
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-dark);
}

.history-filter:hover {
  border-color: var(--turquoise);
  color: var(--turquoise);
}

.history-filter.active {
  background: var(--turquoise);
  border-color: var(--turquoise);
  color: var(--white);
}

.history-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.history-status-confirmed {
  background: #d4edda;
  color: #155724;
}

.history-status-pending {
  background: #fff3cd;
  color: #856404;
}

.history-status-declined {
  background: #f8d7da;
  color: #721c24;
}

.history-status-alternative {
  background: #cce5ff;
  color: #004085;
}

.history-status-unknown {
  background: #e2e3e5;
  color: #383d41;
}

/* Footer */
.site-footer {
  background: var(--dark-blue);
  color: var(--white);
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

/* ── Map Legend (outside map) ── */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 14px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border-radius: 10px;
  border: 1px solid rgba(0, 109, 143, 0.08);
  font-size: 12px;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-light);
}

.map-legend strong {
  margin-right: 4px;
  color: #003d4d;
  font-size: 13px;
}

.legend-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.site-footer {
  background: linear-gradient(135deg, #003d4d, #002838);
  color: var(--white);
  text-align: center;
  padding: 32px 20px;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: 0.6;
}

.site-footer p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.site-footer a {
  color: var(--light-turquoise);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.site-footer a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.site-footer a:hover::after {
  transform: scaleX(1);
}

.site-footer a:hover {
  color: var(--orange);
}

/* ── Collapsible Locations ── */
.location-hidden {
  display: none !important;
}

.locations-toggle {
  text-align: center;
  margin-top: 20px;
}

/* ── Booking Form Enhancements ── */
.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}

.form-fieldset {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.form-fieldset legend {
  font-weight: 700;
  font-size: 16px;
  padding: 0 8px;
  color: var(--dark-blue);
}

.time-row {
  display: flex;
  gap: 12px;
}

.time-row input {
  flex: 1;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE OPTIMIZATION
   ════════════════════════════════════════════════════════ */

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {
  .brand-title {
    font-size: 40px;
    letter-spacing: 4px;
  }

  .logo-img {
    height: 140px;
  }

  .lane-item {
    font-size: 13px;
    padding: 8px 16px;
  }

  .hero {
    padding: 80px 20px 70px;
    min-height: 380px;
  }

  .hero-title {
    font-size: 48px;
    letter-spacing: 4px;
  }

  .hero-tagline {
    font-size: 22px;
  }

  .hero-description {
    font-size: 16px;
    max-width: 500px;
  }

  /* Map area: tighter gap */
  .map-area {
    gap: 16px;
  }

  .community-feed {
    min-width: 0;
  }

  .promo-panel {
    min-height: auto;
  }

  .swim-slide h4 {
    font-size: 15px;
  }

  .swim-slide p {
    font-size: 12.5px;
  }

  #map {
    height: 450px;
  }

  .location-header h3 {
    font-size: 18px;
  }

  .logo-img {
    height: 120px;
  }

  .brand-title {
    font-size: 34px;
    letter-spacing: 3px;
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  /* ── Global ── */
  .container {
    padding: 0 14px;
  }

  main {
    padding: 24px 0;
  }

  /* ── Header ── */
  .site-header {
    padding: 0;
  }

  .header-content {
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
  }

  .logo-section {
    flex-direction: column;
    gap: 8px;
    margin-left: 0;
  }

  .logo-img {
    height: 85px;
  }

  .logo-img:hover {
    transform: none;
  }

  .brand-title {
    font-size: 28px;
    text-align: center;
    white-space: normal;
    letter-spacing: 2px;
  }

  .main-nav {
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
  }

  .main-nav a {
    display: block;
    padding: 10px 0;
    text-align: center;
    font-size: 15px;
  }

  /* Mobile: lane nav */
  .lane-nav {
    max-width: 100%;
    margin-top: 14px;
  }

  .lane-item {
    padding: 7px 14px;
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .lane-buoy-marker {
    width: 5px;
    height: 5px;
  }

  .lane-divider {
    height: 14px;
  }

  .lane-divider::before {
    left: 2%;
    right: 2%;
  }

  .divider-buoy {
    width: 4px;
    height: 4px;
  }

  /* Mobile: top bar */
  .top-bar {
    padding: 2px 0;
  }

  .top-bar-inner {
    gap: 4px;
  }

  .shark-icon {
    font-size: 13px;
  }

  .top-bar-link {
    font-size: 11px;
    padding: 2px 6px;
  }

  /* Mobile: header main */
  .header-main {
    padding: 12px 0 10px;
  }

  .header-content {
    justify-content: center;
  }

  /* ── Hero ── */
  .hero {
    padding: 60px 16px 50px;
    min-height: 300px;
    margin-bottom: 32px;
    border-radius: 8px;
  }

  .hero::before {
    height: 4px;
  }

  .hero-title {
    font-size: 36px;
    letter-spacing: 2px;
  }

  .hero-tagline {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .hero-description {
    font-size: 15px;
    margin-bottom: 24px;
    max-width: 100%;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .cta-buttons .btn,
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: 16px;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    padding: 14px 20px;
    font-size: 16px;
  }

  /* ── Mobile: Hero Animations (reduced intensity) ── */
  .hero-anim-sunrise {
    animation-duration: 1.4s;
  }

  @keyframes heroSunrise {
    0% {
      opacity: 0;
      transform: translateY(24px) scale(0.97);
      filter: drop-shadow(0 0 0px rgba(255, 159, 0, 0)) brightness(0.6);
    }
    50% {
      opacity: 0.8;
      filter: drop-shadow(0 0 16px rgba(255, 159, 0, 0.3)) brightness(0.9);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: drop-shadow(0 0 20px rgba(255, 159, 0, 0.4)) brightness(1);
    }
  }

  .hero-anim-fog {
    animation-duration: 1.2s;
  }

  .hero-anim-buoy {
    animation-delay: 1.2s;
  }

  .btn-hero-primary.hero-btn-water,
  .btn-hero-secondary.hero-btn-water {
    animation-delay: 1.3s, 2.8s;
  }

  /* ── Pool Tile Strip Mobile ── */
  .pool-tile-strip {
    height: 10px;
    margin: 8px auto;
  }

  /* ── Starting Blocks Mobile ── */
  .starting-block {
    width: 18px;
    height: 14px;
    margin-left: 8px;
  }

  .starting-block::before {
    height: 3px;
    bottom: -3px;
  }

  /* ── Map Area ── */
  .map-area {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 24px;
  }

  .map-section {
    padding: 14px 12px 18px;
    order: 1;
  }

  .map-section h2 {
    font-size: 20px;
  }

  .map-section > p {
    font-size: 14px;
  }

  #map {
    height: 480px;
    border-radius: 10px;
  }

  /* Mobile map legend */
  .map-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px 0;
    padding: 10px 14px;
    font-size: 11px;
  }

  /* Mobile popups */
  .leaflet-popup-content-wrapper {
    border-radius: 12px;
    padding: 0;
  }

  .leaflet-popup-content {
    margin: 0;
    min-width: 220px;
  }

  .popup-card {
    padding: 14px;
  }

  .popup-title {
    font-size: 15px;
  }

  .popup-actions {
    flex-direction: column;
    gap: 6px;
  }

  .popup-route,
  .popup-book {
    justify-content: center;
    padding: 10px 14px;
    font-size: 14px;
  }

  .leaflet-popup-close-button {
    font-size: 22px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 6px 0 0 !important;
  }

  /* ── Community Feed ── */
  .community-feed {
    padding: 16px 14px;
    order: 2;
  }

  .community-feed h3 {
    font-size: 16px;
  }

  .feed-textarea {
    padding: 12px;
    font-size: 16px; /* prevents iOS zoom */
    min-height: 80px;
  }

  .feed-input .btn-primary {
    padding: 12px 16px;
    font-size: 15px;
    min-height: 44px; /* touch target */
  }

  .feed-item {
    padding: 12px;
  }

  .feed-author {
    font-size: 11px;
  }

  .feed-text {
    font-size: 14px;
  }

  .feed-login-hint {
    font-size: 14px;
    padding: 14px;
  }

  .feed-empty {
    font-size: 14px;
    padding: 24px 14px;
  }

  /* ── Premium Panel ── */
  .promo-panel {
    order: 3;
    min-height: auto;
    padding: 22px 14px 110px;
  }

  .promo-icon {
    font-size: 28px;
    margin-bottom: 4px;
  }

  .promo-content h3 {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .promo-content p {
    font-size: 12px;
  }

  .promo-coming-soon {
    font-size: 11px;
    padding: 6px 16px;
  }

  .small-fish {
    display: none; /* hide fish on small screens – performance */
  }

  .promo-decoration {
    display: none; /* hide decorations on mobile */
  }

  .bubble {
    animation-duration: 8s !important; /* slower for perf */
  }

  /* ── Swim Knowledge Slideshow (mobile) ── */
  .swim-knowledge {
    padding: 18px 16px;
  }

  .swim-knowledge h3 {
    font-size: 15px;
  }

  .swim-slideshow {
    min-height: 120px;
  }

  .swim-slide-icon {
    font-size: 24px;
  }

  .swim-slide h4 {
    font-size: 15px;
  }

  .swim-slide p {
    font-size: 13px;
    line-height: 1.6;
  }

  /* ── Promo Slideshow (mobile) ── */
  .promo-slide {
    gap: 8px;
  }

  .promo-feature-item {
    padding: 8px 12px;
    font-size: 11px;
  }

  .promo-feature-icon {
    font-size: 14px;
  }

  /* ── Sections ── */
  .locations-section h2,
  .info-section h2,
  .dashboard-section h3 {
    font-size: 22px;
  }

  .locations-section > p,
  .info-section > p {
    font-size: 15px;
  }

  .locations-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
  }

  .location-header {
    padding: 14px 16px;
  }

  .location-header h3 {
    font-size: 18px;
  }

  .location-type {
    font-size: 11px;
    padding: 4px 12px;
  }

  .location-body {
    padding: 12px 14px;
  }

  .location-body p {
    font-size: 14px;
    margin: 6px 0;
  }

  .location-footer {
    padding: 0 14px 14px;
    flex-direction: column;
    gap: 6px;
  }

  .location-footer .btn-small {
    padding: 10px 14px;
    font-size: 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 44px;
  }

  .info-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
  }

  .info-card {
    padding: 24px 20px;
  }

  .info-card h3 {
    font-size: 18px;
  }

  .info-card p {
    font-size: 14px;
  }

  /* ── Booking / Auth Forms ── */
  .auth-form-container,
  .booking-form-container {
    margin: 20px auto;
    padding: 24px 20px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 14px;
    font-size: 16px; /* prevents iOS zoom */
  }

  .form-actions {
    flex-direction: column;
    gap: 10px;
  }

  .form-actions .btn {
    width: 100%;
    padding: 14px;
    min-height: 44px;
  }

  .radio-group {
    gap: 12px;
  }

  .radio-label {
    font-size: 16px;
    min-height: 44px;
    padding: 8px 0;
  }

  .time-row {
    flex-direction: column;
    gap: 8px;
  }

  /* ── Dashboard ── */
  .dashboard-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .dashboard-header h2 {
    font-size: 22px;
  }

  .bookings-table {
    font-size: 12px;
  }

  .bookings-table th,
  .bookings-table td {
    padding: 8px 6px;
  }

  .admin-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .inline-form {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .location-select,
  .note-input {
    min-width: 0;
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }

  .booking-card {
    padding: 14px;
  }

  /* ── Dashboard Tabs (Mobile) ── */
  .dash-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 20px;
  }

  .dash-tab {
    min-width: 0;
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
    border-radius: 10px;
    gap: 4px;
  }

  .dash-subsection h3 {
    font-size: 18px;
  }

  .dash-placeholder {
    padding: 32px 20px;
  }

  .dash-placeholder .placeholder-icon {
    font-size: 36px;
  }

  .dash-placeholder h3 {
    font-size: 18px;
  }

  .btn-calendar {
    padding: 12px 18px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
  }

  /* ── Footer ── */
  .site-footer {
    padding: 24px 14px;
    margin-top: 32px;
  }

  .site-footer p {
    font-size: 13px;
  }

  /* ── Shop ── */
  .product-grid {
    grid-template-columns: 1fr;
  }

  .shop-categories {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .shop-title {
    font-size: 30px;
  }

  .shop-hero {
    padding: 32px 0 24px;
  }

  .product-image {
    height: 160px;
  }

  .btn-product {
    padding: 12px 20px;
    min-height: 44px;
    font-size: 15px;
    width: 100%;
    text-align: center;
  }

  /* ── Map Legend ── */
  .map-legend {
    font-size: 11px;
    padding: 8px 10px;
  }

  /* ── Region Filter (Mobile) ── */
  .region-filter-bar {
    gap: 6px;
    margin-bottom: 10px;
  }

  .region-btn {
    padding: 7px 12px;
    font-size: 12px;
  }

  .region-btn-locate {
    width: 100%;
    text-align: center;
  }

  /* ── Leaflet Popup (Mobile) ── */
  .leaflet-popup-content {
    min-width: 200px;
    max-width: 280px;
  }

  .popup-card {
    padding: 12px;
  }

  .popup-title {
    font-size: 14px;
  }

  .popup-table {
    font-size: 12px;
  }

  .popup-route,
  .popup-book {
    padding: 8px 10px;
    font-size: 12px;
    min-height: 36px;
    justify-content: center;
    flex: 1;
  }

  .popup-actions {
    flex-direction: column;
    gap: 6px;
  }

  /* ── Legal page ── */
  .legal-page {
    margin: 1.5rem auto;
    padding: 0 1rem;
  }
}

/* ── Small Phone (max 480px) ── */
@media (max-width: 480px) {
  .container {
    padding: 0 10px;
  }

  .hero {
    padding: 44px 12px 36px;
    min-height: 240px;
  }

  .hero-title {
    font-size: 28px;
    letter-spacing: 1px;
  }

  .hero-tagline {
    font-size: 16px;
  }

  .hero-description {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .hero-content {
    padding: 20px 0;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    padding: 12px 16px;
    font-size: 14px;
  }

  /* ── Small Mobile: further reduce animations ── */
  .hero-anim-sunrise {
    animation-duration: 1.1s;
    filter: none;
  }

  @keyframes heroSunrise {
    0% {
      opacity: 0;
      transform: translateY(18px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-anim-fog {
    animation-duration: 1s;
  }

  @keyframes heroFog {
    0% {
      opacity: 0;
      transform: translateY(10px);
      filter: blur(6px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  .hero-anim-buoy {
    animation-delay: 1s;
  }

  .btn-hero-primary.hero-btn-water,
  .btn-hero-secondary.hero-btn-water {
    animation-delay: 1.1s, 2.5s;
  }

  .hero-btn-water::after,
  .hero-btn-water::before {
    animation: none;
    display: none;
  }

  .logo-img {
    height: 65px;
  }

  .brand-title {
    font-size: 24px;
    letter-spacing: 1.5px;
  }

  .main-nav a {
    font-size: 14px;
    padding: 8px 0;
  }

  .lane-nav {
    margin-top: 10px;
  }

  .lane-item {
    padding: 5px 10px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  .lane-buoy-marker {
    width: 4px;
    height: 4px;
  }

  .top-bar-link {
    font-size: 10px;
    padding: 1px 5px;
  }

  .shark-icon {
    font-size: 11px;
  }

  .header-main {
    padding: 8px 0 6px;
  }

  .map-section h2 {
    font-size: 18px;
  }

  #map {
    height: 280px;
  }

  .map-area {
    gap: 12px;
  }

  .community-feed {
    padding: 12px 10px;
  }

  .community-feed h3 {
    font-size: 15px;
  }

  .feed-textarea {
    padding: 10px;
    font-size: 16px;
    min-height: 64px;
  }

  .promo-panel {
    min-height: 240px;
    padding: 18px 12px 90px;
  }

  .promo-icon {
    font-size: 22px;
  }

  .promo-content h3 {
    font-size: 15px;
    letter-spacing: 1px;
  }

  .promo-content p {
    font-size: 11px;
  }

  .bubble {
    display: none;
  }

  .location-header h3 {
    font-size: 16px;
  }

  .location-type {
    font-size: 10px;
    padding: 3px 10px;
  }

  .location-body p {
    font-size: 13px;
  }

  .info-card h3 {
    font-size: 16px;
  }

  .info-card p {
    font-size: 13px;
  }

  .locations-section h2,
  .info-section h2 {
    font-size: 20px;
  }

  .dashboard-header h2 {
    font-size: 18px;
  }

  .shop-title {
    font-size: 24px;
  }

  .leaflet-popup-content {
    min-width: 160px;
    max-width: 240px;
  }

  .popup-card {
    padding: 10px;
  }

  .popup-title {
    font-size: 13px;
  }

  .popup-table {
    font-size: 11px;
  }

  .popup-route,
  .popup-book {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* ══════════════════════════════════════
   ACCESSIBILITY: Reduced Motion
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-anim {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .btn-hero-primary.hero-btn-water,
  .btn-hero-secondary.hero-btn-water {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-btn-water::after,
  .hero-btn-water::before {
    animation: none !important;
    display: none;
  }

  .hero::before {
    animation: none !important;
    transform: scaleX(1) !important;
    opacity: 0.85;
  }

  /* Kill all other animations site-wide */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════
   SHOP STYLES
   ══════════════════════════════════════ */

.shop-hero {
  background: linear-gradient(135deg, var(--dark-blue), #006070);
  padding: 48px 0 36px;
  text-align: center;
}

.shop-title {
  font-family: 'Righteous', cursive;
  font-size: 42px;
  color: var(--orange);
  margin: 0 0 12px;
}

.shop-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  margin: 0;
}

.shop-section {
  padding: 40px 0 60px;
}

.shop-categories {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.cat-btn {
  background: var(--white);
  border: 2px solid #ddd;
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-blue);
  cursor: pointer;
  transition: all 0.25s ease;
}

.cat-btn:hover,
.cat-btn.active {
  background: var(--turquoise);
  border-color: var(--turquoise);
  color: var(--white);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

.product-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.product-image {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-placeholder {
  color: var(--dark-blue);
  opacity: 0.4;
}

.product-placeholder svg {
  width: 80px;
  height: 80px;
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--dark-blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 12px;
}

.product-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0 0 4px;
}

.product-variant {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.product-desc {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.5;
  flex: 1;
}

.product-price-row {
  margin: 12px 0;
}

.product-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--turquoise);
}

.product-price.tbd {
  font-size: 16px;
  color: var(--text-light);
  font-style: italic;
}

.product-note {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  margin: 0 0 12px;
}

.btn-product {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: background 0.25s ease, transform 0.15s ease;
  align-self: flex-start;
}

.btn-product:hover {
  background: #e55d00;
  transform: scale(1.03);
}

.shop-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.shop-empty p {
  font-size: 20px;
  color: var(--text-light);
  margin: 0;
}

/* ── Shop Hero Slideshow ── */
.shop-hero {
  position: relative;
  width: 100%;
  height: 55vh;
  min-height: 380px;
  max-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-hero-media {
  position: absolute;
  inset: 0;
}

.shop-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.shop-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shop-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.shop-hero-slide.active {
  opacity: 1;
}

.shop-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 61, 77, 0.45) 0%,
    rgba(0, 61, 77, 0.65) 60%,
    rgba(0, 61, 77, 0.85) 100%
  );
  z-index: 2;
}

.shop-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2rem;
  max-width: 700px;
}

.shop-hero-title {
  font-family: 'Righteous', cursive;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: #fff;
  margin: 0 0 0.4rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.shop-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--squalo-pool-blue, #66e0ff);
  font-weight: 600;
  margin: 0 0 0.6rem;
  letter-spacing: 0.3px;
}

.shop-hero-desc {
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.6;
}

/* ── Shop Page ── */
.shop-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 20px 8rem;
}

.shop-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.shop-header h2 {
  font-family: 'Righteous', cursive;
  font-size: 32px;
  color: var(--dark-blue);
  margin-bottom: 0.4rem;
}

.shop-subtitle {
  font-size: 17px;
  color: var(--turquoise);
  font-weight: 600;
  margin-top: 0;
}

.shop-intro {
  background: var(--white);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.shop-intro p {
  margin: 0;
  font-size: 15px;
  color: var(--text-dark);
  line-height: 1.6;
}

.shop-category {
  margin-bottom: 2rem;
}

.shop-category-title {
  font-family: 'Righteous', cursive;
  font-size: 20px;
  color: var(--dark-blue);
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--turquoise);
}

.shop-products {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.shop-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--white);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.shop-card.selected {
  border-color: var(--turquoise);
  box-shadow: 0 2px 12px rgba(0,168,204,0.2);
}

.shop-card-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-gray);
  border-radius: 10px;
}

.shop-card-image {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f4f7;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,109,143,0.08);
}

.shop-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  display: block;
}

.shop-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-blue);
}

.shop-card-body {
  flex: 1;
  min-width: 0;
}

.shop-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0 0 0.4rem;
}

.shop-card-desc {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.shop-card-note {
  font-size: 13px;
  color: var(--turquoise);
  font-style: italic;
  margin: 0 0 0.5rem;
}

.shop-card-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.shop-price-hint {
  font-size: 13px;
  color: var(--text-light);
}

.shop-link-extern {
  font-size: 13px;
  color: var(--turquoise);
  text-decoration: none;
  font-weight: 600;
}

.shop-link-extern:hover {
  color: var(--orange);
  text-decoration: underline;
}

.shop-card-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  cursor: pointer;
}

.shop-checkbox {
  width: 22px;
  height: 22px;
  accent-color: var(--turquoise);
  cursor: pointer;
}

.shop-check-label {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 600;
}

/* ── Shop Cart (sticky bottom bar) ── */
.shop-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--dark-blue);
  color: var(--white);
  padding: 0.8rem 20px;
  z-index: 90;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
}

.shop-cart-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.shop-cart-info {
  font-size: 15px;
  font-weight: 600;
}

.shop-cart-icon {
  font-size: 20px;
  margin-right: 0.3rem;
}

.shop-submit-btn {
  background: var(--turquoise);
  color: var(--white);
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.shop-submit-btn:hover:not(:disabled) {
  background: var(--orange);
}

.shop-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Shop Customer Section ── */
.shop-customer-section {
  margin-top: 2rem;
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.shop-customer-section h3 {
  font-family: 'Righteous', cursive;
  font-size: 18px;
  color: var(--dark-blue);
  margin-bottom: 1rem;
}

.shop-customer-info {
  font-size: 15px;
  color: var(--text-dark);
}

.shop-form-row {
  margin-bottom: 1rem;
}

.shop-form-row label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.3rem;
}

.shop-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.shop-input:focus {
  outline: none;
  border-color: var(--turquoise);
}

/* ── Shop mobile ── */
@media (max-width: 600px) {
  .shop-page {
    padding: 1rem 12px 7rem;
  }

  .shop-card {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-card-check {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .shop-header h2 {
    font-size: 26px;
  }

  .shop-cart-inner {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Footer */
.site-footer {
  margin-top: 4rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.85;
  background-color: var(--dark-blue);
  color: var(--white);
}

.site-footer a {
  color: var(--light-turquoise);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: var(--orange);
}

/* Legal page */
.legal-page {
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1.25rem;
  line-height: 1.65;
}

.legal-page h1,
.legal-page h2 {
  margin-top: 1.5rem;
  color: var(--dark-blue);
}

.legal-page p {
  margin-bottom: 1rem;
}

.legal-page ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal-page li {
  margin-bottom: 0.5rem;
}

.highlight {
  font-weight: 600;
  color: var(--dark-blue);
}

/* ── Squalo Leaflet Marker ────────────────────────────── */
.squalo-marker {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 4px 12px rgba(0,0,0,0.35);
}

.squalo-marker-lake {
  background: #063b7a;
  border: 4px solid #28c76f;
}

.squalo-marker-beach {
  background: #063b7a;
  border: 4px solid #ffd43b;
}

.squalo-marker-summer {
  background: #66e0ff;
  border: 3px solid #ffd43b;
}

.squalo-marker-indoor {
  background: #66e0ff;
  border: 3px solid #ffffff;
}

.squalo-marker-therme {
  background: #66e0ff;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 0 5px #ff4444, 0 4px 12px rgba(0,0,0,0.35);
}

/* ══════════════════════════════════════
   COACHES PAGE STYLES
   ══════════════════════════════════════ */

.coaches-page {
  padding-bottom: 60px;
}

.coaches-hero {
  position: relative;
  background: linear-gradient(135deg, var(--dark-blue), #006070);
  padding: 48px 0 36px;
  text-align: center;
  margin-bottom: 40px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coaches-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

.coaches-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 61, 77, 0.5) 0%,
    rgba(0, 61, 77, 0.65) 50%,
    rgba(0, 61, 77, 0.8) 100%
  );
  z-index: 1;
}

.coaches-hero-title {
  font-family: 'Righteous', cursive;
  font-size: 42px;
  color: var(--orange);
  margin: 0 0 12px;
}

.coaches-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  margin: 0 auto;
  max-width: 600px;
}

.coach-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 36px;
  transition: box-shadow 0.3s ease;
}

.coach-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

.coach-card-inner {
  display: flex;
  gap: 32px;
  padding: 28px;
}

.coach-image-wrap {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--orange);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.coach-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coach-image-placeholder {
  font-size: 64px;
  opacity: 0.5;
}

.coach-info {
  flex: 1;
  min-width: 0;
}

.coach-name {
  font-family: 'Righteous', cursive;
  font-size: 28px;
  color: var(--dark-blue);
  margin: 0 0 6px;
}

.coach-location {
  font-size: 14px;
  color: var(--orange);
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}

.coach-title {
  font-size: 16px;
  color: var(--turquoise);
  font-weight: 600;
  margin: 0 0 14px;
}

.coach-bio {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.coach-strengths,
.coach-swim-style,
.coach-experience {
  margin-bottom: 14px;
}

.coach-strengths h3,
.coach-swim-style h3,
.coach-experience h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coach-strengths p,
.coach-swim-style p,
.coach-experience p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dark);
  margin: 0;
}

.coach-external-link {
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.coach-external-hint {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
}

.coach-actions {
  margin-top: 20px;
}

.coach-price-hint {
  font-size: 13px;
  color: var(--text-light);
  margin: 8px 0 0;
  font-weight: 500;
}

/* ── Reviews Section ── */
.coach-reviews-section {
  padding: 20px 28px;
  background: #f8fcff;
  border-top: 2px solid var(--light-turquoise);
}

.coach-reviews-section h3 {
  font-family: 'Righteous', cursive;
  font-size: 22px;
  color: var(--dark-blue);
  margin: 0 0 16px;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.review-card {
  background: var(--white);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-left: 4px solid var(--orange);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.review-stars {
  font-size: 16px;
  letter-spacing: 2px;
}

.review-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-blue);
}

.review-source {
  font-size: 11px;
  padding: 2px 8px;
  background: #e0f7fa;
  color: var(--dark-blue);
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.review-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dark);
  margin: 4px 0;
}

.review-date {
  font-size: 11px;
  color: var(--text-light);
}

.reviews-empty {
  text-align: center;
  padding: 24px;
  background: var(--white);
  border-radius: 12px;
  color: var(--text-light);
  font-size: 15px;
  margin-bottom: 24px;
}

.reviews-superprof-hint {
  font-size: 13px;
  display: block;
  margin-top: 8px;
}

.reviews-superprof-hint a {
  color: var(--turquoise);
  font-weight: 600;
  text-decoration: none;
}

.reviews-superprof-hint a:hover {
  text-decoration: underline;
}

/* ── Review Form ── */
.review-form-wrap {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.review-form-wrap h4 {
  font-size: 18px;
  color: var(--dark-blue);
  margin: 0 0 16px;
}

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}

.star-rating input {
  display: none;
}

.star-rating label {
  font-size: 32px;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s ease;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: #ffc107;
}

.review-login-hint {
  text-align: center;
  padding: 20px;
  font-size: 15px;
  color: var(--text-light);
  background: var(--white);
  border-radius: 12px;
}

.review-login-hint a {
  color: var(--turquoise);
  font-weight: 600;
  text-decoration: none;
}

.review-login-hint a:hover {
  text-decoration: underline;
}

.coaches-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.coaches-empty p {
  font-size: 18px;
  color: var(--text-light);
}

/* ── Coaches Page Mobile ── */
@media (max-width: 768px) {
  .coaches-hero {
    padding: 32px 0 24px;
  }

  .coaches-hero-title {
    font-size: 28px;
  }

  .coaches-hero-subtitle {
    font-size: 15px;
    padding: 0 14px;
  }

  .coach-card-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .coach-image-wrap {
    width: 140px;
    height: 140px;
  }

  .coach-name {
    font-size: 24px;
  }

  .coach-actions {
    text-align: center;
  }

  .coach-external-link {
    justify-content: center;
  }

  .coach-reviews-section {
    padding: 16px;
  }

  .review-form-wrap {
    padding: 16px;
  }

  .star-rating label {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .coaches-hero-title {
    font-size: 24px;
  }

  .coach-image-wrap {
    width: 110px;
    height: 110px;
  }

  .coach-name {
    font-size: 20px;
  }

  .coach-card-inner {
    padding: 16px;
  }
}

/* ══════════════════════════════════════
   ADMIN PANEL – Coach Panel Tabs
   ══════════════════════════════════════ */

.admin-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 28px;
  background: var(--white);
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.admin-tab {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-family: 'Righteous', cursive;
  font-size: 15px;
  color: var(--dark-blue);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.admin-tab:hover {
  background: rgba(0, 168, 204, 0.08);
  border-color: rgba(0, 168, 204, 0.2);
}

.admin-tab.active {
  background: var(--turquoise);
  color: var(--white);
  border-color: var(--turquoise);
  box-shadow: 0 4px 14px rgba(0, 168, 204, 0.3);
}

/* Settings link styled as a tab */
.admin-tab-link {
  text-decoration: none;
}

.admin-tab-link:hover {
  background: rgba(255, 159, 0, 0.08);
  border-color: rgba(255, 159, 0, 0.3);
}

/* Mail template cards in settings */
.mail-template-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.mail-template-card h4 {
  margin: 0 0 12px 0;
  color: var(--dark-blue);
  font-size: 15px;
}

.mail-textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.mail-textarea:focus {
  border-color: var(--turquoise);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 168, 204, 0.15);
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

/* ── Admin Subsection ── */
.admin-subsection {
  margin-top: 24px;
}

.admin-subsection h3 {
  font-family: 'Righteous', cursive;
  font-size: 20px;
  color: var(--dark-blue);
  margin: 0 0 16px;
}

.subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.subsection-header h3 {
  margin: 0;
}

/* ── Week Navigation ── */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.week-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
}

.week-kw {
  font-family: 'Righteous', cursive;
  font-size: 22px;
  color: var(--turquoise);
  line-height: 1.2;
}

.week-dates {
  font-size: 14px;
  color: var(--text-light);
}

.week-nav-btn {
  white-space: nowrap;
  font-size: 13px !important;
  padding: 8px 16px !important;
}

.week-nav-current {
  background: var(--turquoise) !important;
  color: var(--white) !important;
  border-color: var(--turquoise) !important;
  cursor: default;
}

/* ── Week Calendar Grid ── */
.week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.week-header h3 {
  font-family: 'Righteous', cursive;
  font-size: 20px;
  color: var(--dark-blue);
  margin: 0;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 28px;
}

.week-day {
  background: var(--white);
  border-radius: 10px;
  border: 2px solid #e8f4f8;
  min-height: 140px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.week-day.today {
  border-color: var(--turquoise);
  box-shadow: 0 0 0 2px rgba(0, 168, 204, 0.2);
}

.week-day.has-events {
  border-color: rgba(0, 168, 204, 0.3);
}

.week-day-header {
  background: linear-gradient(135deg, var(--dark-blue), #006070);
  color: var(--white);
  padding: 8px 10px;
  text-align: center;
}

.week-day.today .week-day-header {
  background: linear-gradient(135deg, var(--turquoise), var(--light-turquoise));
}

.day-name {
  display: block;
  font-family: 'Righteous', cursive;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.day-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.day-month {
  display: block;
  font-size: 11px;
  opacity: 0.8;
}

.week-day-events {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.week-event {
  background: linear-gradient(135deg, #e0f7fa, #f0fbff);
  border-left: 3px solid var(--turquoise);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
}

.event-time {
  display: block;
  font-weight: 700;
  color: var(--dark-blue);
  font-size: 12px;
}

.event-client {
  display: block;
  color: var(--text-dark);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-location {
  display: block;
  color: var(--text-light);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-duration {
  display: block;
  font-size: 10px;
  color: var(--turquoise);
  font-weight: 600;
}

.week-day-empty {
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  padding: 16px 0;
  font-style: italic;
}

/* ── Coach Admin Cards ── */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.admin .coach-card,
#panel-coaches .coach-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid #e8f4f8;
  padding: 18px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.admin .coach-card:hover,
#panel-coaches .coach-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: var(--turquoise);
}

.coach-inactive {
  opacity: 0.6;
}

.coach-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.coach-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--turquoise);
}

.coach-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--turquoise), var(--light-turquoise));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Righteous', cursive;
  font-size: 20px;
  font-weight: 700;
}

.coach-card-info {
  flex: 1;
  min-width: 0;
}

.coach-card-info strong {
  display: block;
  font-size: 15px;
  color: var(--dark-blue);
}

.coach-card-info .coach-title {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-badge.badge-active {
  background: #e6f9e6;
  color: #28a745;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.badge-inactive {
  background: #ffe6e6;
  color: #dc3545;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge.badge-active {
  background: #e6f9e6;
  color: #28a745;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.badge.badge-pending {
  background: #fff3cd;
  color: #856404;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.coach-card-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.coach-detail {
  font-size: 12px;
  color: var(--text-dark);
}

.coach-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Form Row (side by side) ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.hidden {
  display: none !important;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--turquoise);
  color: var(--turquoise);
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-outline:hover {
  background: var(--turquoise);
  color: var(--white);
}

/* ── Admin Panel Mobile ── */
@media (max-width: 768px) {
  .admin-tabs {
    gap: 4px;
    padding: 4px;
    margin: 16px 0 20px;
  }

  .admin-tab {
    padding: 10px 8px;
    font-size: 13px;
    gap: 4px;
  }

  .week-nav {
    gap: 8px;
  }

  .week-nav-center {
    order: -1;
    min-width: 100%;
    margin-bottom: 4px;
  }

  .week-nav-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  .week-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .week-day {
    min-height: auto;
  }

  .week-day-events {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .week-event {
    flex: 1;
    min-width: 140px;
  }

  .week-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .coach-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .subsection-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .admin-subsection h3 {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .admin-tab {
    padding: 8px 6px;
    font-size: 11px;
    gap: 2px;
  }

  .week-event {
    min-width: 100%;
  }

  .coach-card-header {
    flex-wrap: wrap;
  }
}

/* ── Shop Hero Responsive ── */
@media (max-width: 768px) {
  .shop-hero {
    height: 45vh;
    min-height: 300px;
  }

  .shop-hero-title {
    font-size: 2rem;
  }

  .shop-hero-subtitle {
    font-size: 0.95rem;
  }

  .shop-hero-desc {
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .shop-hero {
    height: 40vh;
    min-height: 260px;
  }

  .shop-hero-content {
    padding: 1.5rem 1rem;
  }

  .shop-hero-title {
    font-size: 1.7rem;
  }
}