/*
 * LOOKOUT Highlights Page - Main Stylesheet
 * 
 * This file controls the layout and appearance of the LOOKOUT Ambassador Program highlights page.
 * The page has three main sections:
 * 1. Header (navigation bar with logo and links)
 * 2. Ambassador Program section (promotional content)
 * 3. Journey Highlights section (video grid/table)
 * 
 * Layout Flow:
 * - Header stays at top (sticky positioning)
 * - Ambassador section below header with horizontal layout
 * - Highlights table/cards below Ambassador section
 * - "Get a LOOKOUT" button floats at bottom-right
 */

/* ===== GLOBAL STYLES ===== */
body {
  margin: 0; /* Remove default browser margins */
  font-family: 'Open Sans'; /* Open Sans font only */
  background: #161619; /* Dark background color for entire page */
  color: #FFFFFF; /* White text for high contrast */
  min-height: 100vh; /* Ensure page takes full viewport height */
  min-width: 0; /* Allow content to shrink if needed */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
  overflow-x: hidden; /* Keep this - prevents page-level horizontal scroll */
  touch-action: pan-y; /* Keep this - allows only vertical scrolling on mobile */
  -webkit-overflow-scrolling: touch; /* Keep this - smooth scrolling on iOS */
}
/* ===== VIDEO ELEMENT FIXES ===== */
/* Prevent all video elements from interfering with page scrolling */
video, .thumb, .card-preview video, #highlightVideo {
  touch-action: pan-y; /* Allow only vertical scrolling */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
  /* Prevent video from causing horizontal overflow */
  max-width: 100%;
  height: auto;
}

/* Ensure video containers don't cause overflow */
.video-container, .card-preview, .thumbnail-container {
  /* Remove overly restrictive overflow: hidden that might break layouts */
  /* Only prevent actual horizontal overflow, not intentional design elements */
  max-width: 100%;
}

/* ===== HEADER SECTION ===== */
header {
  background: #202020; /* Slightly lighter dark background for header */
  padding: 40px 32px; /* Space inside header: 40px top/bottom, 32px left/right */
  border-bottom: none; /* Remove border line */
  position: sticky; /* Header stays at top when scrolling */
  top: 0; /* Stick to very top of viewport */
  z-index: 100; /* Ensure header appears above other content */
  font-family: 'Open Sans'; /* Open Sans font only */
  display: flex; /* Use flexbox for header layout */
  flex-direction: column; /* Stack header content vertically */
}

/* Header content container - controls layout of logo and navigation */
.header-content {
  display: flex; /* Use flexbox for horizontal layout */
  align-items: center; /* Center items vertically */
  justify-content: flex-start; /* Align items to the left (logo first, then nav) */
  max-width: 1200px; /* Maximum width to prevent stretching on large screens */
  margin: 0; /* Left align the header content */
  gap: 48px; /* Space between logo and navigation links */
}

/* Logo container */
.logo-section {
  display: flex; /* Use flexbox for logo positioning */
  align-items: center; /* Center logo vertically */
}

.logo-section a {
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* LOOKOUT logo image */
.logo-img {
  height: 18px; /* Logo size to match design - slightly larger than nav text */
  width: auto; /* Maintain aspect ratio */
}

/* Navigation links container */
.nav-links {
  display: flex; /* Use flexbox for horizontal link layout */
  align-items: center; /* Center links vertically */
  gap: 32px; /* Space between each navigation link */
}

/* Individual navigation links (Products, Find Installer, etc.) */
.nav-link {
  color: #FFFFFF; /* White text */
  text-decoration: none; /* Remove underline */
  font-size: 0.9rem; /* Slightly smaller than body text */
  font-weight: 600; /* Semibold weight */
  font-family: 'Open Sans'; /* Open Sans font */
  transition: color 0.2s ease; /* Smooth color change on hover */
}

/* Navigation link hover effect */
.nav-link:hover {
  color: #008aff; /* Blue color when hovering */
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none; /* Hidden by default on desktop */
  background: rgba(63, 167, 255, 0.1);
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.mobile-menu-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1); /* Make it white */
}

/* Mobile Navigation Menu */
.mobile-nav {
  display: none; /* Hidden by default */
  flex-direction: column;
  background: #202020;
  border-top: 1px solid #333;
  padding: 16px 32px;
  gap: 16px;
}

.mobile-nav-link {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid #333;
  transition: color 0.2s ease;
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link:hover {
  color: #008aff;
}

/* Mobile Navigation Active State */
.mobile-nav.active {
  display: flex;
}

/* ===== AMBASSADOR PROGRAM SECTION ===== */
/* Main container for the Ambassador Program promotional section */
.ambassador-section {
  padding: 60px 32px; /* Large padding: 60px top/bottom, 32px left/right */
  background: #161619; /* Same dark background as body */
  border-bottom: none; /* Remove full-width border */
  margin-bottom: 40px; /* Space between ambassador section and highlights */
  position: relative; /* For custom horizontal line positioning */
}

/* Separator line above ambassador section */
.ambassador-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%; /* Start from center */
  transform: translateX(-50%); /* Center the line */
  width: calc(100% - 64px); /* Full width minus padding */
  max-width: 1200px; /* Match content max-width */
  height: 1px;
  background: #333; /* Gray line color */
  opacity: 0.6;
}

/* Removed the ::after line that was creating a line below the ambassador section */

/* Content container for Ambassador section - creates horizontal layout */
.ambassador-content {
  max-width: 1200px; /* Maximum width to prevent stretching on large screens */
  margin: 0 auto; /* Center the content horizontally */
  display: flex; /* Use flexbox for horizontal layout (icon+text on left, CTA on right) */
  align-items: center; /* Center items vertically for better balance */
  gap: 80px; /* Larger space between left and right sections */
}

/* Left side of Ambassador section - contains icon, title, and description */
.ambassador-left {
  display: flex; /* Use flexbox for horizontal layout */
  align-items: center; /* Center items vertically */
  gap: 40px; /* Space between icon and text content */
  flex: 1; /* Take up available space (pushes right section to the right) */
}

