/* New Top Header Styles */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--panel);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  height: 120px; /* Increased from 70px to accommodate larger logo */
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.logo-section {
  display: flex;
  align-items: center;
}

.logo {
  height: 100px; /* Increased from 40px as requested */
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.auth-section {
  display: flex;
  gap: 12px;
  align-items: center;
}

.auth-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 300ms ease;
}

.login-btn {
  background: var(--accent);
  color: #052026;
}

.login-btn:hover {
  background: #0090c7;
}

.register-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0,125,255,0.3);
}

.register-btn:hover {
  background: rgba(0,125,255,0.1);
  border-color: var(--accent);
}

/* Responsive styles for header */
@media (max-width: 768px) {
  .header-content {
    padding: 0 16px;
  }
  
  .logo {
    height: 80px; /* Reduced from 100px for tablets */
    max-width: 160px;
  }
  
  .auth-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  
  .auth-section {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .top-header {
    height: 100px; /* Reduced from 120px for mobile */
  }
  
  body {
    padding-top: 100px; /* Match mobile header height */
  }
  
  .logo {
    height: 60px; /* Further reduced for mobile */
    max-width: 180px;
  }
  
  .auth-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .main-header {
    top: 100px; /* Match mobile header height */
  }
  
  .sidebar {
    top: 154px; /* Adjusted for mobile header (100px + 24px padding + 30px extra space) */
    height: calc(100vh - 178px); /* Adjusted for mobile header with extra space */
  }
}

/* Authentication Modal Styles */
.auth-modal-content {
    max-width: 400px;
    width: 90%;
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 24px;
    color: #dbe9ee;
    position: relative;
    z-index: 1001;
}

.auth-modal-content h2 {
    color: var(--accent);
    margin-bottom: 20px;
    text-align: center;
    font-size: 24px;
}

.auth-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.form-group input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    padding: 12px;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #dbe9ee;
    font-size: 14px;
    transition: border-color 300ms ease;
}
.form-group input[type="checkbox"]{ width:auto; }

.form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

.form-group input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,125,255,0.2); }
.form-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,125,255,0.2); }
.form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,125,255,0.2); }

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #052026;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 300ms ease;
    margin-top: 8px;
}

.auth-submit-btn:hover {
    background: #0066cc;
}

.auth-links {
    text-align: center;
    margin-top: 16px;
}

.auth-links a {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
}

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

.error-message {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 8px;
    padding: 8px;
    background: rgba(255,107,107,0.1);
    border-radius: 4px;
    border: 1px solid rgba(255,107,107,0.3);
}

.social-login {
    margin-top: 24px;
    text-align: center;
}

.social-login p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 12px;
}

.social-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.social-btn {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #dbe9ee;
    font-size: 14px;
    cursor: pointer;
    transition: all 300ms ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.social-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--accent);
}

/* User menu when logged in */
.user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-greeting {
    color: #dbe9ee;
    font-size: 14px;
    font-weight: 500;
}

.logout-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #dbe9ee;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 300ms ease;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.auth-modal-content h2 {
    color: var(--accent);
    margin-bottom: 20px;
    text-align: center;
    font-size: 24px;
}

.auth-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #dbe9ee;
    font-size: 14px;
    transition: border-color 300ms ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0,125,255,0.2);
}

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #052026;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 300ms ease;
    margin-top: 8px;
}

.auth-submit-btn:hover {
    background: #0066cc;
}

.auth-links {
    text-align: center;
    margin-top: 16px;
}

.auth-links a {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
}

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

.error-message {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 8px;
    padding: 8px;
    background: rgba(255,107,107,0.1);
    border-radius: 4px;
    border: 1px solid rgba(255,107,107,0.3);
}

.social-login {
    margin-top: 24px;
    text-align: center;
}

.social-login p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 12px;
}

.social-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.social-btn {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #dbe9ee;
    font-size: 14px;
    cursor: pointer;
    transition: all 300ms ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.social-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--accent);
}

/* User menu when logged in */
.user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-greeting {
    color: #dbe9ee;
    font-size: 14px;
    font-weight: 500;
}