/* Text container for title and description */
.ambassador-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Container for the Ambassador Program icon */
.ambassador-icon {
  display: flex; /* Use flexbox for icon positioning */
  align-items: center; /* Center icon vertically */
  flex-shrink: 0; /* Don't shrink the icon */
}

/* Ambassador Program icon (LAP.svg) */
.lap-icon {
  width: 160px; /* Larger icon size to match design */
  height: 160px; /* Square aspect ratio */
  filter: brightness(0) invert(1); /* Convert to white color for dark background */
}

/* Text container for title and description - removed since we restructured */

/* Main title for Ambassador Program section */
.ambassador-title {
  font-size: 1.4rem; /* Smaller title to match design */
  font-weight: 600; /* Semibold weight for emphasis */
  font-family: 'Open Sans'; /* Open Sans font */
  color: #FFFFFF; /* White text */
  margin: 0; /* Remove margins */
  line-height: 1.2; /* Comfortable line spacing */
}

/* Description text explaining the Ambassador Program */
.ambassador-description {
  font-size: 1rem; /* Smaller description to match design */
  color: #FFFFFF; /* White text */
  line-height: 1.5; /* Comfortable line spacing */
  margin: 0; /* Remove default margins */
  max-width: 500px; /* Limit width for better readability */
}

/* Right side of Ambassador section - contains call-to-action and button */
.ambassador-right {
  display: flex; /* Use flexbox for vertical layout */
  flex-direction: column; /* Stack items vertically (CTA text above button) */
  gap: 20px; /* More space between CTA text and button */
  align-items: center; /* Center items horizontally */
  flex-shrink: 0; /* Don't shrink this section (keeps button size consistent) */
  position: relative; /* For vertical line positioning */
}

/* Vertical line separator */
.ambassador-right::before {
  content: '';
  position: absolute;
  left: -40px; /* Position to the left of the content */
  top: -20px; /* Extend above the content */
  bottom: -20px; /* Extend below the content */
  width: 1px;
  background: #FFFFFF; /* Same color as text */
}

/* Call-to-action text asking about joining the program */
.ambassador-cta {
  font-size: 1.1rem; /* Smaller CTA text to match design */
  color: #FFFFFF; /* White text */
  font-weight: 600; /* Semi-bold for emphasis */
  margin: 0; /* Remove default margins */
  padding-left: 0; /* Remove left padding since we have a separate vertical line */
  display: flex; /* Use flexbox for vertical centering */
  align-items: center; /* Center text vertically */
  text-align: center; /* Center text horizontally */
  line-height: 1.4; /* Better line spacing for two-line text */
}

/* "LEARN MORE" button styling */
.learn-more-btn {
  background: #FFD700; /* Bright yellow background */
  color: #000000; /* Black text for contrast */
  border: none; /* Remove default button border */
  padding: 16px 32px; /* Comfortable button size */
  border-radius: 8px; /* Rounded corners */
  font-size: 1rem; /* Normal text size */
  font-weight: 600; /* Semibold text */
  font-family: 'Open Sans'; /* Open Sans font */
  cursor: pointer; /* Hand cursor on hover */
  transition: all 0.2s ease; /* Smooth animation for all changes */
  text-transform: uppercase; /* All caps text */
  letter-spacing: 0.5px; /* Slightly spaced letters */
  text-decoration: none; /* Remove underline from link */
  display: inline-block; /* Make link behave like button */
}

/* Button hover effect - lifts up and glows */
.learn-more-btn:hover {
  background: #FFED4E; /* Lighter yellow on hover */
  transform: translateY(-2px); /* Move button up 2 pixels */
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3); /* Yellow glow effect */
}

/* Description below header */
.feed-description {
  font-size: 0.95rem;
  color: #dedede;
  margin: 8px 0 24px 0;
  line-height: 1.5;
  text-align: center;
}
.logo {
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 2px;
  color: #fff;
  margin-right: 32px;
  font-family: 'Open Sans';
}
/* Removed duplicate logo-img rule - using the one above */
header h1 {
  font-size: 2rem;
  font-weight: 400;
  margin: 0;
  color: #FFFFFF;
  flex: 1;
  min-width: 0;
}

.header-controls {
  display: none;
}

.refresh-status {
  display: none;
}

.refresh-btn {
  background: #3fa7ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Open Sans';
  white-space: nowrap;
}

.refresh-btn:hover {
  background: #2196f3;
  transform: translateY(-1px);
}

.refresh-btn:active {
  transform: translateY(0);
}

.refresh-btn:disabled {
  background: #555;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

.office-display-link {
  background: #4CAF50;
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Open Sans';
  white-space: nowrap;
}

.office-display-link:hover {
  background: #45a049;
  transform: translateY(-1px);
}

.office-display-link:active {
  transform: translateY(0);
}

.refresh-btn span:first-child {
  animation: none;
}

.refresh-btn.refreshing span:first-child {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== HIGHLIGHTS HEADER ===== */
.highlights-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.highlights-logo {
  flex-shrink: 0;
  height: 96px; /* 4x the original 24px (2x bigger than current 48px) */
}

/* ===== HIGHLIGHTS TITLE ===== */
.highlights-title {
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  text-align: left;
  line-height: 1.2;
}

/* ===== CARD VIEW (NOW USED FOR ALL SCREEN SIZES) ===== */
.table-view {
  display: none; /* Hide table view completely */
}

.cards-view {
  display: block; /* Show card view for all screen sizes */
}

main {
  padding: 32px 20px;
  min-height: calc(100vh - 120px);
}

/* ===== MAIN CONTAINER FIXES ===== */
/* Ensure main content doesn't cause horizontal overflow */
main {
  /* Remove overly aggressive overflow-x: hidden that breaks card layouts */
  max-width: 100vw; /* Keep this to prevent viewport overflow */
  touch-action: pan-y; /* Allow only vertical scrolling */
}

/* ===== CARD GRID LAYOUT ===== */
/* Grid layout for video highlight cards - 3 columns on desktop, 1 on mobile */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop (as shown in design) */
  gap: 24px; /* Space between cards */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.highlight-card {
  background: #2d2d30; /* Card background color */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
  cursor: pointer;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.highlight-card:hover {
  background: #4d4d4f; /* Hover background color */
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border-color: #3fa7ff;
}

.card-thumbnail-container {
  position: relative;
  width: 100%;
  height: 200px;
  background: #1a1c1e;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  flex-shrink: 0;
}

.card-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1a1c1e;
}

.lookout-overlay {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 700;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.play-icon {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.card-content {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 1.4rem; /* Bigger font size for customer name (originalVessel) */
  font-weight: 400; /* Regular weight (not bold) */
  font-family: 'Open Sans'; /* Open Sans font */
  color: #FFFFFF;
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-vessel {
  font-size: 1rem; /* Boat type (vessel) */
  color: #b0b0b0;
  margin: 0 0 8px 0;
  line-height: 1.4;
  font-weight: 400;
}

.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 auto 0;
  font-size: 0.85rem; /* Smaller font for location and date */
  color: #b0b0b0;
}

.card-location {
  font-size: 0.85rem; /* Smaller font for location */
  color: #b0b0b0;
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

.card-date {
  font-size: 0.85rem; /* Smaller font for date */
  color: #b0b0b0;
  margin: 0;
  line-height: 1.4;
  text-align: right;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 auto 0;
  font-size: 0.85rem; /* Smaller font for location and date */
  color: #b0b0b0;
}

.card-meta-label {
  color: #FFFFFF;
  font-weight: 500;
  min-width: 60px;
}

.card-meta-value {
  color: #FFFFFF;
  text-align: left;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-share-section {
  background: #313100;
  color: #FFFFFF;
  padding: 16px;
  margin: 24px -24px -24px -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0 0 12px 12px;
}

.card-visibility-section {
  background: #313100;
  color: #FFFFFF;
  padding: 16px;
  margin: 24px -24px -24px -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0 0 12px 12px;
}

.card-share-section:hover {
  background: #ffd500;
  color: #000000;
}

.card-visibility-section:hover {
  background: #ffd500;
  color: #000000;
}

.share-text {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.share-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.card-share-section:hover .share-icon {
  filter: brightness(0) invert(0);
}

.card-visibility-section:hover .visibility-icon {
  filter: brightness(0) invert(0);
}

.card-share-btn:hover {
  background: #ffd500; /* Yellow background on hover */
  color: #000000; /* Black text on yellow background */
  transform: translateY(-1px); /* Slight lift effect */
  box-shadow: 0 2px 8px rgba(255, 213, 0, 0.3); /* Yellow glow */
}
/* ===== JOURNEY HIGHLIGHTS SECTION ===== */
/* Main container for the video highlights table/cards */
.highlights-container {
  width: 100%; /* Take full width */
  max-width: 1200px; /* Maximum width to prevent stretching on large screens */
  margin: 0 auto; /* Center the container horizontally */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  padding: 40px 32px 32px 32px; /* Space around content: 40px top, 32px sides/bottom */
  box-sizing: border-box; /* Include padding in width calculation */
}
/* Main table for displaying video highlights (desktop view) */
.highlight-feed {
  width: 100%; /* Take full width of container */
  border-collapse: collapse; /* Remove gaps between table cells */
  background: #232427; /* Dark background for table */
  box-shadow: 0 2px 16px rgba(0,0,0,0.2); /* Subtle shadow for depth */
  border-radius: 12px; /* Rounded corners */
  overflow: hidden; /* Hide content that extends beyond rounded corners */
  table-layout: fixed; /* Fixed column widths for consistent layout */
}
.highlight-feed th, .highlight-feed td {
  padding: 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #333;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
}
.highlight-feed th {
  background: #18191b;
  color: #b0b0b0;
  font-weight: 500;
  font-size: 1.1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.highlight-feed tr:last-child td {
  border-bottom: none;
}
.highlight-row {
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, border 0.2s;
  border-radius: 16px;
  box-shadow: 0 0 0 0px #3fa7ff inset;
}
.highlight-row:hover {
  background: #232f3e;
  box-shadow: 0 0 0 2px #3fa7ff inset;
  border-radius: 16px;
}

.highlight-row:focus {
  outline: none;
}

.highlight-row:active {
  background: #1a1a1a;
  box-shadow: 0 0 0 1px #3fa7ff inset;
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
/* Column widths */
.highlight-feed th:nth-child(1), .highlight-feed td:nth-child(1) { width: 25%; } /* Preview - reduced slightly */
.highlight-feed th:nth-child(2), .highlight-feed td:nth-child(2) { width: 18%; } /* Date - increased */
.highlight-feed th:nth-child(3), .highlight-feed td:nth-child(3) { width: 25%; } /* Location - increased */
.highlight-feed th:nth-child(4), .highlight-feed td:nth-child(4) { width: 22%; } /* Vessel - increased */
.highlight-feed th:nth-child(5), .highlight-feed td:nth-child(5) { width: 10%; } /* Length & Share - reduced */

/* Text wrapping classes for better text display */
.highlight-feed td.text-short,
.highlight-feed td.text-medium,
.highlight-feed td.text-long {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
  overflow: visible;
  /* Remove max-width constraint and ellipsis to show full text */
}

.highlight-feed td.text-long {
  font-size: 0.95em; /* Slightly smaller for very long text */
}
.thumb {
  width: 300px;
  height: 169px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
  background: #111;
  border: 2px solid #222;
  display: block;
  margin: 0 auto;
  transition: transform 0.2s;
}
.thumb:hover {
  transform: scale(1.02);
}
.share-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #232427;
  color: #fff;
  border: 2px solid #444e5a;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  outline: none;
  white-space: nowrap;
}
.share-btn:hover, .share-btn:focus {
  background: #232427;
  color: #3fa7ff;
  border: 2px solid #3fa7ff;
}
.share-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('./share.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.2s;
}
.share-btn:hover .share-icon, .share-btn:focus .share-icon {
  opacity: 0.7;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(20, 20, 22, 0.95);
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Ensure modal doesn't interfere with body scroll restoration */
  overscroll-behavior: contain;
}
.modal.open {
  display: flex;
}
/* Modal header styling moved to consolidated section above */

/* Modal title styling moved to consolidated section below */
.video-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.video-controls label {
  color: #b0b0b0;
  font-size: 14px;
}
/* Base speed-select styles (used by modal-controls) */
.speed-select {
  padding: 6px 10px;
  color: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.speed-select:focus {
  outline: 2px solid #3fa7ff;
}

/* Modal Controls Styling - Bottom of modal */
.modal-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0 0 0;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.modal-controls label {
  color: #b0b0b0;
  font-size: 14px;
  font-weight: 500;
  margin-right: 6px;
  white-space: nowrap;
}

.modal-controls .speed-select,
.modal-controls .quality-select {
  border: 1.5px solid #404040;
  background: #18191b;
  color: #f5f5f5;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.95rem;
  min-width: 80px;
  transition: border-color 0.2s, background 0.2s;
}

.modal-controls .speed-select:hover,
.modal-controls .quality-select:hover {
  border-color: #555;
  background: #1f2022;
}

.modal-controls .speed-select:focus,
.modal-controls .quality-select:focus {
  outline: none;
  border-color: #3fa7ff;
  background: #1f2022;
}

.modal-controls .share-btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid rgba(63, 167, 255, 0.3);
  background: rgba(63, 167, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: auto;
}

.modal-controls .share-btn-icon:hover {
  background: rgba(63, 167, 255, 0.2);
  border-color: #3fa7ff;
  transform: translateY(-1px);
}

.modal-controls .share-btn-icon:active {
  transform: translateY(0);
}

.modal-controls .share-btn-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

.share-icon-img {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  opacity: 1;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

/* Get LOOKOUT Button */
.get-lookout-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 3000;
  background: #008aff;
  color: #fff;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 14px 28px;
  border-radius: 32px;
  box-shadow: 0 4px 24px rgba(0, 138, 255, 0.3);
  text-decoration: none;
  transition: background 0.18s, box-shadow 0.18s, color 0.18s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.get-lookout-btn:hover, .get-lookout-btn:focus {
  background: #0070cc;
  color: #fff;
  box-shadow: 0 6px 32px rgba(0, 138, 255, 0.4);
  outline: none;
}
@media (max-width: 600px) {
  .get-lookout-btn {
    right: 10px;
    bottom: 10px;
    padding: 10px 18px;
    font-size: 1rem;
  }
  
  /* Mobile Header */
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .nav-links {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .nav-link {
    font-size: 0.8rem;
  }
  
  /* Mobile Ambassador Section */
  .ambassador-section {
    padding: 40px 20px;
  }
  
  .ambassador-content {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }
  
  .ambassador-left {
    flex-direction: column;
    align-items: center;
  }
  
  .ambassador-title {
    font-size: 2rem;
  }
  
  .ambassador-description {
    font-size: 0.95rem;
  }
  
  .ambassador-right {
    align-items: center;
  }
  
  .ambassador-cta {
    font-size: 1rem;
    text-align: center;
  }
  
  .learn-more-btn {
    padding: 14px 28px;
    font-size: 0.9rem;
  }
}
.close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 2rem;
  color: #fff;
  background: rgba(44, 51, 61, 0.85);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  border: none;
  padding: 0;
}
.close:hover, .close:focus {
  color: #3fa7ff;
  background: rgba(44, 51, 61, 0.98);
  outline: 2px solid #3fa7ff;
}
.modal-content {
  position: relative;
  background: #161619;
  border-radius: 12px;
  padding: 20px 32px 16px 32px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.4);
  max-width: 90vw;
  max-height: 90vh;
  margin: 5vh auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: modalFadeIn 0.25s cubic-bezier(.4,0,.2,1);
}

.modal-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 12px 0;
  margin-bottom: 0;
}
#highlightVideo {
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  background: #111;
  margin-top: 8px;
}

#modalDescription {
  margin-top: 18px;
  color: #b0b0b0;
  font-size: 1.1rem;
  text-align: center;
}

.modal-title, #modalTitle {
  font-weight: bold;
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 12px 0;
  text-align: left;
  letter-spacing: 0.01em;
}


@media (max-width: 600px) {
  .modal-content {
    padding: 16px;
    max-width: 90%;
    max-height: 90%;
    margin: 5% auto;
    border-radius: 8px;
  }
  
  #highlightVideo {
    max-height: 60vh;
    border-radius: 8px;
  }
  
  .modal-controls {
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 0 0;
    padding: 10px 0;
  }
  
  .modal-controls .speed-select,
  .modal-controls .quality-select {
    font-size: 0.9rem;
    padding: 8px 10px;
    min-width: 70px;
  }
  
  .modal-controls label {
    font-size: 13px;
    margin-right: 4px;
  }
  
  .close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    backdrop-filter: blur(10px);
  }
  
  .close:hover, .close:focus {
    background: rgba(0, 0, 0, 0.9);
    border-color: #3fa7ff;
    transform: scale(1.05);
  }
}
/* Loading Spinner */
.loading-spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(35, 36, 39, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #333;
  border-top: 4px solid #3fa7ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Enhanced Loading Progress */
.loading-progress {
  margin-top: 20px;
  width: 300px;
  max-width: 90vw;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3fa7ff, #00d4ff);
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s ease;
}

.loading-status {
  font-size: 14px;
  color: #aaa;
  text-align: center;
  margin: 0;
  min-height: 20px;
}

#loadingText {
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Responsive Design */
@media (max-width: 1000px) {
  .highlights-container {
    max-width: 98vw;
  }
  .thumb {
    width: 220px;
    height: 124px;
  }
}
@media (max-width: 768px) {
  /* Switch to mobile cards view */
  .table-view {
    display: none;
  }
  
  .cards-view {
    display: block;
  }
  
  main {
    padding: 16px 12px;
  }
  
  .highlights-container {
    padding: 0 12px 24px 12px;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 4px; /* Add small padding for mobile */
  }
  
  /* Mobile card improvements */
  .highlight-card {
    margin: 0; /* Remove any margins */
    border-radius: 12px; /* Consistent border radius */
  }
  
  .card-thumbnail-container {
    height: 180px; /* Slightly smaller thumbnail for mobile */
  }
  
  .card-content {
    padding: 20px; /* Slightly reduced padding for mobile */
  }
  
  .card-title {
    font-size: 1.3rem; /* Same font size as desktop for boat type */
    font-weight: 400; /* Regular weight (not bold) */
    font-family: 'Open Sans'; /* Open Sans font */
  }
  
  .card-location,
  .card-date {
    font-size: 0.95rem; /* Slightly smaller text for mobile */
  }
  
  .card-share-section {
    padding: 18px 14px 24px 14px; /* More bottom padding for medium screens */
    margin: 24px -24px -24px -24px !important; /* Override base margin, flush with card bottom */
  }

  .card-visibility-section {
    padding: 18px 14px 24px 14px; /* More bottom padding for medium screens */
    margin: 24px -24px -24px -24px !important; /* Override base margin, flush with card bottom */
  }
  
  .share-text {
    font-size: 0.85rem; /* Smaller share text for mobile */
  }
  
  .share-icon {
    width: 18px; /* Slightly smaller icon for mobile */
    height: 18px;
  }
  
  /* Fallback table styles for very small screens if cards fail */
  .highlight-feed {
    font-size: 13px;
    overflow-x: hidden; /* Prevent horizontal scrolling on mobile */
    display: block;
    width: 100%; /* Use 100% instead of 100vw to prevent overflow */
    min-width: auto; /* Remove fixed min-width that causes overflow */
  }
  .highlight-feed th, .highlight-feed td {
    padding: 10px 6px;
  }
  .thumb {
    width: 160px;
    height: 90px;
  }
  .share-btn {
    padding: 10px 12px;
    font-size: 1rem;
    min-width: 48px;
    min-height: 36px;
  }
  .highlight-feed th:nth-child(2), .highlight-feed td:nth-child(2),
  .highlight-feed th:nth-child(3), .highlight-feed td:nth-child(3),
  .highlight-feed th:nth-child(4), .highlight-feed td:nth-child(4) {
    display: none;
  }
  .highlight-feed th:nth-child(1), .highlight-feed td:nth-child(1) { width: 70%; }
  .highlight-feed th:nth-child(5), .highlight-feed td:nth-child(5) { width: 30%; }
  header {
    padding: 20px 20px 12px 20px;
  }
  header h1 {
    font-size: 1.4rem;
  }
  /* Removed duplicate logo-img rule - using the main one above */
  .sort-filter-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%; /* Use 100% instead of 100vw to prevent overflow */
    max-width: 100%; /* Use 100% instead of 100vw to prevent overflow */
    border-radius: 0;
    margin: 0 0 10px 0;
    padding: 8px 8px 8px 16px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.10);
    background: #232f3e;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1rem;
    color: #3fa7ff;
    border-bottom: 2px solid #3fa7ff;
  }
  .sort-filter-bar label {
    font-size: 1rem;
    color: #3fa7ff;
    margin-right: 6px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .sort-filter-bar select {
    font-size: 1rem;
    padding: 6px 8px;
    margin-right: 6px;
    border-radius: 6px;
    border: 1.5px solid #3fa7ff;
    background: #232427;
    color: #3fa7ff;
    font-weight: 500;
    outline: none;
    transition: border 0.2s;
  }
  .sort-filter-bar select:focus {
    border: 2px solid #3fa7ff;
  }
  .card-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #232427;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    margin: 16px 0;
    padding: 14px 10px;
    width: 100%;
    max-width: 98vw;
    box-sizing: border-box;
    min-height: 110px;
    border: 1.5px solid #232f3e;
  }
  .card-preview {
    width: 150px;
    min-width: 100px;
    max-width: 180px;
    height: auto;
    border-radius: 10px;
    margin-right: 18px;
    background: #111;
    border: 2px solid #222;
    box-shadow: 0 1px 8px rgba(0,0,0,0.18);
    display: block;
    object-fit: cover;
  }
  .card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 0.95rem;
    color: #b0b0b0;
    font-weight: 400;
    justify-content: center;
  }
  .card-info .card-date,
  .card-info .card-location,
  .card-info .card-length {
    font-size: 0.95rem;
    color: #b0b0b0;
    margin-bottom: 0;
    word-break: break-word;
  }
  .card-info .share-btn {
    margin-top: 12px;
    font-size: 1.08rem;
    min-height: 44px;
    border-radius: 8px;
    width: 100%;
    max-width: 180px;
    align-self: flex-start;
    background: #3fa7ff;
    color: #fff;
    border: none;
    font-weight: 600;
    box-shadow: 0 1px 6px rgba(0,0,0,0.10);
    transition: background 0.2s, color 0.2s;
  }
  .card-info .share-btn:hover, .card-info .share-btn:focus {
    background: #232f3e;
    color: #3fa7ff;
    outline: 2px solid #3fa7ff;
  }
}
@media (max-width: 600px) {
  .highlights-container {
    max-width: 100vw;
    padding: 0 2px;
    box-sizing: border-box;
  }
  .highlight-feed {
    display: none;
  }
  .highlight-card {
    background: #232427;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    margin: 18px 0;
    padding: 16px 12px 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 98vw;
    box-sizing: border-box;
  }
  .highlight-card .thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 12px;
    box-sizing: border-box;
  }
  .highlight-card .highlight-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
  }
  .highlight-card .highlight-date {
    color: #b0b0b0;
    font-size: 1rem;
    margin-bottom: 2px;
  }
  .highlight-card .highlight-location {
    color: #b0b0b0;
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  .highlight-card .highlight-length {
    color: #b0b0b0;
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  .highlight-card .share-btn {
    width: 100%;
    padding: 14px 0;
    font-size: 1.1rem;
    min-height: 44px;
    margin-top: 8px;
    border-radius: 8px;
  }
  .highlight-card .share-btn .share-icon {
    margin-right: 8px;
  }
  .sort-filter-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    margin: 0 0 10px 0;
    padding: 10px 4px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.10);
    background: #232f3e;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sort-filter-bar label {
    font-size: 0.98rem;
  }
  .sort-filter-bar select, .sort-filter-bar input[type="text"] {
    font-size: 0.98rem;
    padding: 6px 8px;
    margin-right: 6px;
  }
  .highlight-card {
    border: 1.5px solid #2a2d32;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    margin: 14px 0;
    padding: 12px 6px 14px 6px;
    border-radius: 12px;
    background: #232427;
  }
  .highlight-card .highlight-info {
    background: #232f3e;
    border-radius: 8px;
    padding: 8px 6px;
    margin-bottom: 8px; margin-top: 8px; /* Space from close button */
    gap: 4px;
  }
  .highlight-card .highlight-date,
  .highlight-card .highlight-location,
  .highlight-card .highlight-length {
    font-size: 1rem;
    color: #b0b0b0;
    margin-bottom: 0;
  }
  .highlight-card .share-btn {
    margin-top: 8px;
    font-size: 1.08rem;
    min-height: 42px;
    border-radius: 8px;
  }
}
@media (max-width: 400px) {
  .highlights-container {
    padding: 0 1px;
  }
  .highlight-card {
    padding: 8px 2px 10px 2px;
    margin: 10px 0;
    max-width: 100vw;
  }
  .highlight-card .thumb {
    border-radius: 8px;
    margin-bottom: 8px; margin-top: 8px; /* Space from close button */
  }
  .highlight-card .highlight-info {
    gap: 3px;
    margin-bottom: 6px;
  }
  .highlight-card .highlight-date,
  .highlight-card .highlight-location,
  .highlight-card .highlight-length {
    font-size: 0.92rem;
  }
  .highlight-card .share-btn {
    font-size: 0.98rem;
    min-height: 38px;
    padding: 10px 0;
    margin-top: 5px;
  }
}
@media (max-width: 480px) {
  .thumb {
    width: 90px;
    height: 51px;
  }
  .highlight-feed th, .highlight-feed td {
    padding: 4px 1px;
  }
  .share-btn {
    padding: 6px 6px;
    font-size: 0.8rem;
    min-width: 48px;
    min-height: 28px;
  }
  
  /* Extra small screen modal fixes */
  .modal-content {
    padding: 12px;
    max-width: 88vw;
    margin: 6% auto;
  }
  
  #highlightVideo {
    max-height: 50vh;
    border-radius: 6px;
  }
  
  .modal-controls {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .modal-controls .speed-select,
  .modal-controls .quality-select {
    font-size: 0.85rem;
    padding: 6px 8px;
  }
  
  .close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }
}