.logout-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #dbe9ee;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 300ms ease;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: #ff6b6b;
    color: #ff6b6b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#071014; /* deep navy */
  --panel:#08151a; /* slightly lighter */
  --muted:#9aa6ad;
  --accent:#007DFF;
  /* Location-level accents (lighter tints of the base color #2a6ea7) */
  --loc-accent-1: #2a6ea7; /* base - Continent level */
  --loc-accent-2: #3d82bb; /* lighter - State/Country level */
  --loc-accent-3: #5096cf; /* even lighter - City level */
  --loc-accent-4: #63aae3; /* lightest - Neighborhood level */
  --card:#07171b;
  --pill:#053744;
}
body{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: #dbe9ee;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x: hidden; /* prevent horizontal scroll during transitions */
  padding-top: 120px; /* Increased from 70px to match new header height */
}
.app{ 
    position:relative; 
    padding: 24px; /* Reduced top padding since we have separate header */
}
.sidebar{ 
  position:fixed; 
  z-index:100;
  left:24px; 
  top:174px; /* Increased from 144px to move sidebar down and show entire content */
  width:320px; 
  background:linear-gradient(180deg,#04252b, #06303a); 
  border-radius:8px; 
  padding:18px; 
  box-shadow:0 6px 18px rgba(0,0,0,0.6); 
  height:calc(100vh - 198px); /* Adjusted height to maintain proper sizing */
  overflow:auto; 
  transition:transform 300ms ease;
  /* initial state is open */
  transform: translateX(0);
}
.sidebar.closed{ transform: translateX(-360px); }


.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 100px; /* Increased from 70px to match new header height */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1100;
  background: var(--bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  padding: 18px 24px;
  margin: 0;
}

.filter-toggle {
  position: relative;
  margin-left: auto;
  background: var(--accent);
  color: #052026;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  transition: background 300ms ease;
}

.filter-toggle[aria-expanded="false"] {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0,125,255,0.15);
}
.filter-toggle[aria-expanded="true"] {
  background: var(--accent);
}
.sidebar-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.sidebar h2{ color:#9ee8ff; font-size:18px }
.reset-btn{ background:transparent; border:2px solid rgba(255,255,255,0.06); color:var(--muted); padding:10px 12px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500 }
.reset-btn:hover{ background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.1) }
.filter-section{ margin-top:12px; display:flex; flex-direction:column; gap:8px }
.filter-section label{ color:var(--muted); font-size:13px }
.filter-section select, .search-section input{ background:var(--panel); border:1px solid rgba(255,255,255,0.04); color: #e6f7fb; padding:10px; border-radius:6px }

/* Hierarchical Location Filter */
.location-filter .hierarchical-select {
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    overflow: hidden;
}

.location-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-list li {
    position: relative;
}

.location-list button {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #e6f7fb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.location-list button:hover {
    background: rgba(255,255,255,0.03);
}

.location-list button.selected {
  color: #052026;
}

.location-list button::after {
    content: '›';
    font-size: 16px;
    opacity: 0.5;
    margin-left: 8px;
}

.location-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: rgba(255,255,255,0.02);
}

.location-list li.active > ul {
    display: block;
}

.location-list ul button {
    padding-left: 24px;
}

.location-list ul ul button {
    padding-left: 36px;
}

/* Indent levels */
.location-list .level-1 > button { padding-left: 14px; }
.location-list .level-2 > button { padding-left: 28px; }
.location-list .level-3 > button { padding-left: 42px; }
.location-list .level-4 > button { padding-left: 56px; }

/* Active state styling */
.location-list li.active > button::after {
    transform: rotate(90deg);
}

/* Level-specific accents: subtle left accent + stronger selected background */
.location-list .level-1 > button {
  border-left: 4px solid transparent;
}
.location-list .level-2 > button {
  border-left: 4px solid transparent;
}
.location-list .level-3 > button {
  border-left: 4px solid transparent;
}

.location-list .level-1 > button:hover { background: linear-gradient(90deg, rgba(42,110,167,0.08), transparent); }
.location-list .level-2 > button:hover { background: linear-gradient(90deg, rgba(61,130,187,0.08), transparent); }
.location-list .level-3 > button:hover { background: linear-gradient(90deg, rgba(80,150,207,0.08), transparent); }
.location-list .level-4 > button:hover { background: linear-gradient(90deg, rgba(99,170,227,0.08), transparent); }

.location-list .level-1 > button.selected {
  background: linear-gradient(90deg, var(--loc-accent-1), rgba(42,110,167,0.9));
  border-left-color: var(--loc-accent-1);
}
.location-list .level-2 > button.selected {
  background: linear-gradient(90deg, var(--loc-accent-2), rgba(61,130,187,0.9));
  border-left-color: var(--loc-accent-2);
}
.location-list .level-3 > button.selected {
  background: linear-gradient(90deg, var(--loc-accent-3), rgba(80,150,207,0.9));
  border-left-color: var(--loc-accent-3);
}
.location-list .level-4 > button.selected {
  background: linear-gradient(90deg, var(--loc-accent-4), rgba(99,170,227,0.9));
  border-left-color: var(--loc-accent-4);
}
.search-section{ margin-top:12px }
.search-section input{ width:100%; }
.meta-links{ margin-top:18px; display:flex; gap:12px; align-items:center }
.pill{ background:var(--pill); color:#9ee8ff; border:2px solid rgba(255,255,255,0.03); padding:10px 12px; border-radius:8px; cursor:pointer }

.pill.action {
  background: #2a6ea7;
  font-weight: 500;
}

.pill.action:hover {
  background: #3884c7;
}

.main{ display:flex; flex-direction:column; width:100%; }
.main-header h1{ font-size:26px; color:#f7fbfd }
.active-filters{ display:flex; gap:8px; align-items:center }
.active-pill{ background:#062e36; color:var(--accent); padding:6px 10px; border-radius:8px; border:1px solid rgba(0,125,255,0.08); font-weight:600 }

.video-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; align-items:start }
.card{ background:var(--card); border-radius:6px; overflow:hidden; border:2px solid rgba(255,255,255,0.04); display:flex; flex-direction:column; box-shadow:0 6px 20px rgba(0,0,0,0.6) }
.card .preview{ background:linear-gradient(180deg, rgba(0,125,255,0.08), rgba(255,255,255,0.02)); display:block }
.card video{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0 }
.card .preview{ position:relative }
.card .poster{ width:100%; height:100%; object-fit:cover; display:block }
.card .video-wrap{ position:absolute; inset:0; display:flex; align-items:stretch }
.card .video-wrap video{ width:100%; height:100%; }

.card .preview img.poster{ display:block }

/* show video on hover (class toggled by JS) */
.card.playing .poster{ opacity:0; transition:opacity 180ms ease }
.card.playing video{ opacity:1 }
.card video{ opacity:0; transition:opacity 180ms ease }
.card.landscape .preview{ aspect-ratio:16/9 }
.card.portrait .preview{ aspect-ratio:9/16 }
.meta{ padding:12px 14px; border-top:1px solid rgba(255,255,255,0.02) }
.meta-title{ font-weight:700; color:#fff; margin-bottom:6px }
.meta-sub{ color:var(--muted); font-size:13px }

.controls{ margin-top:18px; padding:14px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.12)); border-radius:8px }
.filters-row{ display:flex; gap:8px }

/* Modal styles */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1300 }
.modal.hidden{ display:none }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,8,0.7) }
.modal-content{ position:relative; width:min(1100px, 96vw); max-height:90vh; background:var(--panel); padding:18px; border-radius:8px; z-index:1310 }
.modal-close{ position:absolute; right:8px; top:6px; background:transparent; border:none; color:#fff; font-size:28px; cursor:pointer }

/* Responsive adjustments */
@media (max-width:1200px){ 
  .video-grid{ grid-template-columns: repeat(3, 1fr) } 
  .sidebar{ width:300px } 
}
@media (max-width:900px){ 
  .video-grid{ grid-template-columns: repeat(2, 1fr) } 
  .app{ padding: 88px 16px 16px 16px } /* Adjusted padding for header */
  .sidebar{ 
    left:16px; 
    top:118px; /* Adjusted from 88px to match new header positioning */
    width:calc(100% - 32px); 
    height:calc(100vh - 142px); /* Adjusted from 112px to match new header */
    max-height:80vh; 
  }
  .sidebar.closed{ transform:translateY(-120%); }
}
@media (max-width:600px){ 
  .app{ padding: 88px 12px 12px 12px } /* Adjusted padding for header */
  .video-grid{ grid-template-columns: repeat(1, 1fr) }
  .sidebar{ 
    left:12px; 
    top:128px; /* Adjusted from 88px to match new header positioning */
    width:calc(100% - 24px);
    height:calc(100vh - 142px); /* Adjusted from 112px to match new header */
    max-height:85vh;
    /* Remove default transform that was preventing close */
  }
  /* More specific selector to ensure it works in mobile */
  .app .sidebar.closed{ transform:translateY(-120%) !important; }

}

/* small utilities */
.hidden{ display:none }
.muted{ color:var(--muted) }
.dropzone{
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(0,125,255,0.35);
  border-radius: 12px;
  padding: 18px;
  color: #9ee8ff;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
  cursor:pointer;
}
.dropzone.dragover{ border-color: var(--accent); background: rgba(0,125,255,0.08); }
.dz-instructions{ color: var(--muted); font-size: 14px; }
.checkbox-group{ display:flex; align-items:center; justify-content:flex-start !important; gap:10px; padding-top:6px; width:100%; }
.checkbox-group input[type="checkbox"]{ transform: scale(1.1); margin:0; flex:0 0 auto; }
.checkbox-group label{ display:inline-block !important; margin:0 !important; padding:0; color: var(--muted); font-size:14px; line-height:1.2; text-align:left !important; flex:0 1 auto; }
.checkbox-group input[type="checkbox"]{ accent-color: var(--accent); transition: transform 120ms ease, box-shadow 120ms ease; }
.checkbox-group input[type="checkbox"]:hover, 
.checkbox-group input[type="checkbox"]:focus{ transform: scale(1.2); box-shadow: 0 0 0 3px rgba(0,125,255,0.25); outline: none; }
.checkbox-group input[type="checkbox"]:hover + label,
.checkbox-group input[type="checkbox"]:focus + label{ color:#9ee8ff; }
.progress{ width:100%; height:10px; background:rgba(255,255,255,0.06); border-radius:8px; overflow:hidden; margin-top:12px }
.progress-bar{ height:100%; background:var(--accent); transition:width 180ms ease }
.dropzone-area{ display:none }
.video-card{ background:var(--card); border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); display:grid; grid-template-columns: 260px 1fr; gap:0 }
.video-card .thumb{ background:linear-gradient(180deg, rgba(0,125,255,0.08), rgba(255,255,255,0.02)); height:160px; display:flex; align-items:center; justify-content:center }
.video-card .thumb img{ max-width:100%; max-height:100%; object-fit:cover; border-bottom:1px solid rgba(255,255,255,0.04) }
.video-card .no-thumb{ color:var(--muted); font-size:14px }
.video-card .info{ padding:14px }
.video-card .info h3{ color:#fff; font-size:18px; margin-bottom:6px }
.video-card .info p{ color:var(--muted); font-size:14px; margin:4px 0 }
.video-card .meta-row{ display:flex; gap:8px; align-items:center; margin-top:6px; margin-bottom:10px }
.video-card .actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.btn{ background:transparent; color:#e6f7fb; border:1px solid rgba(255,255,255,0.2); padding:8px 12px; border-radius:6px; font-size:14px; cursor:pointer; transition:all 200ms ease }
.btn:hover{ background:rgba(255,255,255,0.06); border-color: var(--accent); }
.btn.primary{ background: var(--accent); color:#052026; border:none }
.btn.danger{ border-color:#ff6b6b; color:#ff6b6b }
.btn.danger:hover{ background:rgba(255,107,107,0.12) }
.pill.badge{ background:#062e36; color:var(--accent); padding:6px 10px; border-radius:8px; border:1px solid rgba(0,125,255,0.08); font-weight:600 }
.map-link { display:inline-flex; align-items:center; gap:6px; color: #fff; text-decoration: none; }
.map-link:hover { text-decoration: underline; }
.map-link-icon { display:inline-block; transform: translateY(2px); width: 18px; height: 18px; }
.map-link-svg { width: 100%; height: 100%; fill: currentColor; }
.map-link-icon--red { color: #e53935; }
.filter-section h3 { display:flex; align-items:center; gap:6px; }