/* Very small screens - make selectors narrower */
@media (max-width: 400px) {
  .modal-controls {
    gap: 8px;
    margin: 10px 0 0 0;
    padding: 8px 0;
  }
  
  .modal-controls .speed-select,
  .modal-controls .quality-select {
    font-size: 0.8rem;
    padding: 6px 8px;
    min-width: 60px;
    max-width: 80px;
  }
  
  .modal-controls label {
    font-size: 12px;
    margin-right: 3px;
  }
  
  .modal-controls .share-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
  }
  
  .modal-controls .share-btn-icon img {
    width: 16px;
    height: 16px;
  }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
  .modal-content {
    animation: none;
  }
  .highlight-row {
  transition: background 0.2s ease, box-shadow 0.2s ease;
  }
  .thumb {
    transition: none;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .highlight-feed {
    border: 2px solid #fff;
  }
  .highlight-row:hover {
  background: #232f3e;
  }
}
/* Print styles */
@media print {
  .modal,
  .loading-spinner,
  .share-btn {
    display: none !important;
  }
  .highlight-feed {
    box-shadow: none;
    border: 1px solid #000;
  }
}
.map-thumb {
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  background: #18191b;
  border: 1.5px solid #2d2e32;
  display: block;
  margin: 0 auto;
}
.sort-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #232f3e;
  padding: 14px 18px;
  border-radius: 12px;
  margin: 18px auto 18px auto;
  max-width: 800px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.10);
}
.sort-filter-bar label {
  color: #b0b0b0;
  font-size: 1rem;
  margin-right: 6px;
}
.sort-filter-bar select, .sort-filter-bar input[type="text"] {
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid #444e5a;
  background: #232427;
  color: #f5f5f5;
  font-size: 1rem;
  margin-right: 10px;
}
.sort-filter-bar select:focus, .sort-filter-bar input[type="text"]:focus {
  outline: 2px solid #3fa7ff;
}
@media (max-width: 700px) {
  /* Mobile Ambassador Section */
  .ambassador-section {
    padding: 40px 20px; /* Reduced padding for mobile */
  }
  
  .ambassador-content {
    flex-direction: column; /* Stack vertically on mobile */
    gap: 32px; /* Reduced gap */
    text-align: left; /* Left align content by default */
    align-items: flex-start !important; /* Force left alignment of entire content */
  }
  
  .ambassador-left {
    flex-direction: column; /* Stack icon and text vertically */
    gap: 24px; /* Reduced gap */
    align-items: center; /* Center align icon and title only */
  }
  
  .lap-icon {
    width: 120px; /* Smaller icon for mobile */
    height: 120px;
  }
  
  .ambassador-title {
    font-size: 1.3rem; /* Smaller title for mobile */
    font-weight: 600; /* Semibold weight */
    font-family: 'Open Sans'; /* Open Sans font */
    text-align: center; /* Center the title */
  }
  
  .ambassador-text {
    text-align: left; /* Left align description */
  }
  
  .ambassador-description {
    font-size: 0.9rem; /* Smaller description for mobile */
    max-width: 100%; /* Full width on mobile */
    text-align: left; /* Left align description */
  }
  
  .ambassador-right {
    gap: 16px; /* Reduced gap */
    align-items: flex-start !important; /* Force left align CTA and button */
  }
  
  .ambassador-cta {
    font-size: 0.95rem; /* Smaller CTA text for mobile */
    text-align: left !important; /* Force left align the CTA text */
    align-items: flex-start !important; /* Force left align */
  }
  
  .learn-more-btn {
    padding: 12px 24px; /* Smaller button for mobile */
    font-size: 0.9rem;
    font-weight: 600; /* Semibold weight */
    font-family: 'Open Sans'; /* Open Sans font */
    align-self: flex-start; /* Left align the button */
  }
  
  /* Remove vertical line on mobile */
  .ambassador-right::before {
    display: none;
  }
  
  /* Adjust horizontal line for mobile */
  .ambassador-section::before {
    width: calc(100% - 40px); /* Account for mobile padding */
  }
  
  .sort-filter-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    margin: 0 0 10px 0;
    padding: 10px 4px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.10);
    background: #232f3e;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sort-filter-bar label {
    font-size: 0.98rem;
  }
  .sort-filter-bar select {
    font-size: 0.98rem;
    padding: 6px 8px;
    margin-right: 6px;
  }
  .sort-filter-bar input[type="text"] {
    display: none;
  }
  .card-row {
    display: flex;
    align-items: center;
    background: #232427;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    margin: 14px 0;
    padding: 10px 6px;
    width: 100%;
    max-width: 98vw;
    box-sizing: border-box;
    min-height: 110px;
  }
  .card-row .thumb {
    width: 110px;
    height: 62px;
    max-width: 30vw;
    min-width: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-left: 12px;
    background: #111;
    border: 2px solid #222;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    display: block;
  }
  .card-row .card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .card-row .card-date,
  .card-row .card-location,
  .card-row .card-length {
    color: #b0b0b0;
    font-size: 0.98rem;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-row .share-btn {
    margin-top: 8px;
    font-size: 1.05rem;
    min-height: 38px;
    border-radius: 8px;
    width: 100%;
    max-width: 180px;
    align-self: flex-start;
  }
}
@media (min-width: 769px) {
  .highlight-feed .share-btn {
    background: rgba(63, 167, 255, 0.1);
    border: none;
    color: #3fa7ff;
    font-size: 1.1rem;
    padding: 4px 8px;
    margin-left: 8px;
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.2s, color 0.2s;
    outline: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
  }
  .highlight-feed .share-btn:hover, .highlight-feed .share-btn:focus {
    background: #232f3e;
    color: #fff;
  }
  .highlight-feed .share-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 0;
    background-image: url('./share.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .highlight-feed .share-btn span:not(.share-icon) {
    display: none;
  }
}
@media (max-width: 400px) {
  .card-row {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 8px 2px;
  }
  .card-row .thumb {
    margin: 0 auto 8px auto;
    width: 90vw;
    max-width: 100%;
    height: auto;
  }
  .card-row .card-info {
    margin-left: 0;
    align-items: stretch;
    gap: 6px;
  }
  .card-row .share-btn {
    width: 100%;
    min-width: 0;
    margin-top: 10px;
    font-size: 1.1rem;
    min-height: 44px;
  }
}
@media (max-width: 500px) {
  .card-row {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 10px 4px 14px 4px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    margin: 12px 0;
  }
  .card-preview {
    width: 100px;
    max-width: 100vw;
    margin: 0 auto 10px auto;
    display: block;
  }
  .card-info {
    margin-left: 0;
    align-items: stretch;
    gap: 8px;
    font-size: 0.92rem;
  }
  .card-info .share-btn {
    width: 100%;
    min-width: 0;
    margin-top: 10px;
    font-size: 1.1rem;
    min-height: 44px;
  }
}
@media (min-width: 501px) and (max-width: 768px) {
  .card-row {
    flex-direction: row;
    align-items: center;
    min-height: 110px;
    padding: 10px 6px;
    box-sizing: border-box;
    width: 100%;
    max-width: 98vw;
    margin: 14px 0;
    background: #232427;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    flex-wrap: wrap;
  }
  .card-row .thumb {
    width: 110px;
    height: 62px;
    max-width: 30vw;
    min-width: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-left: 12px;
    background: #111;
    border: 2px solid #222;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    display: block;
  }
  .card-row .card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 1rem;
  }
  .card-row .card-date,
  .card-row .card-location,
  .card-row .card-length {
    color: #b0b0b0;
    font-size: 0.98rem;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-row .share-btn {
    margin-top: 8px;
    font-size: 1.05rem;
    min-height: 44px;
    border-radius: 8px;
    width: 100%;
    max-width: 180px;
    align-self: flex-start;
  }
}
.card-large {
  width: 160px !important;
  max-width: 100%;
  height: auto !important;
  display: block;
  border-radius: 10px;
  margin-bottom: 0;
}
.card-info-small {
  font-size: 0.92rem !important;
  color: #b0b0b0 !important;
  font-weight: 400;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.card-info-small .card-date,
.card-info-small .card-location,
.card-info-small .card-length {
  font-size: 0.92rem !important;
  color: #b0b0b0 !important;
  margin-bottom: 0;
}
.card-info-small .share-btn {
  margin-top: 10px;
  font-size: 1.08rem;
  min-height: 44px;
  border-radius: 8px;
    width: 100%;
  max-width: 180px;
  align-self: flex-start;
}
@media (max-width: 500px) {
  .card-large {
    width: 100% !important;
    max-width: 100vw;
    margin-bottom: 10px;
  }
  .card-info-small {
    margin-left: 0;
    align-items: stretch;
    gap: 8px;
  }
} 

/* Mobile responsive styles */
@media (max-width: 768px) {
  /* Mobile Header Navigation */
  .nav-links {
    display: none; /* Hide desktop navigation */
  }
  
  .mobile-menu-btn {
    display: block; /* Show mobile menu button */
  }
  
  .header-content {
    justify-content: space-between !important; /* Force logo on left, menu button on right */
    gap: 0 !important;
    width: 100% !important; /* Ensure full width */
    align-items: center !important; /* Center items vertically */
    display: flex !important; /* Force flex layout */
    flex-direction: row !important; /* Force horizontal layout */
    flex-wrap: nowrap !important; /* Prevent wrapping */
  }
  
  header {
    padding: 16px 20px 12px 20px;
    display: flex !important; /* Force flex layout */
    flex-direction: column !important; /* Stack header content vertically */
  }
  
  .logo {
    font-size: 1.5rem;
    margin-right: 0;
  }
  
  header h1 {
    font-size: 1.3rem;
  margin: 0;
  }
  
  .header-controls {
    margin-left: 0;
  width: 100%;
    justify-content: space-between;
  }
  
  .refresh-status {
    display: none; /* Hide on mobile */
  }
  
  .refresh-btn,
  .office-display-link {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  main {
    padding: 20px 16px;
  }
  
  .highlights-title {
    font-size: 1.5rem; /* Smaller on mobile devices */
    margin: 0 0 24px 0;
  }
  
  .cards-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
  gap: 16px;
  }
  
  .highlight-card {
    max-width: 100%;
  }
  
  .card-content {
    padding: 12px;
  }
  
  /* Removed conflicting card-title rule - using the one below with 1.4rem */
  
  .card-meta-row {
    font-size: 0.85rem;
  }
  
  .card-share-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  header {
    padding: 16px 20px 12px 20px; /* Consistent padding with larger mobile */
  }
  
  /* More bottom padding for share section on very small screens */
  .card-share-section {
    padding: 18px 14px 18px 14px; /* Even more bottom padding for very small screens */
  }

  /* More bottom padding for share section on very small screens */
  .card-visibility-section {
    padding: 18px 14px 18px 14px; /* Even more bottom padding for very small screens */
  }
  
  .header-content {
    justify-content: space-between !important; /* Force logo and menu stay on same line */
    flex-wrap: nowrap !important; /* Force no wrapping */
    min-width: 0; /* Allow content to shrink if needed */
  }
  
  .logo-section {
    flex-shrink: 1; /* Allow logo to shrink if needed */
    min-width: 0; /* Allow logo to shrink */
  }
  
  .logo-img {
    height: 14px; /* Even smaller logo for very small screens */
    max-width: 100%; /* Ensure logo doesn't overflow */
  }
  
  .mobile-menu-btn {
    flex-shrink: 0 !important; /* Force menu button to never shrink */
    min-width: 48px; /* Ensure minimum width for touch target */
  }
  
  .logo {
    font-size: 1.3rem;
  }
  
  header h1 {
    font-size: 1.1rem;
  }
  
  .header-controls {
    gap: 8px;
  }
  
  .refresh-btn,
  .office-display-link {
    padding: 5px 10px;
    font-size: 0.75rem;
  }
  
  main {
    padding: 16px 12px;
  }
  
  .cards-grid {
    gap: 12px;
  }
  
  .card-content {
    padding: 10px;
  }

  
.card-meta-row {
    font-size: 0.8rem;
  }
  
  .card-share-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

/*
 * ===== LAYOUT SUMMARY =====
 * 
 * This page uses a responsive design with three main sections:
 * 
 * 1. HEADER (Sticky at top):
 *    - LOOKOUT logo (12px height) on the left
 *    - Navigation links (Products, Find Installer, etc.) to the right of logo
 *    - Dark background (#202020) with white text
 *    - Stays at top when scrolling (position: sticky)
 * 
 * 2. AMBASSADOR PROGRAM SECTION (Horizontal layout):
 *    - Icon + Title + Description on the left side
 *    - Call-to-action + "LEARN MORE" button on the right side
 *    - Thin white line separates left and right content
 *    - Horizontal line at bottom separates from highlights below
 *    - Dark background (#161619) matching body
 * 
 * 3. JOURNEY HIGHLIGHTS SECTION (Table/Cards):
 *    - Desktop: Table view with video thumbnails, dates, locations, vessels
 *    - Mobile: Card view with stacked video cards
 *    - Table has dark background (#232427) with rounded corners
 *    - Each row is clickable to open video modal
 * 
 * RESPONSIVE BEHAVIOR:
 * - Header: Stacks vertically on mobile (logo above navigation)
 * - Ambassador section: Stacks vertically on mobile (left content above right)
 * - Highlights: Switches from table to cards on mobile
 * - "Get a LOOKOUT" button: Floats at bottom-right on all screen sizes
 * 
 * KEY COLORS:
 * - Background: #161619 (very dark gray)
 * - Header: #202020 (slightly lighter dark gray)
 * - Table: #232427 (medium dark gray)
 * - Text: #FFFFFF (white)
 * - Button: #FFD700 (bright yellow)
 * - Accent: #008aff (blue for hover effects)
 */ 

/* ===== MOBILE SCROLLING FIXES ===== */
@media (max-width: 768px) {
  /* Ensure proper mobile scrolling - only fix viewport issues */
  html, body {
    /* Remove overly aggressive overflow-x: hidden that breaks layouts */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Remove universal max-width rule that breaks intentional layouts */
  /* Only fix specific elements that cause horizontal scroll */
  
  /* Ensure cards don't overflow viewport but maintain their intended widths */
  /* Removed empty ruleset - cards maintain their intended widths */
  
  /* Fix only the highlights container viewport overflow */
  .highlights-container {
    max-width: 100%; /* Only prevent viewport overflow */
    padding: 0 12px 24px 12px;
  }
} 
/* ===== YOUTUBE-STYLE HOVER PREVIEW ===== */
.card-preview-video {
  position: absolute;
  top: 0;
  left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  border-radius: 12px 12px 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Removed hover effects that hide thumbnail - keeping preview visible */

.card-thumbnail {
  transition: opacity 0.3s ease;
}