@import url(https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:wght@600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,500;1,6..72,600&family=Inter:wght@400;500;600;700&display=swap);
:root {
  --brand-accent: #da2a58; /* matches your palette */
  --accent-color: #f44b79; /* or #DA2A58 */
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #ffffff;
  color: #333333;
  min-height: 100%;
  /* Instead of "overflow: auto", use: */
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
/* Main Container to Ensure Footer Stays at Bottom */
.master-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  margin-top: 0px;
}

.content {
  flex: 1 1; /* Ensures the content area takes up the remaining space */
  margin-top: 32px; /* Accounts for the fixed header height */
}

.app-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

/* Styles for the new logo */
.app-logo {
  height: 200px; /* Reduced height for a smaller logo */
  width: auto; /* Keeps the aspect ratio intact */
  margin-right: 10px; /* Adjust the margin as needed */
  display: inline-block; /* Ensures proper alignment */
}
/* Header Styles */
.header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* very light line */
  backdrop-filter: saturate(180%) blur(20px); /* soft glass effect */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background-color: #ffffff;
  padding: 10px 20px;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #000000;
  height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  border-bottom: 1px solid #eaeaea;
  padding-left: 0px;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-logo {
  height: 60px;
  max-width: 160px;
  object-fit: contain;
  margin: 0;
  padding: 0;
  display: block;
  margin: 20px 0 0 -5px; /* top, right, bottom, left */
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  height: 64px;
}
/* Header Content Adjustments */
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Ensure elements are spaced out */
  width: 100%;
}

.header-welcome {
  font-size: 14px;
  color: #666;
}

/* Header Right Container */
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-right a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

/* Privacy Badge */
.privacy-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #0369a1;
  transition: all 0.2s ease;
}

.privacy-badge:hover {
  background-color: #e0f2fe;
  border-color: #7dd3fc;
}

.privacy-icon {
  font-size: 14px;
  color: #0369a1;
}

.privacy-text {
  white-space: nowrap;
}

/* Responsive: Show shorter "Privacy" text on mobile */
@media (max-width: 768px) {
  .privacy-badge {
    padding: 6px 10px;
  }
}

.nav-links {
  display: flex;
  gap: 10px;
}

.nav-links a,
.header-link {
  background-color: white;
  color: #0b2533;
  text-decoration: none;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  padding: 10px 15px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.nav-links a:hover,
.header-link {
  background-color: #eaeaea; /* Light gray hover effect */
  color: #0b2533;
  text-decoration: none;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  margin-left: 15px;
}

.nav-links a,
.header-link:hover {
  background-color: white;
  text-decoration: none;
}

/* Landing Page Layout */
.landing-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* If previously restricted */
  max-width: none; /* Remove any max-width constraints */
}

/* CTA Button Styling */
.cta-button {
  background-color: #f44b79;
  color: #ffffff;
  border: none;
  padding: 15px 30px;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
  background-color: #da2a58;
  transform: translateY(-3px);
}

.cta-button:active {
  transform: translateY(0);
}

/* Hero Content Styling */
.hero-content {
  text-align: center;
  padding: 50px 20px 20px 20px;
  max-width: none;
  width: 100%;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: #666666;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.hero-search {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 800px; /* or 600px, up to you */
  margin: 0 auto;
  padding: 0 10px; /* some side padding is fine */
}

.hero-search,
.search-bar-container {
  width: 100%;
  max-width: 600px; /* or 800px on desktop */
  margin: 0 auto;
  box-sizing: border-box;
}

.search-input,
.location-input {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-input::placeholder,
.location-input::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer Styles */
.footer {
  background-color: #f8f8f8 !important;
  color: #333333 !important;
  padding: 20px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
}

.footer a,
.footer .footer-powered,
.footer .footer-copyright {
  color: #333333 !important;
}
/* If you still see white text, add this too */
.footer-link,
.footer-powered,
.footer-copyright {
  color: #333333 !important;
}
.footer-container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Footer Left - Logo & Copyright */
.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-logo {
  height: 90px; /* Increased logo size */
  margin-left: -10px;
  margin-right: -10px;
}

.footer-copyright {
  font-size: 0.9rem;
  color: white;
}

/* Footer Navigation */
.footer-nav {
  display: flex;
  gap: 10px;
}

.footer-link {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.3s;
}

.footer-link:hover {
  opacity: 0.7;
}

/* Footer Right - Contact & Social Media */
.footer-right {
  text-align: right;
}

/* Footer-specific overlay */
.footer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Dark background overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Footer overlay content */
.footer-overlay-content {
  background: white;
  padding: 40px;
  width: 90%;
  max-width: 650px; /* Matches the screenshot size */
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

/* Footer overlay heading */
.footer-overlay-content h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

/* Footer overlay text */
.footer-overlay-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  text-align: left;
  margin-bottom: 10px;
}

/* Bold section headers */
.footer-overlay-content strong {
  font-size: 17px;
  font-weight: bold;
  display: block;
  margin-top: 15px;
  text-align: left;
}

/* Italic signature */
.footer-overlay-content .italic-signature {
  font-style: italic;
  color: #666;
  margin-top: 15px;
  font-size: 14px;
}

/* Close button */
.footer-overlay .close-button {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
}

.footer-overlay .close-button:hover {
  color: #000;
}

/* Footer Close Button */
.footer-overlay .overlay-button {
  background: #333;
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
}

.footer-overlay .overlay-button:hover {
  background: #555;
}

/* Login Page Specific Styles */
.login-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  background-color: #ffffff;
  margin-top: 50px;
  font-family: "Montserrat", sans-serif;
}

.login-container {
  padding-top: 40px;
  padding: 20px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.login-title {
  font-size: 1.4rem;
  font-weight: lighter;
  color: #000000;
  margin-bottom: 10px;
  padding-top: 2%;
  text-align: left;
}

.login-form-container {
  text-align: center;
}

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

.form-group {
  margin-bottom: 10px;
  width: 94%;
}

/* Login Form Styles */
.form-group input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-size: 1rem;
  transition: border-color 0.2s ease;
  background-color: #f2f2f2;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

.form-group input:focus {
  outline: none;
  border: 2px solid #000;
}

/* Adjusting Button Widths to Match Text Boxes */
.login-button {
  width: 95%;
  background-color: #000000;
  color: #ffffff;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1rem;
  margin-top: 10px;
  font-family: "Montserrat", sans-serif;
}

.login-button:hover {
  background-color: #333333;
}

.social-login-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-button {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #ddd;
  font-size: 1rem;
  margin-top: 8px;
  gap: 10px;
  font-family: "Montserrat", sans-serif;
}

.social-button.google,
.social-button.apple,
.social-button.qr {
  background-color: #f2f2f2;
  color: #333333;
}

.icon-spacing {
  margin-right: 8px;
}

.icon {
  color: black; /* Set icon color to black */
  font-size: 1.2rem; /* Ensure icons are consistently sized */
  margin-right: 8px; /* Add spacing between icon and text */
}
.social-button:hover {
  background-color: #eaeaea;
}

.social-icon-facebook {
  color: #1877f2;
}
.social-icon-instagram {
  color: #e1306c;
}
.social-icon-tiktok {
  color: #000000;
}
.social-icon-yelp {
  color: #d32323;
}
.social-icon-google {
  color: #4285f4;
}

.social-icon-whatsapp {
  color: #25d366; /* WhatsApp green */
}
.social-icon-x {
  color: #000000; /* X (Twitter) black */
}
.social-icon-youtube {
  color: #ff0000; /* YouTube red */
}
.social-icon-linkedin {
  color: #0a66c2; /* LinkedIn blue */
}

/* Validation Error Message */
/* Enhanced Validation Error Message */
.error-message {
  margin-top: 10px;
  padding: 8px;
  background-color: #ffe5e5;
  border: 1px solid #da2a58;
  color: #da2a58;
  border-radius: 6px;
  font-weight: 500;
  text-align: center;
  position: relative;
  z-index: 10;
}

/* ========== Home Page ========== */
.home-page {
  padding: 40px 20px; /* Adjusted padding for content */
  background-color: #fafafa; /* A very light gray background */
  min-height: 100vh; /* Ensure full screen on small content */
  box-sizing: border-box;
}

/* 2) Upgrade the “UserWelcomeCard” to a hero-like card */
.user-welcome-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow */
  padding: 30px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
}

.user-welcome-card h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.user-welcome-card .user-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 10px; /* Center the avatar */
  display: block;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 3) “UserStats” => add a subtle, modern panel look */
.user-stats-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 20px;
}
.user-stats-container h3 {
  margin-bottom: 15px;
  color: #0b2533;
  font-size: 1.2rem;
}

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

/* User Stats List */
.user-stats-container .stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.user-stats-container h3 {
  margin-bottom: 10px; /* Reduced spacing */
  margin-left: 10px;
}

.user-stats-container .stats-list li {
  margin-bottom: 8px; /* Consistent spacing between list items */
  font-size: 0.95rem; /* Slightly smaller font */
  margin-left: 30px;
}

.liked-businesses-section {
  background-color: #fff; /* white background */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin: 20px 0; /* spacing around the container */
}

.liked-businesses-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.3rem;
  border-left: 4px solid #da2a58; /* optional accent bar */
  padding-left: 10px;
  color: #333;
}

.liked-businesses-section p {
  margin-top: 5px; /* Reduced spacing */
  margin-left: 20px;
}

/* The scrollable row
.liked-businesses-list {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 5px 40px; /* Increased horizontal padding to center cards */
/* scrollbar-width: thin; */

/* New properties for scroll snapping */
/* scroll-snap-type: x mandatory; Enables mandatory snapping along the x-axis */
/* }  */

/* 3) Slightly adjust the .liked-businesses-list inside that container */
.liked-businesses-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 5px 0;
  margin: 0; /* remove extra margin so it lines up nicely */
}

.liked-business-card {
  min-width: 200px;
  background-color: #fff;
  border-radius: 8px;
  /* Old: box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  box-shadow: none;
  padding: 10px;
  flex-shrink: 0;
  text-align: center;
  /* New property for scroll snapping alignment */
  scroll-snap-align: center; /* Aligns the card to the center when snapping */
}

.liked-business-card .business-thumbnail {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 5px;
}

.liked-businesses-list .liked-business-card {
  padding: 10px; /* Ensure consistent padding */
}

/* The container that wraps the scrollable row + arrow buttons */
.carousel-container {
  position: relative; /* Allows absolutely positioned arrows */
  width: 100%; /* or a specific max-width if you prefer */
  margin: 0 auto; /* center if you'd like */
  margin-top: 10px;
}

/* Liked Businesses Carousel: horizontally scrollable “snap” approach */
.liked-businesses-carousel {
  display: flex;
  gap: 12px; /* spacing between items */
  overflow-x: auto; /* horizontal scroll */
  scroll-snap-type: x mandatory; /* “Snap” effect for modern browsers */
  padding: 5px; /* small padding around the carousel */
}

/* Each item in the carousel “snaps” to the start */
.carousel-item {
  flex: 0 0 auto; /* so each item doesn't shrink or wrap */
  scroll-snap-align: start; /* snap each item to the start edge */
  width: 240px; /* or however wide you want each card */
  box-sizing: border-box;
}

/* Arrow Buttons (left/right) */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

/* On hover, scale up slightly and darken background for an “Airbnbish” feel */
.carousel-arrow:hover {
  background-color: #f7f7f7;
  transform: translateY(-50%) scale(1.08);
}

.carousel-arrow svg {
  font-size: 1.2rem; /* icon size */
  color: #333; /* icon color */
}

/* Left arrow => pinned to the left side */
.left-arrow {
  left: -10px; /* or left: 0 plus a margin, etc. Adjust so it’s near the card */
}

/* Right arrow => pinned to the right side */
.right-arrow {
  right: -10px; /* similarly, adjust as needed */
}

/* If you want smaller spacing between slides: */
.slick-slide {
  margin: 0 10px; /* or 0 5px, etc. */
}

/* Move dots further below the carousel */
.slick-dots {
  bottom: -20px; /* adjust as needed */
}

/* Possibly reduce dot size */
.slick-dots li button:before {
  font-size: 8px;
}

/* Optional: You can hide the horizontal scrollbar for a cleaner look */
.liked-businesses-carousel::-webkit-scrollbar {
  height: 6px; /* minimal height */
}
.liked-businesses-carousel::-webkit-scrollbar-thumb {
  background-color: #ccc; /* slightly gray thumb */
  border-radius: 3px;
}

.quick-actions {
  display: flex;
  gap: 15px; /* Increase gap slightly */
  margin: 20px 0; /* Add vertical margin */
  justify-content: center; /* Keep centered for now, or use flex-start/flex-end */
  flex-wrap: wrap; /* Allow buttons to wrap on small screens */
}

.quick-actions .button.primary {
  flex: 0 1 auto; /* do not stretch full width */
  font-size: 0.95rem;
  padding: 12px 20px;
  border-radius: 8px; /* “capsule” shape */
  background-color: #000;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.quick-actions .button.primary:hover {
  background-color: #333;
  transform: translateY(-2px);
}

/* Profile Wrapper Styling */
.profile-wrapper {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.profile-wrapper:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-menu {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.profile-border {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #dcdcdc;
  padding: 5px 10px;
  border-radius: 30px;
  transition: box-shadow 0.3s ease-in-out;
}

.profile-border:hover {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* Profile Container Styling */
.profile-container {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 21px;
  border: 1px solid #ddd;
  transition: box-shadow 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
}

.menu-profile-wrapper {
  display: flex;
  align-items: center;
  gap: -10px;
  position: relative;
}

.icon-with-badge {
  position: relative;
}
.profile-container:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* Profile Completion Page Styles */
.profile-completion-page {
  max-width: 500px; /* Increased width for better form layout */
  margin: 80px auto 50px auto; /* Adjusted margins for spacing */
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: "Montserrat", sans-serif;
}

.profile-completion-title {
  text-align: center;
  margin-bottom: 25px;
  color: #0b2533;
  font-size: 1.8rem;
  font-weight: 600;
}

/* Updated Error Message for Profile Completion */
.profile-completion-page .error-message {
  display: flex;
  align-items: center;
  background-color: #ffe6e6; /* Light red background */
  color: #cc0000; /* Dark red text */
  border: 1px solid #cc0000; /* Dark red border */
  padding: 12px 16px;
  margin: 20px auto 10px auto;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  max-width: 500px;
  width: 90%;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-completion-page .error-message .error-icon {
  margin-right: 12px;
  font-size: 1.2rem;
  color: #cc0000;
}

/* Profile Completion Form Styles */
.profile-completion-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

/* Profile Inputs */
.profile-input,
.profile-select,
.profile-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
  font-family: "Montserrat", sans-serif;
}

.profile-input:focus,
.profile-select:focus,
.profile-textarea:focus {
  border: 2px solid #0b2533; /* Primary color on focus */
  outline: none;
  box-shadow: none;
  background-color: #ffffff;
}

.profile-select {
  -webkit-appearance: none;
          appearance: none; /* Remove default dropdown arrow */
  /* brand-colored arrow (#0B2533) - using encoded SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http:%2F%2Fwww.w3.org%2F2000%2Fsvg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27%230B2533%27 d=%27M0 0l5 5 5-5H0z%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}

/* Profile Textarea */
.profile-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Submit Button */
.profile-submit-button {
  background-color: #000000;
  color: #ffffff;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.profile-submit-button:hover {
  background-color: #0056b3;
}

/* =========================
   Profile Completion Page Tabs
========================= */

/* Container for all tabs */
.profile-tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* Evenly distribute tabs */
  align-items: center;
  background-color: #000; /* Black background */
  padding: 10px 0;
  border-radius: 8px;
  margin-bottom: 30px;
}

/* Individual Tab */
.profile-tabs .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff; /* White text */
  cursor: pointer;
  position: relative;
  padding: 5px 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 5px;
}

/* Hover Effect for Tabs */
.profile-tabs .tab:hover {
  background-color: #333333; /* Dark gray on hover */
}

/* Active Tab Styling */
.profile-tabs .tab.active {
  background-color: #da2a58; /* Highlight active tab with brand color */
  color: #fff;
}

/* Tab Icon */
.profile-tabs .tab-icon {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

/* Completion Status Dot */
.profile-tabs .tab-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  right: 5px;
}

/* Completed Status */
.profile-tabs .tab-status.complete {
  background-color: #28a745; /* Green dot */
}

/* Incomplete Status */
.profile-tabs .tab-status.incomplete {
  background-color: #dc3545; /* Red dot */
}

/* Icons within Profile Container */
.menu-icon {
  margin-right: 8px;
  color: gray;
  font-size: 16px;
}

/* Profile Icon */
.profile-icon {
  font-size: 1.8rem;
  color: #333;
}

/* ========== Profile Badge & Incomplete Dot ========== */

/* The numeric badge (e.g. “1”) on the profile icon if profile is incomplete */
.profile-badge {
  position: absolute;
  top: -9px;
  right: -6px;
  background-color: red;
  color: white;
  font-size: 0.55rem;
  padding: 2px 5px;
  border-radius: 999px;
  font-weight: bold;
  min-width: 4px;
  height: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 1px white; /* for visual separation */
  z-index: 2;
}

/* A small red dot that appears next to the “Profile” link in the dropdown */
.incomplete-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
}

/* Main Container */
.main-container {
  margin-top: 50px;
}

/* Styles for the Signup Page */
.signup-page {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
}

/* Ensure the error box is as wide as the form/container */
.signup-page .error-message {
  display: block;
  width: 90%; /* Fill the width of its parent container */
  box-sizing: border-box; /* Ensures padding/border is included in total width */
  background-color: #ffe5e5; /* Light red/pink background */
  color: #da2a58; /* Darker red for text */

  border-radius: 4px; /* Subtle rounding */
  padding: 10px 15px; /* Enough padding for comfortable reading */
  margin-bottom: 15px; /* Space below it before next element */
  text-align: left; /* Or `center` if you prefer centering text */
}

.signup-title {
  text-align: center;
  margin-bottom: 20px;
  color: #0b2533;
}

/* Form Styles */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

/* Input and Textarea Styles */
.signup-input,
.signup-textarea {
  width: 100%;
  max-width: 360px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  box-sizing: border-box;
}

.signup-input:focus,
.signup-textarea:focus {
  border: 2px solid #000; /* highlight with black border on focus */

  outline: none;
  box-shadow: none;
}

.signup-input::placeholder,
.signup-textarea::placeholder {
  text-align: center; /* Center placeholder text */
}

/* Signup Button */
/* Also for .signup-button, ensure same font-size & padding: */
.signup-button {
  background-color: #000000;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 20px; /* same styling */
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: "Montserrat", sans-serif;
}

.signup-button:hover {
  background-color: #0056b3;
}

/* For the 2-button layout */
.signup-button-group {
  display: flex;
  gap: 10px;
  justify-content: center; /* or flex-end, etc. */
  margin-top: 10px; /* or whatever spacing you prefer */
  border-radius: 8px;
}

.business-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
  justify-items: center;
  padding: 10px;
  /* etc. */
}

.business-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
  grid-gap: 20px;
  gap: 20px;
  /* Mobile adjustments may already be handled by media queries */
}
/* Business Card Styling */
.business-card {
  position: relative;
  display: flex;
  flex-direction: column; /* top to bottom */
  width: 100%;
  max-width: 100%;
  min-height: auto; /* ensure enough vertical space for expanded description */
  margin: 0 auto;
  padding: 16px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.18s ease;
  /* --- ADD THESE LINES TO PREVENT HIGHLIGHTING --- */
  -webkit-user-select: none; /* Safari */ /* Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Standard */
  -webkit-touch-callout: none; /* Disable the callout menu on iOS Safari */
}

.business-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  /* animation: cardGlow 0.6s forwards; */
}

.business-card:active {
  transform: scale(0.96);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.business-card:hover .business-icon,
.business-card:active .business-icon {
  animation: repetitiveBounce 1.6s ease-in-out;
}

.business-card.event-card {
  position: relative;
}

/* 6) The info rows for address, phone, website, category share alignment */
.location-row {
  display: flex;
  align-items: center;
  margin: 6px 0;
}

.business-card-info {
  text-align: left;
  margin-top: 10px;
}

.business-card-info p {
  font-family: "Montserrat", sans-serif;
  margin: 5px 0; /* Consistent spacing */
  font-size: 1rem; /* Standardize font size */
  color: #333; /* Uniform color */
  font-weight: 400; /* Uniform weight */
  line-height: 1.5; /* Improve readability */
}

.business-card-info .business-category {
  font-weight: bold;
}

.business-card-info .business-address,
.business-card-info .business-contact {
  font-size: 0.9rem;
}

/* Left align the business address */
.business-address {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  cursor: pointer;
}

.business-card-icon {
  flex-shrink: 0;
  font-size: 24px;
  color: #555;
}

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

.business-card-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0b2533;
  margin: 0;
}

.business-card-content p {
  font-size: 16px;
  text-align: left;
}

/* Image Styling */
.business-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Ensure consistent aspect ratio */
  object-fit: cover;
  border-radius: 8px 8px 0 0; /* Rounded corners at the top */
}

.business-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.business-card .tags .tag {
  border: 1px solid #000; /* black border */
  background-color: #fff; /* white background */
  color: #000; /* black text */
  font-size: 0.85rem;
  padding: 5px 10px;
  border-radius: 8px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: default;
}

.business-card .tags span {
  background-color: #f44b79;
  color: white;
  padding: 5px 10px;
  font-size: 0.85rem;
  border-radius: 4px;
  text-transform: uppercase;
}
/* Share Icon Styling for Business Card */
.business-card .share-button {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #333;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: background-color 0.3s;
  z-index: 2;
}

.business-card .share-button:hover {
  background-color: rgba(200, 200, 200, 0.8);
}

.business-card .business-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0b2533;
  margin-bottom: 8px; /* Space between name and category */
}

.business-card .business-category {
  font-size: 0.9rem;
  font-weight: 400;
  color: #666; /* Subtle secondary color */
  margin-bottom: 6px;
}

.business-card .business-address,
.business-card .business-contact {
  font-size: 0.9rem;
  font-weight: 400;
  color: #333; /* Neutral color */
  display: flex;
  align-items: center;
  gap: 6px; /* Space between icon and text */
  margin-bottom: 6px;
}

.business-card .business-description {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
  margin-top: 10px; /* Space from other elements */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.business-card .icon {
  font-size: 0.8rem; /* Icon size adjustment */
  color: #999; /* Lighter color for subtlety */
}

/* 
   The container that holds all the icons (Like, Bookmark, Share). 
   Justify them with space for consistent layout. 
*/
/* Container that holds the bottom row of icons */
.business-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* or space-between, or center */
  gap: 16px; /* give icons some spacing */
  margin-top: 15px; /* spacing above the icons row */
  /* position: absolute;
  bottom: 10px;
  right: 10px; */
}

/* Generic action-button with no borders, no background, consistent icon sizing */
.action-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0; /* no extra padding around the icon */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* (Optional) if you'd like a hover effect: */
  transition: color 0.2s ease, opacity 0.2s ease;
  color: #000; /* black icon color */
  font-size: 1.2rem;
}

/* 4) Optional: slightly enlarge the action icons on hover or highlight states */
.action-button svg {
  font-size: 1.2rem;
}

.action-button:hover {
  opacity: 0.7; /* or color: #333; etc. */
}

.action-button:hover svg {
  color: #da2a58;
}

/* Only color the icon, not the text count */
.action-button.liked svg {
  color: #da2a58;
}

/* For the like count next to the thumb icon. 
   Replaces inline style => color: #000; fontSize: 0.95rem; fontWeight: 400; */
.like-count {
  color: #000;
  font-size: 1rem;
  font-weight: 400;
}

.action-button.bookmarked {
  color: #da2a58;
}

/* --- Shareable Business Card: reduce overall padding if needed --- */
.shareable-business-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 8px; /* reduced from 16px */
  margin: 1rem auto;
  max-width: 400px;
  width: 100%;
  box-sizing: border-box;
}

/* --- Card Header: remove extra space and align items at the top --- */
.shareable-business-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* align items at the top rather than center */
  margin: 0; /* remove any default margin */
  padding: 0; /* remove extra padding */
}

/* --- Logo: remove extra margins/padding so it sits flush --- */
.shareable-business-card .musdir-logo {
  display: block;
  padding: 0; /* no extra padding */
  max-width: 120px; /* adjust this value to make the logo larger if desired */
  width: auto;
  height: auto;
}

/* ----- Card Content Alignment ----- */
.card-content {
  text-align: center; /* Default center for business name */
}

/* Center the main content */
.shareable-business-card .card-content {
  text-align: center;
}

.shareable-business-card h2.business-name {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.shareable-business-card .business-category,
.shareable-business-card .business-address,
.shareable-business-card .business-contact {
  font-size: 0.9rem;
  margin: 0.3rem 0;
}

/* Optional: Add a subtle hover effect on the card */
.shareable-business-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ----- Tag Icon Styling ----- */
.shareable-business-card .tag-icon {
  color: dimgray; /* matching other icon colors */
  font-size: 1.2rem;
  margin-right: 8px;
}

/* --- Share Icon: remove extra spacing and align at the top --- */
.shareable-business-card .share-icon {
  margin: 0; /* remove any extra margin */
  padding: 0; /* remove extra padding */
  font-size: 1.2rem; /* adjust as needed */
  color: #4a4a4a;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0; /* Remove default margin */
  padding: 0.5rem 0; /* Optional: minimal vertical padding */
}

/* Logo styling: Ensure the logo sits at the very top without extra space */
.musdir-logo {
  display: block;
  margin: 0; /* Remove any default margin */
  max-width: 120px; /* Increase if you want a larger logo */
  width: auto;
  height: auto;
}

/* Share icon: Remove any negative margin and align normally */
.share-icon {
  margin: 0; /* Remove negative or extra margins */
  font-size: 1.1rem;
  color: #4a4a4a;
  cursor: pointer;
}

/* Ensure business name is centered */
.business-name {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #0b2533;
  margin-bottom: 0.5rem;
}

.business-category,
.business-address,
.business-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px; /* Uniform spacing between elements */
  margin-top: 5px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: dimgray;
}

.business-category span,
.business-address span,
.business-contact a {
  margin-left: -5px;
}

.business-category .icon,
.business-address .icon,
.business-contact .icon,
.business-tags .tag-icon {
  font-size: 1.1rem; /* Consistent icon sizing */
  color: dimgray;
}

.phone-link {
  color: dimgray;
  text-decoration: none;
}

.business-tags {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(120px, 1fr)
  ); /* Adjust column width */
  grid-gap: 8px;
  gap: 8px; /* Spacing between tags */
  margin-top: 10px;
  align-items: start; /* Align tags at the top */
  width: 100%; /* Full container width */
}

.business-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start; /* Align tags consistently */
  margin-top: 10px;
}

.business-tags .tag-icon {
  font-size: 1rem;
  color: black;
}

.business-tags .tag {
  /* Previously background-color: #f44b79 and color: white */
  background-color: #fff; /* White background */
  color: #000; /* Black text */
  border: 1.5px solid #000; /* Black border */
  font-size: 0.5rem; /* Or keep 0.55rem if you prefer smaller text */
  padding: 3px 8px;
  border-radius: 16px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap; /* Prevent breaking into multiple lines */
  text-align: center; /* Center-align tag text */
  /* remove or override any conflicting rules (if needed) */
}

/* Share Icon Styling for Business Detail Page */
.business-detail-content .share-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2rem;
  color: #333;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: 5px;
  z-index: 2;
  transition: background-color 0.3s;
}

/* Card Details */
.business-details {
  padding: 10px;
  padding-bottom: 50px;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  position: relative;
}

/* Card Image */
.business-image {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;
  position: relative;
}

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

.business-detail-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px 20px; /* Add padding-top to move content down */
  text-align: left;
}

.business-detail-content {
  position: relative; /* This is crucial for the absolute positioning of children */
  /* Existing styles for .business-detail-content: */
  background-color: #ffffff;
  padding: 30px; /* Keep in mind this padding when positioning buttons */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 40px;
}

.business-detail-container {
  padding-top: 50px; /* Ensures it's below fixed header */
}

.business-detail-header button {
  background: white;
  border: none;
  padding: 50px 10px;
  border-radius: 8px;
  font-size: 0.95rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* pull the description up closer to the “Details:” label */
.business-detail-content .business-description {
  margin-top: 4px; /* default was probably 16px or so */
}

.truncate-url {
  display: inline-block;
  max-width: 140px; /* Adjust as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle; /* keeps alignment nice next to icon */
}

/* 1) Make the fallback icon placeholder bigger */
.icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f8f8f8; /* optional subtle background */
}

.main-placeholder-icon {
  font-size: 2.5rem; /* or 3rem if you want it even bigger */
  color: #999;
}

/* 2) A consistent class for small icons used in the address/phone/website/category rows */
.business-icon {
  font-size: 1.1rem; /* pick a size that looks good everywhere */
  color: #666; /* consistent color, typically a medium grey */
  margin-right: 8px; /* spacing between icon and text */
}

/* Business Name */
.business-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  color: #000;
}

/* Business Name Repetitive Glow */
.business-name a {
  color: white; /* Ensure it's white for visibility */
  text-decoration: none; /* Remove underline */
  animation: none; /* Remove any glow or underline animation */
  font-weight: bold; /* Keep it visually prominent */
}

/* Business Name Glow Effect */
.business-name a:active {
  animation: glow 0.5s ease-in-out;
  text-decoration: underline;
}

/* Repetitive Bounce for Icons */
.business-address .icon,
.business-contact .icon {
  animation: repetitiveBounce 2.5s infinite ease-in-out;
}

.business-name .business-link {
  color: inherit;
  text-decoration: none;
}

.business-name .business-link:hover {
  text-decoration: underline;
}

.business-rating {
  margin-top: 5px;
  font-size: 1rem;
  color: #777;
}

.business-contact p {
  margin: 0;
  color: #666;
}
.review-count {
  margin-left: 10px;
  color: #777;
}

/* Business Map Section */
.business-map-section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

/* Container for the business list and map */
.business-map-container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  gap: 1rem;
}

.tag {
  display: inline-block;
  background-color: #f0f0f0;
  color: #333;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 15px;
  font-weight: 500;
  margin-right: 6px;
}

/* HomepageV2 compact tag pills override */
.section-cards-horizontal .business-card .business-tags .tags-list .tag,
.section-cards-horizontal .business-card .business-tags .tag,
.section-cards-horizontal .tag,
.section-cards-vertical .business-card .business-tags .tags-list .tag,
.section-cards-vertical .business-card .business-tags .tag,
.section-cards-vertical .tag {
  font-size: 8px !important;
  padding: 2px 5px !important;
  border-radius: 8px !important;
  margin-right: 4px !important;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  white-space: nowrap;
}

.tags-list:has(span:nth-child(n + 3)) {
  margin-bottom: 12px; /* More bottom margin if 3+ tags */
}

.business-tags .business-icon {
  align-self: flex-start; /* ✅ align icon to the top */
  margin-top: 3px;
}

.tag-icon {
  font-size: 1rem; /* Slightly smaller icon */
  color: black; /* Consistent with the rest of the card */
  margin-right: 0.3;
}

/* (Optional) Increase the overall size of the error message if needed */
.tag-error {
  text-align: center;
  color: #da2a58;
  font-size: 1rem;
  margin-top: 8px;
  background-color: #fff0f0;
  padding: 8px; /* slightly increased padding */
  border: 1px solid #da2a58;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Updated style for tag error message dismiss button */
.tag-error-dismiss {
  background: none;
  border: none;
  color: #da2a58;
  font-size: 1.5rem; /* increased from 1rem */
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
}
.business-status {
  margin-top: 10px;
  font-size: 1rem;
}

.business-status.open {
  color: green;
}

.business-status.closed {
  color: red;
}

/* Description */
.business-description {
  cursor: pointer; /* Make the description text clickable */
  color: #0b2533; /* Match the overall card theme */
  font-size: 0.9rem;
  margin-top: 10px;
  transition: max-height 0.3s ease; /* Smooth expansion */
  overflow: hidden;
}

.business-description-wrapper {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out; /* Smooth expanding and collapsing */
}

.business-description-wrapper p {
  margin: 10px 0 0;
  line-height: 1.4;
  color: #555;
}

.business-description {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  color: #555;
}

.business-description.collapsed p {
  display: none; /* Hide the paragraph but keep the toggle text visible */
}

.toggle-text {
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0b2533;
  font-size: 13px;
}

.business-description.expanded {
  max-height: 300px; /* Adjust based on content length */
}

.business-description .toggle-text {
  font-weight: bold;
  display: inline-flex; /* Use inline-flex to position the arrow next to text */
  align-items: center; /* Vertically align text and icon */
  gap: 5px; /* Add spacing between text and icon */
  color: #0b2533; /* Match card theme */
}

.business-description-wrapper .toggle-text {
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0b2533;
}

.toggle-description-button {
  background: none;
  border: none;
  color: #0b2533;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

/* Actions */
.business-actions {
  margin-top: 10px;
}

.business-actions .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.business-actions .btn:hover {
  background-color: #333;
}

/* -------------------------
   Event Detail Additional Styles
   (No inline styles)
------------------------- */

/* The box that wraps Start/End/Details lines */
.event-detail-info-box {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 8px;
  background-color: #fafafa;
  margin-bottom: 15px;
}

/* Each line (start date/time, end date/time, details) */
.event-detail-line {
  margin: 8px 0;
  font-size: 0.95rem;
  color: #666;
}

/* For the bold label text (e.g. "Start Date/Time:") */
.event-detail-label {
  font-weight: bold;
  margin-right: 6px; /* small gap if needed */
}

/* For the main description of the event */
.event-detail-description {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/* Contact line (no italics) */
.event-detail-contact {
  margin-top: 10px;
  color: #333;
  font-size: 1rem;
  line-height: 1.4;
}

/* If you want a special map style here */
.event-detail-map {
  margin-top: 20px;
}

.event-type-badge {
  display: inline-block;
  background-color: #e6f0ff;
  color: #004085;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-weight: 600;
}

.live-animation-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 64px;
  height: 64px;
  z-index: 10;
}

/* Yelp-like Search Bar Styles */
.search-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 100;
}

/* Adjust as needed, focusing on dropdown positioning */

.search-bar-container.focused .search-bar {
  border-color: #000;
  border-width: 2px;
}

/* Entire search bar container */
.search-bar {
  display: flex;
  align-items: center;
  width: 120%;
  max-width: 800px; /* or 600px if you prefer */
  border: 1px solid #ddd;
  border-radius: 7px;
  background-color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
}

/* Smooth fade-out transition for clearing the query */
.search-input.fade-out {
  transition: opacity 0.2s ease-out;
  opacity: 0;
}

.search-query,
.search-location {
  flex: 1 1;
  padding: 10px 15px;
}

.keyword-input input {
  text-align: left;
}

.location-input input {
  text-align: left;
  font-size: 16px;
}

.location-icon {
  margin-right: 0.3px;
  color: #000; /* black icon color */
  font-size: 1rem; /* adjust as needed */
}

/* Divider */
.vertical-divider {
  width: 1px;
  height: 80%;
  background-color: #ccc;
}

/* Search Button */
.search-icon-button {
  background-color: #ff385c;
  border: none;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  border-radius: 0 8px 8px 0;
}

.search-icon-button:hover {
  background-color: #e63950;
}

/* Add border and shadow on focus/activation */
.search-bar:focus-within {
  border: 2px solid #000; /* Black border when active */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

/* Categories dropdown under query input */
.category-list {
  position: absolute;
  top: calc(100% + 2px); /* slight gap from the select box */
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000; /* ensure it sits above the input */
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
}

.category-list .suggestion-item {
  display: flex;
  align-items: center; /* Align icon and text */
  gap: 10px; /* Space between icon and text */
  padding: 12px 20px;
  cursor: pointer;
  color: #333;
  font-family: "Montserrat", sans-serif;
  transition: background 0.2s ease;
  font-size: 14px;
}

.category-icon {
  font-size: 1rem; /* Adjust icon size */
  color: #555; /* Neutral icon color */
}

/* Scoped styling for BusinessDetail */

.business-detail-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 100px 20px 20px; /* Increased padding-top to ensure enough space for the button */
  text-align: left;
  position: relative;
}

.business-detail-wrapper .business-name {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.business-detail-wrapper .business-category-address i {
  margin-right: 8px;
  color: #555;
}

.business-detail-wrapper .business-map {
  margin: 20px 0;
  height: 300px; /* Adjust map height as needed */
  border-radius: 8px;
  overflow: hidden; /* Ensures the map respects rounded corners */
}

.business-detail-wrapper .business-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  margin: 20px 0;
}

.business-detail-wrapper .business-tags {
  display: flex;
  align-items: center;
  gap: 6px; /* Slightly reduce gap between tags */
  flex-wrap: wrap; /* Allow tags to wrap to the next line if needed */
  margin-top: 20px;
}

.business-detail-wrapper .business-tags .tags-label {
  margin-left: -2px; /* Adjust space between icon and label if needed */
}

.business-detail-wrapper .business-tags span {
  background-color: #f44b79;
  color: #f0f0f0;
  font-weight: bold;
  padding: 4px 8px; /* Reduce padding for a smaller appearance */
  border-radius: 16px; /* Slightly reduce border radius */
  font-size: 0.7rem; /* Reduce font size slightly */
  text-transform: uppercase;
  white-space: nowrap; /* Prevent tags from breaking into multiple lines */
}

.business-detail-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 20px; /* Reduce top padding, only for business detail content */
  text-align: left;
  position: relative;
}

/* ─── Fix back-button in top-left of viewport ─── */
.business-detail-wrapper .back-button {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  cursor: pointer;
  z-index: 10;
}

/* optional hover feedback */
.business-detail-wrapper .back-button:hover {
  background: #f4f4f4;
}

.business-detail-wrapper .business-detail-content {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 40px;
}

/* Search Button: Increase width by adding more horizontal padding and keep subtle rounding */
.search-button {
  background-color: #da2a58;
  border: none;
  color: white;
  padding: 0 20px; /* Increased padding to make it wider */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px; /* Matches top-level bar rounding on the right side */
  font-size: 16px;
}

.search-button:hover {
  background-color: #b81f48; /* Darken slightly on hover */
}

.search-button:focus {
  outline: none;
}

.search-button:disabled,
.search-button[disabled] {
  background-color: #ccc !important;
  cursor: not-allowed;
}

.search-button:disabled:hover,
.search-button[disabled]:hover {
  background-color: #ccc !important;
}

/* Adjust input wrappers to ensure a cohesive rectangular shape */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1;
  padding: 0;
  border: none;
  width: 100%;
}

.input-wrapper input.form-input[name="location"] {
  padding-right: 35px !important; /* more space for the X icon on the right */
}

.input-error {
  border-color: #da2a58 !important;
}

/* Ensure query wrapper's width matches search bar */
.query-wrapper {
  position: relative;
  flex: 1 1; /* Adjust width proportionally */
}

.location-wrapper {
  position: relative;
  flex: 1 1; /* Matches the width split */
}

.query-wrapper,
.location-wrapper {
  flex: 1 1; /* let them share space */
  min-width: 0; /* critical for preventing overflow in a flex container */
  margin: 0;
  padding: 0;
}

/* Input Fields */
.search-input {
  background-color: #f2f2f2; /* or #ffffff if you prefer */
  padding: 8px 10px; /* slightly smaller padding for mobile */
  max-width: 100%; /* let it shrink to container size */
  box-sizing: border-box; /* ensure padding does not add extra width */
}

.search-input:focus {
  background-color: #ffffff;
}

/* Adjust Padding for Input Fields (Ensure No Inner Borders Are Visible) */
/* Search Input Fields (Remove Inner Borders) */
.search-input,
.location-input {
  border: none; /* Completely remove inner borders */
  outline: none; /* Remove focus outline */
  flex: 1 1; /* Ensure input fields take up equal space */
  padding: 12px 15px; /* Consistent padding */
  font-size: 16px; /* Standardized font size */
  background-color: transparent; /* Transparent background for seamless design */
  font-family: "montserrat", sans-serif; /* Use Montserrat font */
}

/* Divider line between query and location */
.divider {
  width: 1px;
  height: 60%;
  background-color: #ddd;
  margin: 0 10px; /* Adjust horizontal margin as needed */
}

.search-input,
.search-location-input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;

  font-size: 1rem;
}

.search-location-input {
  margin-left: 0 !important; /* Override to remove the shift */
}

/* Clear Icon */
.clear-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000; /* Black circle background */
  color: #fff; /* White "X" */
  width: 13px;
  height: 13px;
  border-radius: 50%; /* Circular */
  font-size: 14px; /* Slightly smaller font size */
  cursor: pointer;
  position: absolute; /* Position within the input field */
  right: 15px; /* Adjust as needed to position correctly */
  top: 50%;
  transform: translateY(-50%);
}

.clear-icon:hover {
  background-color: #444; /* Slightly lighter black on hover */
}

.address-clear-icon {
  position: absolute;
  right: 20px;
  top: 40%; /* Center icon vertically */
  transform: translateY(-50%); /* Adjust to ensure it aligns to the middle */
  font-size: 16px;
  cursor: pointer;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
  width: 13px; /* Adjust width if needed */
  height: 13px; /* Adjust height if needed */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scoped Styles for Address Dropdown */
.address-dropdown-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.address-dropdown-input {
  border: none;
  padding: 10px;
  outline: none;
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.address-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

.address-dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s ease;
}

.address-dropdown-item:hover {
  background-color: #f9f9f9;
}

.address-dropdown-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #666;
}

.search-input:not(:placeholder-shown) + .clear-icon,
.search-input:focus + .clear-icon {
  display: flex;
}

/* Placeholder Styling */
.search-input::placeholder,
.location-input::placeholder {
  color: #aaa; /* Subtle placeholder color */
  font-weight: 400; /* Normal font weight */
}

.suggestions-list {
  position: absolute;
  top: 100%; /* Position directly below the input */
  left: 0;
  width: 100%;
  max-width: 600px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  max-height: 300px;
  overflow-y: auto;
  padding: 0;
  list-style: none;

  /* Reduce top margin to eliminate gap */
  margin: 2px 0 0 0; /* Reduced top margin */

  /* Scrollbar Styling */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #aaa #f4f4f4; /* Thumb and track color */
}

.suggestions-list,
.address-suggestions-list {
  z-index: 5;
}

.suggestions-list.suggestions-location {
  text-align: left;
}

/* Base styling for the suggestions dropdown */
.address-suggestions-list {
  position: absolute;
  top: 100%;
  left: 2px;
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 8px;
  margin-top: 2px; /* small gap if you like */
}

.suggestions-list::-webkit-scrollbar {
  width: 8px; /* Set scrollbar width */
}

.suggestions-list::-webkit-scrollbar-thumb {
  background-color: #aaa; /* Thumb color */
  border-radius: 4px; /* Rounded scrollbar */
}

.suggestions-list::-webkit-scrollbar-track {
  background-color: #f4f4f4; /* Track color */
}

/* Existing Styles for Individual Suggestion Items */
.suggestion-item {
  /* Remove flex display to prevent layout issues */
  /* display: flex; */ /* Remove this line */
  display: block; /* Use block display */

  /* Existing alignment and spacing */
  align-items: center; /* Remove as it's not needed for block display */
  padding: 8px 12px;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  color: #333;

  /* Ensure text wraps correctly */
  white-space: normal;
}

/* Remove any unnecessary styles related to flex alignment */
.suggestion-item p {
  margin: 0;
}

/* Add spacing for the icon in the suggestion items */
.suggestion-item svg {
  margin-right: 10px;
  font-size: 18px; /* Adjust icon size */
}

.suggestion-address {
  font-size: 0.8rem;
  color: #666;
  display: block;
  margin-top: 2px;
}

.description-text {
  font-size: 12px;
  color: #777;
}

.no-results {
  color: #999;
  text-align: center;
}

/* Highlight Class */
.highlight {
  font-weight: bold;
  color: #000;
  display: inline; /* Ensure inline display to prevent layout shifts */
}

/* Categories Dropdown and Query Suggestions */
.suggestions-query {
  position: absolute;
  top: calc(100% + 5px); /* Position it slightly below the input */
  left: 0;
  width: 100%;
  max-width: 600px; /* Adjust as per your layout */
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  padding: 0;
  list-style: none;

  /* Remove default padding/margin */
  margin: 0;
  padding: 0;
}

/* Suggestion Item for Categories and Query */
.suggestions-list .suggestion-item {
  display: block; /* Ensure block display for inline flow */
  padding: 8px 12px;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  color: #333;
  white-space: normal; /* Allow text to wrap */
}

/* Specific styling if needed for different types of suggestions */
.suggestions-list .suggestion-content {
  display: block; /* Ensure content flows naturally */
}

.suggestions-list .suggestion-name {
  margin: 0;
}

.suggestions-list .suggestion-address {
  font-size: 0.8rem;
  color: #666;
  display: block;
  margin-top: 2px;
}

/* OR Separator Styles */
.or-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
  font-size: 0.9rem;
  color: #666666;
  width: 100%;
}

.or-separator .line {
  flex-grow: 1;
  height: 1px;
  background-color: #ddd;
  margin: 0 10px;
  max-width: 120px;
}

/* Forgot Password and Reset Password Links */
.auth-links {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.auth-link {
  font-weight: 500;
  font-size: 0.9rem;
  color: #000000;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
  font-family: "Montserrat", sans-serif;
}

.auth-link:hover {
  text-decoration: underline;
  color: #666666;
}

/* Feedback Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

/* Feedback Form Container */
.overlay-content {
  background: white;
  width: 90%;
  max-width: 400px; /* Limits width on larger screens */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  animation: fadeIn 0.3s ease-in-out;
  position: relative;
}

/* Overlay Header */
.overlay-header {
  justify-content: space-between;
  width: 100%;
  position: relative;
  font-size: 1.6rem;
  font-weight: bold;
}

/* Subtle Filters Header */
.overlay-header.subtle {
  font-size: 1.4rem;
  font-weight: normal;
  color: #666;
  text-align: left;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 20px;
}

/* Form Elements Styling */
.overlay input,
.overlay textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

.share-overlay-content {
  text-align: center;
}

/* Button styling */
.overlay-content button[type="submit"] {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

/* styles.css */
.overlay-content {
  position: relative;
  max-height: 80vh;
  max-width: 400px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  overflow-y: auto;
}

/* Button hover effect */
.overlay-content button:hover {
  opacity: 0.9;
}

/* Feedback Title */
.overlay-content h2 {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

/* Feedback Form Inputs */
.overlay-content label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 5px;
  text-align: left;
  color: #444;
}

.overlay-content select,
.overlay-content textarea,
.overlay-content input {
  width: 100%;
  padding: 10px;
  font-size: 0.95rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

/* Submit Button */
.overlay-content button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
  background-color: #000;
  color: white;
  transition: background-color 0.2s ease-in-out;
}

.overlay-content button:hover {
  background-color: #333;
}
.overlay-input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 1rem;
  margin-bottom: 15px;
}

.overlay.hidden {
  display: none;
}

.overlay.visible {
  display: block;
}

/* Form container if needed */
.login-overlay-form {
  display: flex;
  flex-direction: column;
  gap: 12px; /* spacing between input fields */
}

/* Input fields */
.login-overlay-form input {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: border 0.2s ease;
}

.login-overlay-form input:focus {
  border: 2px solid #000; /* highlight on focus */
  outline: none;
}

/* 1) Make sure any overlay input has a black outline on focus */
.overlay input:focus {
  outline: none;
  border: 2px solid #000; /* black border, not blue */
}

/* 2) For the password recovery input specifically
   (assuming you named it .recovery-input in the JS code) */
.recovery-input {
  /* same base styling as overlay input, but if you want any overrides: */
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #f2f2f2;
  transition: border-color 0.2s ease;
}

/* Login Privacy Cue - Subtle trust signal in auth modals */
.login-privacy-cue {
  font-size: 12px;
  color: #9ca3af;
  margin: 12px 0 0;
  padding: 0;
  width: 100%;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.login-privacy-cue svg {
  font-size: 11px;
  vertical-align: baseline;
}

/* Desktop: slightly larger but still subtle */
@media (min-width: 768px) {
  .login-privacy-cue {
    font-size: 13px;
  }

  .login-privacy-cue svg {
    font-size: 12px;
  }
}

/* Button Styling */
.button-group-corner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

/* 3) Evenly share the width for the two buttons
   (Remove all inline style="flex:1") in the JS.
   Then do this in CSS: 
*/
.button-group-corner.button-evenly {
  gap: 10px; /* space between them */
}

.button-group-corner.button-evenly .button {
  flex: 1 1; /* allow each .button to expand equally */
  margin: 0; /* no margin needed unless you prefer some spacing */
}

button:focus-visible {
  outline: 2px solid black; /* Use black color */
  outline-offset: 2px; /* Optionally space outline away from the button edge */
  box-shadow: none; /* Remove any default box-shadow */
}

/* Ensure we remove the dotted “inner focus ring” in Firefox */
button::-moz-focus-inner {
  border: 0;
}
.overlay .button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

/* .overlay button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  background-color: white;
  color: gray;
  transition: background-color 0.2s ease;
  font-family: "Montserrat", sans-serif;
}

.overlay button:hover {
  background-color: #333333;
} */

/* Button styling */
.overlay-content button[type="submit"],
.button.primary,
.login-button,
.cancel-button {
  /* width: 100%; Ensure buttons take full width of the container */
  padding: 12px; /* Consistent padding */
  border-radius: 8px; /* Consistent border radius */
  font-size: 1rem; /* Consistent font size */
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: "Montserrat", sans-serif;
}

/* Clear All Button Style */
.cancel-button.text-only {
  background: none;
  color: #333;
  font-size: 1rem;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.cancel-button.text-only:hover {
  background-color: #f2f2f2;
}

.overlay-content button[type="submit"],
.button.primary,
.login-button {
  background-color: #000000;
  color: #ffffff;
}

.overlay-content button[type="submit"]:hover,
.button.primary:hover,
.login-button:hover {
  background-color: #333333;
}

/* Header Title */
.header-title {
  font-weight: 600;
  text-align: center;
  font-size: 1rem;
  flex: 1 1;
}

.header-placeholder {
  width: 24px; /* Adjust width to match the close button */
}

.close-button:hover {
  color: #000;
}

/* For the .cancel-button: 
   we match the same padding and font-size as well. */
.cancel-button {
  background-color: #f2f2f2;
  color: #333333;
  border-radius: 8px; /* Match the login button */
  padding: 12px; /* Use uniform padding */
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: "Montserrat", sans-serif;
  display: inline-flex; /* Helps vertically center the text */
  align-items: center; /* Vertically centers text */
  justify-content: center; /* Horizontally centers text */
}

.cancel-button:hover {
  background-color: #eaeaea;
}

.cancel-button:hover {
  background-color: #eaeaea;
}

/* --- Button Container --- */
.button-container {
  display: flex;
  gap: 12px; /* space between buttons */
  align-items: center; /* vertical alignment */
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}

/* --- Base Button Style --- */
.button {
  flex: 1 1; /* both buttons take equal width */
  min-height: 45px; /* force both buttons to be at least 45px tall */
  padding: 8px 12px; /* adjust vertical padding as desired */
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex; /* use flex for centering */
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

/* Button Styles */
.button-container .button {
  font-size: 0.9rem; /* Slightly smaller font size */
  padding: 8px 15px; /* Reduce button size */
  border-radius: 5px;
}

/* --- Cancel Button (Text–only style with a bottom border) --- */
.button.cancel {
  background-color: #f2f2f2; /* no filled background */
  color: #333333;
  border: none; /* remove default border */
  border-bottom: 1px; /* a thin bottom border */
  /* Use the same vertical padding as the primary button so that the overall height (min-height)
     stays the same. You can adjust the top/bottom padding if you need to fine-tune the look. */
  padding: 8px 12px;
  transform: translateY(3px);
}

.button.cancel:hover {
  background-color: #eaeaea;
}

.button.primary {
  background-color: #000;
  color: #fff;
}

/* Disabled state: always gray, no hover color change */
.button.primary:disabled,
.button.primary[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}

.button.primary:disabled:hover,
.button.primary[disabled]:hover {
  background-color: #ccc; /* remain gray on hover */
}

.button.small {
  padding: 8px 16px;
}

button[disabled] {
  background-color: gray;
  cursor: not-allowed;
}

/* Profile Icon Container */
.profile-icon-container {
  position: relative;
  display: inline-block;
}

/* Dropdown Styling */
.profile-dropdown {
  position: absolute;
  top: 41px;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  width: 240px;
  padding: 8px 0;
  z-index: 10001;
}

/* Dropdown Item */
.dropdown-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #222222;
  text-decoration: none;
}

.dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-icon {
  margin-right: 12px;
  color: #717171;
  font-size: 18px;
}

/* Share Overlay Container */
.share-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Share Overlay Card */
.share-overlay-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

/* Header */
.share-overlay-header {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

/* Button Group */
.share-overlay-button-group {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

/* Buttons */
.share-overlay-button {
  flex: 1 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.share-overlay-button.primary {
  background-color: #000;
  color: #fff;
}

.share-overlay-button.primary:hover {
  background-color: #333;
}

.share-overlay-button.cancel {
  background-color: #f2f2f2;
  color: #333;
}

.share-overlay-button.cancel:hover {
  background-color: #e0e0e0;
}

/* Error Message */
.share-overlay-error {
  color: #da2a58;
  background-color: #ffe6ea;
  border: 1px solid #da2a58;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 16px;
  text-align: center;
  font-weight: bold;
}

/* Section (for each input field group) */
.share-overlay-section {
  margin-bottom: 16px;
}

/* Labels */
.share-overlay-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Input Fields */
.share-overlay-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Character Count (for textarea) */
.share-overlay-charcount {
  margin-top: 4px;
  text-align: right;
  color: #666;
  font-size: 0.875rem;
}

/* Move the musDir logo upward slightly */
.adjusted-logo {
  margin-top: -20px; /* Adjust as needed */
}

/* Reduce the gap between the header and the business name */
.adjusted-header {
  margin-bottom: 8px; /* Adjust as needed */
}

/* Business Detail Header */
.business-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px; /* adjust spacing as needed */
}

/* Share button near business name */
.business-share-button {
  cursor: pointer;
  /* Adjust sizing and spacing as desired */
  font-size: 1.2rem;
  color: #4a4a4a;
}

/* Business Contact Information container */
.business-contact-info {
  margin-bottom: 16px;
  /* Add spacing between contact info and map */
}

/* Ensure category appears with proper spacing */
.business-category {
  margin-bottom: 16px;
}

/* Adjust back button styling if needed */
.back-button {
  margin: 16px;
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
}

/* Ensure all icons have consistent spacing */
.icon-gap {
  margin-right: 8px;
}

/* Force category icon color to black */
.business-category .icon-gap {
  color: #000;
}

/* Adjust share icon inline (next to business name) */
.share-button-inline {
  margin-left: 12px; /* Adjust spacing as needed */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* (Other styles remain as defined in your existing styles.css) */

/* 
   This small wrapper ensures “Muslim + sliding text” 
   are kept on the same line (nowrap) and can be centered. 
*/
.muslim-rotator-group {
  display: inline-block; /* So we can center it as one unit */
  white-space: nowrap; /* Force them onto the same line */
}

.sliding-text-container {
  display: inline-block;
  position: relative;
  width: 200px; /* Enough for "Businesses" */
  height: 1.2em; /* 1.2em or 1.3em—enough room for descenders */
  vertical-align: middle;
  overflow: hidden; /* Keep it from overflowing outside container */
  text-align: left;
  margin-top: 4px; /* Nudges container down if needed */
  /* margin-bottom: ?px;  Similarly, if you need more/less bottom spacing */
  margin-left: 6px;
}

.sliding-word {
  position: absolute;
  top: -4px; /* Start fully inside the container (no clipping) */
  left: 0;
  opacity: 0;
  animation: slideInStayOut 3s ease;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInStayOut {
  /* 0%: off-screen below (slide in) */
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  /* ~15%: fully in place, fully visible */
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  /* ~70%-80%: keep it visible in place (stay) */
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  /* ~90%: start sliding upward (out) */
  90% {
    transform: translateY(-60%);
  }
  /* 100%: done sliding out at top, invisible */
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes cardGlow {
  0% {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18), 0 0 0 0 #da2a58;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18), 0 0 0 0 var(--brand-accent);
  }
  70% {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18),
      0 0 12px 4px #da2a58;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18),
      0 0 12px 4px var(--brand-accent);
  }
  100% {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  }
}

/* User Profile Page Styles */
.user-profile-page {
  max-width: 800px;
  margin: 80px auto 50px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
}

.user-profile-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  font-family: "Montserrat", sans-serif;
}

.user-profile-form {
  display: flex;
  flex-direction: column;
}

/* =========================
   User Profile Page Styles
========================= */

/* Container */
.user-profile {
  max-width: 500px; /* Increased width for better form layout */
  margin: 80px auto 50px auto; /* Adjusted margins for spacing */
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: "Montserrat", sans-serif;
}

.profile-error-icon {
  margin-right: 12px;
  font-size: 1.2rem;
  color: #cc0000;
}

/* Tab Navigation Container */
.user-profile-tabs {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Center the tabs */
  align-items: center;
  background-color: #000; /* Black background */
  padding: 5px 0; /* Reduced vertical padding */
  border-radius: 8px;
  margin-bottom: 20px; /* Reduced bottom margin */
}

/* Individual Tab */
.user-profile-tabs .user-profile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff; /* White text */
  cursor: pointer;
  position: relative;
  padding: 4px 8px; /* Reduced padding */
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 4px; /* Less rounded corners */
  font-size: 0.5rem; /* Smaller font size */
  gap: 4px; /* Reduced gap between icon and text */
}

.user-profile-tabs .user-profile-tab:hover {
  background-color: #333333; /* Dark gray on hover */
}

/* Active Tab Styling */
.user-profile-tabs .user-profile-tab.active {
  background-color: #da2a58; /* Highlight active tab with brand color */
  color: #fff;
}

/* Tab Icon */
.user-profile-tabs .user-profile-tab-icon {
  font-size: 1.2rem; /* Smaller icon size */
  margin-bottom: 2px; /* Reduced margin below icon */
}

/* Completion Status Dot */
.user-profile-tabs .user-profile-tab-status {
  width: 8px; /* Smaller dot size */
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  right: 4px;
}

/* Completed Status */
.user-profile-tabs .user-profile-tab-status.complete {
  background-color: #28a745; /* Green dot */
}

/* Incomplete Status */
.user-profile-tabs .user-profile-tab-status.incomplete {
  background-color: #dc3545; /* Red dot */
}

/* Success Message */
.editing-indicator {
  color: #28a745; /* Green color */
  font-size: 1rem;
  text-align: center;
  margin-bottom: 10px;
}

.no-business-message {
  text-align: center;
  background-color: #f9f9f9;
  color: #444;
  padding: 20px;
  border-radius: 8px;
  font-size: 1rem;
  max-width: 500px;
  margin: 20px auto;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  font-family: "Montserrat", sans-serif;
}

.no-business-icon {
  font-size: 1.5rem;
  color: #da2a58;
  margin-bottom: 5px;
}

/* Title */
.signup-title {
  text-align: center;
  margin-bottom: 25px;
  color: #0b2533;
  font-size: 1.8rem;
  font-weight: 600;
}

.section {
  margin-bottom: 30px;
}

.section h3 {
  margin-bottom: 20px;
  color: #0b2533;
}

.section label {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  font-size: 1rem;
  color: #333333;
  font-family: "Montserrat", sans-serif;
}

.section input,
.section select,
.section textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
  font-family: "Montserrat", sans-serif;
}

.section input:focus,
.section select:focus,
.section textarea:focus {
  border-color: #da2a58;
  outline: none;
}

.section-title {
  font-size: 1.5rem; /* match .hero-title for consistency */
  font-weight: 700;
  color: #0b2533;
  text-align: center;
  margin-bottom: 20px;
}

.read-only {
  background-color: #f9f9f9;
  border-color: #eaeaea;
  cursor: not-allowed;
}

.read-only::placeholder {
  color: #999999;
}

/* Example: a green text + subtle green background for success */
.success-message {
  color: #1a7d1a; /* a nice green text color */
  background-color: #e6ffe6; /* pale green background (optional) */
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  text-align: center; /* match the style of error messages */
}

.success-icon {
  font-size: 30px;
  color: #2ecc71;
  margin-bottom: 10px;
}

.notification {
  color: #da2a58;
  font-size: 1rem;
  margin-bottom: 20px;
  text-align: center;
}

/* Add Business Button Styling */
.add-business-btn {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Hover Effect: Matches Login and Signup links */
.add-business-btn:hover {
  color: #da2a58;
  text-decoration: underline;
}

.cancel-business-btn {
  background-color: #f0f0f0;
  color: #000;
  padding: 10px 20px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/* Adjusting Button Widths to Match Text Boxes */
.login-button {
  width: 95%;
  background-color: #000000;
  color: #ffffff;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1rem;
  margin-top: 10px;
  font-family: "Montserrat", sans-serif;
}

/* Add Business Link Styling */
.header-link,
.add-business-link {
  font-size: 14px;
  font-weight: 900;
  color: #222222;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: transparent;
  transition: background-color 0.2s ease-in-out;
  text-decoration: none;
}

.add-business-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.welcome-text {
  margin-left: 15px;
  font-size: 1rem;
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

/* Add Business Page Styling */
.add-business-page {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.add-business-hero {
  margin-bottom: 30px;
  font-size: 1.5rem;
  font-weight: 400;
  color: #333;
}

/* Add Business Form */
.add-business-title {
  font-size: 2rem;
  font-weight: bold;
  color: #0b2533;
  margin-bottom: 20px;
}

/* Adjusted Form Container */
.add-business-form {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* Overall page wrapper */
.add-event-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Big page title */
.page-title {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 80px;
  margin-bottom: 30px;
  text-align: center;
}

/* The main form container - now seamless */
.add-event-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* styles.css - Add or Modify these rules */

/* --- Base Styling Consistency --- */

/* Apply consistent padding, border, radius, and font to standard form elements */
.add-event-form .form-input,
.add-event-form .form-textarea,
.add-event-form .form-select {
  /* Ensure consistent vertical padding */
  padding-top: 10px;
  padding-bottom: 10px;
  /* Consistent horizontal padding */
  padding-left: 12px;
  padding-right: 12px;
  /* Consistent border */
  border: 1px solid #ccc;
  /* Consistent radius */
  border-radius: 6px; /* Match react-select */
  /* Consistent font */
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  /* Ensure box-sizing is consistent */
  box-sizing: border-box;
  /* Consistent background */
  background-color: #f9f9f9;
  /* Consistent height where applicable (might vary slightly for select/textarea) */
  min-height: 44px; /* Match react-select approx height */
  height: 44px; /* Explicit height for inputs/select */
  width: 100%; /* Ensure they take full width */
  transition: border-color 0.2s ease, background-color 0.2s ease; /* Add transitions */
}

/* Specific adjustments for native select */
.add-event-form .form-select {
  /* height: 44px; */
  -webkit-appearance: none;
          appearance: none; /* Remove default arrow */
  /* brand-colored arrow (#0B2533) - using encoded SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http:%2F%2Fwww.w3.org%2F2000%2Fsvg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27%230B2533%27 d=%27M0 0l5 5 5-5H0z%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  padding-right: 30px; /* Space for custom arrow */
}

/* Textarea specific */
.add-event-form .form-textarea {
  min-height: 100px; /* Keep textarea height */
  height: auto; /* Allow textarea to grow */
  resize: vertical;
}

/* --- Focus Styling Consistency --- */

/* Apply consistent black border focus style and remove default blue outline */
.add-event-form .form-input:focus,
.add-event-form .form-textarea:focus,
.add-event-form .form-select:focus {
  outline: none; /* Remove default blue outline */
  border: 2px solid #000; /* Add 2px black border like login */
  /* Adjust padding slightly to account for thicker border */
  padding-left: 11px;
  padding-right: 11px;
  padding-top: 9px;
  padding-bottom: 9px;
  background-color: #fff; /* Optional: change background on focus */
}

/* Ensure react-select focus matches (it already has border, just confirm no outline needed) */
.add-event-form .react-select__control--is-focused {
  border: 2px solid #000 !important; /* Ensure it overrides default */
  box-shadow: none !important; /* Remove default react-select focus shadow */
  outline: none !important; /* Explicitly remove outline if browser adds one */
  /* Padding adjustment for focus state border */
  padding-top: 0px;
  padding-bottom: 0px;
  /* Ensure background matches focused inputs */
  background-color: #fff !important;
}

/* --- Adjustments for react-select to match height/padding better --- */

/* Adjust react-select control height and padding */
.add-event-form .react-select__control {
  min-height: 44px; /* Match input height */
  height: 44px; /* Explicit height */
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
  box-shadow: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  /* Override react-select default padding that affects height */
  padding: 0;
  cursor: pointer; /* Indicate it's clickable */
}

/* Adjust padding inside the value container */
.add-event-form .react-select__value-container {
  /* Match horizontal padding of inputs */
  padding: 0px 11px;
  /* Remove default react-select vertical padding */
  padding-top: 0;
  padding-bottom: 0;
  /* Align items centrally */
  display: flex;
  align-items: center;
  height: 100%; /* Ensure container fills the control height */
}

/* Style the single value text */
.add-event-form .react-select__single-value {
  line-height: 1; /* Try to force line-height */
  margin: 0; /* Remove any default margins */
  padding: 0;
  position: static; /* Override absolute positioning if present */
  top: auto;
  transform: none;
}

/* Adjust position of dropdown indicators */
.add-event-form .react-select__indicators {
  padding-right: 4px; /* Slight adjustment for indicators */
  /* Vertically center indicators */
  display: flex;
  align-items: center;
  height: 100%;
}
.add-event-form .react-select__indicator-separator {
  margin-top: 8px; /* Align separator vertically */
  margin-bottom: 8px;
}
.add-event-form .react-select__dropdown-indicator {
  padding: 0 8px; /* Adjust indicator padding */
}

/* Ensure placeholder text color matches */
.add-event-form .form-input::placeholder,
.add-event-form .form-textarea::placeholder {
  color: #aaa; /* Match login placeholder color if needed */
}
.add-event-form .react-select__placeholder {
  color: #aaa; /* Match login placeholder color if needed */
  /* Align placeholder text same as single value */
  line-height: 1;
  margin: 0;
  padding: 0;
  position: static;
  top: auto;
  transform: none;
}

/* --- AddEventPage Platform Select Option Styling --- */
.platform-option {
  display: flex;
  align-items: center; /* Vertically align icon and text */
}

.platform-option-icon {
  margin-right: 8px; /* Space between icon and text */
  /* Optional: Add color or size adjustments if needed */
  /* color: #555; */
  /* font-size: 1rem; */
}

/* --- Event Card Platform Info --- */
.event-platform-info {
  display: flex; /* Align icon and text */
  align-items: center;
  gap: 8px; /* Space between icon and text (adjust if needed) */
  margin: 6px 0; /* Consistent vertical spacing with other info rows */
  font-size: 0.95rem; /* Match other info rows if they have this */
  color: #666; /* Match other info rows */
  /* Inherit other styles from .info-row if necessary */
}

/* Reuse existing icon styling from .business-icon */
.event-platform-info .business-icon {
  font-size: 1.1rem; /* Adjust size if needed */
  color: #666; /* Match icon color */
  margin-right: 0; /* Override default margin if .business-icon has one */
}
/* 1) Reduce spacing between sections + add subtle line after each section */
.form-section {
  padding: 0 0; /* reduce vertical padding from 20px or so to 10px */
  margin-bottom: -20px; /* remove large spacing at bottom of each section */
  position: relative;
}

/* Increase vertical spacing between rows within each section */
.form-section .form-row {
  margin-bottom: 24px; /* e.g. 24px gap between rows */
}

/* Add a subtle line after each .form-section except the last */

/* Section header style */
.section-header {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #444;
}

/* Ensure .form-row is consistent for all fields */
.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  position: relative; /* for absolute dropdown if needed */
}

.form-label {
  font-weight: 500;
  margin-bottom: 4px;
  color: #333;
}

.form-row .form-label {
  font-weight: 600;
  margin-bottom: 4px;
}

.required-asterisk {
  color: #da2a58;
  margin-left: 2px;
}

.form-select {
  /* Remove position and z-index so the native dropdown behaves normally */
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
  transition: border 0.2s ease;
  outline: none;
  background-color: #f9f9f9;
}

/* Basic input styling */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  /* Previously had border-radius & background; keep some minimal rounding if desired */
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
  transition: border 0.2s ease;
  outline: none;
  background-color: #f9f9f9;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #999;
  background-color: #fff;
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-select__control {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 6px;
  min-height: 38px;
  box-shadow: none;
  transition: border 0.2s ease;
}
.form-select__control--is-focused {
  border: 2px solid #000;
}
.form-select__menu {
  margin-top: 0;
  border-radius: 0 0 4px 4px;
}
.form-select__menu-list {
  padding: 0;
}

/* Ensure react-select fills the full width like your other inputs */
.form-select-container {
  width: 100%;
}

/* Style the react-select control to match .form-input styling */
.form-select-container .react-select__control {
  width: 100%;
  min-width: 0;
  border: 1px solid #ccc; /* Same as .form-input border */
  background-color: #f9f9f9; /* Match input background */
  border-radius: 6px; /* Same border radius as .form-input */
  padding: 0 12px; /* Similar horizontal padding */
  box-shadow: none;
}

/* On focus, use a thicker black border */
.form-select-container .react-select__control--is-focused {
  border: 2px solid #000;
}

/* Ensure the dropdown menu has no extra gap */
.form-select-container .react-select__menu {
  margin-top: 0;
  border-radius: 0 0 6px 6px;
}
/* Ensure dropdown menus show a scrollbar (even when not needed) */
.react-select__menu-list {
  max-height: 200px !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable; /* supported in modern browsers */
}

/* New rule to force inputs inside .input-wrapper to fill available width */
.input-wrapper .form-input {
  flex: 1 1;
  width: 100%;
}

/* Char count */
.char-count {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
  text-align: right;
}

/* Base (desktop) => side by side */
.date-time-row {
  display: flex;
  flex-direction: row; /* side by side */
  gap: 30px; /* or 60px, etc. */
}

.date-field {
  width: 30%;
  max-width: 100%;
  box-sizing: border-box;
}

.date-field input[type="datetime-local"] {
  width: 100%;
  box-sizing: border-box;
}

/* Make the checkbox and label align perfectly on one row */
/* Force row layout for the checkbox row */
.checkbox-row {
  display: flex; /* ensures horizontal layout */
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.checkbox-row input[type="checkbox"] {
  margin: 0; /* remove default top margin */
  transform: translateY(0);
  vertical-align: middle; /* keep it aligned with text baseline */
}

.checkbox-label {
  margin: 0; /* ensure it doesn't push text or checkbox */
  line-height: 1.2; /* nice balanced line-height */
  cursor: pointer; /* let users click on label */
}

.filter-label:hover .checkbox-label {
  color: #f44b79; /* Hover effect for labels */
}

/* Buttons group */
.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

/* Overlay for Add Business Success */
.success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.success-message {
  background: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.success-title {
  color: #f4af1b;
  font-size: 2rem;
  font-family: "Comic Sans MS", cursive, sans-serif;
  margin-bottom: 15px;
}

.success-text {
  color: white;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* Input and Textarea Styles */
.form-input,
.form-textarea {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #0b2533;
}

.form-textarea {
  resize: vertical;
}

.submit-button,
.cancel-button {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: "Montserrat", sans-serif;
}

.submit-button {
  background-color: #000000;
  color: #ffffff;
}

.submit-button:hover {
  background-color: #333333;
}

.cancel-button {
  background-color: #f2f2f2;
  color: #333333;
}

.cancel-button:hover {
  background-color: #e0e0e0;
}

/* Hero Section Styling */
.hero-section {
  text-align: center;
  padding: 40px 20px;
  background-color: #f8f8f8;
}

.hero-title {
  font-size: 1.5rem; /* or whatever desktop size you prefer */
  font-weight: 700;
  margin-bottom: 20px;
  color: #0b2533;
  text-align: center;
}

/* Hero Section */
.hero-text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  color: #484848;
  max-width: 800px;
  margin: 40px auto 20px;
}

/* Hero Section */
.hero-tagline {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: #333;
  animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes underline {
  0%,
  100% {
    text-decoration: none;
  }
  50% {
    text-decoration: underline;
    -webkit-text-decoration-color: #f44b79;
            text-decoration-color: #f44b79; /* Modern highlight color */
    text-decoration-thickness: 2px;
  }
}

/* Keyframes for Repetitive Bounce */
@keyframes repetitiveBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Community Impact Section */
.community-impact {
  margin-top: 70px;
  text-align: center;
}

/* Community Impact Title */
.community-impact-title {
  font-size: 2rem;
  font-weight: 700;
  color: #222222;
  margin-bottom: 40px;
}

/* Community Impact Cards */
.community-impact-cards {
  display: flex;
  justify-content: center;
  gap: 55px;
  margin-bottom: 30px;
}

/* Impact Cards */
.impact-card {
  background: #f7f8fa;
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 180px;
}

/* Punchline and Community Impact Section */
.punchline-text {
  font-size: 1.4rem;
  font-weight: 500;
  color: #0b2533;
  margin-bottom: 40px;
}

.impact-stats {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  text-align: center;
  margin-bottom: 40px;
}

/* Adjusted Parent Container */
.add-business-container {
  padding-top: 80px;
  padding-bottom: 50px;
  margin: 0 auto;
  max-width: 1000px;
  box-sizing: border-box;
}

/* Blur effect for background */
.add-business-container.blur {
  filter: blur(8px);
  pointer-events: none;
  z-index: 1000;
}

.hero-tagline,
.add-business-title {
  text-align: center;
  margin: 0 auto;
  padding-bottom: 20px;
}

/* Impact Icons */
.impact-icon {
  font-size: 2rem;
  color: #ff385c;
  margin-bottom: 10px;
}

.impact-card-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #222222;
}

.impact-card-label {
  font-size: 0.9rem;
  color: #717171;
}

.impact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.impact-item .stat {
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 8px;
  color: #0b2533;
}

.impact-item .label {
  font-size: 1rem;
  color: #777;
}

/* Add Business Form */
.add-business-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #0b2533;
  margin-bottom: 20px;
}

/* Add Business Form Section */
.add-business-section {
  text-align: center;
  margin-bottom: 50px;
}

.add-business-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.add-business-form-section {
  text-align: left;
  margin-top: 50px;
}

.add-business-form input,
.add-business-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  font-size: 1rem;
}

.add-business-form input:focus,
.add-business-form textarea:focus {
  outline: none;
  border: 2px solid #000;
  background-color: #ffffff;
}

.add-business-form textarea {
  height: 100px;
  resize: vertical;
}

.form-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.form-input,
.form-textarea {
  width: 100%;
  max-width: 5000px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #0b2533;
  box-shadow: 0 0 8px rgba(11, 37, 51, 0.2);
}

.form-textarea {
  resize: vertical;
  height: 150px;
}

.form-buttons {
  display: flex;
  justify-content: center; /* center them side by side */
  gap: 10px; /* spacing between buttons */
  margin-bottom: 10px;
}

.form-buttons button {
  flex: 1 1;
  min-width: 140px; /* Enough space so "Add Business" fits on one line */
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 6px;
  white-space: nowrap; /* Prevent text from wrapping to next line */
  display: inline-flex; /* Center text nicely */
  align-items: center;
  justify-content: center;
}

.submit-button,
.cancel-button {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: "Montserrat", sans-serif;
  width: auto;
}

.submit-btn {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

/* Button Hover Effects */
.submit-btn:hover,
.cancel-btn:hover {
  transform: scale(1.05);
  background-color: #333;
}

.cancel-btn {
  background-color: transparent;
  color: #484848;
  border: 1px solid #e3e3e3;
  padding: 10px 15px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.cancel-btn:hover {
  background-color: #f0f0f0;
  color: #000;
  transform: scale(1.05);
}

/* General Styles */
h1,
h2 {
  font-family: "Montserrat", sans-serif;
}

h2 {
  font-size: 1.5rem;
  color: #0b2533;
  margin-bottom: 20px;
}

/* Confetti Overlay */
.confetti-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;
}

.confetti-message {
  text-align: center;
  color: #ffffff;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

.confetti-message h2 {
  font-size: 5.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.confetti-message p {
  font-size: 3.2rem;
  font-weight: bold;
}

/* Full-Screen Overlay for Thank You Message */
.thank-you-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Thank You Message Container */
.thank-you-message {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  animation: fadeInScaleUp 0.7s ease-in-out;
}

/* Animation for the text */
@keyframes fadeInScaleUp {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Thank You Text Styles */
.thank-you-title {
  font-family: "Dancing Script", cursive;
  font-size: 2.5rem;
  font-weight: bold;
  color: #004d40;
  margin-bottom: 20px;
}

.thank-you-text {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  color: #333333;
  line-height: 1.6;
}

/* Continue Button Style */
.continue-btn {
  background-color: #f39c12;
  color: #ffffff;
  font-size: 1rem;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
}

.continue-btn:hover {
  background-color: #e67e22;
}

/* Overlay Box Styling */
.overlay-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
  padding: 30px;
  text-align: center;
  z-index: 1001;
}

.overlay-title {
  font-size: 2.5rem;
  font-family: "Poppins", sans-serif;
  color: #004080;
  margin-bottom: 20px;
}

.overlay-message {
  font-size: 1.4rem;
  font-family: "Poppins", sans-serif;
  color: #555555;
  margin-bottom: 30px;
}

.overlay-select {
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 xmlns=%27http:%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath fill=%27%23000000%27 d=%27M0 0l5 5 5-5H0z%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 10px 6px;
}

.close-button:hover {
  color: #000;
}

.blur {
  filter: blur(8px);
  pointer-events: none;
}

.content-blur {
  filter: blur(8px);
  pointer-events: none;
}

/* Spinner Styling */
.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #ffffff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Spinner when inside the light overlay */
.spinner-overlay .spinner {
  border: 4px solid rgba(0, 0, 0, 0.1); /* Darker, less opaque border */
  border-top: 4px solid #333; /* Darker spinning part */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* For an inline spinner that’s small, define something like: */
.spinner-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border-top-color: #000; /* or brand color */
  animation: spin 1s linear infinite;
  margin-left: 8px; /* little spacing to the left */
}

.spinner-white {
  border-top-color: #fff !important;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Adjust map-container to ensure it fills its parent */
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Custom Marker Icon */
.custom-marker-icon {
  font-size: 24px;
  color: #ff385c;
  background: white;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Info Window Styles */
.info-window {
  font-family: "Montserrat", sans-serif;
  max-width: 200px;
}

.info-window-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0;
}

.info-window-category,
.info-window-address,
.info-window-description {
  font-size: 0.9rem;
  color: #555;
  margin: 5px 0;
}

.info-window-price {
  font-size: 1rem;
  color: #777;
}

/* Info Message Styling */
.info-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9; /* Light gray background */
  color: #333; /* Dark gray text */
  border: 1px solid #ddd; /* Subtle border */
  padding: 15px;
  margin: 20px auto;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
  max-width: 500px; /* Keep it compact */
  text-align: center;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08); /* Soft shadow */
}

/* Map Page Layout */
.map-page {
  display: flex;
  height: calc(100vh - 64px);
}

/* Popup Styling */
.map-popup {
  font-family: "Montserrat", sans-serif;
  max-width: 200px;
}

.map-popup h3 {
  font-size: 1rem;
  font-weight: bold;
  margin: 0;
}

/* Ensure the map popups have appropriate styles */
.map-popup h3.info-window-title {
  margin-bottom: 5px;
}

.map-popup p {
  font-size: 0.9rem;
  color: #717171;
  margin: 5px 0;
}

.map-popup p.info-window-category,
.map-popup p.info-window-address {
  margin: 0;
}

/* Clickable popup hover state */
.map-popup:hover {
  background-color: #f8f8f8;
}

/* Directions button in popup */
.map-popup-directions-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #F44B79 0%, #DA2A58 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.map-popup-directions-btn:hover {
  background: linear-gradient(135deg, #e8386a 0%, #c1254e 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(244, 75, 121, 0.3);
}

.map-popup-directions-btn:active {
  transform: translateY(0);
}

/* Current location marker - Blue pulsing dot showing user's GPS position */
.current-location-marker {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Solid blue dot in center */
.current-location-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #4285F4; /* Google Maps blue */
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* Pulsing ring animation */
.current-location-pulse {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgba(66, 133, 244, 0.3);
  border-radius: 50%;
  animation: pulse-animation 2s ease-out infinite;
  z-index: 1;
}

/* Pulse animation - Grows and fades out */
@keyframes pulse-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Reduce animation for users who prefer reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .current-location-pulse {
    animation: none;
    opacity: 0.3;
  }
}

/* Mapbox attribution positioning - Align with recenter button */
.mapboxgl-ctrl-bottom-left {
  bottom: 80px !important;
  left: 10px !important;
}

.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* Recenter button - Floating control to return map view to user's location */
.map-recenter-button {
  position: absolute;
  bottom: 80px;
  right: 10px;
  width: 44px;
  height: 44px;
  background: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #64748b;
  transition: all 0.2s ease;
  z-index: 1;
}

.map-recenter-button:hover {
  background: linear-gradient(135deg, #F44B79 0%, #DA2A58 100%);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(244, 75, 121, 0.3);
}

.map-recenter-button:active {
  transform: scale(0.95);
}

/* Mobile adjustments - Larger touch target and positioning */
@media (max-width: 767px) {
  .map-recenter-button {
    width: 48px;
    height: 48px;
    bottom: 90px;
    right: 10px;
    font-size: 20px;
  }
}

.map-wrapper {
  flex: 1 1;
  max-width: 50%;
  height: 400px;
  padding: 10px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Map Toggle Button */
.map-toggle-button {
  position: fixed;
  bottom: 2rem;

  background-color: #000;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 20; /* Ensure it appears above the map */
  cursor: pointer;
}

.map-toggle-button:hover {
  background-color: #555555;
}

.map-toggle-button svg {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

/* Full-Screen Map Mode */
/* .full-map (the container that wraps the entire map) */
.full-map {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: calc(100vh - 64px); /* fill the rest of the screen below header */
  overflow: hidden;
}

/* Adjust marker scaling transition */
.marker-scale {
  transition: transform 0.2s;
}

/* Align "Businesses Near You" with Business Cards */
.listings-container {
  text-align: center; /* Center the heading */
  padding: 0 20px; /* Add padding to ensure proper spacing */
}

.listings-container h2 {
  font-size: 1rem; /* Adjust font size for better visibility */
  margin-bottom: 20px; /* Add spacing below the heading */
}

/* Map Area Container */
.map-area-container {
  width: 100%;
  height: calc(100vh - 0px); /* Adjusted for header height */
  position: relative;
}

body.map-open .footer {
  display: none !important;
}

.skeleton-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

/* Skeleton Card */
/* .skeleton-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #f2f2f2;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  min-height: 320px;
} */

/* Skeleton Card (polished) */
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* keeps thumbnail + lines neatly spaced */
  background-color: #fafafa; /* light neutral: no visual weight */
  border-radius: 12px;
  overflow: hidden; /* trims shimmer at edges */
  /* no box‑shadow, no fixed width/height */
}

/* Apply the same shimmering background and animation to thumbnail and text */
.skeleton-thumbnail,
.skeleton-text {
  background: linear-gradient(
    to right,
    #f0f0f0 0%,
    #e0e0e0 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}

/* Skeleton Thumbnail (mimic card image area) */
.skeleton-thumbnail {
  width: 100%;
  height: 160px; /* or whatever your real card uses */
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #e0e0e0;
}

/* Text line size */
.skeleton-text {
  width: 80%;
  height: 16px;
  margin-top: 8px;
}

/* Lines for shimmer text placeholders */
.skeleton-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line {
  height: 15px;
  background-color: #e0e0e0;
  border-radius: 4px;
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-card:nth-child(3n + 2) {
  margin: 0 !important; /* Forces it back to zero */
}

/* Shimmer Effect */
.shimmer {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(to right, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
  background-size: 200% 100%;
}

.skeleton-card:nth-child(2) .shimmer {
  animation-delay: 0.1s;
}
.skeleton-card:nth-child(3) .shimmer {
  animation-delay: 0.2s;
}
.skeleton-card:nth-child(4) .shimmer {
  animation-delay: 0.3s;
}

/* Skeleton Shimmer Keyframes */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.filter-button-container {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0 20px 10px;
}
/* Existing filter-button styles updated for capsules */
.filter-button {
  background-color: #000; /* Black background for default state */
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px; /* Rounded corners for capsule-like appearance */
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s ease-in-out;
}

.filter-button:hover {
  background-color: #333333; /* Darker on hover */
}

/* Filter Options */
.filter-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  max-height: 50vh; /* ✅ Limit vertical height */
  overflow-y: auto; /* ✅ Scroll within the capsule list */
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.filter-label input[type="checkbox"] {
  accent-color: #0b2533; /* Custom checkbox color */
  transform: scale(1.2); /* Slightly larger checkboxes */
}

/* Badge for number of selected filters */
.filter-badge {
  display: inline-block;
  background-color: #f44b79;
  color: white;
  padding: 3px 8px;
  margin-left: 8px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: bold;
}

/* Filter Capsule Styling */
.filter-capsule {
  background-color: #f9f9f9;
  color: #333;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  border-radius: 25px; /* Capsule shape */
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-options .filter-capsule {
  padding: 10px 20px;
  border-radius: 50px; /* Capsule-like shape */
  background-color: #f9f9f9;
  color: #333;
  border: 1px solid #ccc;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.filter-options .filter-capsule.selected {
  border-color: #007bff;
  background-color: #e6f0ff;
  color: #000;
}

.filter-options .filter-capsule:hover {
  background-color: #f0f0f0; /* Light grey on hover */
}

/* Overlay Content */
.filter-overlay-content {
  background: #ffffff;
  border-radius: 10px;
  max-width: 500px;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content within the overlay */
  position: relative;
}

/* Airbnb-Style Filter Button */
.filter-button.airbnb-style,
.add-business-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #ffffff; /* White background */
  color: #333; /* Dark text */
  border: 1.5px solid #e5e5e5; /* Slightly thicker border */
  border-radius: 8px; /* Rounded corners */
  padding: 10px 16px; /* Adjust padding for proper alignment */
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

.filter-button.airbnb-style:hover,
.add-business-button:hover {
  background-color: #f9f9f9; /* Slight hover effect */
}

.filter-button.airbnb-style-selected {
  border: 2px solid #333; /* Thicker black border when selected */
}

.filter-icon {
  font-size: 1.1rem;
  color: inherit; /* Matches text color */
}

/* Airbnb-Style Filter Badge */
.filter-badge.airbnb-style-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333; /* Black background */
  color: #fff; /* White text */
  border-radius: 50%; /* Ensure it's perfectly circular */
  width: 3px; /* Smaller width */
  height: 12px; /* Smaller height */
  font-size: 9px; /* Smaller font */
  font-weight: bold;
  position: absolute;
  top: -5px; /* Adjust position to align with the top-right edge */
  right: -10px; /* Ensure it doesn't overlap the text */
  border: 1px solid #ffffff; /* Thin white border for separation */
}

.add-business-icon {
  font-size: 1.1 rem; /* Match icon size with Filters button */
}

.filter-add-business-container {
  display: flex;
  justify-content: space-between; /* Spread buttons to the edges */
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px; /* Ensure alignment with cards' edges */
}

/* 1) The wrapper that positions the arrow icon. 
   Mobile-first: everything is 100% width, big tap targets. */
.select-container {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
}

.select-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1rem; /* slightly bigger text on mobile */
  font-family: "Montserrat", sans-serif;
}

/* 2) The custom select field. 
     - Remove native arrow with appearance: none
     - Provide space for the icon on the right 
     - Round corners 
     - Big padding for mobile 
  */
.overlay-select {
  width: 100%;
  padding: 12px 14px; /* bigger padding for mobile-friendly tap target */
  border: 1px solid #ccc;
  border-radius: 12px; /* "Better" radius, can be 8px, 10px, 12px, etc. */
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  color: #333;
  background-color: #fff;
  -webkit-appearance: none;
          appearance: none; /* remove default arrow */
  outline: none;

  /* Reserve space on the right for the FontAwesome icon. */
  padding-right: 40px;
}
.overlay-text {
  color: black; /* Ensures text is visible */
  background-color: white; /* Adds contrast */
  padding: 20px;
  border-radius: 10px;
}

/* 3) The FontAwesome down arrow icon. 
     Absolutely positioned on the right side. 
  */
.select-arrow {
  position: absolute;
  top: 50%;
  right: 14px; /* horizontally ~ 14px from edge */
  transform: translateY(-50%);
  font-size: 1rem;
  color: #666; /* slightly dim arrow color */
  pointer-events: none; /* so user can still click the select under icon */
}

/* 4) Focus state: black border, remove the default blue outline. */
.overlay-select:focus {
  border: 2px solid #000;
}

/* Extra: if you want a hover effect on desktop, can do: */
.overlay-select:hover {
  border-color: #999;
}

.react-select__control {
  border-radius: 12px;
  border-color: #ccc;
  min-height: 44px;
}
.react-select__menu {
  z-index: 9999;
}

/* Container to center the load-more button below the grid */
.load-more-container {
  margin: 20px auto; /* some vertical space */
  text-align: center; /* center the button horizontally */
}

/* The button itself => musDir style (similar to black “Add Business” buttons) */
.load-more-button {
  background-color: #000; /* black background */
  color: #fff; /* white text */
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  display: inline-block; /* Let it shrink to fit text */
  text-align: center;
}

/* Hover effect => darken */
.load-more-button:hover {
  background-color: #333;
  transform: translateY(-2px);
}

.business-list .load-more-button {
  grid-column: 1 / -1; /* spans all columns */
  justify-self: center; /* centers horizontally in the grid row */
  margin: 20px 0; /* some vertical space */
}

/* If you prefer no “lift” effect, remove transform. */
/* Also adjust to your brand’s style if needed. */

/* ============ VERIFY EMAIL PAGE STYLING ============ */

/* Outer wrapper */
.verify-email-page {
  margin-top: 100px; /* Ensures it appears below the fixed header */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* or center if you want vertical center */
  min-height: calc(100vh - 64px); /* subtract header height if needed */
}

/* 1) Remove the container box-shadow/border from .verify-email-container */
.verify-email-container {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  /* Remove box-shadow below */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); <-- comment or remove this line */
  width: 90%;
  max-width: 500px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

/* Heading for success/error */
.verify-email-heading {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.verify-email-success {
  color: green;
}

.verify-email-error {
  color: red;
}

/* The message paragraph (e.g. while "Verifying your email...") */
.verify-email-message {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #666;
}

/* 2) Make .verify-email-button and .resend-button consistent in size & style */
.verify-email-button,
.resend-button {
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem; /* same font size */
  padding: 12px 20px; /* same padding */
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: background-color 0.2s ease;
  display: inline-block;
  width: 50%;
  text-align: center; /* center label text */
  margin: 5px auto; /* optional if you want spacing */
}

.verify-email-button:hover,
.resend-button:hover {
  background-color: #333333;
}

.signup-success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Overlay container enhancements */
.signup-success-overlay-content {
  background-color: white;
  padding: 2rem;
  border-radius: 12px;
  max-width: 400px; /* Limit how wide it can get */
  width: 90vw; /* Fill most of screen on mobile */
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto; /* Center horizontally */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Container for the green check icon */
.signup-success-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

/* Big green checkmark icon */
.success-check-icon {
  color: #4caf50; /* A nice green shade */
  font-size: 7rem; /* Larger icon size */
  align-content: center;
}

.warning-icon {
  font-size: 50px;
  color: #e6a100; /* a gold/yellow color */
}
.success-check-icon {
  font-size: 50px;
  color: #28a745; /* Green color */
}

/* Error Icon */
.error-x-icon {
  color: #f44336; /* Red color */
  font-size: 5rem; /* Large icon size */
}
/* Make the success header stand out */
.success-header {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

/* The paragraph text below the header */
.success-message-text {
  font-size: 1rem;
  line-height: 1.4;
  color: #333;
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Review Pending Overlay — Slice W3
   Quality bar: Uber/Yelp/Airbnb. Self-contained, NOT inheriting from the
   legacy `.overlay-content` chain. Founder defect 2026-05-09 (PR #24):
   prior version produced a white tail below OK button via inherited
   sizing + auto-dismissed at 2.5/3.5s which read as "didn't get to read it
   in time." Modals don't auto-dismiss; toasts do.
   PR #22 introduced the pending-vocabulary overlay; PR #23 added the
   duplicate-guard variant; PR #24 (this) does the visual polish + drops
   auto-dismiss + scopes the namespace to .rpo-* so future tweaks stay
   contained.
   ═══════════════════════════════════════════════════════════════════════ */
.rpo-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100; /* above WriteReviewModal's 10000 */
  background: rgba(15, 23, 42, 0.55); /* slight blue-shift on the scrim */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: rpo-fade-in 200ms ease-out;
}

.rpo-card {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 360px;
  padding: 32px 24px 20px;
  text-align: center;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 20px 50px -12px rgba(15, 23, 42, 0.25);
  animation: rpo-rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Critical: explicit content sizing, no inheriting flex-grow nor
     min-height from any ancestor. Card hugs its content. */
  height: auto;
  min-height: 0;
}

.rpo-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 14px;
  /* Subtle pulse — slower + smaller scale than ReviewList empty state.
     Less attention-grabbing because it's already inside a modal. */
  animation: rpo-pulse 2.4s ease-in-out infinite;
}

.rpo-headline {
  margin: 0 0 6px;
  font-family: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f172a;
  line-height: 1.25;
}

.rpo-body {
  margin: 0 0 22px;
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #475569;
}

.rpo-cta {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: #0f172a;
  color: white;
  border: 0;
  border-radius: 12px;
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 150ms ease-out, transform 100ms ease-out;
}

.rpo-cta:hover {
  background: #1e293b;
}

.rpo-cta:active {
  transform: scale(0.98);
}

.rpo-cta:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

@keyframes rpo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rpo-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rpo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* prefers-reduced-motion — kill the entrance + pulse animations */
@media (prefers-reduced-motion: reduce) {
  .rpo-overlay,
  .rpo-card,
  .rpo-icon {
    animation: none !important;
  }
  .rpo-cta {
    transition: none;
  }
}

/* ---------- ADDED CLASSES FOR VERIFY EMAIL PAGE ---------- */

/* “Token Expired” heading in red. You can tailor it. */
.token-expired-title {
  color: red;
  margin-bottom: 1rem;
}

/* Container for the resend flow */
.resend-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.75rem;
}

/* The email input for resending link */
.resend-email-input {
  width: 80%;
  max-width: 300px;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* For the status text after attempting resend */
.resend-status-text {
  margin-top: 0.5rem;
  color: #666;
  font-size: 0.95rem;
}

/* Suspended Overlay */
.suspended-overlay-content {
  background-color: #fff; /* or a slight red tint, e.g. #ffe8e8 if you prefer */
  border: 2px solid red;
  text-align: center;
  border-radius: 8px;
  padding: 20px;
}

.suspended-icon-container {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.suspended-x-icon {
  color: red;
  font-size: 5rem;
}

.suspended-header {
  color: red;
  margin-bottom: 1rem;
}

.suspended-message-text {
  color: #555;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* Custom toast style */
.custom-toast {
  background-color: #ffffff; /* White background */
  color: #333; /* Text color */
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Override default progress bar color */
.Toastify__progress-bar {
  background-color: #da2a58 !important; /* Apply your custom color */
  animation: leftToRightProgress 5000ms linear !important;
  animation: leftToRightProgress var(--toastify-auto-close, 5000ms) linear !important;
  transform-origin: left; /* Anchor the animation to start from the left */
}

/* Override the toast icon color */
.Toastify__toast--info .Toastify__toast-icon {
  color: #da2a58 !important; /* Apply your custom color */
}

/* Example for success and warning toasts */
.Toastify__toast--success .Toastify__toast-icon {
  color: #28a745; /* Green for success */
}

.Toastify__toast--warning .Toastify__toast-icon {
  color: #ffc107; /* Yellow for warning */
}

@keyframes leftToRightProgress {
  from {
    transform: scaleX(0); /* Start at 0% width */
  }
  to {
    transform: scaleX(1); /* Expand to 100% width */
  }
}

.overlay-content .close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: #333; /* dark enough against white */
  font-size: 1.5rem; /* larger tap target */
  padding: 4px; /* extra touch area */
  cursor: pointer;
  z-index: 1000;
}

.overlay-content .close-button:hover {
  background-color: transparent !important; /* Removes black hover effect */
}

.profile-dropdown .dropdown-item {
  display: block;
  width: 100%; /* ensures full-width matching other dropdown links */
  padding: 8px 16px; /* matches padding with Link items */
  text-align: left; /* aligns text left like others */
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.profile-dropdown .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.input-prefix {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  pointer-events: none;
}

/* === Event date / time / zone layout ========================== */
.date-time-row {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap; /* side‑by‑side by default */
}

.date-field,
.tz-field {
  flex: 1 1 33%;
  min-width: 0; /* let them shrink gracefully */
}

/* Align react‑select height with <input class="form-input"> */
.tz-field .react-select__control {
  min-height: 48px; /* same as your .form-input */
  height: 48px;
  box-sizing: border-box;
  padding: 0 0.5rem; /* optional: matches the input’s side padding */
}

/* color & bounce for the arrow */
:root {
  --brand-accent: #da2a58; /* your accent */
}

/* in styles.css */

/* make that little TZ abbreviation smaller and lighter */
.tz-text {
  font-size: 0.8em;
  color: #666;
  margin-left: 4px;
}

.time-arrow {
  color: #da2a58 !important;
  color: var(--brand-accent) !important;
  margin: 0 6px;
  animation: bounceForward 1.2s infinite ease-in-out;
}

@keyframes bounceForward {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

.discovery-tabs-container {
  padding: 1rem;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  border-bottom: 1px solid #eee;
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.85rem;
  padding: 0.5rem;
  color: #555;
  border: none;
  background: none;
  cursor: pointer;
}

.tab-btn.active {
  color: #da2a58;
  font-weight: bold;
  border-bottom: 2px solid #da2a58;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem; /* <-- Increase spacing between cards */
  margin-top: 1rem;
  padding: 0 1rem;
  box-sizing: border-box;
  padding-bottom: 10px;
  max-width: 1400px; /* Prevent cards from becoming too large on wide screens */
  margin-left: auto;
  margin-right: auto;
}

/* Tablet */
@media (min-width: 640px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 10px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: 10px;
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  .card-list {
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 10px;
  }
}

/* Responsive Design for Smaller Screens */
@media (max-width: 992px) {
  /* Adjust business list to single column with proper alignment */
  .business-list {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
    gap: 20px;
    padding: 15px;
  }

  .skeleton-list {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-top: 5px;
  }

  .user-profile {
    max-width: 800px;
  }
}

@media (max-width: 768px) {
  .home-page {
    padding-top: 20px;
  }
  /* Big page title */
  .page-title {
    margin-top: 0;
  }

  .skeleton-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    /* If you didn't reset the width, it'd stay 1200px on mobile */
    width: 100% !important; /* Force it to fit screen width */
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 10px;
  }

  .skeleton-card {
    width: 100% !important;
    max-width: 100% !important; /* Ensure no leftover 300px, etc. */
    margin: 10px 0;
  }

  .skeleton-thumbnail {
    height: 100px; /* Adjust thumbnail height for smaller screens */
  }

  .business-list {
    grid-template-columns: repeat(
      auto-fit,
      minmax(300px, 1fr)
    ); /* 1 or 2 cards per row */
    gap: 20px;
  }

  .business-map-section {
    flex-direction: column;
  }

  .listings-container,
  .map-area-container {
    width: 100%;
  }

  .listings-container h2 {
    text-align: left; /* Align left for smaller screens */
    padding-left: 18px; /* Adjust padding for smaller devices */
    font-size: 1rem;
  }

  /* User Profile Page */
  .user-profile-page {
    margin: 100px 20px 50px 20px;
    padding: 15px;
  }

  .hero-title,
  .section-title {
    font-size: 1.2rem; /* smaller on mobile screens */
    margin-top: 10px; /* push down a bit from the header */
  }

  .hero-title {
    font-size: 1.4rem; /* Example smaller size so it fits in one line */
    line-height: 1.3; /* Tweak as needed */
  }

  .sliding-text-container {
    width: 160px; /* Smaller container on mobile if needed */
  }

  /* Header Adjustments */
  .header-content {
    padding: 0 15px; /* Reduce padding for smaller screens */
    flex-direction: row;
    align-items: center;
  }

  .app-logo {
    height: 200px; /* Smaller logo on mobile */
  }

  /* Content Adjustments */
  .content {
    flex: 1 1;
    margin-top: 50px; /* Adjust this to match the header height */
  }

  .nav-links {
    gap: 10px;
  }

  .nav-links a,
  .header-link {
    font-size: 0.9rem;
    padding: 8px 10px;
  }

  /* Header Right Container */
  .header-right {
    display: flex;
    align-items: center;
    margin-right: -20px;
    gap: 5px;
  }

  .header-right a {
    text-decoration: none;
    color: #333;
    font-size: 12px;
    font-weight: 100;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .hero-tagline {
    font-size: 1.2rem;
    margin-top: 20px;
  }

  /* Center the hero content & reduce any extra widths */
  .hero-content {
    width: 100%;
    max-width: 600px; /* or smaller if you like */
    margin: 0 auto;
    padding: 20px 16px;
    text-align: center;
    box-sizing: border-box;
  }

  /* 2) Stack the search bar items and remove any wide widths. */
  /* If there’s leftover hero-search CSS that sets widths, remove them */
  .hero-search {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
  }
  /* The search-bar container itself */
  /* Stack the search bar */
  .search-bar {
    flex-direction: column;
    width: 100%;
    max-width: 100%; /* let it fill the container */
    margin-bottom: 20px;
    border-radius: 8px;
    padding: 8px;
  }

  /* Also ensure .search-bar-container and .search-bar are 100% */
  .search-bar-container,
  .search-bar {
    width: 100% !important;
    /* Ensure no left/right padding or margin is pushing it off center */
  }
  /* Hide the vertical divider on small screens */
  .divider {
    display: none;
  }

  /* Apply a gray background to the location wrapper */
  .location-wrapper {
    border-radius: 8px;
    padding: 0.1rem; /* Optional: add some padding for a "capsule" feel */
  }

  /* Each input goes full width */
  .query-wrapper,
  .location-wrapper {
    background-color: #f2f2f2; /* Match the query background color */
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 15px;
  }

  .footer-left {
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    margin-bottom: -30px;
    margin-top: -20px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 10px;
  }

  /* Fix: Social icons fully centered in mobile */
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
  }

  .footer-overlay-content {
    width: 90%;
    max-width: 100%;
    max-height: 85vh; /* Ensure the overlay fits within viewport */
    overflow-y: auto; /* Enable scrolling */
    padding: 20px;
  }

  .footer-overlay-content h2 {
    font-size: 18px; /* Adjust font size */
  }

  .footer-overlay-content p {
    font-size: 14px;
    line-height: 1.5;
  }

  .overlay-button {
    width: 100%; /* Make button full width for better tap experience */
  }

  .overlay-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    background: none;
    border: none;
    color: #333;
  }

  .footer-overlay-content {
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
  }
  /* Business Map Container */
  .business-map-container {
    flex-direction: column;
    gap: 20px;
    padding: 10px;
  }

  .business-nearby-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .map-wrapper {
    height: 250px; /* Smaller map height */
    max-width: 100%;
  }

  .map-toggle-button {
    bottom: 0.5rem; /* Raise slightly above footer on mobile */
    right: 2;
  }

  /* Each input row has a bit of spacing */
  .input-wrapper {
    margin-bottom: 0.5rem; /* some vertical gap */
    position: relative !important; /* ensure suggestions can align under input */
  }

  /* 4) The search button can be full-width at the bottom. */
  .search-button {
    width: 100%;
    margin-top: 8px; /* spacing above the button */
    border-radius: 6px; /* unify the border radius */
    padding: 0.5rem 1.5rem; /* Increase for a bigger button on mobile */
    font-size: 1rem;
  }

  /* Make sure the inputs and the button are wide enough */
  .search-input,
  .location-input {
    width: 100%;
    font-size: 16px;
    margin: 0;
  }

  .search-input {
    width: 100%;
    padding: 10px 40px 10px 20px;
    font-size: 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: #f2f2f2;
    outline: none;
    font-family: "Montserrat", sans-serif;
    transition: background-color 0.2s ease, border 0.2s ease;
  }

  .business-card .business-name,
  .business-card .business-address,
  .business-card .business-contact,
  .business-card .business-description,
  .business-card .tags {
    font-family: inherit; /* Inherit font from the parent */
  }

  .business-card {
    width: 90%; /* Adjust card width to fit smaller screens */
    max-width: none;
    min-height: 300px; /* Adjust height for mobile */
    font-family: "Montserrat", sans-serif;
  }

  .business-details {
    padding: 10px 15px; /* Adjust padding inside the card */
    text-align: center; /* Align text to the left */
  }

  /* Location row (address / contact) 
   Replaces inline style: display: flex; align-items: center; gap: 6px; etc. */
  .location-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    margin-bottom: 5px; /* Some spacing between the rows */
  }

  /* Community Impact Cards */
  .community-impact-cards {
    flex-direction: column;
    gap: 20px;
  }

  .impact-card {
    width: 100%;
  }

  /* Adjusted Parent Container */
  .add-business-container {
    padding: 20px;
  }

  /* Add Business Form */
  .add-business-form {
    width: 100%;
  }

  /* Add some margin-bottom on the container or form to avoid overlapping the footer */
  .add-business-container,
  .add-event-form {
    margin-bottom: 80px; /* ensures there's space for the footer */
  }

  /* Button Group */
  .button-group {
    flex-direction: column;
    gap: 10px;
  }

  /* Map Page */
  .map-page {
    flex-direction: column;
  }

  .filter-overlay-content {
    max-width: 90%;
    padding: 15px;
  }

  .header-title {
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
    flex: 1 1;
  }

  .filter-capsule {
    padding: 8px 16px;
    font-size: 0.9rem;
  }

  .button {
    padding: 10px;
    font-size: 0.9rem;
  }

  .date-time-row {
    flex-direction: column; /* stacked on mobile */
    gap: 16px; /* smaller gap for stacked items */
  }

  .date-field {
    width: 100%;
  }

  .signup-page {
    max-width: 80%; /* Fill most of the mobile screen width */
    margin: 0px auto 100px auto; /* Some space from top, maybe 60px if you have a sticky header */
    border-radius: 0; /* Remove rounding for a more “edge-to-edge” mobile look */
  }

  /* Stack the two buttons in one column, full width */
  .signup-button-group {
    flex-direction: row;
    align-items: stretch;
  }

  .signup-button,
  .cancel-button {
    width: 40%;
    margin: 5px 0; /* small vertical gap */
  }

  .signup-consent {
    flex-direction: row; /* Keep row layout */
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping if necessary */
  }

  .signup-consent input[type="checkbox"] {
    margin-top: 3px; /* Fine-tunes vertical alignment with the first line of label text */
    flex-shrink: 0; /* Prevents checkbox from shrinking if label text is long */
    /* Your existing width, height, cursor styles for this checkbox will be preserved */
    width: 18px; /* From your existing styles */
    height: 18px; /* From your existing styles */
    cursor: pointer; /* From your existing styles */
  }

  .signup-consent label {
    flex-wrap: wrap;
    align-items: center;
    margin-left: 5px; /* Space between checkbox and text */
    flex: 1 1; /* Allow label to take remaining space */
  }

  /* Links within Signup Consent Label */
  .signup-consent label a {
    color: #da2a58;
    color: var(--brand-accent, #da2a58); /* Use your brand accent color */
    text-decoration: underline;
    white-space: nowrap; /* Prevents links from breaking awkwardly if possible */
  }

  .signup-consent a {
    color: #da2a58;
    text-decoration: none;
    /* margin: 0 5px; */
    white-space: nowrap; /* Prevent links from breaking */
  }

  .signup-consent a:hover {
    text-decoration: underline;
    white-space: nowrap; /* Prevent links from breaking */
  }

  .error-message {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .error-message .error-icon {
    font-size: 1rem;
    margin-right: 10px;
  }

  /* Adjust the carousel arrow buttons for smaller screens */
  .carousel-arrow {
    width: 30px;
    height: 30px;
  }
  /* The scrollable row */
  .liked-businesses-list {
    padding: 5px 10px; /* Further reduce padding on smaller screens */
    gap: 15px; /* Reduce gap between cards */
    display: flex;
    flex-wrap: nowrap;
  }

  /* Reduce the min-width and set a max-width for liked-business-card */
  .liked-business-card {
    min-width: 150px; /* Allows cards to shrink on smaller screens */
    width: 90%; /* Occupy 80% of the container's width */
    max-width: 280px; /* Prevents cards from becoming too wide */
    padding: 8px;
    min-height: 300px;
    font-family: "Montserrat", sans-serif;
  }
  /* Ensure the carousel container is centered with appropriate padding */
  .carousel-container {
    padding: 0 5px; /* Reduced horizontal padding for mobile */
  }
  .right-arrow {
    right: 10px; /* similarly, adjust as needed */
  }

  .profile-tabs {
    flex-direction: column;
    gap: 10px;
  }

  .user-profile-tabs {
    flex-direction: column;
    gap: 8px; /* Adjust gap for stacked tabs */
    padding: 4px 0; /* Further reduce padding on smaller screens */
  }

  .user-profile-tabs .user-profile-tab {
    font-size: 0.85rem; /* Slightly smaller font on mobile */
    padding: 3px 6px; /* Further reduced padding */
  }

  .user-profile-tabs .user-profile-tab-icon {
    font-size: 0.5rem; /* Smaller icons on mobile */
  }

  .user-profile-tabs .user-profile-tab-status {
    width: 6px;
    height: 6px;
    top: 3px;
    right: 3px;
  }
  .user-profile {
    max-width: 600px;
    margin: 80px auto 50px auto;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .signup-title {
    font-size: 1.8rem;
  }

  .signup-form {
    gap: 20px;
  }

  /* Adjust suggestions-list to fill the container on mobile */
  .suggestions-list {
    max-width: 100%; /* Let the dropdown fill the container on mobile */
    width: 100%;
    margin: 2px 0 0 0; /* Adjusted margin for smaller screens */
  }

  /* Slightly larger padding for touch targets */
  .suggestions-list .suggestion-item {
    padding: 10px 14px; /* Slightly larger padding for better touch interaction */
    font-size: 14px; /* Slightly smaller font for better fit */
  }

  /* Adjust search button for mobile */
  .search-button {
    padding: 10px 20px; /* Ensure button is appropriately sized on mobile */
    font-size: 16px; /* Maintain readability */
  }

  /* Adjust clear-icon size and positioning for mobile */
  .clear-icon {
    right: 10px; /* Adjust positioning for smaller screens */
    width: 15px;
    height: 15px;
    font-size: 16px;
  }

  .address-clear-icon {
    right: 20px !important; /* slightly closer if needed on smaller screens */
  }

  .address-suggestions-list {
    max-width: 92%; /* no stretching beyond parent */
    margin-left: 5px;
    top: 80%; /* Position below the input */
  }

  .react-select__container {
    max-width: 100% !important;
  }

  .shareable-business-card {
    padding: 12px;
    border-radius: 6px;
    max-width: 90%;
  }

  .overlay-content {
    width: 95%;
    max-width: 100%;
    padding: 15px;
    margin-right: 35px; /* Small side margin so it’s not flush against edges */
  }

  .overlay-content h2 {
    font-size: 1.2rem;
  }

  .overlay-content button {
    padding: 10px;
    font-size: 0.9rem;
  }

  .quick-actions {
    justify-content: space-around; /* Example: spread them out */
  }
  .quick-actions .button.primary {
    flex-basis: 45%; /* Example: make them roughly half-width */
  }

  .card-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.75rem;
    padding-bottom: 20px;
  }

  .logout-overlay .overlay-content {
    max-width: 95%; /* Slightly wider on small screens */
    padding: 20px; /* Slightly less padding on mobile */
  }

  .reactivate-btn {
    padding: 5px 8px;
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-card {
    transition: none !important;
  }
  .business-card:hover,
  .business-card:active {
    transform: none;
    box-shadow: none;
    animation: none;
  }
  .business-icon {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer {
    animation: none !important;
  }
}

/* 1) Reduce overall spacing between rows for tighter, consistent lines */
.event-card {
  gap: 8px; /* was 12px */
}
.info-row {
  margin-bottom: 4px; /* override any larger bottom margins */
  line-height: 1.3; /* tighter line-height for consistency */
  display: flex;
  align-items: flex-start; /* ✅ icon and text block align at top */
  gap: 8px;
  flex-wrap: nowrap; /* keep icon and tag block on same row */
}

/* 2) Give the timezone label some breathing room from the time */
.timezone-label {
  margin-left: 4px; /* adds a small gap after the end-time */
}

@media (max-width: 480px) {
  .card-header-buttons .button-label {
    display: none;
  }
  .button-bar .back-button,
  .button-bar .share-button {
    padding: 4px 10px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    justify-content: center;
    font-size: 0.8rem;
  }

  .button-bar .back-button .button-label,
  .button-bar .share-button .button-label {
    display: none;
  }

  .button-bar button {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
  }

  .button-bar .button-label {
    display: none;
  }
  .business-detail-toolbar button {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0 12px;
    border-radius: 50%;
  }

  .business-detail-toolbar .button-label {
    display: none;
  }

  .flyer-panel-container {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .admin-flyer-card {
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  /* 1) Keep the card children flush-left */
  .event-card {
    align-items: flex-start !important;
  }

  /* 2) Only left-align the info rows */
  .info-row {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 4px;
    line-height: 1.3;
  }

  /* 3) But force the title back to centered */
  .business-name {
    width: auto !important; /* reset full-width */
    text-align: center !important; /* re-center the title */
  }

  /* 4) Small gap before the timezone */
  .timezone-label {
    margin-left: 4px;
  }

  .business-description-wrapper,
  .toggle-text,
  .business-description {
    width: 100% !important;
    text-align: left !important;
  }

  /* Hide the text */
  .business-detail-toolbar .button-label {
    display: none !important;
  }

  /* Turn the buttons into bare icons */
  .business-detail-toolbar .back-button,
  .business-detail-toolbar .share-button {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 12px !important; /* small gutter between icons */
    width: auto;
    height: auto;
  }

  /* Make the icons a touch-friendly size */
  .business-detail-toolbar .back-button svg,
  .business-detail-toolbar .share-button svg {
    font-size: 1.3rem; /* or whatever suits your design */
  }

  .business-detail-toolbar .button-label {
    display: none; /* hide “Back” / “Share” text */
  }

  .business-detail-toolbar .back-button,
  .business-detail-toolbar .share-button {
    padding: 8px; /* square tappable area */
    width: 40px;
    height: 40px;
    justify-content: center; /* center the icon */
    border-radius: 50%; /* round button */
  }

  .overlay-content .close-button {
    font-size: 1.8rem; /* even bigger on small screens */
    top: 8px;
    right: 8px;
  }
}

/* ─── Tighten Details → Description spacing ─── */
.business-detail-wrapper .business-detail-content .details-label {
  margin-bottom: 4px;
}
.business-detail-wrapper .business-detail-content .business-description {
  /* 4px above, keep 20px below for visual breathing room */
  margin: 0px 0 20px !important;
}

/* ─── Smaller tag pills on EventDetail ─── */
.business-detail-content .business-tags .tag {
  font-size: 0.6rem; /* down from ~0.9–1rem */
  padding: 2px 6px; /* down from ~4px 8px */
}

.business-detail-content .business-tags .icon-gap {
  font-size: 0.9em; /* shrink the tag icon slightly */
}

/* Compact Business Card */
.compact-business-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  max-width: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.compact-business-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compact-business-card .business-category {
  font-size: 0.9rem;
  color: #666;
}

.compact-business-card .business-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

/* Compact Event Card Styling */
.compact-event-card {
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  box-sizing: border-box;
  width: 100%;
}

/* Header and Title */
.compact-event-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compact-event-card .event-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #0b2533;
}

/* Date / Time / Location Row */
.compact-event-card .event-detail-row {
  font-size: 0.9rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.compact-event-card .event-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Align icon and text consistently */
.compact-business-card .info-row,
.compact-business-card .business-tags,
.compact-business-card .business-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; /* ✅ Explicit left alignment */
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.85rem; /* ✅ Uniform text size */
  font-weight: 500;
  color: #222; /* ✅ Stronger but not harsh */
  text-align: left;
}

/* Fix address alignment and wrap */
.compact-business-card .info-row span {
  flex: 1 1;
  line-height: 1.4;
  word-break: break-word;
  white-space: normal;
}

/* Normalize icons */
.compact-business-card .business-icon {
  font-size: 0.9rem;
  margin-top: 2px;
  color: #666;
}

/* Title stays slightly larger */
.compact-business-card .business-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #0b2533;
}
/* Common styling for info rows (Category, Address) in compact view */
.compact-business-card .location-row {
  /* Assuming you use .location-row for both category and address */
  display: flex;
  align-items: flex-start; /* Align items to the top, good if text wraps */
  gap: 6px; /* Space between icon and text */
  margin-bottom: 6px;
  font-size: 0.85rem;
  text-align: left; /* Ensure text within the row is left-aligned */
}

/* Span inside info-row for the text content */
.compact-business-card .location-row span {
  line-height: 1.4;
  word-break: break-word; /* Prevent long text from breaking layout */
  white-space: normal; /* Allow text to wrap */
  color: #333333; /* Consistent dark gray for text like address */
  font-weight: 400; /* Normal weight for address */
}

/* Specifically for the Category row text if different styling is needed */
.compact-business-card .business-category span {
  color: #555555; /* Slightly lighter for category, or match address if preferred */
  font-weight: 500; /* Medium weight for category */
}

/* Address specific class if you used .compact-address */
.compact-business-card .compact-address span {
  color: #333333; /* Darker for address */
  font-weight: 400;
}

/* Tags section in compact view */
.compact-business-card .business-tags.info-row {
  /* Assuming tags also use info-row structure */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  text-align: left;
}

/* Icons within compact card info rows */
.compact-business-card .business-icon {
  font-size: 0.9rem; /* Consistent icon size */
  color: #666666; /* Medium gray for icons */
  margin-top: 2px; /* Slight adjustment for vertical alignment with text */
  flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Actions for compact card */
.compact-business-card .business-card-actions.compact-actions {
  margin-top: auto; /* Push actions to the bottom if card is flex column */
  padding-top: 8px; /* Some space above actions */
  display: flex;
  justify-content: flex-start; /* Align action buttons to the start */
  gap: 12px;
}

.compact-business-card .compact-actions .action-button {
  /* Styles for like/bookmark buttons in compact view can be inherited or specific */
  font-size: 1rem; /* Smaller icons in compact actions */
}
.compact-business-card .compact-actions .like-count {
  font-size: 0.85rem; /* Smaller like count */
}

/* In styles.css */

/* General rules for info rows in compact event card */
.compact-event-card .info-row,
.compact-event-card .event-detail-row,
.compact-event-card .business-tags, /* Assuming tags section has .business-tags and .info-row */
.compact-event-card .event-card-actions {
  /* For actions alignment */
  display: flex;
  align-items: flex-start; /* Or 'center' if preferred for single lines */
  justify-content: flex-start;
  gap: 8px; /* Consistent gap between icon and text */
  font-size: 0.85rem; /* Consistent font size for details */
  color: #333; /* Consistent text color */
  text-align: left;
  margin-bottom: 6px; /* Consistent spacing below rows */
}

/* Consistent icon styling within compact event card */
.compact-event-card .business-icon {
  /* Re-use .business-icon for consistency */
  font-size: 0.9rem;
  color: #666;
  margin-top: 2px; /* Align with first line of text */
  flex-shrink: 0;
}

/* Ensure spans within these rows behave as expected */
.compact-event-card .info-row span,
.compact-event-card .event-detail-row span {
  line-height: 1.4;
  word-break: break-word;
}

/* Title styling for compact event card */
.compact-event-card .event-title {
  /* Already uses .business-name, so might inherit if general .business-name is styled */
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px; /* More space after title */
  color: #0b2533;
}

.compact-event-card .event-card-actions.compact-actions {
  margin-top: auto; /* Push actions to the bottom */
  padding-top: 8px; /* Some space above actions */
  display: flex;
  justify-content: flex-start; /* Align action buttons to the start */
  gap: 16px; /* <<< INCREASE THIS VALUE (e.g., from 10px or 12px to 16px or 20px) */
}

.search-status-label {
  text-align: left;
  font-size: 0.9rem;
  color: #555;
  margin: 12px 16px 4px;
}

.autosuggest-tags {
  display: flex; /* Added by me previously, might cause issues if tags are long */
  flex-wrap: wrap; /* Added by me previously */
  gap: 6px; /* Added by me previously */
  margin-top: 6px; /* Added by me previously */
  font-size: 12px; /* Added by me previously */
  color: #000; /* Added by me previously - Changed to black */
}

.autosuggest-tags .tag {
  background-color: #f2f2f2; /* Added by me previously */
  color: #000; /* Added by me previously - Changed to black */
  border: 1px solid #ccc; /* Added by me previously */
  padding: 4px 8px; /* Added by me previously */
  border-radius: 12px; /* Added by me previously */
  font-size: 12px; /* Added by me previously */
  font-weight: 500; /* Added by me previously */
  text-transform: capitalize; /* Added by me previously */
  white-space: nowrap; /* Added by me previously */
}

/* General .tag style */
.tag {
  display: inline-block;
  background-color: #f0f0f0;
  color: #333;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 15px;
  font-weight: 500;
  margin-right: 6px; /* <<< From general style, might apply */
}

.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
  gap: 8px;
  font-size: 0.9rem;
  color: #444;
}

.active-filters-label {
  font-weight: 600;
  color: #000;
}

.active-filter-pill {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
}

.clear-filters-btn {
  background: none;
  border: none;
  color: #da2a58;
  font-weight: bold;
  cursor: pointer;
  padding: 0 8px;
  font-size: 0.85rem;
}

.clear-filters-btn:hover {
  text-decoration: underline;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: 6px;
  line-height: 1;
  text-align: center;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.recent-searches-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px; /* Increased padding for better spacing (adjust as needed) */
  font-size: 0.9rem; /* Font size for "Recent Searches" text */
  font-weight: 600; /* Makes "Recent Searches" text bold */
  color: #333; /* Darker color for "Recent Searches" text */
  background-color: #f9f9f9; /* Light background for the header bar itself */
  border-bottom: 1px solid #f0f0f0; /* Subtle line separating header from list items */
}

.clear-recent-btn {
  background: none;
  border: none;
  color: #da2a58;
  font-size: 0.8rem;
  cursor: pointer;
}

.recent-searches-section {
  border-top: 1px solid #eee;
  margin-top: 6px;
  padding-top: 6px;
}

.blended-list {
  border-top: 1px solid #eee;
  padding-top: 6px;
}

/* parent container for both lists */
.combined-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: #fff;
  z-index: 999;
  overflow: hidden;
}

/* History icon spacing */
.history-icon {
  margin-right: 8px;
  color: #999;
  font-size: 0.85rem;
}

/* Separator between recent and autosuggest */
.dropdown-separator {
  height: 1px;
  background: #e0e0e0;
  margin: 0 4px;
}

/* tighten padding on lists */
.recent-list,
.autosuggest-list {
  max-height: 200px;
  overflow-y: auto;
}

.recent-list .suggestion-item,
.autosuggest-list .suggestion-item {
  padding: 8px 12px;
}

/* hover feedback */
.suggestion-item:hover {
  background: #f2f2f2;
}

/* “Clear” button styling, right‐aligned */
.clear-recent-btn {
  background: none;
  border: none;
  color: #da2a58;
  color: var(--brand-accent);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.clear-recent-btn:hover {
  text-decoration: underline;
}

.skeleton-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.skeleton-icon {
  width: 28px;
  height: 28px;
  background-color: #e0e0e0;
  border-radius: 50%;
  animation: shimmer 1.4s infinite linear;
  flex-shrink: 0;
}

.skeleton-text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-line {
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.4s infinite linear;
}

.skeleton-line.short {
  width: 40%;
}

.skeleton-line.long {
  width: 80%;
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.pill-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  font-family: "Inter", sans-serif;
}

.pill-option {
  position: relative;
  overflow: hidden;
  padding: 6px 14px;
  border: 1.5px solid #000;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s ease-in-out, color 0.2s;
}

.pill-option:hover:not(.active) {
  background-color: #999; /* Dark gray on hover */
  color: #fff;
}

.pill-option.active {
  background-color: #000;
  color: #fff;
}

.pill-option::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
  pointer-events: none;
}

.pill-option:active::after {
  width: 200%;
  height: 200%;
}

.member-since-text {
  font-size: 0.9rem;
  color: #666;
  margin-top: -10px;
  margin-bottom: 20px;
  text-align: center;
}

.profile-completion-reminder {
  background-color: #da2a58;
  color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
  text-align: center;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: opacity 0.25s ease-in-out;
}

.profile-completion-reminder.fade-out {
  opacity: 0;
}

.profile-reminder-link {
  color: #ffffff;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

.cluster-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid white;
  border-radius: 50%;
  background-color: #da2a58;
  color: white;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease-in-out;
}

/* Overlay container */
.share-overlay-airbnb {
  background: white;
  max-width: 480px;
  margin: 80px auto;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  position: relative;
  transform: translateY(40px);
  opacity: 0;
  animation: slideInUp 0.4s ease forwards;
}

@keyframes fadeIn {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

@keyframes slideInUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Header Section */
.share-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.share-header-icon {
  font-size: 32px;
  color: #da2a58;
  margin-bottom: 10px;
}

.share-modal-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.share-subtext {
  padding-bottom: 10px;
  font-size: 0.95rem;
  color: #555;
}

/* Icon Grid */
.share-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-top: 24px;
  text-align: center;
}

.share-icon-grid div {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border-radius: 12px;
  background-color: #f9f9f9;
  transition: background 0.2s;
}

.share-icon-grid div:hover {
  background-color: #eee;
}

.share-icon-grid > div {
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  text-align: center;
  padding: 0.5rem;
  border-radius: 8px;
}

.share-icon-grid > div:hover {
  transform: scale(1.05);
  background-color: rgba(0, 0, 0, 0.05);
}

.share-icon-grid > div:hover {
  transform: scale(1.05);
  background-color: rgba(0, 0, 0, 0.05);
}

.share-icon-grid svg {
  font-size: 22px;
  color: #0b2533;
  margin-bottom: 6px;
}

.share-icon-grid span {
  font-size: 0.85rem;
  font-weight: 500;
  color: #222;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.share-button-facebook svg {
  color: #3b5998 !important;
}

.share-button-instagram svg {
  color: #e1306c !important;
}
.share-button-tiktok svg {
  color: #000000 !important;
}

.share-button-sms svg {
  color: green !important;
}

.card-signature {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.card-contact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.9rem;
}

.contact-item a {
  color: #0b2533;
  text-decoration: none;
}

.card-tags-likes-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.tag-icon {
  margin-right: 4px;
  color: #555;
}

.card-likes {
  font-size: 0.85rem;

  font-weight: 500;
}

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 20px;
  text-align: center;
}

.logo-inline {
  vertical-align: text-bottom;
  height: 25px;
  margin-top: 10px;
}

/* Hero Header at Top */
.hero-header {
  margin-bottom: 24px;
  text-align: center;
}
.hero-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0b2533;
  margin-bottom: 8px;
}
.category-chip {
  background: #f0f0f0;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex; /* this is the key fix */
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px auto; /* auto centers inline element in block context */
  font-size: 1rem;
  font-weight: 500;
  color: #0b2533;
}
.hero-subtext {
  font-size: 1rem;
  color: #666;
  margin-top: 12px;
}

/* Section Headers */
.section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #0b2533;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
}

/* Contact / Address Info */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  color: #333;
}

/* Tag Styling */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.tag-pill {
  background-color: #f4f4f4;
  color: #222;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.back-button,
.share-button {
  background-color: white;
  color: #0b2533;
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}

.back-button:hover,
.share-button:hover {
  background-color: #f5f5f5;
}

.card-header-buttons button {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease;
}

.card-header-buttons button:hover {
  background-color: #f4f4f4;
}

.card-header-buttons .button-label {
  display: inline;
}

.card-header-buttons .back-button,
.card-header-buttons .share-button {
  background: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.9rem;
}

.card-header-buttons .back-button:hover,
.card-header-buttons .share-button:hover {
  background-color: #f4f4f4;
}

.button-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -40px auto 10px;
  padding: 0 20px;
  max-width: 800px;
  position: relative;
  z-index: 5;
}

.button-bar button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease;
  cursor: pointer;
}

.button-bar button:hover {
  background: #f4f4f4;
}

.button-bar .back-button,
.button-bar .share-button {
  background: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.button-bar .back-button:hover,
.button-bar .share-button:hover {
  background: #f4f4f4;
}

.business-detail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px auto 0 auto;
  max-width: 700px;
  padding: 0 16px;
}

.business-detail-toolbar .back-button,
.business-detail-toolbar .share-button {
  background-color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.business-detail-toolbar .back-button .button-label,
.business-detail-toolbar .share-button .button-label {
  display: inline;
}
.business-detail-toolbar button {
  background: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.business-detail-toolbar button:hover {
  background-color: #f4f4f4;
}

.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background: #f5f5f5;
}

.form-container {
  background: white;
  padding: 30px;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.field-error {
  color: red;
  font-size: 0.85rem;
  margin: 4px 0 10px 2px;
}

/* For inline validation error messages below each field */
.error-message-inline {
  color: #da2a58; /* Using your brand accent color for errors */
  font-size: 0.875em; /* Adjust as needed */
  margin-top: 5px; /* Space below the input */
  margin-bottom: 5px; /* Space before the next element */
  text-align: left; /* Align error messages to the left */
  display: block; /* Ensure it takes its own line */
}

/* For styling input fields that have an error */
.input-error {
  border-color: #da2a58 !important; /* Brand accent color for error border */
  /* You can add a subtle box-shadow for more emphasis if desired */
  /* box-shadow: 0 0 0 0.2rem rgba(218, 42, 88, 0.25); */
}

/* For styling the error message specifically for the terms checkbox group */
.checkbox-error-group .error-message-inline {
  margin-left: 0; /* If it's directly under the checkbox group */
  /* Add any other specific styles if needed */
}

/* Signup Consent Checkbox Area */
.signup-consent {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important; /* vertically center checkbox & first line of text */
  gap: 8px;
  margin-top: 5px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

/* For styling the label of the terms checkbox when there's an error */
.signup-consent label.label-error {
  color: #da2a58; /* Brand accent for the label text */
}

/* Signup Consent Label Text */
.signup-consent label {
  font-size: 0.9em;
  line-height: 1.4; /* Good for readability if text wraps */
  color: #333;
  flex: 1 1; /* Allows label to take available space */
  text-align: left; /* Ensures label text itself is left-aligned */
}

.signup-consent input[type="checkbox"] {
  margin-top: 3px; /* Fine-tunes vertical alignment of checkbox with the first line of text */
  flex-shrink: 0; /* Prevent checkbox from shrinking */
  /* Your existing width, height, cursor styles for this checkbox will be preserved */
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.signup-consent label a {
  color: #da2a58;
  color: var(--brand-accent, #da2a58); /* Use your brand accent color */
  text-decoration: underline;
  white-space: nowrap; /* Prevents links from breaking awkwardly if possible */
}
/* Accessibility class for visually hidden labels (used in Signup.js) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.live-badge-wrapper {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 42px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.live-badge-wrapper.compact-live {
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
}

.live-badge-animation {
  width: 90%;
  height: 90%;
}

.live-badge-pulse {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-badge-icon {
  width: 80px;
  height: 80px;
}

.live-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #da2a58;
}

/* Keep spinner-button disabled and greyed out */
.login-button:disabled,
.login-button[disabled] {
  background-color: gray;
  cursor: not-allowed;
  pointer-events: none; /* block any clicks */
}

.login-button:disabled:hover,
.login-button[disabled]:hover {
  background-color: gray; /* no hover color change */
}

/* Make the SMS-consent label sit inline */
.sms-consent {
  display: flex;
  align-items: center;
  gap: 8px; /* space between box + text */
  margin-bottom: 15px;
  font-size: 0.9rem;
}

/* specifically inline the SMS‐consent label inside our overlay */
.overlay-content .sms-consent {
  display: flex; /* override .overlay-content label {display:block} */
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.9rem;
}

/* pull the checkbox back into vertical center */
.overlay-content .sms-consent input[type="checkbox"] {
  margin-top: 0;
}

/* Force our signup-consent to be inline-flex despite the global .overlay-content label {display:block} */
.overlay-content .signup-consent {
  display: inline-flex !important;
  align-items: center; /* vertical-center the box and text */
  gap: 8px; /* space between checkbox + text */
  margin-top: 10px; /* keep your spacing from inputs above */
  font-size: 0.9rem;
}

.overlay-content .signup-consent input[type="checkbox"] {
  margin: 0; /* reset any block-level margins */
  /* keep your 18×18 sizing and cursor */
}

/* ─── 1) Override the absolute .back-button in the wrapper ─── */
.business-detail-toolbar .back-button {
  /* reset the absolute positioning coming from .business-detail-wrapper */
  position: relative !important; /* override top/left:16px rules */
  top: auto !important;
  left: auto !important;
  margin: 0 !important; /* drop any injected margins */
}

/* ——— Make the white modal box the positioned parent ——— */
.overlay .overlay-content {
  position: relative !important;
}

/* ——— Pin the “×” to its top-right corner inside that box ——— */
.overlay .overlay-content .close-button {
  position: absolute !important;
  top: 12px !important;
  left: 120px !important;
  z-index: 1000 !important;
}

/* Empty-state wrapper: center Lottie + text on all screens */
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: 200px;
  padding: 2rem 1rem;
}

/* Make empty-state span full grid width and center its contents */
.card-list > .empty-state,
.search-results-list > .empty-state {
  grid-column: 1 / -1; /* span all columns */
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal center */
  justify-content: center; /* vertical center */
  padding: 2rem 0; /* optional top/bottom breathing room */
}

.snap-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.snap-overlay-content {
  background: #fff;
  padding: 30px 20px;
  max-width: 400px;
  width: 90%;
  border-radius: 12px;
  position: relative;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

.snap-overlay-content h2 {
  font-size: 1.4rem;
  color: #0b2533;
  margin-bottom: 10px;
}

.snap-subtitle {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 20px;
}

.upload-box {
  border: 2px dashed #ccc;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 15px;
  color: #444;
}

.upload-box:hover {
  background-color: #f9f9f9;
}

.upload-icon {
  margin-right: 8px;
  color: #0b2533;
}

.snap-note {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  resize: vertical;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 10px;
}

.submit-button {
  background: #0b2533;
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}

.submit-button:hover {
  background: #333;
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-button:hover:not(:disabled) {
  background: #152f45;
}

.close-button {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 20px;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
}

.snap-flyer-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.snap-input-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.snap-upload-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 50px;
  border: 2px dashed #ccc;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.95rem;
  background-color: #f9f9f9;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.snap-upload-box:hover {
  background-color: #f0f0f0;
}

.snap-note {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  padding: 10px;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-family: "Montserrat", sans-serif;
  resize: vertical;
}

.success-check-icon {
  font-size: 48px;
  color: #28a745; /* green */
  margin-bottom: 10px;
}

.error-check-icon {
  font-size: 48px;
  color: #dc3545; /* red */
  margin-bottom: 10px;
}

.admin-dashboard-wrapper {
  max-width: 1200px;
  margin: 100px auto 40px;
  padding: 0 20px;
  font-family: "Montserrat", sans-serif;
}

.admin-dashboard-header {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0b2533;
  margin-bottom: 20px;
  text-align: center;
}

.admin-dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

.admin-tab-button {
  background-color: #fff;
  color: #0b2533;
  border: 2px solid #0b2533;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.admin-tab-button:hover {
  background-color: #f9f9f9;
}

.admin-tab-button.active {
  background-color: #0b2533;
  color: #fff;
  border-color: #0b2533;
}

.admin-dashboard-content {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.flyer-panel-container {
  padding: 0;
  margin: 0 auto;
  max-width: 100%;
  box-sizing: border-box;
}

.flyer-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  padding: 1rem;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  justify-items: center; /* ✅ Center cards inside grid cells */
}

.admin-flyer-card {
  width: 100%;
  max-width: 340px; /* ✅ Don't stretch beyond this */
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.admin-flyer-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.admin-flyer-img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.admin-flyer-note {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.admin-flyer-meta {
  font-size: 0.8rem;
  color: #666;
}

.flyer-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 15, 15, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: auto;
}

.flyer-preview-content {
  position: relative;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.flyer-preview-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}

.flyer-preview-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #000;
  color: white;
  border: none;
  font-size: 20px;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10000;
}

.flyer-preview-note {
  margin-top: 12px;
  font-size: 14px;
  color: #333;
}

.admin-error-banner {
  background-color: #f44336;
  color: white;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 6px;
  text-align: center;
}

.admin-user-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.admin-user-table th,
.admin-user-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.admin-user-table th {
  background-color: #f7f7f7;
  font-weight: 600;
}

.user-table-container {
  margin-top: 20px; /* reduce this from any larger value like 60px */
  padding: 0 20px;
}

/* === Admin User Table === */
.user-table-container {
  margin-top: 100px;
  padding: 20px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.admin-user-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Montserrat", sans-serif;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

.admin-user-table th,
.admin-user-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.admin-user-table th {
  background-color: #f9f9f9;
  color: #0b2533;
  font-size: 1rem;
  font-weight: 600;
}

.admin-user-table td {
  font-size: 0.95rem;
  color: #333;
}

.admin-user-table tr:hover {
  background-color: #f4f4f4;
  transition: background-color 0.3s ease;
}

.admin-user-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

.admin-action {
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  margin: 0 0.4rem;
}

.admin-action.suspend:hover {
  color: #f4c542; /* yellowish */
}

.admin-action.delete:hover {
  color: #e74c3c; /* red */
}

/* ConfirmActionOverlay styles */
.confirm-action-overlay {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  max-width: 90%;
  width: 320px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.overlay-message {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #0b2533;
}

.overlay-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.btn-cancel,
.btn-confirm {
  flex: 1 1;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.95rem;
  border: none;
}

.btn-cancel {
  background: #ccc;
  color: #333;
}

.btn-confirm {
  background: #da2a58;
  color: #fff;
}

.user-management-container {
  padding: 40px 20px;
  margin: 0 auto;
  max-width: 900px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.user-management-container h2 {
  font-size: 1.8rem;
  color: #0b2533;
  margin-bottom: 20px;
  font-weight: 600;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
}

.user-table th,
.user-table td {
  text-align: left;
  padding: 14px 10px;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  border-bottom: 1px solid #eee;
}

.user-table th {
  background-color: #f7f7f7;
  font-weight: 600;
  color: #0b2533;
}

.user-table tbody tr:hover {
  background-color: #f9f9f9;
}

.action-icons {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
  cursor: pointer;
  margin-right: 8px;
}

.action-icons svg {
  cursor: pointer;
  margin-right: 8px;
  transition: color 0.3s ease;
}

.action-icons svg:hover {
  color: #0b2533;
}

.social-icon-link {
  font-size: 1.15rem;
  color: #0b2533;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #f2f2f2;
  border-radius: 8px;
  width: 42px;
  height: 42px;
}

.social-icon-link:hover {
  background: #e0e0e0;
  opacity: 0.7;
}
.suspend-icon:hover {
  color: #e6b800;
}

.delete-icon:hover {
  color: #da2a58;
}

.smart-tip {
  background-color: #fffbe6;
  color: #0b2533;
  border-left: 4px solid #f44b79;
  padding: 5px 5px; /* Reduced from 10px 12px for top/bottom */
  margin-top: 10px; /* Reduced from 12px to lessen gap from search bar */
  border-radius: 8px;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tip-text {
  flex: 1 1;
  font-weight: 500;
}

.tip-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: #da2a58;
  margin-left: 10px;
  cursor: pointer;
}

/* Card wrapper + slide-up */
.profile-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #f44b79;
  border-left: 4px solid var(--accent-color);
  padding: 16px;
  margin: 16px 0;
  opacity: 0;
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Backdrop covers full viewport */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
.sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Container sits off-screen bottom by default */
.sheet-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75vh;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  z-index: 1001;
}
.sheet-container.open {
  transform: translateY(0);
}

/* Header with title + close */
.sheet-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.sheet-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0b2533;
}
.sheet-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Scrollable content area */
.sheet-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
}

/* Action buttons pinned at bottom */
.sheet-actions {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 12px;
}

/* ********** Profile “Pill” Tabs ********** */
.user-profile-tabs.pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  background: transparent !important;
  padding: 0;
  margin: 0 auto 24px;
}

.pill-tab {
  position: relative;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  min-width: 80px;
  background: #f9f9f9 !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
  cursor: pointer;
}

.pill-tab:hover {
  background: #eee;
}

.pill-tab.active {
  background: #da2a58 !important;
  background: var(--brand-accent) !important;
  border-color: #da2a58 !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}

.pill-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28a745;
}

/* ********** Profile Card Container ********** */
.user-profile {
  max-width: 480px;
  margin: 100px auto 50px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ********** Header ********** */
.user-profile-title {
  text-align: center;
  margin-bottom: 24px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #0b2533;
}

/* ********** Feedback & Errors ********** */
.error-message,
.editing-indicator {
  text-align: center;
  margin-bottom: 16px;
}

/* ********** BottomSheet Overrides ********** */
.sheet-container {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* ********** Form Fields (slightly more breathing room) ********** */
.sheet-content label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.sheet-content input,
.sheet-content select,
.sheet-content textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}
.sheet-content input:focus,
.sheet-content select:focus,
.sheet-content textarea:focus {
  border-color: #000;
  outline: none;
}
.sheet-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 0;
}
.sheet-actions .button {
  flex: 1 1;
  padding: 10px 0;
}

/* ********** Mobile Adjustments ********** */
@media (max-width: 480px) {
  .user-profile {
    margin: 80px 12px 30px;
    padding: 16px;
  }
  .pill-tab {
    padding: 6px 12px;
    font-size: 0.85rem;
    min-width: 60px;
  }
  .sheet-container {
    height: 85vh;
  }
}

/* ProfileCompletion using BottomSheet */

.profile-completion-tabs.pills {
  margin-bottom: 16px;
}

.profile-input,
.profile-select,
.profile-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Error message inside sheet */
.profile-error-message {
  color: #c00;
  text-align: center;
  margin-bottom: 12px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .modal-overlay {
    align-items: center;
  }

  .auth-modal {
    border-radius: 20px;
    margin: auto;
    position: relative;
    z-index: 10000;
  }
}

/* Ensure modal is always on top */
.modal-overlay {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.auth-modal {
  width: 90%;
  max-width: 400px;
  padding: 1.25rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.3s ease-out;
  position: relative;
  margin: auto; /* Center the modal */
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-subtext {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1.5rem;
}

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

.auth-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.auth-section input,
.auth-section input[type="text"],
.auth-section input[type="password"],
.auth-section input[type="email"],
.auth-section input[type="tel"] {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.auth-section button {
  background-color: #0b2533;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
}

.auth-section button:disabled {
  background-color: #999;
  cursor: not-allowed;
}

.auth-option-button {
  width: 100%;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-option-button:hover {
  background-color: #f0f0f0;
  color: #111;
}

.auth-divider {
  text-align: center;
  margin: 1.2rem 0 1rem;
  position: relative;
}

.auth-divider span {
  background-color: white;
  padding: 0 10px;
  color: #555;
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  left: 0;
  z-index: 0;
}

.auth-input,
.auth-textarea {
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.auth-button.primary {
  padding: 0.75rem;
  font-size: 1rem;
  background-color: #0b2533;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.auth-button.primary:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.auth-button.primary:hover {
  background-color: #1a3a4d;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.3;
  margin-top: -4px;
}

.checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #0b2533;
}

.checkbox-row label {
  flex: 1 1;
  font-size: 0.9rem;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 8px;
  line-height: 1;
}

.auth-error {
  color: red;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.8rem;
}

/* Fix 3: Login button hover */
.auth-section button:not(:disabled):hover {
  background-color: #1a3a4d; /* Slightly darker shade */
}

body.modal-open {
  overflow: hidden;
}

body.modal-open,
html.modal-open {
  overflow: hidden !important;
  height: 100% !important;
  position: fixed;
  width: 100%;
}

.auth-back-btn {
  background: none;
  border: none;
  font-size: 0.9rem;
  color: #0b2533;
  margin-bottom: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.back-btn {
  background: none;
  border: none;
  color: #0b2533;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0;
}

.back-btn svg {
  margin-right: 8px;
}

.back-arrow {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #0b2533;
  cursor: pointer;
  margin-bottom: 1rem;
  display: inline-block;
  padding: 0.5rem;
}

.text-xs.text-gray-500 {
  font-size: 13px;
  color: #6b7280; /* Tailwind gray-500 */
}

.email-not-verified {
  background-color: #fff5f5;
  border: 1px solid #f44336;
  border-radius: 8px;
  padding: 10px;
  margin-top: 16px;
}

/* Fix verification reminder styling */
.verification-reminder {
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  background-color: #fff4f4;
  border: 1px solid #da2a58;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.verification-reminder p {
  margin: 0;
  line-height: 1.5;
  color: #333;
}

.verification-reminder strong {
  font-weight: 600;
}

.verification-success,
.verification-reminder {
  border-radius: 8px;
  margin: 15px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  animation: fadeIn 0.3s ease-out;
}

.verification-success {
  color: #00a700;
  background-color: #f0fff0;
  border: 1px solid #c1f0c1;
}

.verification-reminder .fa-envelope {
  margin-bottom: 75px; /* Perfectly aligns with first line of text */
}

/* Fix 2: Center alignment for resend */
.verification-reminder > div {
  width: 100%;
  text-align: center; /* Center all text */
  border-radius: 0.375rem;
  padding: 1rem;
}

.resend-verification-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.resend-verification-btn:hover {
  color: #da2a58;
}

.resend-verification-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

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

.verification-success-sticky {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background-color: #f0fdf4;
  border: 1px solid #a7f3d0;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  width: calc(100% - 4rem);
  max-width: 350px;
  color: #0b2533;
}

.verification-success-sticky .w-full {
  padding: 0.5rem 0;
}

.verification-success-sticky .flex.gap-4 {
  gap: 0.75rem;
  margin-top: 0.75rem;
  justify-content: space-between;
}

.verification-success-sticky .success-btn {
  background-color: #0b2533;
  color: white;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
}

.verification-success-sticky .success-btn:hover {
  background-color: #1a3a4d;
}
/* Fix button alignment in success message */
.verification-success-sticky .flex.gap-4 {
  justify-content: space-between;
}

/* Success notification buttons */
.success-btn {
  flex: 1 1; /* Makes buttons equal width */
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.success-btn-primary {
  background-color: #008489;
  color: white;
  border: none;
  cursor: pointer;
}

.success-btn-primary:hover {
  background-color: #006669;
}

.success-btn-secondary {
  background-color: white;
  color: #008489;
  border: 1px solid #008489;
}

.success-btn-secondary:hover {
  background-color: #f7f7f7;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .verification-success-sticky {
    padding: 14px;
  }

  .success-btn {
    padding: 10px 12px;
    font-size: 13px;
  }
  .button-group {
    flex-direction: column; /* Stack vertically on mobile */
    gap: 0.75rem;
  }

  .verification-reminder .text-sm {
    color: #dc2626;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }

  .verification-reminder .text-xs {
    color: #666;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
  }

  /* Fix button spacing */
  .verification-reminder-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }

  .verification-reminder-buttons button {
    flex: 1 1;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }

  .verification-reminder-buttons button:first-child {
    background-color: #0b2533;
    color: white;
    border: none;
  }

  .verification-reminder-buttons button:first-child:hover {
    background-color: #1a3a4d;
  }

  .verification-reminder-buttons button:last-child {
    background: white;
    color: #0b2533;
    border: 1px solid #ddd;
  }

  .verification-reminder-buttons button:last-child:hover {
    background-color: #f5f5f5;
  }

  .resend-verification-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

select {
  -webkit-appearance: none;
  appearance: none;
}

/* Toggle Styles */
.auth-method-toggle {
  position: relative;
  display: flex;
  margin: 0 auto 20px;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 24px;
  overflow: hidden;
}

.toggle-option {
  flex: 1 1;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.toggle-option.active {
  color: #000;
}

.toggle-indicator {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #f7f7f7;
  transition: left 0.3s ease;
  border-radius: 24px;
  z-index: 0;
}

/* Input Styles */
.auth-input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
}

.auth-input:focus {
  border-color: #000;
  outline: none;
}

/* Auth button styling */
.auth-button {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 1rem;
}

.auth-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Airbnb-style Toggle */
.auth-view-toggle {
  display: flex;
  position: relative;
  margin: 0 auto 1.5rem;
  border-bottom: 1px solid #ddd;
  width: 100%;
}

.auth-view-toggle::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
  width: 50%;
}

.auth-view-toggle::after {
  left: 0;
}

.auth-view-toggle[data-active="phone"]::after {
  left: 50%;
}

.toggle-option {
  flex: 1 1;
  text-align: center;
  padding: 0.75rem;
  background: none;
  border: none;
  font-weight: 500;
  font-size: 1rem;
  color: #717171;
  cursor: pointer;
  position: relative;
}

.toggle-option.active {
  color: #000;
  font-weight: 600;
}

/* Input Styles */
.auth-input {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

.auth-input:focus {
  border-color: #000;
  outline: none;
}

/* Button Styles */
.auth-button {
  width: 100%;
  padding: 12px;
  background-color: #000;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 15px;
}

.auth-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.resend-verification-btn {
  color: #dc2626;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.resend-verification-btn:hover {
  text-decoration: underline;
}

.resend-verification-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.forgot-password-btn {
  color: #0b2533;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.forgot-password-btn:hover {
  text-decoration: underline;
}

/* Input group styling */
.input-group {
  margin-bottom: 0.5rem;
  width: 100%;
}

.input-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: #333;
  font-weight: 500;
}

.verification-reminder .button-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.verification-reminder .button-row button {
  padding: 10px 18px;
  font-size: 0.85rem;
  border-radius: 6px;
  min-width: 110px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 480px) {
  .verification-reminder {
    position: relative;
    top: -400px;
    margin-top: 10px !important;
    margin-bottom: 10px;
  }
}

.modal-container {
  padding: 1rem;
  max-width: 95vw;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .modal-container {
    max-width: 600px;
  }
}

.filter-options::before,
.filter-options::after {
  content: "";
  display: block;
  height: 1rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}

.filter-options::after {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  margin-top: -1rem;
}

.search-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.smart-tip-container {
  margin-top: 0.2rem;
  font-size: 14px;
  color: #666;
  text-align: center;
  max-width: 100%;
}

/* Add these styles to your CSS file */
.overlay.logout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  padding: 20px;
}

.logout-overlay .overlay-content {
  max-width: 90%;
  width: 100%;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  margin: 0 auto; /* Additional centering insurance */
}
.social-section {
  margin-top: 1rem;
}

.social-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #2c3e50;
  margin-bottom: 0.4rem;
  text-align: center;
  border-bottom: 1px solid #e0e0e0; /* ✅ Light gray line */
}

.social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 15px;
}

.social-icon-link {
  font-size: 1.3rem;
  color: #0b2533;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.social-icon-link:hover {
  opacity: 0.7;
}

.info-grid p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  word-break: break-word;
  font-size: 0.9rem;
}

.social-icons-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  justify-content: center; /* Center the icons */
}

.social-icon-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Add a small gap between icon and input */
}

.social-icon-button {
  background: none;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  color: #0b2533;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.social-icon-button:hover {
  background-color: #f0f0f0;
}

.social-icons-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  justify-content: flex-start; /* Left-align the icons */
}

.social-icon-button {
  background: none;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  color: #0b2533;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s;
}

.social-icon-button:hover {
  background-color: #f0f0f0;
}

/* Style for when an icon is active (its input is visible) */
.social-icon-button.active {
  background-color: #0b2533;
  color: #fff;
  border-color: #0b2533;
}

/* Container for the inputs that appear */
.social-inputs-container {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between multiple visible inputs */
  margin-top: 15px;
  margin-bottom: 25px;
}

/* Wrapper for each individual input for smooth animation */
.social-input-wrapper {
  animation: fadeIn 0.3s ease-in-out;
}

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

.reactivate-btn {
  background: #0b2533;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
  transition: background-color 0.2s;
}

.reactivate-btn:hover {
  background-color: #1f4961;
}

/* Align buttons better and support wrap on mobile */
.confirm-overlay-content .flex {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Add mobile-friendly max width */
.confirm-overlay-content {
  max-width: 420px;
  width: 90%;
  margin: 0 auto;
  padding: 1.75rem;
}

/* Optional: smoothen text and spacing */
.confirm-overlay-content p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}

.confirm-btn-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.confirm-btn {
  flex: 1 1 120px;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 120px;
  max-width: 180px;
  text-align: center;
  cursor: pointer;
}

.confirm-btn.primary {
  background-color: #0b2533;
  color: white;
  border: none;
  cursor: pointer;
}

.confirm-btn.secondary {
  background-color: white;
  color: #0b2533;
  border: 1px solid #0b2533;
  cursor: pointer;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;

  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ccc transparent;
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

.admin-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.input-field {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.9rem;
  min-width: 140px;
}

.clickable-cell {
  cursor: pointer;
  color: #0b2533;
  font-weight: 500;
  text-decoration: underline;
}

/* ===========================
   Preview Overlay (Airbnb-like)
   =========================== */

/* Backdrop */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* Floating Modal */
.preview-modal {
  background: #fff;
  border-radius: 20px;
  max-width: 90%;
  width: 400px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: scaleIn 0.25s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* Prevent callouts on long press */
}

/* Cover with actions */
.preview-cover-airbnb {
  position: relative;
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
}

.preview-close-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  background: none;
  color: white;
  border: none;
  font-size: 22px;
  padding: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.preview-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.preview-action-btn {
  background: none;
  color: white;
  border: none;
  font-size: 22px;
  padding: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Content */
.preview-content-airbnb {
  padding: 20px;
  text-align: center;
}

.preview-title-airbnb {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 4px;
  text-align: center;
}

.preview-category-airbnb {
  font-size: 1rem;
  color: #666;
  margin-bottom: 12px;
  text-align: center;
}

/* Tags (new section) */
.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.preview-tag-pill {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.85rem;
  color: #333;
}

.preview-description-airbnb {
  font-size: 1rem;
  color: #444;
  margin-bottom: 20px;
  text-align: left;
}

/* CTA button */
.preview-view-btn-airbnb {
  width: 100%;
  padding: 12px;
  background: #0b2533;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
}

.preview-view-btn-airbnb:hover {
  background: #123e55;
}

/* Scale animation */
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.preview-category-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  text-align: center;
}

.preview-category-icon {
  font-size: 18px;
  color: #666;
}

.preview-tag-icon {
  font-size: 16px;
  color: #666;
  margin-right: 4px;
}

.preview-close-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  padding: 8px;
}

/* Card press-in effect */
.card-pressed {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Add these new rules to your styles.css file */

/* FIX: Force center alignment for the share card on the detail page */
.business-detail-wrapper .shareable-card .card-title,
.business-detail-wrapper .shareable-card .card-category {
  text-align: center;
}

/* Ensure other elements remain left-aligned */
.business-detail-wrapper .shareable-card .card-address,
.business-detail-wrapper .shareable-card .card-contact-row,
.business-detail-wrapper .shareable-card .card-tags-likes-row {
  text-align: left;
}

/* Fix alignment for PreviewOverlay business name */
.preview-modal .preview-title-airbnb {
  text-align: center !important;
  padding-left: 0 !important;
}

.pull-to-refresh-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
  background: #f7f7f7;
  z-index: 1000;
  pointer-events: none;
  transform: translateY(-100%); /* Start hidden above */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pull-to-refresh-indicator.visible {
  transform: translateY(0); /* Slide in */
  opacity: 1;
}

.pull-to-refresh-spinner {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pull-to-refresh-spinner.visible {
  opacity: 1;
}

.pull-to-refresh-text {
  transition: opacity 0.2s ease;
}

.pull-content {
  min-height: 100vh;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
}

.verified-badge-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff;
  border-radius: 50%;
  padding: 4px;
  color: #0a66c2;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
  z-index: 5;
}

.verified-badge-detail {
  margin-left: 8px;
  color: #0a66c2;
  font-size: 1.1em;
  vertical-align: middle; /* Helps align the icon with the text */
}

.verified-badge {
  color: #1da1f2; /* Twitter blue-like for verified */
  margin-left: 6px;
  font-size: 0.9em;
  vertical-align: middle;
}

.verified-badge-corner {
  position: absolute;
  top: 10 px;
  right: 6px;
  background: #0b9e6e;
  border-radius: 50%;
  padding: 3px;
  color: white;
  width: 18px;
  height: 18px;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Ensure Footer overlays float above UnifiedAuthModal */
.footer-overlay {
  z-index: 3000 !important;
}

/* Verify toggle styles for Admin tables */
.verify-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    background 0.15s ease;
}
.verify-toggle svg {
  font-size: 14px;
}
.verify-toggle:hover {
  transform: translateY(-1px);
}
.verify-toggle.on {
  background: #0b9e6e;
  border-color: #0b9e6e;
  color: #fff;
}

/* Kill switch for legacy custom long‑press PreviewOverlay */
.overlay-backdrop,
.preview-modal,
.preview-cover-airbnb,
.preview-content-airbnb,
.preview-tags,
.preview-view-btn-airbnb {
  display: none !important;
}

/* ============================================
   Delete Review Confirmation Modal
   ============================================ */
.overlay--confirm .overlay-content {
  max-width: 440px;
  padding: 28px 32px;
  text-align: center;
}

.overlay--confirm .overlay-header {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px 0;
}

.overlay--confirm .overlay-message {
  font-size: 15px;
  color: #64748B;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.overlay--confirm .button-group {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.overlay--confirm .button {
  flex: 1 1;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  font-family: "Montserrat", sans-serif;
}

.overlay--confirm .button.secondary {
  background: #F3F4F6;
  color: #374151;
  border: 1px solid #E5E7EB;
}

.overlay--confirm .button.secondary:hover {
  background: #E5E7EB;
  border-color: #D1D5DB;
}

.overlay--confirm .button.primary.danger {
  background: #DC2626;
  color: #fff;
}

.overlay--confirm .button.primary.danger:hover {
  background: #B91C1C;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .overlay--confirm .overlay-content {
    max-width: 90%;
    padding: 24px 20px;
  }

  .overlay--confirm .overlay-header {
    font-size: 1.3rem;
  }

  .overlay--confirm .button-group {
    flex-direction: column;
  }

  .overlay--confirm .button {
    width: 100%;
  }
}

/* ========================================================================
   RAMADAN SEASONAL MODE (Feb 17 - Mar 19, 2026)
   Minimal, premium enhancements to Header component only
   ======================================================================== */

/* Ramadan header with deep navy gradient background + stars */
.header.ramadan-mode {
  background: linear-gradient(135deg, #0d2d42 0%, #1a1a2e 50%, #0d2d42 100%);
  overflow: visible;  /* Allow dropdown to escape header bounds */
}

/* Animated gold accent line at top of header */
.header.ramadan-mode::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(233, 200, 116, 0.8),
    transparent
  );
  background-size: 200% 100%;
  animation: ramadanShimmer 5s linear infinite;
  z-index: 1;
  pointer-events: none;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);  /* Contain within header bounds */
}

/* Glowing shimmering stars scattered across header */
.header.ramadan-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 20%, rgba(233, 200, 116, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 88% 30%, rgba(233, 200, 116, 0.8), transparent),
    radial-gradient(2px 2px at 45% 15%, rgba(233, 200, 116, 1), transparent),
    radial-gradient(1.5px 1.5px at 72% 25%, rgba(233, 200, 116, 0.7), transparent),
    radial-gradient(2px 2px at 25% 35%, rgba(233, 200, 116, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 65% 40%, rgba(233, 200, 116, 0.75), transparent),
    radial-gradient(2px 2px at 35% 45%, rgba(233, 200, 116, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 82% 50%, rgba(233, 200, 116, 0.9), transparent),
    radial-gradient(2px 2px at 18% 60%, rgba(233, 200, 116, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 55% 55%, rgba(233, 200, 116, 0.7), transparent),
    radial-gradient(2px 2px at 78% 65%, rgba(233, 200, 116, 0.95), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(233, 200, 116, 0.8), transparent);
  animation: starsShimmer 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);  /* Contain within header bounds */
}

@keyframes ramadanShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes starsShimmer {
  0%, 100% {
    opacity: 0.5;
    filter: brightness(1);
  }
  25% {
    opacity: 0.8;
    filter: brightness(1.3);
  }
  50% {
    opacity: 1;
    filter: brightness(1.5);
  }
  75% {
    opacity: 0.8;
    filter: brightness(1.2);
  }
}

/* Crescent SVG next to logo */
.ramadan-crescent {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  filter: drop-shadow(0 0 6px rgba(233, 200, 116, 0.4));
  animation: crescentPulse 6s ease-in-out infinite;
}

@keyframes crescentPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Subtle glow on logo text during Ramadan */
.header.ramadan-mode .logo-text {
  text-shadow: 0 0 12px rgba(233, 200, 116, 0.25);
}

/* Ramadan Kareem pill badge */
.ramadan-pill {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(233, 200, 116, 0.08);
  color: #E9C874;
  border: 1px solid rgba(233, 200, 116, 0.25);
  margin-right: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Mobile: hide pill on very small screens to prevent crowding */
@media (max-width: 480px) {
  .ramadan-pill {
    display: none;
  }
}

/* Ensure header content appears above stars and shimmer */
.header.ramadan-mode .header-content {
  position: relative;
  z-index: 10;
}

/* Make logo white with balanced gold glow on dark background */
.header.ramadan-mode .header-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(233, 200, 116, 0.65)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
  margin-left: -8px;
}

/* Make welcome text more visible */
.header.ramadan-mode .welcome-text {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Make profile icons white and visible */
.header.ramadan-mode .menu-icon,
.header.ramadan-mode .profile-icon {
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Mobile: keep horizontal layout, just adjust sizing */
@media (max-width: 768px) {
  .header.ramadan-mode .welcome-text {
    font-size: 13px;
  }
}

/* Floating lanterns container */
.ramadan-lanterns {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Individual lantern styling */
.lantern {
  position: absolute;
  width: 22px;
  height: 28px;
  filter: drop-shadow(0 0 4px rgba(233, 200, 116, 0.6));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Lantern positions and animations */
.lantern-1 {
  top: 8px;
  left: 20%;
  animation: lanternFloat1 6s infinite, lanternGlow 3s infinite;
}

.lantern-2 {
  top: 5px;
  right: 25%;
  animation: lanternFloat2 7s infinite, lanternGlow 3.5s 0.5s infinite;
}

.lantern-3 {
  top: 10px;
  right: 10%;
  animation: lanternFloat3 5.5s infinite, lanternGlow 3s 1s infinite;
}

/* Floating animations - gentle sway */
@keyframes lanternFloat1 {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(8px) translateX(-3px); }
  50% { transform: translateY(0) translateX(0); }
  75% { transform: translateY(-6px) translateX(3px); }
}

@keyframes lanternFloat2 {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-6px) translateX(4px); }
  50% { transform: translateY(0) translateX(0); }
  75% { transform: translateY(8px) translateX(-4px); }
}

@keyframes lanternFloat3 {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(7px) translateX(3px); }
  50% { transform: translateY(0) translateX(0); }
  75% { transform: translateY(-7px) translateX(-3px); }
}

/* Shimmer/glow animation for lanterns */
@keyframes lanternGlow {
  0%, 100% { 
    opacity: 0.6;
    filter: drop-shadow(0 0 4px rgba(233, 200, 116, 0.6));
  }
  50% { 
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(233, 200, 116, 1));
  }
}

/* Adjust lanterns for mobile - better positioning */
@media (max-width: 768px) {
  .lantern-1 {
    top: 12px;
    left: 15%;
  }

  .lantern-2 {
    top: 10px;
    right: 35%;
  }

  .lantern-3 {
    top: 14px;
    right: 15%;
  }
}

/* Hide middle lantern on very small screens */
@media (max-width: 480px) {
  .lantern-2 {
    display: none;
  }
}

/* Ensure profile container and dropdown appear above Ramadan header effects */
.header.ramadan-mode .profile-container {
  z-index: 10001;
}

/* ====================================================================================
   EventCard Redesign (March 2026) — musDir Brand
   Image-led design with floating date badge and clean visual hierarchy
   Namespace: ec-* (EventCard)
   ==================================================================================== */

/* ===== CARD BASE ===== */
.business-card.event-card {
  padding: 0;
  overflow: hidden;
}

.business-card.event-card.compact-event-card {
  overflow: visible; /* Allow live badge */
}

/* ===== HERO (shared) ===== */
.ec-compact-hero,
.ec-full-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ec-compact-hero {
  height: 160px;
  border-radius: 12px 12px 0 0;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

.ec-full-hero {
  height: 200px;
  border-radius: 12px 12px 0 0;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

.ec-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.compact-event-card:hover .ec-hero-img,
.event-card:hover .ec-hero-img {
  transform: scale(1.04);
}

/* ===== PLACEHOLDER (no image) — musDir navy/pink gradients ===== */
.ec-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0B2533 0%, #1a4a5e 100%);
}

/* Category-specific gradients */
.ec-placeholder--religious-events,
.ec-placeholder--religious {
  background: linear-gradient(135deg, #DA2A58 0%, #F44B79 100%);
}

.ec-placeholder--educational-events,
.ec-placeholder--educational,
.ec-placeholder--youth-events {
  background: linear-gradient(135deg, #0B2533 0%, #374151 100%);
}

.ec-placeholder--community-events,
.ec-placeholder--social-events {
  background: linear-gradient(135deg, #0B2533 0%, #1e5c7a 100%);
}

.ec-placeholder--womens-events {
  background: linear-gradient(135deg, #DA2A58 0%, #9b1b40 100%);
}

.ec-placeholder-icon {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.2);
}

.ec-placeholder-icon--lg {
  font-size: 3.5rem;
}

.ec-placeholder--lg {
  /* inherits from ec-placeholder */
}

/* ===== DATE BADGE — floating bottom-left ===== */
.ec-date-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  padding: 6px 10px;
  text-align: center;
  min-width: 48px;
  z-index: 3;
}

.ec-date-badge--lg {
  padding: 8px 14px;
  min-width: 58px;
  border-radius: 12px;
}

.ec-date-month {
  font-size: 0.6rem;
  font-weight: 700;
  color: #DA2A58;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-bottom: 1px;
  text-transform: uppercase;
}

.ec-date-day {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0B2533;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ec-date-badge--lg .ec-date-month {
  font-size: 0.7rem;
}

.ec-date-badge--lg .ec-date-day {
  font-size: 1.5rem;
}

/* ===== TYPE PILL — top-right, frosted glass ===== */
.ec-type-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ec-type--in-person {
  background: rgba(209, 250, 229, 0.92);
  color: #065f46;
}

.ec-type--online {
  background: rgba(219, 234, 254, 0.92);
  color: #1e40af;
}

.ec-type--hybrid {
  background: rgba(237, 233, 254, 0.92);
  color: #5b21b6;
}

.ec-type-pill--lg {
  font-size: 0.7rem;
  padding: 5px 12px;
}

/* ===== LIVE BADGE ===== */
.ec-live-badge,
.ec-live-badge--lg {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 50px;
  height: 50px;
  pointer-events: none;
}

.ec-live-icon,
.ec-live-icon--lg {
  width: 100%;
  height: 100%;
}

/* ===== BODY ===== */
.ec-compact-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

.ec-full-body {
  padding: 16px;
}

/* ===== TITLE ===== */
.ec-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0B2533;
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ec-title--lg {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

/* ===== CATEGORY PILL (full variant) ===== */
.ec-category-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* ===== META ROWS ===== */
.ec-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: #4b5563;
  line-height: 1.4;
  margin-bottom: 4px;
}

.ec-meta-group {
  margin-bottom: 4px;
}

.ec-icon {
  color: #9ca3af;
  font-size: 0.78rem;
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.ec-text {
  flex: 1 1;
  min-width: 0;
}

.ec-location {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ec-tz {
  color: #9ca3af;
  font-size: 0.72rem;
}

/* ===== HOST BUSINESS ===== */
.ec-host-row {
  font-size: 0.72rem;
  gap: 5px;
  align-items: center;
  margin-bottom: 2px;
}

.ec-host-label {
  font-size: 0.72rem;
  font-weight: 600; /* March 2026 - Bold "Hosted by" label */
  color: #9ca3af;
  flex-shrink: 0;
}

.ec-host-logo {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  border-radius: 2px;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
}

.ec-host-row .ec-icon {
  font-size: 0.65rem;
  color: #9ca3af;
  margin-top: 0;
  width: 14px;
}

.ec-host-name {
  font-size: 0.875rem; /* March 2026 - Increased from 0.72rem for better readability */
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== TAGS ===== */
.ec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ec-tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.ec-tag--more {
  color: #9ca3af;
}

/* ===== ACTION BUTTONS ===== */
.ec-actions-slim,
.ec-actions-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}

.ec-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}

.ec-action:hover {
  background: #f3f4f6;
  color: #374151;
}

.ec-action--liked {
  color: #DA2A58;
}

.ec-action--liked:hover {
  color: #DA2A58;
  background: rgba(218, 42, 88, 0.06);
}

.ec-action--bookmarked {
  color: #0B2533;
}

.ec-action--lg {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.ec-count {
  font-size: 0.78rem;
  font-weight: 600;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .ec-compact-hero { height: 140px; }
  .ec-full-hero { height: 170px; }
  .ec-compact-body { padding: 12px; }
  .ec-full-body { padding: 14px; }
  .ec-title { font-size: 0.9rem; }
  .ec-meta-row { font-size: 0.78rem; }
  .ec-type-pill { font-size: 0.6rem; padding: 3px 8px; }
  .ec-date-day { font-size: 1.15rem; }
}

@media (min-width: 901px) {
  .ec-title--lg { font-size: 1.2rem; }
  .ec-full-hero { height: 220px; }
}

/* ==========================================================================
   html/body horizontal-overflow guard — sticky-safe override
   --------------------------------------------------------------------------
   The FROZEN src/styles/styles.css (html, body block, lines 6-18) sets
       overflow-x: hidden; overflow-y: auto;
   on BOTH html and body. html's values propagate to the viewport, so body's
   do NOT — body becomes a scroll container of its own that never scrolls
   (min-height, grows with content). Every position:sticky element on the
   page then sticks to body instead of the viewport, i.e. never sticks:
   BusinessDetailV2's 52px mobile header, its desktop site-nav and right
   rail, the EventDetailV2 desktop rail card, the search-results sticky
   header, and every other page-level sticky in the app.

   overflow-x: clip hides horizontal overflow exactly like hidden, but does
   NOT create a scroll container, so sticky resolves against the viewport
   again. overflow-y must be visible here: clip paired with auto/hidden
   computes back to hidden (and re-creates the scroll container).
   On html, clip/visible propagate to the viewport as hidden/auto — the same
   viewport behaviour as before.

   Loaded right after styles.css (src/index.js). Browsers without
   overflow: clip (Safari < 16, Chrome < 90, Firefox < 81) skip this block and
   keep today's behaviour. Guarded by src/styles/__tests__/overflowFix.test.js.
   ========================================================================== */
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Eid al-Adha 2026 — seasonal header theme (CD v2.3, "10 blessed days")

   NEW prefixed stylesheet — styles.css is FROZEN. All rules scoped under
   .header.eid-adha-mode; .eid-adha-mode is a SIBLING of .ramadan-mode.

   Selectors remapped from CD's mock (.musdir-header/.brand/.wordmark) to the
   real Header.js DOM (.header/.header-logo/.header-right). Values are CD's
   verbatim. Arabic font set inline (no --font-arabic token exists; falls back
   to system Arabic, legible at 14pt — see architect redline R-1).
   ────────────────────────────────────────────────────────────────────────── */

.header.eid-adha-mode {
  --adha-ink:       #0E131A;
  --adha-ink-soft:  #181F29;
  --adha-paper:     #ECE6D8;
  --adha-paper-dim: #8A8478;
  --adha-gold:      #C9A961;   /* hairline + ornament + glyph band */
  --adha-gold-warm: #D4B36A;   /* logo · warmer, more luminous */
  --adha-gold-soft: rgba(201, 169, 97, 0.16);

  background-color: var(--adha-ink);
  background-image:
    /* (1) Top-edge warm glow · "candlelight from above" */
    radial-gradient(ellipse 60% 60% at 50% -10%,
      rgba(212, 179, 106, 0.10) 0%,
      rgba(212, 179, 106, 0) 70%),
    /* (2) Soft vertical illumination · lighter top, deeper bottom */
    linear-gradient(180deg,
      rgba(24, 31, 41, 0.55) 0%,
      rgba(14, 19, 26, 0) 60%,
      rgba(14, 19, 26, 0.35) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  border-bottom: 1px solid var(--adha-gold);
  color: var(--adha-paper);
  /* DO NOT set position here — the base .header is position:fixed and the page
     reserves a 64px top offset for it. Overriding to relative put the header
     back in flow on top of that reserved space → a 64px white gap (bug
     2026-05-23). The decorative ::before/::after anchor fine to the fixed
     header. No overflow:hidden either — it clips the profile dropdown. */
}

/* Khatim ornament band above the 1px gold hairline */
.header.eid-adha-mode::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 1px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2714%27 viewBox=%270 0 28 14%27><g fill=%27none%27 stroke=%27%23C9A961%27 stroke-width=%270.7%27 opacity=%270.85%27><path d=%27M14 1 L17 5 L21 5 L18 8 L20 12 L14 9 L8 12 L10 8 L7 5 L11 5 Z%27/><path d=%27M0 7 L4 5 L4 9 Z%27/><path d=%27M28 7 L24 5 L24 9 Z%27/></g></svg>");
  background-repeat: repeat-x;
  background-position: center;
  pointer-events: none;
  opacity: 0.9;
  z-index: 0;
}

/* Inner illumination — right-side greeting spotlight + left-side logo glow */
.header.eid-adha-mode::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 26% 80% at 82% 55%,
      rgba(212, 179, 106, 0.13) 0%, rgba(212, 179, 106, 0) 70%),
    radial-gradient(ellipse 18% 75% at 8% 55%,
      rgba(212, 179, 106, 0.08) 0%, rgba(212, 179, 106, 0) 70%);
}

/* Keep real content above the decorative pseudo-layers */
.header.eid-adha-mode .header-content { position: relative; z-index: 1; }

/* Logo → gold via filter (single baked SVG; no separate wordmark/tagline to
   tint — see redline R-2). Two stacked drop-shadows give a fuller warm back
   illumination behind the gold mark (founder 2026-05-23): a tight bright core
   glow + a wider soft halo. */
.header.eid-adha-mode .header-logo {
  filter:
    brightness(0)
    saturate(100%)
    invert(72%) sepia(38%) saturate(486%) hue-rotate(2deg) brightness(95%) contrast(88%)
    drop-shadow(0 0 8px rgba(212, 179, 106, 0.45))
    drop-shadow(0 0 20px rgba(212, 179, 106, 0.25));
}

/* Icons + welcome text recolor to paper in Adha mode */
.header.eid-adha-mode .menu-icon,
.header.eid-adha-mode .profile-icon { color: var(--adha-paper); }
.header.eid-adha-mode .welcome-text { color: var(--adha-paper); }

/* ─── Greeting cartouche cluster ─────────────────────────────────────────── */
.adha-greeting {
  display: inline-flex; align-items: center; gap: 10px;
  padding-right: 4px;
  position: relative;
  margin-right: 12px;
}
/* Illuminated cartouche: gold frame + gilt-edge highlights + soft halo */
.adha-greeting::before {
  content: ""; position: absolute; inset: -8px -10px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 6px;
  background:
    linear-gradient(180deg,
      rgba(212, 179, 106, 0.08) 0%,
      rgba(14, 19, 26, 0.30) 45%,
      rgba(14, 19, 26, 0.30) 100%);
  box-shadow:
    inset 0 1px 0 rgba(212, 179, 106, 0.18),
    inset 0 -1px 0 rgba(212, 179, 106, 0.06),
    0 0 14px rgba(201, 169, 97, 0.10);
  pointer-events: none;
}
.adha-greeting > * { position: relative; }

.adha-greeting .glyph { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; }
.adha-greeting .glyph svg { display: block; width: 100%; height: 100%; }

.adha-greeting .text {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1; gap: 3px;
}
.adha-greeting .ar {
  font-family: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', serif;
  font-weight: 700; font-size: 17px; line-height: 1;
  color: var(--adha-paper);
}
.adha-greeting .tr {
  font-family: 'Inter', system-ui, sans-serif;
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  font-weight: 600; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--adha-paper-dim);
}
.adha-greeting.is-eid .ar { color: var(--adha-gold-warm); }
.adha-greeting.is-arafah .ar { color: var(--adha-paper); font-style: italic; }

/* ─── Mobile (CD v2.3 mobile-first): greeting never hides; tightens ──────── */
@media (max-width: 767px) {
  /* Mobile logo size (founder 2026-05-23: bumped up from 44px). With
     welcome-text hidden there's room. */
  .header.eid-adha-mode .header-logo { height: 52px; }
  /* Nudge the logo a touch left on mobile (founder 2026-05-23) — trim the
     logo-container's left padding (base is 1rem/16px). */
  .header.eid-adha-mode .logo-container { padding-left: 6px; }
  /* Mobile = logo + greeting + menu in ONE row (CD v2.3). The greeting
     cartouche is the priority element on the right; "Welcome, {name}" would
     collide with it on a narrow screen, so it's hidden in Adha mode on mobile
     (it reappears ≥768pt). Fixes the logged-in clutter (founder 2026-05-23). */
  /* !important is required: welcome-text carries an inline style="display:
     inline-flex" in Header.js, which beats a plain CSS rule. This is the
     legitimate inline-style-override case. Adha + mobile only. */
  .header.eid-adha-mode .welcome-text { display: none !important; }
  .adha-greeting { gap: 8px; margin-right: 8px; }
  .adha-greeting::before { inset: -5px -8px; }
  .adha-greeting .glyph { width: 16px; height: 16px; }
  .adha-greeting .ar { font-size: 17px; }
  .adha-greeting .tr { font-size: 9.5px; letter-spacing: 0.12em; }
}
/* ≤430pt (common phones): ENGLISH-ONLY (founder 2026-05-23 — Arabic dropped
   on mobile, it crowded the row). Glyph + English translit line only;
   single-line cartouche reads clean next to the menu. */
@media (max-width: 430px) {
  .adha-greeting .ar { display: none; }
  .adha-greeting .tr { display: block; font-size: 10px; letter-spacing: 0.12em; }
  .adha-greeting::before { inset: -4px -7px; }
}

/* prefers-reduced-motion: no-op — nothing animates in this theme. */

/* ----- Scoped to UnifiedAuthModal (namespace: .uam) ----- */
.uam {
}

/* ========================================
   Continue Button — musDir crimson gradient (Airbnb-inspired)
   Override frozen styles.css .auth-button.primary (#0b2533 navy)
   ======================================== */
.uam .auth-button.primary {
  background: linear-gradient(135deg, #DA2A58 0%, #c22350 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Montserrat', -apple-system, sans-serif;
  min-height: 48px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(218, 42, 88, 0.2);
}

.uam .auth-button.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #c22350 0%, #a91d45 100%);
  box-shadow: 0 4px 12px rgba(218, 42, 88, 0.3);
  transform: translateY(-1px);
}

.uam .auth-button.primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(218, 42, 88, 0.2);
}

/* Password group */
.uam-password-group {
  position: relative !important;
}
.uam-password-group .auth-input {
  padding-right: 42px !important;
}

/* Eye control (SPAN, not button) */
.uam .uam-eye-btn {
  all: unset; /* nuke any global button/link rules */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  line-height: 0;
  padding: 4px;
  border-radius: 6px;
  background: transparent !important; /* never darken */
}
.uam .uam-eye-btn:hover,
.uam .uam-eye-btn:focus {
  background: transparent !important;
  outline: none;
}
.uam .uam-eye-btn svg {
  font-size: 18px;
  opacity: 0.7;
}
.uam .uam-eye-btn:hover svg {
  opacity: 1;
}

/* Checkboxes */
.uam-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}
.uam-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.uam-checkbox-row label {
  font-size: 14px;
  color: #0b2533;
  line-height: 1.4;
}

/* Inline overlay links (Terms/Privacy) */
.uam .uam-inline-link {
  all: unset;
  cursor: pointer;
  color: #0b2533;
  text-decoration: underline;
  display: inline;
}
.uam .uam-inline-link:hover {
  opacity: 0.8;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .uam .uam-eye-btn svg {
    font-size: 17px;
  }
  .uam-checkbox-row label {
    font-size: 13.5px;
  }
}

/* optional */
.uam .auth-subtitle {
  margin: 8px 0 12px;
  font-weight: 600;
  color: #0b2533;
}

/* Disabled state for primary auth button inside the modal */
.uam .auth-button.primary[disabled],
.uam .auth-button.primary[aria-disabled="true"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  filter: saturate(0.7);
  pointer-events: none; /* blocks clicks on some browsers */
}

/* Keep hover from re-darkening while disabled */
.uam .auth-button.primary[disabled]:hover,
.uam .auth-button.primary[aria-disabled="true"]:hover {
  opacity: 0.5 !important;
}

/* ===== Privacy Microcopy - Prominent trust signal in auth modals ===== */
.login-privacy-cue {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 400;
  margin: 12px 0 0;
  padding: 0;
  width: 100%;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.login-privacy-cue svg {
  font-size: 10px;
  vertical-align: baseline;
  color: #9ca3af;
}

/* Desktop */
@media (min-width: 768px) {
  .login-privacy-cue {
    font-size: 12px;
  }

  .login-privacy-cue svg {
    font-size: 11px;
  }
}

/* ===== Legal Agreements Modal (Industry Standard Design) ===== */

/* Backdrop - semi-transparent overlay */
/* Agreements now uses .modal-overlay + .auth-modal (same as login screen)
   No custom backdrop needed — inherits perfect centering from styles.css */

@keyframes legalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Agreements card — inherits .auth-modal positioning, adds text-align center */
.legal-agreements-card {
  text-align: center;
  padding-top: 32px !important;
}

@keyframes legalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close button - top right corner */
.legal-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: #6b7280;
  transition: all 0.2s ease;
  padding: 0;
  z-index: 1;
}

.legal-close-button:hover {
  background: #e5e7eb;
  color: #374151;
  transform: scale(1.05);
}

.legal-close-button:active {
  transform: scale(0.95);
}

/* Icon wrapper - shield with checkmark */
.legal-icon-wrapper {
  margin-bottom: 16px;
}

.legal-icon {
  width: 56px;
  height: 56px;
  color: #10b981;
  animation: legalScaleIn 0.4s ease-out 0.1s both;
}

@keyframes legalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Title - "One-time agreements" */
.legal-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Message text */
.legal-message {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

/* Checkboxes container */
.legal-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  text-align: left;
}

/* Checkbox row */
.legal-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Checkbox input - larger for better UX */
.legal-checkbox-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #ff5a5f;
}

/* Checkbox label */
.legal-checkbox-label {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
  cursor: pointer;
  flex: 1 1;
}

/* Legal document links */
.legal-link {
  color: #ff5a5f;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.legal-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Optional checkbox styling (GDPR marketing consent - Mar 2026) */
.legal-checkbox-optional {
  opacity: 0.85;
}

.legal-checkbox-optional .legal-checkbox-label {
  color: #6b7280; /* Slightly muted text for optional items */
}

.legal-optional {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 400;
  font-style: italic;
}

/* Version badge */
.legal-version {
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
}

/* Accept button - pink musDir brand color */
.legal-accept-button {
  width: 100%;
  padding: 14px 24px;
  background: #ff5a5f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.legal-accept-button:hover:not(:disabled) {
  background: #ff4449;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 90, 95, 0.3);
}

.legal-accept-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 90, 95, 0.2);
}

.legal-accept-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ff5a5f;
}

/* Tablet and desktop adjustments */
@media (min-width: 768px) {
  .legal-agreements-card {
    max-width: 400px;
    padding: 40px 32px 32px;
  }

  .legal-icon {
    width: 64px;
    height: 64px;
  }

  .legal-title {
    font-size: 28px;
  }

  .legal-message {
    font-size: 16px;
  }
}

/* Accessibility - keyboard focus */
.legal-accept-button:focus {
  outline: 2px solid #ff5a5f;
  outline-offset: 2px;
}

.legal-checkbox-input:focus {
  outline: 2px solid #ff5a5f;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .legal-agreements-backdrop,
  .legal-agreements-card,
  .legal-icon,
  .legal-accept-button {
    animation: none;
  }

  .legal-accept-button:hover {
    transform: none;
  }
}

/* Privacy Reassurance for Signup */
.signup-privacy-reassurance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background-color: #e0f2fe;
  border: 2px solid #0284c7;
  border-radius: 8px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.privacy-reassurance-icon {
  color: #0c4a6e;
  font-size: 20px;
  flex-shrink: 0;
}

.privacy-reassurance-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0c4a6e;
  line-height: 1.4;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .signup-privacy-reassurance {
    padding: 12px 16px;
  }

  .privacy-reassurance-icon {
    font-size: 18px;
  }

  .privacy-reassurance-text {
    font-size: 13px;
  }
}

/* ========================================
   SOCIAL LOGIN BUTTONS — Brand Guidelines
   Google: White bg, dark text, Google "G" colors
   Apple: Black bg, white text, Apple logo
   ======================================== */
/* Override styles.css ".auth-section button" (bg:#0B2533, border:none)
   which applies to ALL buttons inside auth-section.
   Use .uam prefix for higher specificity. */
/* ===== Social Login Buttons — Airbnb style (icon left, text center) ===== */
.uam .auth-social-btn {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  box-sizing: border-box;
  margin-bottom: 10px;
  background: #ffffff !important;
  color: #222222 !important;
  border: 1.5px solid #222222 !important;
}

/* Airbnb: icon far-left, text centered */
.uam .auth-social-icon-wrap {
  position: absolute;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 20px;
  color: #222222;
}

.uam .auth-social-text {
  flex: 1 1;
  text-align: center;
}

/* Google SVG icon — no color override needed (paths have fill) */
.uam .auth-google-svg {
  width: 20px;
  height: 20px;
}

/* Apple icon — black */
.uam .auth-social-btn--apple .auth-social-icon-wrap {
  font-size: 22px;
  color: #222222;
}

.uam .auth-social-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.uam .auth-social-btn:hover:not(:disabled) {
  background: #f9fafb !important;
}

.uam .auth-social-btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Mobile adjustments */
@media (max-width: 375px) {
  .uam .auth-social-btn {
    font-size: 13px;
    padding: 10px 14px;
  }
  .uam .auth-social-icon-wrap {
    left: 14px;
    width: 20px;
    height: 20px;
    font-size: 18px;
  }
}

/* ========================================
   STEP HEADER — Airbnb-style back arrow + title
   ======================================== */
.uam-step-header {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 0 0 8px;
}

.uam-step-header .back-arrow {
  position: absolute;
  left: 0;
  font-size: 20px;
  cursor: pointer;
  color: #222;
  padding: 4px 8px;
  line-height: 1;
}

.uam-step-title {
  flex: 1 1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

.uam-step-divider {
  height: 1px;
  background: #ebebeb;
  margin: 0 -24px 16px;
}

/* ========================================
   LINK BUTTONS — Forgot password, More options, Need help
   Override styles.css ".auth-section button" (bg:#0B2533, border:none)
   ======================================== */
.uam .auth-section button.uam-link-btn {
  display: block !important;
  width: auto !important;
  background: none !important;
  border: none !important;
  color: #222 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 8px 0 !important;
  text-align: left !important;
  transition: opacity 0.15s !important;
  margin: 0 !important;
  border-radius: 0 !important;
  min-height: auto !important;
  box-shadow: none !important;
}

.uam .auth-section button.uam-link-btn:hover {
  opacity: 0.7 !important;
  background: none !important;
}

.uam .uam-need-help {
  text-align: center;
  margin-top: 16px;
}

.uam .uam-need-help a.uam-link-btn {
  display: inline !important;
  text-align: center !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
}

/* ========================================
   FORGOT PASSWORD OVERLAY — Airbnb redesign
   ======================================== */
.uam-forgot-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.uam-forgot-modal {
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.uam-forgot-header {
  display: flex;
  align-items: center;
  position: relative;
  padding: 16px 24px;
  border-bottom: 1px solid #ebebeb;
}

.uam-forgot-back {
  all: unset;
  position: absolute;
  left: 16px;
  font-size: 20px;
  cursor: pointer;
  color: #222;
  padding: 4px 8px;
  line-height: 1;
}

.uam-forgot-title {
  flex: 1 1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

.uam-forgot-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

.uam-forgot-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #484848;
  line-height: 1.5;
  margin: 0 0 20px;
}

.uam-forgot-input {
  width: 100%;
  padding: 16px 14px;
  border: 1px solid #b0b0b0;
  border-radius: 10px;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  color: #222;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.uam-forgot-input:focus {
  border-color: #222;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.uam-forgot-input::placeholder {
  color: #b0b0b0;
}

.uam-forgot-error {
  color: #c13515;
  font-size: 12px;
  margin-top: 6px;
  font-family: 'Montserrat', sans-serif;
}

.uam-forgot-submit {
  width: 100%;
  padding: 14px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: auto;
  min-height: 48px;
  transition: background 0.2s;
}

.uam-forgot-submit:hover:not(:disabled) {
  background: #444;
}

.uam-forgot-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Success state */
.uam-forgot-success {
  text-align: center;
  padding: 32px 24px;
}

.uam-forgot-success-icon {
  font-size: 48px;
  color: #0b9e43;
  margin-bottom: 12px;
}

.uam-forgot-success h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin: 0 0 8px;
}

.uam-forgot-success p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #484848;
  margin: 0 0 20px;
  line-height: 1.5;
}

.uam-forgot-ok {
  background: #222;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.uam-forgot-ok:hover {
  background: #444;
}

/* ========================================
   Sign-up handle field (2026-09-30)
   ONE bordered box; "@" and the input are flex siblings aligned on their
   shared TEXT BASELINE (align-items: baseline), so the "@" and the typed text
   sit on one line whatever font the browser gives the <input>. The input's
   own border/margin are removed — the box carries the border — so the frozen
   `.auth-input` / `.auth-section input[type="text"]` rules (15px margin-bottom,
   own border) can no longer push the "@" off the text.
   Specificity: `.uam .uam-handle-box input.uam-handle-input` (0,3,1) beats
   `.auth-section input[type="text"]` (0,2,1) without !important.
   ======================================== */
.uam .uam-handle-box {
  display: flex;
  align-items: baseline;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.uam .uam-handle-box:focus-within {
  border-color: #000;
}
.uam .uam-handle-box.is-error {
  border-color: #DC2626;
}
.uam .uam-handle-at {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
  color: #64748B;
  -webkit-user-select: none;
          user-select: none;
}
.uam .uam-handle-box input.uam-handle-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  /* ≥16px so iOS Safari does not zoom the page on focus */
  font-size: 16px;
  line-height: 1.25;
}
.uam .uam-handle-status {
  flex: 0 0 auto;
  min-width: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.uam .uam-handle-status.is-ok { color: #16A34A; }
.uam .uam-handle-status.is-bad { color: #DC2626; }
.uam .uam-handle-status.is-checking { color: #64748B; font-size: 12px; }

.uam .uam-handle-msg {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
}
.uam .uam-handle-msg.is-error { color: #B91C1C; }
/* (0,3,1) beats the frozen `.auth-section button` (0,1,1) dark-slab rule. */
.uam .uam-handle-msg button.uam-handle-suggest {
  all: unset;
  display: inline;
  color: #2563EB;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* comfortable tap target without shifting the line */
  padding: 6px 2px;
  margin: -6px 0;
}
.uam .uam-handle-msg button.uam-handle-suggest:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}
.uam .uam-handle-hint {
  margin: 4px 0 15px;
  font-size: 11px;
  color: #94A3B8;
}

/* Neutral guidance line (not an error) */
.uam .uam-notice {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #0F172A;
  font-size: 14px;
  line-height: 1.4;
}

/* One verification card: the pending (pink) card flips to this confirmation
   state IN PLACE — same box, same size, same position. */
.uam .verification-reminder.uam-verify--sent {
  background-color: #f0fdf4;
  border-color: #a7f3d0;
}
.uam .verification-reminder .uam-verify-check {
  color: #00a700;
  margin-right: 8px;
}
.uam .verification-reminder .uam-verify-error {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #b42318;
}

/* ========================================
   Sign-up password checklist (CD 2026-10-01) — namespace .uam-pw-*
   Existing warm-canvas ink tokens (design-tokens.css), with literal fallbacks
   because the modal can mount before that sheet's chunk has loaded.
   NO moss (moss = "an authority vouched for this"), NO rosewood: unmet is a
   hollow --ink-4 dot, met is an --ink check; the field-error colour appears
   only after a refused submit, paired with a ✕ so colour is never alone.
   Spacing (CD): 8px under the field, 4px between rows, 16px to the Terms rows.
   The form is a flex column (frozen `.auth-section`: gap 0.4rem), so sibling
   margins do not collapse. Between the password <input> and the next sibling
   the frozen rules already put: input margin-bottom 15px (`.auth-input`) +
   `.input-group` margin-bottom 0.5rem + that 0.4rem gap = 29.4px. The block
   pulls itself up by exactly that to land at 8px, and keeps 16px - 0.4rem gap
   - the Terms row's own 8px margin-top below it. Measured in the capture
   harness (README in captures/): 8 / 4 / 16.
   ======================================== */
.uam .uam-pw {
  margin: calc(8px - 15px - 0.5rem - 0.4rem) 0 calc(16px - 0.4rem - 8px);
  font-size: 13px;
  line-height: 18px;
}
.uam .uam-pw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; /* single column at every width, including 390 */
}
.uam .uam-pw-row,
.uam .uam-pw-done {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 18px;
}
.uam .uam-pw-row::before,
.uam .uam-pw-row::marker {
  content: none;
}
.uam .uam-pw-glyph {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-top: 3px; /* centres the 12px glyph on the 18px line */
}
/* unmet: hollow dot, quiet label */
.uam .uam-pw-row[data-state="unmet"] {
  color: #6B7A82;
  color: var(--ink-3, #6B7A82);
}
.uam .uam-pw-row[data-state="unmet"] .uam-pw-glyph {
  color: #9AA5AC;
  color: var(--ink-4, #9AA5AC);
}
/* met: ink check, label steps up one ink */
.uam .uam-pw-row[data-state="met"] {
  color: #3B4A52;
  color: var(--ink-2, #3B4A52);
}
.uam .uam-pw-row[data-state="met"] .uam-pw-glyph,
.uam .uam-pw-done .uam-pw-glyph {
  color: #1A1A1A;
  color: var(--ink, #1A1A1A);
}
.uam .uam-pw-done {
  color: #3B4A52;
  color: var(--ink-2, #3B4A52);
}
/* refused submit: the existing field-error colour + ✕ (never colour alone) */
.uam .uam-pw-row[data-state="failed"],
.uam .uam-pw-row[data-state="failed"] .uam-pw-glyph {
  color: #B91C1C; /* = .uam-handle-msg.is-error */
}
/* state words for screen readers only */
.uam .uam-pw-sr,
.uam .uam-pw-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* TurnstileWidget — prefixed CSS (.ts-*). styles.css is FROZEN; never touch it. */

.ts-widget {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 8px 0 4px;
  min-height: 0;
}

/* Only reserve vertical space once the widget has actually rendered, so the
   invisible/managed mode doesn't leave a permanent empty gap on forms where
   no interactive challenge ever appears. */
.ts-widget--rendered {
  min-height: 65px;
}

.ts-widget__mount {
  max-width: 100%;
}

/* ==========================================================================
   musDir Design System v1.2 — CSS Custom Properties (Design Tokens)
   ==========================================================================
   USAGE: @import '../../../styles/design-tokens.css';
          (adjust relative path depth as needed)

   RULES:
   - Import this file at the top of every NEW component CSS file
   - Never import this into styles.css (that file is frozen)
   - Use these variables for all colors, fonts, spacing, radii, shadows
   - Never hardcode hex values or px values that have a token equivalent
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Colors
     --md-primary  → crimson: CTAs, active states, selected borders, highlights
                     NEVER as full backgrounds
     --md-navy     → section titles, headings, high-emphasis text
     --md-black    → body text, labels
     --md-gray-*   → progressively lighter: 700=secondary text, 500=placeholders,
                     400=borders/dividers, 300=light borders, 200=input bg/chips,
                     100=page bg / subtle fills
     --md-gold     → star ratings ONLY
     -------------------------------------------------------------------------- */

  --md-primary:       #DA2A58;
  --md-primary-light: #FEF1F4;
  --md-navy:          #0B2533;
  --md-black:         #111827;
  --md-gray-900:      #1F2937;
  --md-gray-700:      #4B5563;
  --md-gray-600:      #6B7280;
  --md-gray-500:      #9CA3AF;
  --md-gray-400:      #D1D5DB;
  --md-gray-300:      #E5E7EB;
  --md-gray-200:      #F3F4F6;
  --md-gray-100:      #F9FAFB;
  --md-white:         #FFFFFF;
  --md-gold:          #FF9F0A;
  --md-success:       #10B981;
  --md-error:         #EF4444;

  /* --------------------------------------------------------------------------
     Typography
     --font-body    → all body text, labels, buttons, inputs, meta
     --font-display → page titles, hero headings only — surgical use
     -------------------------------------------------------------------------- */

  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* --------------------------------------------------------------------------
     Spacing — 8px base grid
     All padding and margins should be multiples of 8px.
     --space-1 = 4px  (half-step, use sparingly)
     --space-2 = 8px
     --space-3 = 12px (three-quarter step)
     --space-4 = 16px
     --space-5 = 20px
     --space-6 = 24px
     --space-8 = 32px
     --space-10 = 40px
     --space-12 = 48px
     -------------------------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --------------------------------------------------------------------------
     Border Radii
     --radius-sm   → chips, tags, small badges
     --radius-md   → inputs, buttons, cards
     --radius-lg   → modals, large cards, overlays
     --radius-full → pills, circular elements
     -------------------------------------------------------------------------- */

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Shadows
     --shadow-sm → subtle card lift, hover states
     --shadow-md → dropdowns, tooltips, popovers
     --shadow-lg → modals, overlays, floating elements
     -------------------------------------------------------------------------- */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* --------------------------------------------------------------------------
     Component Shortcuts
     Pre-composed values for common component patterns.
     -------------------------------------------------------------------------- */

  /* Input fields */
  --input-height:       48px;
  --input-border:       1.5px solid var(--md-gray-300);
  --input-border-focus: 1.5px solid var(--md-primary);
  --input-ring-focus:   0 0 0 3px rgba(218, 42, 88, 0.10);
  --input-bg:           var(--md-gray-100);
  --input-bg-focus:     var(--md-white);
  --input-font-size:    15px;
  --input-radius:       var(--radius-md);

  /* Touch targets (Apple + Google standard) */
  --touch-target: 48px;

  /* Page container */
  --container-max:     1200px;
  --container-pad-mob: var(--space-4);   /* 16px mobile */
  --container-pad-tab: var(--space-6);   /* 24px tablet+ */

  /* Header height (used for sticky positioning offsets) */
  --header-height: 64px;

  /* ==========================================================================
     Slice W2 — Warm-canvas tokens (Business Detail page redesign)
     Lifted verbatim from web-mockups/musdir-tokens.jsx. Do not invent new tokens.
     Scoped by name (--ink, --canvas, --rosewood…) so these never collide with
     the legacy --md-* palette above. Use these exclusively in .bd2-* CSS.
     ========================================================================== */

  /* Color */
  --ink:       #1A1A1A;
  --ink-2:     #3B4A52;
  --ink-3:     #6B7A82;
  --ink-4:     #9AA5AC;
  --canvas:    #F4F1EC;
  --canvas-2:  #EAE5DB;
  --canvas-3:  #DCD5C8;
  --paper:     #FFFFFF;
  --rosewood:  #A8324A;
  --moss:      #2F6B4F;
  --amber:     #C8913A;
  --line:      rgba(11, 37, 51, 0.08);
  --scrim:     rgba(0, 0, 0, 0.04);

  /* Type */
  --font-w2-display: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --font-w2-ui:      "Inter", -apple-system, system-ui, sans-serif;
  --font-w2-arabic:  "Amiri", "Noto Naskh Arabic", serif;

  /* Radius */
  --r-card:  20px;
  --r-photo: 20px;
  --r-chip:  99px;

  /* Shadow */
  --sh-card:  0 1px 3px rgba(11, 37, 51, 0.05), 0 12px 28px -14px rgba(11, 37, 51, 0.14);
  --sh-float: 0 6px 24px rgba(11, 37, 51, 0.12), 0 1px 2px rgba(11, 37, 51, 0.04);

  /* Action button active tones (Slice W2 §6 override 2026-04-27).
     Save and Like are distinct intents and must read as visually distinct
     at a glance. Do not unify these. */
  --save-active: #FF5F6D;             /* iOS-app parity crimson — Save active */
  --like-active: var(--rosewood);     /* #A8324A — Like active, palette alias */

  /* ── Motion (Slice W2 §Motion — codified 2026-04-27, post §5.5+§9 round) ─
     Two curves carry the entire motion vocabulary on this page family.
     Picking a third one in the future requires a justification — pile-up of
     curves is how interaction language gets noisy.

     --motion-spring  → playful overshoot. Use when an action wants to be
                        FELT (Save tap pulse, mobile sheet entrance, like
                        toggle). iOS-app spring family. Avoid on dismiss.
     --motion-ease    → calm in-out. Use for desktop modal pop-in, fade
                        transitions, opacity changes. Doesn't draw attention.

     Mobile sheets slide UP (matches iOS bottom-sheet vocabulary).
     Desktop modals POP-IN with scale (matches Stripe/Linear/Notion).
     One pattern for one physical context — don't force one on both.    */
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease:   cubic-bezier(0.16, 1, 0.3, 1);

}

/* NotificationPanel.css — the notification inbox panel.
   Prefix: .md-notif-*. Tokens from design-tokens.css. styles.css is FROZEN.

   CD touchpoint 2026-06-01 (docs/architecture/cd-web-notification-bell-bundle/
   notif-surfaces.jsx). Desktop = 384px anchored dropdown (radius 16, float
   shadow, hairline border), portaled to <body> by NotificationBell. Mobile =
   full-width bottom sheet (radius 20 20 0 0, slides up). MD-token → CSS-var:
     MD.ink → --ink · MD.ink2 → --ink-2 · MD.ink3 → --ink-3
     MD.rosewood → --rosewood · MD.line → --line
     MD.canvas → --canvas · MD.canvas2 → --canvas-2 · MD.paper → --paper
     MD.display → --font-w2-display · MD.ui → --font-w2-ui
     MD.shFloat → --sh-float                                                   */

/* ════════════════════════════════════════════════════════════════════════
   Panel shell — desktop dropdown (default). The .md-notif-portal wrapper that
   NotificationBell renders sets width: min(384px, calc(100vw - 16px)).
   ════════════════════════════════════════════════════════════════════════ */
.md-notif-panel {
  display: flex;
  flex-direction: column;
  max-height: min(560px, calc(100vh - 96px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px; /* CD desktop dropdown */
  box-shadow: var(--sh-float);
  overflow: hidden;
  font-family: var(--font-w2-ui);
  animation: md-notif-pop-in 220ms var(--motion-ease) both;
  transform-origin: top right;
}

@keyframes md-notif-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-notif-panel {
    animation: none;
  }
}

/* ── Header — "Notifications" (display 19) · N new (rosewood) · Mark all read ─ */
.md-notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.md-notif-panel-titlewrap {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.md-notif-panel-title {
  font-family: var(--font-w2-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.md-notif-panel-new {
  font-family: var(--font-w2-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--rosewood);
  white-space: nowrap;
}

.md-notif-markall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--rosewood);
  font-family: var(--font-w2-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color 140ms var(--motion-ease);
}

.md-notif-markall:hover {
  background: color-mix(in srgb, var(--rosewood) 8%, transparent);
}

/* ── List ── */
.md-notif-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════════════════════════
   Row — icon tile (40, r11, soft tint) · title+time baseline · 2-line body ·
   rosewood unread dot. Unread = warm --canvas wash + 600 title (CD), read =
   plain paper.
   ════════════════════════════════════════════════════════════════════════ */
.md-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-w2-ui);
  transition: background-color 120ms var(--motion-ease);
}

.md-notif-row:last-of-type {
  border-bottom: none;
}

.md-notif-row:hover {
  background: var(--canvas);
}

/* Unread rows: a quiet warm-canvas wash (not a colour tint) + a trailing
   rosewood dot + 600-weight title. */
.md-notif-row.is-unread {
  background: var(--canvas);
}

.md-notif-row.is-unread:hover {
  background: var(--canvas-2);
}

/* Icon tile — 40px, radius 11, soft tint (set inline from notificationMeta). */
.md-notif-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
}

.md-notif-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Title + time share a baseline row. */
.md-notif-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.md-notif-row-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  /* keep titles to one line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-notif-row.is-unread .md-notif-row-title {
  font-weight: 600;
}

.md-notif-time {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.md-notif-row-text {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tapping a row with no destination expands it in place — full title wraps,
   body un-clamps — so no-route notifications are fully readable. */
.md-notif-row.is-expanded .md-notif-row-title {
  white-space: normal;
  overflow: visible;
}
.md-notif-row.is-expanded .md-notif-row-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Trailing rosewood unread dot, vertically centred against the row. */
.md-notif-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--rosewood);
  align-self: center;
}

/* ── Footer — "See all notifications →" ── */
.md-notif-footer {
  flex: 0 0 auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 16px;
  border: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-w2-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms var(--motion-ease);
}

.md-notif-footer:hover {
  background: var(--canvas);
}

/* ── Load more ── */
.md-notif-loadmore {
  width: 100%;
  padding: 12px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-w2-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms var(--motion-ease);
}

.md-notif-loadmore:hover:not(:disabled) {
  background: var(--canvas);
}

.md-notif-loadmore:disabled {
  color: var(--ink-3);
  cursor: default;
}

/* ════════════════════════════════════════════════════════════════════════
   States — loading / empty / error
   Empty (CD): bell-off in a 56px canvas-2 circle · italic display title ·
   subtext.
   ════════════════════════════════════════════════════════════════════════ */
.md-notif-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 46px 28px 50px;
  text-align: center;
}

.md-notif-empty-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--canvas-2);
  margin-bottom: 10px;
}

.md-notif-empty-icon {
  color: var(--ink-3);
}

.md-notif-empty-title {
  margin: 0;
  font-family: var(--font-w2-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}

.md-notif-empty-sub {
  margin: 6px auto 0;
  max-width: 240px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.md-notif-retry {
  margin-top: 4px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-full);
  color: var(--ink);
  font-family: var(--font-w2-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.md-notif-retry:hover {
  background: var(--canvas);
}

/* Spinner — small ring, rosewood top edge. */
.md-notif-spinner {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 2.5px solid var(--canvas-2);
  border-top-color: var(--rosewood);
  animation: md-notif-spin 720ms linear infinite;
}

@keyframes md-notif-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-notif-spinner {
    animation-duration: 1600ms;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile (≤768px) — full-width bottom sheet, slides up.
   The .md-notif-portal wrapper is repositioned to the bottom of the viewport
   and full-width; the panel itself becomes the sheet (rounded top, no float
   shadow border-radius mismatch).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .md-notif-portal {
    /* Override the JS-set top/right anchoring — the sheet pins to the bottom
       edge, full width. !important is required because the anchor coords are
       applied inline by NotificationBell's getBoundingClientRect positioning. */
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  .md-notif-panel {
    max-height: 82vh;
    border-radius: 20px 20px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -10px 40px rgba(11, 37, 51, 0.18);
    animation: md-notif-sheet-up 260ms var(--motion-ease) both;
    transform-origin: bottom center;
    padding-top: 12px; /* room for the grabber */
  }

  /* CSS-only grabber affordance for the bottom sheet (CD sheet grabber). */
  .md-notif-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--canvas-3);
    z-index: 1;
  }

  @keyframes md-notif-sheet-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .md-notif-panel {
      animation: none;
    }
  }
}

/* ── WAVE 1 — Follow provenance line (CD R8-5) ─────────────────────────────
   "Because you follow {host}", on its own line under the body of an
   organizer_new_event row. Quieter than the body: it is the reason, not the
   news. It answers "why am I getting this?" so the actionable response
   (unfollow) is obvious rather than buried — the difference between a
   notification a person keeps and one they mute. */
.md-notif-row-why {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* ── BOOM #10 — the support split ──────────────────────────────────────────
   Two owners, named at the point the reader has the question: the ORGANIZER
   owns the event (parking, timing, what to bring) and musDir owns the
   registration (a code that will not scan). The confirmation email has split
   these since W4; the in-app row carried neither, so both questions went
   wherever the reader guessed.

   Quieter than the body and quieter still than `-why`: this is reference, not
   news. Rendered whenever the server sends it — NOT gated behind the expanded
   state, because on iOS an RSVP row navigates instead of expanding, and a line
   that exists on one platform only is the divergence the twin rule forbids.

   `word-break` because an organizer email can be long and this sits inside a
   fixed-width dropdown; the row must not force the panel wider. */
.md-notif-support {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(11, 37, 51, 0.08);
  border-top: 1px solid var(--line, rgba(11, 37, 51, 0.08));
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.md-notif-support-line + .md-notif-support-line {
  margin-top: 3px;
}

.md-notif-support-line {
  display: block;
}

/* NotificationBell.css — header "account & alerts" cluster: greeting + bell +
   avatar, with the two-signal badge system (rosewood count pill on the bell,
   amber nudge dot on the avatar).

   Prefix: .md-notif-*. Tokens from design-tokens.css. styles.css is FROZEN —
   every rule here either lives under a new .md-notif-* class OR overrides a
   frozen header class with a HIGHER-SPECIFICITY scoped selector
   (.md-notif-cluster .profile-container etc.), never a one-class rule that
   would race the frozen sheet.

   CD touchpoint 2026-06-01 (docs/architecture/cd-web-notification-bell-bundle):
   bell moves from first-in-cluster to immediately-left-of-avatar; on desktop
   the two sit in a quiet paper capsule with a hairline divider; on mobile they
   pair tightly, top-right, no capsule. MD-token → CSS-var map:
     MD.ink → --ink · MD.ink2 → --ink-2 · MD.ink3 → --ink-3
     MD.rosewood → --rosewood · MD.amber → --amber · MD.moss → --moss
     MD.line → --line · MD.canvas → --canvas · MD.canvas2 → --canvas-2
     MD.paper → --paper · MD.shFloat → --sh-float                              */

/* ════════════════════════════════════════════════════════════════════════
   The "account & alerts" cluster — desktop paper capsule
   CD: padding 3px 4px 3px 6px · radius 99px · paper bg · 1px line border ·
       0 1px 2px rgba(11,37,51,.05) shadow · divider 1px×18px between bell+avatar
   ════════════════════════════════════════════════════════════════════════ */
.md-notif-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 6px;
  border-radius: var(--radius-full);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11, 37, 51, 0.05);
}

/* Hairline divider between the bell and the avatar unit. */
.md-notif-cluster-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: var(--line);
  border-radius: 1px;
}

/* The existing avatar/menu unit (.profile-container, defined in frozen
   styles.css with its own #ddd border + 5px/12px padding + 21px radius) sits
   INSIDE the capsule. Inside the capsule the capsule is the only visible
   container, so strip the inner unit's own chrome — these two-class selectors
   out-specify the frozen one-class rules and never touch styles.css. */
.md-notif-cluster .profile-container {
  border: none;
  padding: 2px 2px;
  border-radius: var(--radius-full);
}
.md-notif-cluster .profile-container:hover {
  box-shadow: none;
  background: var(--scrim);
}

/* Greeting leads and dims (CD: --ink-3). The frozen .welcome-text sets color
   #333 + 15px left margin; scope-override the color and let the cluster's own
   gap own the spacing. */
.header-right .welcome-text.md-notif-greeting {
  color: var(--ink-3);
}

/* ════════════════════════════════════════════════════════════════════════
   Bell button
   CD: 34px in the desktop capsule · transparent · 99px · ink glyph (size 20–21)
   ════════════════════════════════════════════════════════════════════════ */
.md-notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms var(--motion-ease),
    color 140ms var(--motion-ease);
}

.md-notif-bell:hover {
  background: var(--canvas-2);
}

/* Open state — the bell wears the quiet pressed fill while the panel is up. */
.md-notif-bell.is-active {
  background: var(--canvas-2);
}

.md-notif-bell:focus-visible {
  outline: 2px solid var(--rosewood);
  outline-offset: 2px;
}

.md-notif-bell svg {
  width: 20px;
  height: 20px;
}

/* ── Notifications signal: rosewood COUNT pill ──────────────────────────────
   CD: min-width 18 · height 18 · radius 99 · rosewood bg · paper numerals ·
       11px / 700 · 2px ring in the surface fill it sits on (paper, in capsule).
       Caps at 9+ (JS), hidden at 0 (JS), pops in on increment via spring.     */
.md-notif-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--font-w2-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--paper);
  background: var(--rosewood);
  /* Ring = the paper capsule fill the badge floats on, so it reads cleanly. */
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: var(--radius-full);
  pointer-events: none;
  animation: md-notif-badge-pop 260ms var(--motion-spring) both;
}

@keyframes md-notif-badge-pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* ── Profile-completion signal: amber DOT (no number) on the avatar ──────────
   CD: 11px circle · amber · 2px ring in the surface fill · top-right of avatar.
   Replaces the frozen red "1" (.profile-badge) — same anchor (.icon-with-badge
   is position:relative), new class so styles.css is never touched.            */
.md-notif-nudge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .md-notif-badge {
    animation: none;
  }
}

/* ── Portal wrapper — fixed-positioned, anchored under the bell by JS. ─────── */
.md-notif-portal {
  position: fixed;
  z-index: 1100; /* above .header (1000) */
}

/* Scrim — only the mobile bottom sheet dims the page behind it. On desktop the
   anchored dropdown floats over the page with no scrim, so hide it. */
.md-notif-scrim {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile (≤768px): tight pair, no capsule. Bell 38, avatar 32.
   Mirrors the header's own mobile breakpoint (.header-right @ max-width:768px).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Bottom-sheet scrim — dims the page behind the sheet. */
  .md-notif-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.32);
    z-index: 1099; /* below the portal (1100), above the header (1000) */
    animation: md-notif-scrim-in 200ms var(--motion-ease) both;
  }

  @keyframes md-notif-scrim-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .md-notif-scrim {
      animation: none;
    }
  }

  .md-notif-cluster {
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* No capsule → no divider on mobile. */
  .md-notif-cluster-divider {
    display: none;
  }

  /* Inner avatar unit reverts to its own frozen chrome on mobile (the capsule
     no longer wraps it), so don't strip its border here — but keep it compact. */
  .md-notif-cluster .profile-container {
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 21px;
  }

  .md-notif-bell {
    width: 38px;
    height: 38px;
  }

  .md-notif-bell svg {
    width: 21px;
    height: 21px;
  }

  /* Off the paper capsule, both badges ring against the warm canvas header
     (CD mobile mock: ring = MD.canvas). */
  .md-notif-badge {
    box-shadow: 0 0 0 2px var(--canvas);
  }

  .md-notif-nudge-dot {
    box-shadow: 0 0 0 2px var(--canvas);
  }
}

/* ===== Footer (musDir) ===== */

/* Container */
.footer {
  border-top: 1px solid #eef1f3;
  background: #fff;
  color: #2b3440;
  padding: 0;
  margin: 0;
}
.footer-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 24px;
  box-sizing: border-box;
}

/* Top row: three columns on desktop, stacked on mobile */
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  width: 100%;
}

.footer-left,
.footer-center,
.footer-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Left: © + logo. This cluster must read as ONE line at every width — the
   desktop grid gives it its natural (auto) column and lets the LINKS wrap
   instead (they already flex-wrap). Earned 2026-07-17: adding "Partner with
   Us" squeezed a 1fr left cell and the copyright shattered mid-phrase. */
.footer-left {
  gap: 8px;
  color: #667684;
  font-size: 14px;
  order: 1;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.footer-logo {
  height: 90px;
  width: auto;
  flex-shrink: 0;
  display: inline-block;
}

/* Center: dot-separated links (Airbnb-like) */
.footer-center {
  order: 2;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin: 0;
}
.footer-link {
  display: inline-block;
  color: #2b3440;
  font-size: 14px;
  text-decoration: none;
  padding: 4px 0;
  white-space: nowrap;
}
.footer-link:hover {
  text-decoration: underline;
}
/* Dot separator */
.footer-nav .footer-link + .footer-link::before {
  content: "·";
  margin: 0 8px;
  color: #b0bcc7;
}

/* Right: socials */
.footer-right {
  gap: 6px;
  order: 3;
}
.footer-social {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.footer-social .social-link {
  color: #9aa6b2;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Smooth the hover lift — without this the translateY was an instant
     jump rather than a bounce (founder 2026-07-31). Transform+filter only,
     so it stays on the compositor (no layout thrash). */
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 160ms ease, color 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .footer-social .social-link {
    transition: color 160ms ease;
  }
  .footer-social .social-link:hover {
    transform: none;
  }
}
.footer-social .social-link:hover {
  color: #0b2533;
}

/* Bottom row: micro-chips for stores */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  width: 100%;
}
.store-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.chip {
  --c: #0b2533;
  --bg: #f7f9fb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e6e8ea;
  border-radius: 9999px;
  background: var(--bg);
  color: var(--c);
  font-size: 12px;
  line-height: 1;
  cursor: default;
}
.chip-ico {
  font-size: 14px;
}
.chip-text {
  font-weight: 600;
  letter-spacing: 0.2px;
}
.chip-soon {
  font-style: normal;
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: #e9eef2;
  color: #506170;
  font-size: 11px;
}

.footer-powered {
  margin: 0;
  color: #7b8895;
  font-size: 13px;
  text-align: center;
}

/* Hover lift (desktop only) */
@media (hover: hover) {
  .chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }
}

/* Overlays */
.footer-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  z-index: 12000 !important;
  box-sizing: border-box;
}
.footer-overlay .footer-overlay-content {
  position: relative;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  box-sizing: border-box;
}
.footer-overlay .footer-overlay-content h2 {
  margin: 0 36px 12px 36px;
  font-size: 20px;
  line-height: 1.25;
  text-align: center;
}
.footer-overlay .overlay-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
}
.footer-overlay .overlay-body {
  overflow-wrap: anywhere;
  text-align: left;
}
.footer-overlay .overlay-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 16px 0 6px;
}
.footer-overlay .overlay-body p,
.footer-overlay .overlay-body li {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.footer-overlay .overlay-button {
  margin-top: 14px;
}

/* About mark */
.about-mark {
  --about-mark-size: 96px;
  display: block;
  width: var(--about-mark-size);
  height: var(--about-mark-size);
  margin: 4px auto 10px auto;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid #e6e8ea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- Desktop: 3-column layout --- */
@media (min-width: 1024px) {
  .footer-top {
    display: grid;
    /* Copyright + socials take natural width; the LINKS column absorbs the
       squeeze (minmax(0,1fr) lets .footer-nav wrap instead of overflowing).
       Was 1fr auto 1fr — the links' auto column starved the copyright cell. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    grid-gap: 20px;
    gap: 20px;
    width: 100%;
  }

  .footer-left {
    justify-content: flex-start;
    order: 1;
  }

  .footer-center {
    justify-content: center;
    order: 2;
  }

  .footer-right {
    justify-content: flex-end;
    order: 3;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }

  .footer-bottom-left {
    display: flex;
    justify-content: flex-start;
    width: auto;
  }

  .footer-bottom-right {
    display: flex;
    justify-content: flex-end;
    width: auto;
  }
}

/* --- Mobile adjustments --- */
@media (max-width: 1023.98px) {
  .footer-left {
    margin-bottom: 10px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }

  .footer-powered {
    margin-top: 8px;
  }
}

/* Brand colors for social icons in footer */
.footer-social .social-link.ig {
  color: #e4405f;
} /* Instagram */
.footer-social .social-link.fb {
  color: #1877f2;
} /* Facebook */
.footer-social .social-link.tiktok {
  color: #010101;
} /* TikTok */
.footer-social .social-link.whatsapp {
  color: #25d366;
} /* WhatsApp official green */

/* Gentle hover lift while preserving brand color.
   Applies to EVERY brand icon — IG/FB had it, WhatsApp + TikTok were left
   out of the selector so they sat static next to two bouncy siblings
   (founder 2026-07-31). Same omission class as the WhatsApp color bug. */
@media (hover: hover) {
  .footer-social .social-link.ig:hover,
  .footer-social .social-link.fb:hover,
  .footer-social .social-link.whatsapp:hover,
  .footer-social .social-link.tiktok:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
  }
}

/* Keep brand colors for IG/FB/WhatsApp/TikTok (default + hover).
   WhatsApp was declared once above WITHOUT !important, so the generic
   "darken non-brand icons on hover" rule below out-specified it and the
   icon rendered unbranded (founder 2026-07-31: "whatsapp icon is
   transparent"). Every brand icon now gets the same protection. */
.footer-social .social-link.ig,
.footer-social .social-link.ig:hover {
  color: #e4405f !important; /* Instagram */
}
.footer-social .social-link.fb,
.footer-social .social-link.fb:hover {
  color: #1877f2 !important; /* Facebook */
}
.footer-social .social-link.whatsapp,
.footer-social .social-link.whatsapp:hover {
  color: #25d366 !important; /* WhatsApp official green */
}
.footer-social .social-link.tiktok,
.footer-social .social-link.tiktok:hover {
  color: #010101 !important; /* TikTok */
}

/* Only darken on hover for icons with no brand color of their own */
.footer-social
  .social-link:not(.ig):not(.fb):not(.whatsapp):not(.tiktok):hover {
  color: #0b2533;
}

/* Brand color the chip icons (keep text neutral) */
.chip.store-appstore .chip-ico {
  color: #007aff;
} /* iOS blue */
.chip.store-play .chip-ico {
  color: #3ddc84;
} /* Google Play green */

/* Preserve color on hover, just add a tiny lift */
@media (hover: hover) {
  .chip.store-appstore:hover .chip-ico,
  .chip.store-play:hover .chip-ico {
    filter: brightness(0.95);
  }
}
/* Mobile: add a little space above the © line so it doesn't touch the top border */
@media (max-width: 1023.98px) {
  .footer-left {
    padding-top: 6px;
  } /* tweak to taste: 6–10px works well */
}

/* ===== Browse Section (SEO internal linking) ===== */
.footer-browse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid #eef1f3;
  margin-top: 16px;
}

.footer-browse-heading {
  font-size: 13px;
  font-weight: 700;
  color: #2b3440;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-browse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-browse-link {
  color: #667684;
  font-size: 13px;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s;
}

.footer-browse-link:hover {
  color: #DA2A58;
  text-decoration: none;
}

/* Mobile: single column stacked */
@media (max-width: 599px) {
  .footer-browse {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ===== Trust Badges Section (Privacy-First Positioning) ===== */
.footer-trust {
  padding: 16px 0;
  text-align: center;
  border-top: 1px solid #eef1f3;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.footer-trust-text {
  font-size: 13px;
  color: #667684;
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

/* Desktop: slightly larger text */
@media (min-width: 768px) {
  .footer-trust-text {
    font-size: 14px;
  }
}


/* ── Partner overlay: decal callout (founder ask 2026-07-12) ── */
.partner-decal-callout {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(196, 56, 87, 0.35);
  border-left: 4px solid #c43857;
  border-radius: 12px;
  background: rgba(196, 56, 87, 0.06);
}
.partner-decal-title {
  font-weight: 700;
  font-size: 15px;
  color: #c43857;
  margin-bottom: 6px;
}
.partner-decal-text {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.partner-decal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.partner-decal-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #c43857;
  color: #c43857;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.partner-decal-btn--primary {
  background: #c43857;
  color: #fff;
}
.partner-decal-btn:hover {
  opacity: 0.85;
}

/* musDir feedback modal — mobile-first, Montserrat */
.md-feedback-error {
  color: #b3261e;
  font-size: 13px;
  line-height: 1.35;
  margin: 4px 0 2px;
}

.md-feedback-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 23, 33, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.md-feedback-modal {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto,
    sans-serif;
  width: min(560px, 92vw);
  background: #fff;
  border: 1px solid #e6e8ea;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  padding: 18px 16px 16px;
  position: relative;
  max-height: min(88vh, 720px);
  overflow: auto;
}

/* Close button (top-right) */
.md-close {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 36px;
  width: 36px;
  border-radius: 10px;
  border: 1px solid #e6e8ea;
  background: #fff;
  color: #0b2533;
  display: grid;
  place-items: center;
}
.md-close:hover {
  background: #f5f7f8;
}

/* Title + sub */
.md-title {
  margin: 4px 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: #0b2533;
}
.md-sub {
  margin: 0 0 12px;
  color: #3a4a57;
  font-size: 14px;
}

/* Fields (mirrors profile inputs) */
.md-form {
  margin-top: 6px;
}
.md-field {
  margin-bottom: 12px;
}
.md-label {
  display: block;
  font-size: 13px;
  color: #3a4a57;
  margin-bottom: 6px;
}
.md-field input,
.md-field select,
.md-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #e1e5e8;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
}
.md-field input:focus,
.md-field select:focus,
.md-field textarea:focus {
  outline: none;
  border-color: #0b2533;
  box-shadow: 0 0 0 3px rgba(11, 37, 51, 0.1);
}

/* Readonly "From: email" chip for signed-in users */
.md-readonly-email {
  display: flex;
  align-items: center;
  gap: 8px;
}
.md-chip {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 9999px;
  background: #eef3f6;
  border: 1px solid #e1e5e8;
  color: #0b2533;
  font-size: 13px;
}

/* Actions */
.md-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}
.btn {
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  font-family: inherit;
}
.btn-primary {
  background: #0b2533;
  color: #fff;
  border: 1px solid #0b2533;
}
.btn-primary:hover:enabled {
  background: #163a4d;
}
.btn-ghost {
  background: #fff;
  border: 1px solid #e6e8ea;
  color: #0b2533;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Success state */
.md-success {
  text-align: center;
  padding: 16px 6px 6px;
  min-height: 40vh; /* keeps it visible even if scrolled */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.md-success-icon {
  margin: 0 auto 8px;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #22c55e;
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* Muted chip style for guests */
.md-chip.muted {
  background: #f7f8f9;
  color: #5b6b78;
  border-color: #e6e8ea;
  white-space: nowrap;
}

/* Make the modal height stable on mobile (handles dynamic browser UI) */
.md-feedback-modal {
  max-height: min(
    88svh,
    720px
  ); /* uses small-viewport units on modern mobiles */
  overflow: auto;
}

/* Center the success block even if user was scrolled near bottom */
.md-success {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Slightly wider/softer on phones */
@media (max-width: 768px) {
  .md-feedback-modal {
    width: 95vw;
    padding: 16px 14px 14px;
    max-height: 90svh; /* a bit taller on mobile */
  }
  .md-success {
    min-height: 50vh;
  }
}

/* (keep your existing file and append/adjust these) */

/* Stable mobile height (svh) + scrolling modal is already present */
.md-feedback-modal {
  max-height: min(88svh, 720px);
  overflow: auto;
}

/* Success state remains centered; add success actions spacing */
.md-success {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.md-success .md-success-icon {
  display: none;
} /* hidden if Lottie loads */

/* Lottie mount size; if Lottie fails, we re-show the ✓ fallback below */
.md-lottie {
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
}

/* If Lottie fails to attach (container stays empty), show the fallback ✓ */
.md-lottie:empty + .md-success-icon {
  display: grid;
}

/* OK button row */
.md-success-actions {
  margin-top: 12px;
}

/* Mobile tune */
@media (max-width: 768px) {
  .md-feedback-modal {
    width: 95vw;
    padding: 16px 14px 14px;
    max-height: 90svh;
  }
  .md-success {
    min-height: 50vh;
  }
}

/* --- 1) iOS focus-zoom fix: keep controls >=16px on mobile --- */
@media (max-width: 768px) {
  .md-field input,
  .md-field select,
  .md-field textarea {
    font-size: 16px !important; /* prevents Safari zoom on focus */
    line-height: 1.3;
  }
  .md-field input::placeholder,
  .md-field textarea::placeholder {
    font-size: 16px !important;
  }
}

/* --- 2) Larger Lottie on mobile (and responsive on wider screens) --- */
.md-lottie {
  /* responsive by default */
  width: clamp(96px, 22vw, 140px);
  height: clamp(96px, 22vw, 140px);
  margin: 0 auto 10px;
}

@media (max-width: 480px) {
  /* make it a touch bigger on small phones */
  .md-lottie {
    width: 132px;
    height: 132px;
  }
}

/* --- Select with chevron (no data-URI) --- */
.md-select-wrap {
  position: relative;
}
.md-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px; /* room for chevron */
}

/* Chevron (pointer-events:none so clicks pass to select) */
.md-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid #0b2533;
  border-bottom: 2px solid #0b2533;
  transform: rotate(45deg);
  pointer-events: none;
}

/* MasterPage overrides — safe additions that don't modify styles.css.
   Fixes the "titles touching the fixed header" issue across all pages. */

/* Header is position:fixed at 64px tall. The original .content rule in
   styles.css uses margin-top: 32px which is half the header — pages like
   /boards/explore, /profile, /dashboard get clipped at the top. Use a
   scoped override so we don't touch frozen styles.css. */
.master-page .content.content {
  /* Header is exactly 64px. Zero margin so content sits flush with
     the header border — no dead whitespace. Pages can add their own
     top padding if they need breathing room. */
  margin-top: 64px;
}

/*
 * feedback-overlay.css — web feedback overlay ("How are we doing?")
 * Ported from CD-Response-Web-Feedback-Overlay-2026-07-29 artboard <style> block.
 *
 * SCOPE RULE: every selector in this file is `.fbk-*`. styles.css is FROZEN
 * (see CLAUDE.md guardrails) — nothing here touches it, and nothing here
 * leaks outside the overlay (no element/global selectors, no resets).
 *
 * Positioning note: the CD artboards use `position:absolute` because each
 * mock sits inside a fake .device frame. In the real app the overlay is
 * portal-mounted to document.body, so toast/scrim/sheet are `position:fixed`.
 *
 * Tokens: warm-canvas values are declared locally on the two portal roots
 * (.fbk-toast / .fbk-sheet-wrap) rather than assumed from a page-level
 * wrapper — the overlay mounts to <body>, OUTSIDE .hp3-root, so it cannot
 * inherit V3's token scope. Values are copied from hp3-tokens.css / the CD
 * mock; no new tokens are minted (CD "no new tokens" ruling).
 */

.fbk-toast,
.fbk-sheet-wrap {
  --fbk-ink: #1a1a1a;
  --fbk-ink-2: #3b4a52;
  --fbk-ink-3: #6b7a82;
  --fbk-ink-4: #9aa5ac;
  --fbk-canvas: #f4f1ec;
  --fbk-canvas-2: #eae5db;
  --fbk-paper: #fff;
  --fbk-rosewood: #a8324a;
  --fbk-rosewood-soft: #fbeef1;
  --fbk-rosewood-deep: #7a1f30;
  --fbk-moss: #2f6b4f;
  --fbk-moss-soft: #e8f0eb;
  --fbk-line-2: rgba(11, 37, 51, 0.14);
  --fbk-line-3: rgba(11, 37, 51, 0.18);
  --fbk-sh-float: 0 18px 44px rgba(11, 37, 51, 0.26), 0 4px 12px rgba(11, 37, 51, 0.14);
  /* Two motion curves only — adding a third requires CD justification. */
  --fbk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fbk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── desktop corner toast (bottom-right, no scrim) ───────────────────── */
.fbk-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 330px;
  box-sizing: border-box;
  background: var(--fbk-paper);
  border: 1px solid var(--fbk-line-2);
  /* Presence pass (founder 2026-07-30: "it blends in") — rosewood top
     edge + deepened elevation so the ask reads as a distinct visitor on
     warm-canvas pages, not part of them. Pending CD blessing next round. */
  border-top: 3px solid var(--fbk-rosewood);
  border-radius: 18px;
  box-shadow: var(--fbk-sh-float);
  padding: 20px 20px 18px;
  /* Above page chrome, below the app's toast layer (100000) so status
     notifications are never occluded by a feedback ask. */
  z-index: 9500;
  font-family: Inter, system-ui, sans-serif;
  color: var(--fbk-ink);
  animation: fbkUp 0.45s var(--fbk-spring) both;
}

.fbk-toast *,
.fbk-sheet-wrap * {
  box-sizing: border-box;
}

.fbk-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--fbk-ink-4);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.fbk-x:hover {
  background: var(--fbk-canvas);
}

/* ── copy ─────────────────────────────────────────────────────────────── */
/* Kicker is the single composed register cue (W3 one-cue-per-slot rule). */
.fbk-kicker {
  font-family: Newsreader, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--fbk-rosewood);
  margin: 0 0 3px;
}
.fbk-h {
  font-family: Newsreader, serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--fbk-ink);
}
.fbk-p {
  font-size: 13px;
  color: var(--fbk-ink-3);
  line-height: 1.45;
  margin: 0 0 14px;
}

/* ── 3-point face scale (FINAL — founder pick 2026-07-30) ─────────────── */
.fbk-faces {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.fbk-face {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fbk-ink-3);
  background: var(--fbk-paper);
  border: 1px solid var(--fbk-line-3);
  border-radius: 14px;
  padding: 12px 6px 10px;
  cursor: pointer;
  transition: 0.15s;
}
.fbk-face:hover,
.fbk-face.on {
  border-color: var(--fbk-rosewood);
  background: var(--fbk-rosewood-soft);
  color: var(--fbk-rosewood);
}
.fbk-face:focus-visible {
  outline: none;
  border-color: var(--fbk-rosewood);
  box-shadow: 0 0 0 3px var(--fbk-rosewood-soft);
}
.fbk-face svg {
  width: 30px;
  height: 30px;
}

/* Clearance under the ✕ once the faces move up into the note state. */
.fbk-faces-note {
  margin: 22px 0 13px;
}

.fbk-notnow {
  display: block;
  margin: 12px auto 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fbk-ink-4);
  cursor: pointer;
}
.fbk-notnow:hover {
  color: var(--fbk-ink-3);
  text-decoration: underline;
}

/* ── note state ───────────────────────────────────────────────────────── */
.fbk-ta {
  width: 100%;
  font-family: inherit;
  /* 16px minimum: iOS Safari auto-zooms the page when focusing any input
     with a smaller computed font-size (founder 2026-07-30: "too much
     zoomed"). 16px is THE canonical no-zoom threshold, all devices. */
  font-size: 16px;
  color: var(--fbk-ink);
  border: 1px solid var(--fbk-line-3);
  border-radius: 12px;
  padding: 11px 13px;
  min-height: 84px;
  resize: none;
  margin-bottom: 11px;
  background: var(--fbk-paper);
  animation: fbkUnfold 0.35s var(--fbk-ease) 0.1s both;
  transform-origin: top;
}
.fbk-ta:focus {
  outline: none;
  border-color: var(--fbk-rosewood);
  box-shadow: 0 0 0 3px var(--fbk-rosewood-soft);
}
.fbk-ta::placeholder {
  color: var(--fbk-ink-4);
}

.fbk-contact {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* iOS no-zoom threshold — see note on the textarea */
  color: var(--fbk-ink);
  border: 1px solid var(--fbk-line-3);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 11px;
  background: var(--fbk-paper);
}
.fbk-contact:focus {
  outline: none;
  border-color: var(--fbk-rosewood);
  box-shadow: 0 0 0 3px var(--fbk-rosewood-soft);
}
.fbk-contact::placeholder {
  color: var(--fbk-ink-4);
}

.fbk-send-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: fbkFade 0.3s var(--fbk-ease) 0.25s both;
}
.fbk-skip {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fbk-ink-4);
  cursor: pointer;
  padding: 0;
}
.fbk-skip:hover {
  color: var(--fbk-ink-3);
  text-decoration: underline;
}
.fbk-send {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: none;
  background: var(--fbk-rosewood);
  color: #fff;
  cursor: pointer;
}
.fbk-send:hover {
  background: var(--fbk-rosewood-deep);
}
.fbk-send:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ── thank-you beat ───────────────────────────────────────────────────── */
.fbk-ty {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.fbk-tick {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fbk-moss-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fbk-tick svg {
  width: 18px;
  height: 18px;
}
.fbk-tick svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: fbkDraw 0.35s var(--fbk-ease) 0.35s forwards;
}
.fbk-ty-body {
  animation: fbkUp2 0.4s var(--fbk-ease) 0.15s both;
}
.fbk-ty-h {
  font-family: Newsreader, serif;
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 3px;
  color: var(--fbk-ink);
}
.fbk-ty-p {
  font-size: 13px;
  color: var(--fbk-ink-3);
  line-height: 1.45;
  margin: 0;
}
.fbk-ty-p a {
  font-weight: 500;
  color: var(--fbk-rosewood);
}
.fbk-ty-p a:hover {
  color: var(--fbk-rosewood-deep);
}

/* ── mobile bottom sheet (light .30 scrim) ────────────────────────────── */
.fbk-scrim { /* retired 2026-07-30: non-modal banner pattern (founder) — no scrim, page stays interactive */
  display: none;
}
.fbk-scrim-retired {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 9, 0.3);
  z-index: 9500;
  animation: fbkFade 0.25s var(--fbk-ease) both;
}
.fbk-sheet {
  position: fixed;
  /* .fbk-x is absolutely positioned; the sheet is its containing block. */
  /* TALL SHEET (founder direction 2026-07-30): keep the sheet form but
     let it command ~44% of the screen — height is what makes it read as
     its own moment instead of camouflaging as the page's content sheet.
     Rosewood top edge + deep float complete the separation. */
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--fbk-paper);
  border-top: 3px solid var(--fbk-rosewood);
  border-radius: 22px 22px 0 0;
  padding: 30px 24px;
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -14px 44px rgba(11, 37, 51, 0.26);
  z-index: 9501;
  font-family: Inter, system-ui, sans-serif;
  color: var(--fbk-ink);
  animation: fbkSheet 0.45s var(--fbk-spring) both;
}
.fbk-grab {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--fbk-canvas-2);
}
.fbk-sheet .fbk-h {
  font-size: 24px;
  font-size: 21px;
}
.fbk-sheet .fbk-face {
  min-height: 48px;
  font-size: 12.5px;
}
.fbk-sheet .fbk-notnow {
  font-size: 13.5px;
  min-height: 44px;
}

/* ── motion (two curves only) ─────────────────────────────────────────── */
@keyframes fbkUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fbkSheet {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes fbkFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fbkUnfold {
  from {
    opacity: 0;
    transform: scaleY(0.6);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes fbkDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fbkUp2 {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion: everything degrades to a 200ms fade; tick pre-drawn. */
@media (prefers-reduced-motion: reduce) {
  .fbk-toast,
  .fbk-sheet,
  .fbk-scrim,
  .fbk-ta,
  .fbk-send-row,
  .fbk-ty-body {
    animation: fbkFade 0.2s ease both;
  }
  .fbk-tick svg path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   DetailSkeleton — loading skeleton for BusinessDetailV2 / EventDetailV2.
   Classes are `.dsk-*` (new, prefixed; styles.css is FROZEN and untouched).

   Shimmer technique = homepage-v3 `.hp3-shimmer` (warm canvas-2 base, 0.6-alpha
   white sweep, 1.4s ease-in-out, none under reduced motion). It is restated
   here rather than imported because those rules live in HomePageV3.css, and
   importing that file would drag the whole home stylesheet into the two detail
   chunks (and into the App-level Suspense fallback).

   Tokens: the pages' own warm-canvas values, re-declared on .dsk-root because
   the fallback paints BEFORE either page's stylesheet (design-tokens.css /
   ed2-event-detail.css) has loaded. Neither page has a dark theme (the ed2 file
   itself notes web has no theme toggle), so the skeleton deliberately has none
   either — a dark skeleton handing over to a light page would be a flash.
   ========================================================================== */

.dsk-root {
  --ink: #1A1A1A;
  --ink-3: #6B7A82;
  --canvas: #F4F1EC;
  --canvas-2: #EAE5DB;
  --paper: #FFFFFF;
  --line: rgba(11, 37, 51, 0.08);
  --sh-card: 0 1px 3px rgba(11, 37, 51, 0.05), 0 12px 28px -14px rgba(11, 37, 51, 0.14);

  background: var(--canvas);
  color: var(--ink);
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.dsk-root *,
.dsk-root *::before,
.dsk-root *::after { box-sizing: border-box; }

/* Visually hidden label (the only thing a screen reader gets). */
.dsk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── shimmer block ─────────────────────────────────────────────────────── */
@keyframes dsk-shimmer-sweep {
  0%   { background-position: -250% 0; }
  100% { background-position: 250% 0; }
}

.dsk-b {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  background-color: var(--canvas-2);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: dsk-shimmer-sweep 1.4s ease-in-out infinite;
}
.dsk-root--still .dsk-b { animation: none; background-image: none; }
@media (prefers-reduced-motion: reduce) {
  .dsk-b { animation: none; background-image: none; }
}

/* ── tiny layout helpers ───────────────────────────────────────────────── */
.dsk-row { display: flex; align-items: center; }
.dsk-col { display: flex; flex-direction: column; }
.dsk-between { justify-content: space-between; }
.dsk-gap-2 { gap: 2px; }
.dsk-gap-8 { gap: 8px; }
.dsk-gap-10 { gap: 10px; }
.dsk-gap-12 { gap: 12px; }
.dsk-gap-24 { gap: 24px; }
.dsk-card { background: var(--paper); box-shadow: var(--sh-card); }
.dsk-hr { border: 0; height: 1px; background: var(--line); margin: 0; }

/* ==========================================================================
   BUSINESS  —  mirrors BusinessDetailV2.css (.bd2-*), breakpoint 1024
   ========================================================================== */

/* mobile sticky header: 52px, 0 8px */
.dsk-bd-pageheader {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
/* desktop site nav: hidden on mobile */
.dsk-bd-sitenav { display: none; }

.dsk-bd-crumbs {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 16px; /* content-box: + 4/12 padding = the real 15.6px line + 16 */
  padding: 4px 16px 12px;
}

/* The bd2 tree is content-box (the real layout is 1200 + 2x32 padding, hero
   800 wide at 1280) — border-box here would narrow every column by 64px. */
.dsk-root .dsk-bd-layout,
.dsk-root .dsk-bd-crumbs { box-sizing: content-box; }
.dsk-bd-layout { width: 100%; max-width: 1200px; margin: 0 auto; }
.dsk-bd-main { min-width: 0; }

.dsk-bd-herowrap {
  margin: 0 16px;
  height: 240px;
  border-radius: 20px;
  overflow: hidden;
}

.dsk-bd-head { padding: 24px 24px 16px; }
.dsk-bd-name { height: 35px; margin-bottom: 12px; }
.dsk-bd-rating { min-height: 22px; }
.dsk-bd-meta2 { margin-top: 10px; }

/* ContributionPrimary: 48px button + note (full width on a phone) */
.dsk-bd-contrib { padding: 12px 24px 14px; }
.dsk-bd-contrib-note { margin-top: 10px; }

.dsk-bd-facts {
  margin: 8px 24px 0;
  padding: 14px 0 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dsk-bd-about { padding: 32px 24px 0; }

.dsk-bd-rail { display: none; }

@media (min-width: 1024px) {
  .dsk-bd-pageheader { display: none; }
  .dsk-bd-sitenav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 32px;
    border-bottom: 1px solid var(--line);
  }
  .dsk-bd-crumbs {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    height: 16px;
    padding: 8px 32px 18px;
  }
  .dsk-bd-layout {
    padding: 0 32px 80px;
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-gap: 40px;
    gap: 40px;
    align-items: start;
  }
  .dsk-bd-herowrap { margin: 0; height: 420px; }
  .dsk-bd-head {
    padding: 32px 0 24px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 32px;
  }
  .dsk-bd-name { height: 50px; margin-bottom: 14px; }
  .dsk-bd-rating { margin-bottom: 16px; }
  .dsk-bd-meta2 { display: none; }
  .dsk-bd-contrib { padding: 0; margin-bottom: 12px; }
  .dsk-bd-contrib-btn { width: 320px; }
  .dsk-bd-contrib-note { margin-top: 8px; }
  .dsk-bd-facts {
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 14px 32px;
    gap: 14px 32px;
  }
  .dsk-bd-about { padding: 0; }
  .dsk-bd-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: -webkit-sticky;
    position: sticky;
    top: 88px;
  }
  .dsk-bd-railcard {
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dsk-bd-minis { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; gap: 8px; margin-top: 4px; }
  .dsk-bd-railcard--hours { gap: 12px; }
}

/* ==========================================================================
   EVENT  —  mirrors ed2-event-detail.css (.ed2-*), breakpoint 960
   ========================================================================== */

.dsk-ev-page { width: 100%; margin: 0 auto; position: relative; }

/* global app header (MasterPage): 64px, white, hairline */
.dsk-ev-appheader {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.dsk-ev-herowrap { position: relative; width: 100%; height: 240px; }

/* TopToolbar: 14px inset, 44px pills */
.dsk-ev-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.dsk-ev-pill {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.7);
}

.dsk-ev-layout { display: block; }
.dsk-ev-main { width: 100%; }

.dsk-ev-stack {
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dsk-ev-chain { display: none; height: 12px; }
.dsk-ev-title { display: flex; flex-direction: column; gap: 6px; }
.dsk-ev-title .dsk-b { height: 24px; }

.dsk-ev-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
  overflow: hidden;
}
.dsk-ev-row { padding: 14px 16px; }
.dsk-ev-row + .dsk-ev-row { border-top: 1px solid var(--line); }
.dsk-ev-strip { flex-wrap: wrap; }
.dsk-ev-body { padding: 8px 20px 0; }

.dsk-ev-rail { display: none; }

@media (min-width: 960px) {
  .dsk-ev-herowrap { height: 440px; }
  .dsk-ev-layout {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 32px 80px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .dsk-ev-main { flex: 1 1; min-width: 0; max-width: 720px; }
  .dsk-ev-stack { padding: 22px 0 18px; }
  .dsk-ev-chain { display: block; margin-bottom: -10px; }
  .dsk-ev-title { gap: 8px; }
  .dsk-ev-title .dsk-b { height: 32px; }
  /* the WHEN row moves into the rail on desktop (WhenWhereCard de-dupe) */
  .dsk-ev-row--when { display: none; }
  .dsk-ev-row { padding: 16px 18px; }
  .dsk-ev-body { padding: 0; }
  .dsk-ev-rail { display: block; width: 340px; flex-shrink: 0; }
  .dsk-ev-railcard {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    border-radius: 20px;
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* LogoutOverlay.css - Mobile-first centered modal design */

/* Backdrop - semi-transparent overlay */
.logout-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Card - centered modal container */
.logout-overlay-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 24px 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: slideUp 0.3s ease-out;
  position: relative;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Icon wrapper - green check circle */
.logout-icon-wrapper {
  margin-bottom: 16px;
}

.logout-icon {
  font-size: 56px;
  color: #10b981;
  animation: scaleIn 0.4s ease-out 0.1s both;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Title - "Logged Out" */
.logout-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Message text */
.logout-message {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

/* OK button - pink musDir brand color */
.logout-ok-button {
  width: 100%;
  padding: 14px 24px;
  background: #ff5a5f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.logout-ok-button:hover {
  background: #ff4449;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 90, 95, 0.3);
}

.logout-ok-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 90, 95, 0.2);
}

/* Tablet and desktop adjustments */
@media (min-width: 768px) {
  .logout-overlay-card {
    max-width: 400px;
    padding: 40px 32px 32px;
  }

  .logout-icon {
    font-size: 64px;
  }

  .logout-title {
    font-size: 28px;
  }

  .logout-message {
    font-size: 16px;
  }
}

/* Accessibility - keyboard focus */
.logout-ok-button:focus {
  outline: 2px solid #ff5a5f;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .logout-overlay-backdrop,
  .logout-overlay-card,
  .logout-icon,
  .logout-ok-button {
    animation: none;
  }

  .logout-ok-button:hover {
    transform: none;
  }
}

/* LocationMismatchBanner.css */

.location-mismatch-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(120deg, #F44B79 0%, #e8386a 50%, #DA2A58 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.lmb-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.lmb-icon {
  flex-shrink: 0;
  font-size: 24px;
  opacity: 0.9;
}

.lmb-message {
  flex: 1 1;
  min-width: 0;
}

.lmb-message strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: 600;
}

.lmb-message p {
  margin: 0;
  font-size: 13px;
  opacity: 0.95;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.lmb-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.lmb-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lmb-btn-primary {
  background: white;
  color: #0B2533;
}

.lmb-btn-primary:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.lmb-btn-dismiss {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.lmb-btn-dismiss:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .lmb-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }

  .lmb-icon {
    font-size: 18px;
    margin-top: 2px;
  }

  .lmb-message {
    flex: 1 1;
    min-width: 0;
  }

  .lmb-message strong {
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
  }

  .lmb-message p {
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    margin: 0;
  }

  .lmb-actions {
    width: 100%;
    flex-direction: column;
  }

  .lmb-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .lmb-content {
    padding: 14px;
    gap: 8px;
  }

  .lmb-message p {
    font-size: 11px;
    line-height: 1.5;
  }

  .lmb-btn {
    font-size: 12px;
    padding: 10px 14px;
  }
}

/* ==========================================================================
   musDir · Account Deletion UX — .del-* namespace
   CD-Response-AppStore-Compliance-2026-07-16 (§02 deletion, §06 web mirror).
   styles.css is FROZEN — every class here is prefixed .del-* and scoped under
   .del-root so nothing leaks. Tokens mirror hp3-tokens.css (warm-canvas,
   rosewood destructive #A8324A, moss relief #2F6B4F) as local fallbacks so this
   surface renders correctly even where the .hp3-root wrapper isn't present.
   Single-look by design — the CD mocks commit to the warm-canvas paper look on
   both web and iOS; no dark-mode variant is specced for this compliance screen.
   ========================================================================== */

.del-root {
  --del-ink: #1a1a1a;
  --del-ink-2: #3b4a52;
  --del-ink-3: #6b7a82;
  --del-ink-4: #9aa5ac;
  --del-canvas: #f4f1ec;
  --del-canvas-2: #eae5db;
  --del-canvas-3: #dcd5c8;
  --del-paper: #ffffff;
  --del-line: rgba(11, 37, 51, 0.08);
  --del-line-2: rgba(11, 37, 51, 0.14);
  --del-line-3: rgba(11, 37, 51, 0.18);
  --del-rosewood: #a8324a;
  --del-rosewood-soft: #fbeef1;
  --del-rosewood-deep: #7a1f30;
  --del-moss: #2f6b4f;
  --del-moss-soft: #e8f0eb;
  --del-moss-deep: #234e3a;
  --del-mint-wash: #e8f3ec;
  --del-evergreen: #1f5d3f;
  --del-font-display: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --del-font-ui: "Inter", -apple-system, system-ui, sans-serif;
  --del-r-card: 16px;
  --del-r-input: 12px;
  --del-sh-card: 0 1px 3px rgba(11, 37, 51, 0.05), 0 14px 32px -16px rgba(11, 37, 51, 0.18);

  font-family: var(--del-font-ui);
  color: var(--del-ink);
  -webkit-font-smoothing: antialiased;
}
.del-root *, .del-root *::before, .del-root *::after { box-sizing: border-box; }

/* ── Page shell (the /settings/account surface) ─────────────────────────── */
.del-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 18px 96px;
}
.del-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--del-rosewood);
  font-family: var(--del-font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  margin-bottom: 6px;
  min-height: 44px;
}
.del-h {
  font-family: var(--del-font-display);
  font-weight: 600;
  letter-spacing: -0.3px;
  font-size: 26px;
  line-height: 1.12;
  margin: 4px 0 4px;
  color: var(--del-ink);
}
.del-h em { font-style: italic; }
.del-sub {
  font-size: 13.5px;
  color: var(--del-ink-3);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* ── Danger panel ───────────────────────────────────────────────────────── */
.del-panel {
  background: var(--del-paper);
  border: 1px solid var(--del-line);
  border-left: 3px solid var(--del-rosewood);
  border-radius: var(--del-r-card);
  padding: 22px 22px 20px;
  box-shadow: var(--del-sh-card);
}
.del-panel-title {
  font-size: 14px;
  color: var(--del-ink);
  font-weight: 600;
  margin: 0 0 12px;
}

/* ── What-happens list (Inform + Impact share the row grammar) ──────────── */
.del-wh-list { display: flex; flex-direction: column; }
.del-wh-item {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--del-line);
  align-items: flex-start;
}
.del-wh-item:last-child { border-bottom: 0; }
.del-wh-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
  line-height: 1;
}
.del-wh-mark.gone { background: var(--del-rosewood-soft); color: var(--del-rosewood-deep); }
.del-wh-mark.stay { background: var(--del-moss-soft); color: var(--del-moss-deep); }
.del-wh-txt { font-size: 13px; color: var(--del-ink); line-height: 1.42; }
.del-wh-txt .s { display: block; font-size: 12px; color: var(--del-ink-3); margin-top: 2px; }

/* ── Grace callout + alt link ───────────────────────────────────────────── */
.del-grace {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--del-mint-wash);
  border-radius: 12px;
  padding: 12px 13px;
  margin: 14px 0 4px;
}
.del-grace-ic { color: var(--del-evergreen); flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; }
.del-grace-t { font-size: 12.5px; color: var(--del-evergreen); line-height: 1.45; font-weight: 500; }
.del-grace-t b { font-weight: 700; }
.del-alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 12px 2px 4px;
  font-size: 13px;
  color: var(--del-rosewood);
  font-weight: 500;
  font-family: var(--del-font-ui);
  cursor: pointer;
  min-height: 44px;
}

/* ── Impact grid (personalized numbers) ─────────────────────────────────── */
.del-impact-head {
  font-family: var(--del-font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--del-ink);
  line-height: 1.32;
  margin: 2px 2px 10px;
}
.del-impact-head em { font-style: italic; }
.del-impact-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--del-line);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--del-line);
}
.del-impact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--del-paper);
  padding: 13px 15px;
}
.del-impact-n {
  font-family: var(--del-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--del-rosewood);
  min-width: 26px;
  text-align: center;
}
.del-impact-row.stay .del-impact-n { color: var(--del-moss); }
.del-impact-lab { font-size: 13.5px; color: var(--del-ink); font-weight: 500; }
.del-impact-lab .s { display: block; font-size: 11.5px; color: var(--del-ink-3); font-weight: 400; margin-top: 1px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.del-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-family: var(--del-font-ui);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.del-btn:disabled { opacity: 0.55; cursor: default; }
.del-btn.ghost { background: var(--del-paper); border-color: var(--del-line-3); color: var(--del-ink-2); }
.del-btn.rose { background: var(--del-rosewood); color: #fff; }
.del-btn.rose:hover:not(:disabled) { background: var(--del-rosewood-deep); }
.del-btn.rose-ghost { background: var(--del-paper); border-color: var(--del-rosewood); color: var(--del-rosewood); }
.del-btn.moss { background: var(--del-moss); color: #fff; }
.del-btn.moss:hover:not(:disabled) { background: var(--del-moss-deep); }
.del-btn-sub {
  font-size: 11.5px;
  color: var(--del-ink-3);
  text-align: center;
  margin: 9px 0 0;
  line-height: 1.4;
}
.del-actions-inline {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.del-actions-inline .del-btn { width: auto; padding: 0 20px; }
.del-inline-note { font-size: 12.5px; color: var(--del-ink-3); }

/* ── Re-auth block ──────────────────────────────────────────────────────── */
.del-reauth { padding: 8px 2px 0; }
.del-reauth-hero { text-align: center; padding: 8px 12px 12px; }
.del-reauth-lock {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--del-canvas-2);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: var(--del-ink-2);
}
.del-reauth-h {
  font-family: var(--del-font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--del-ink);
  letter-spacing: -0.2px;
  margin: 0 0 6px;
}
.del-reauth-p { font-size: 13px; color: var(--del-ink-3); line-height: 1.5; margin: 0 auto; max-width: 320px; }
.del-field { margin-top: 16px; }
.del-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--del-ink-2);
  margin: 0 2px 6px;
}
.del-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--del-line-3);
  border-radius: var(--del-r-input);
  background: var(--del-paper);
  padding: 0 14px;
  font-size: 15px;
  font-family: var(--del-font-ui);
  color: var(--del-ink);
}
.del-input:focus { outline: 2px solid var(--del-rosewood); outline-offset: 1px; }
.del-prov-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--del-font-ui);
  margin-top: 12px;
  cursor: pointer;
  border: 1px solid var(--del-line-3);
  background: var(--del-paper);
  color: var(--del-ink);
}
.del-prov-btn.apple { background: var(--del-ink); color: #fff; border-color: transparent; }
.del-prov-btn:disabled { opacity: 0.55; cursor: default; }
.del-error {
  margin: 14px 2px 0;
  font-size: 13px;
  color: var(--del-rosewood-deep);
  background: var(--del-rosewood-soft);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.4;
}

/* ── Hold-to-confirm (two-stage inline) ─────────────────────────────────── */
.del-stage-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--del-rosewood-deep);
  background: var(--del-rosewood-soft);
  padding: 3px 8px;
  border-radius: 99px;
  margin: 0 0 8px;
}
.del-hold-wrap { position: relative; }
.del-hold-btn {
  position: relative;
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--del-paper);
  border: 1.5px solid var(--del-rosewood);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none; /* stop the browser hijacking the press for scroll */
  user-select: none;
  -webkit-user-select: none;
}
.del-hold-fill {
  position: absolute;
  inset: 0;
  left: 0;
  width: 0%;
  background: var(--del-rosewood);
  z-index: 1;
  /* width is driven inline by rAF; no CSS transition so release snaps back */
}
.del-hold-lab {
  position: relative;
  z-index: 2;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--del-rosewood);
  pointer-events: none;
}
/* When the fill has advanced far enough, the label rides on top of rosewood;
   flip to white for contrast. Toggled via a data attribute from the component. */
.del-hold-btn[data-filled="true"] .del-hold-lab { color: #fff; }
.del-hold-hint { font-size: 11.5px; color: var(--del-ink-3); text-align: center; margin: 9px 0 0; }
.del-hold-btn:focus-visible { outline: 3px solid var(--del-rosewood-soft); outline-offset: 2px; }

/* ── Done / restore heroes ──────────────────────────────────────────────── */
.del-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 20px 8px;
}
.del-hero-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.del-hero-badge.calm { background: var(--del-canvas-2); color: var(--del-ink-2); }
.del-hero-badge.relief { background: var(--del-mint-wash); color: var(--del-evergreen); }
.del-hero-h {
  font-family: var(--del-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--del-ink);
  margin: 0 0 10px;
  line-height: 1.2;
}
.del-hero-h em { font-style: italic; }
.del-hero-p { font-size: 13.5px; color: var(--del-ink-2); line-height: 1.55; max-width: 320px; margin: 0 0 8px; }
.del-hero-p b { color: var(--del-ink); font-weight: 600; }
.del-datechip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--del-paper);
  border: 1px solid var(--del-line-2);
  border-radius: 99px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--del-ink);
  margin: 8px 0 18px;
  box-shadow: 0 2px 8px rgba(11, 37, 51, 0.08);
}
.del-datechip .cal { color: var(--del-rosewood); display: grid; place-items: center; }
.del-hero-actions {
  width: 100%;
  max-width: 340px;
  margin-top: 12px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  justify-items: center;
}
.del-hero-actions .del-btn { width: 100%; }
/* Quiet secondary — a text link, not a competing boxed button (mirrors the
   restore modal's "Continue with deletion ›" demotion). */
.del-textlink {
  background: transparent;
  border: 0;
  padding: 8px 4px;
  font-family: var(--del-font-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--del-ink-3);
  cursor: pointer;
}
.del-textlink:hover { color: var(--del-ink-2); text-decoration: underline; }

/* ── Dashboard entry row ────────────────────────────────────────────────── */
.del-entry-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--del-paper);
  border: 1px solid var(--del-line);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 8px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--del-font-ui);
  min-height: 56px;
}
.del-entry-row:hover { border-color: var(--del-line-2); }
.del-entry-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--del-rosewood);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.del-entry-text { flex: 1 1; }
.del-entry-text strong { display: block; font-size: 15px; color: var(--del-rosewood); font-weight: 600; }
.del-entry-text span { display: block; font-size: 12px; color: var(--del-ink-3); margin-top: 1px; }
.del-entry-chev { color: var(--del-ink-4); font-size: 18px; }

/* Neutral variant — a benign account action (e.g. Change password) that reuses
   the entry-row grammar but must NOT read as danger. Ink icon chip + ink label
   instead of the rosewood danger treatment. */
.del-entry-row.neutral .del-entry-ic {
  background: var(--del-canvas-2);
  color: var(--del-ink-2);
}
.del-entry-row.neutral .del-entry-text strong { color: var(--del-ink); }

/* Scheduled variant — the entry row during the grace window. Calm clock
   treatment (not the rosewood danger chip): the pending state is information,
   and the tap-through leads to restore, not to more danger. */
.del-entry-row.scheduled { border-color: var(--del-line-2); }
.del-entry-row.scheduled .del-entry-ic {
  background: var(--del-canvas-2);
  color: var(--del-rosewood);
}
.del-entry-row.scheduled .del-entry-text strong { color: var(--del-ink); }

/* ── Restore modal (centered, createPortal to document.body) ────────────── */
.del-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 9, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001; /* above app modals; toasts sit at 100000 */
  padding: 20px;
}
.del-modal {
  width: 100%;
  max-width: 400px;
  background: var(--del-paper);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(11, 37, 51, 0.5);
  animation: del-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes del-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.del-modal-body { padding: 26px 24px 22px; text-align: center; }
.del-modal-foot { padding: 0 24px 24px; }

@media (prefers-reduced-motion: reduce) {
  .del-modal { animation: none; }
}

/* ── Small-screen tightening ────────────────────────────────────────────── */
@media (max-width: 520px) {
  .del-page { padding: 16px 14px 96px; }
  .del-panel { padding: 18px 16px 16px; }
  .del-h { font-size: 23px; }
}

/* rsvp-claim.css — the login-time RSVP claim prompt.
 *
 * styles.css is FROZEN. Everything here is prefixed .rcl-* and self-contained.
 * Mobile-first, 44px minimum touch targets.
 *
 * Tokens are re-declared at the root (the ed2/mrs pattern) because this mounts
 * via a portal on document.body — there is no .hp3-root or .mrs-page ancestor
 * to inherit from, by design.
 *
 * REGISTER: this is an OFFER, not an alarm. Rosewood on the primary because it
 * is the affirmative action; no amber, no red — nothing here has gone wrong.
 * Deliberately NOT a scrim modal: the person came to do something else, so the
 * sheet sits at the bottom, leaves the page usable, and is easy to wave away.
 */

.rcl-root {
  --rcl-ink: #1a1a1a;
  --rcl-ink-2: #3b4a52;
  --rcl-ink-3: #6b7a82;
  --rcl-paper: #ffffff;
  --rcl-rosewood: #a8324a;
  --rcl-rosewood-soft: #fbeef1;
  --rcl-moss: #2f6b4f;
  --rcl-line: rgba(11, 37, 51, 0.08);
  --rcl-font-display: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --rcl-font-ui: "Inter", -apple-system, system-ui, sans-serif;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2400;
  /* The wrapper is inert; only the sheet and toast inside it take pointer
     events, so the page behind stays fully usable while the offer stands. */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  font-family: var(--rcl-font-ui);
}

/* ---- The sheet ---- */
.rcl-sheet {
  pointer-events: auto;
  width: 100%;
  max-width: 460px;
  background: var(--rcl-paper);
  border: 1px solid var(--rcl-line);
  border-radius: 20px;
  box-shadow:
    0 1px 3px rgba(11, 37, 51, 0.06),
    0 18px 44px -18px rgba(11, 37, 51, 0.3);
  overflow: hidden;
  animation: rcl-rise 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rcl-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rcl-body {
  padding: 20px 20px 4px;
}

.rcl-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rcl-rosewood-soft);
  color: var(--rcl-rosewood);
  margin-bottom: 13px;
}

.rcl-title {
  margin: 0 0 7px;
  font-family: var(--rcl-font-display);
  font-size: 20px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rcl-ink);
}

.rcl-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rcl-ink-2);
}

.rcl-sub em {
  font-family: var(--rcl-font-display);
  font-style: italic;
  color: var(--rcl-ink);
}

.rcl-error {
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--rcl-rosewood-soft);
  border: 1px solid rgba(168, 50, 74, 0.18);
  color: var(--rcl-rosewood);
  font-size: 13px;
  line-height: 1.45;
}

/* ---- Actions ---- */
.rcl-foot {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rcl-btn-primary {
  min-height: 48px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--rcl-rosewood);
  color: #fff;
  font-family: var(--rcl-font-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease;
}

.rcl-btn-primary:hover:not(:disabled) {
  opacity: 0.92;
}
.rcl-btn-primary:active:not(:disabled) {
  transform: scale(0.99);
}
.rcl-btn-primary:disabled {
  opacity: 0.62;
  cursor: default;
}

.rcl-btn-quiet {
  min-height: 44px;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--rcl-ink-3);
  font-family: var(--rcl-font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.rcl-btn-quiet:hover:not(:disabled) {
  color: var(--rcl-ink-2);
  text-decoration: underline;
}
.rcl-btn-quiet:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---- Confirmation toast ---- */
.rcl-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 460px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #10241b;
  color: #eaf3ee;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 14px 34px -16px rgba(11, 37, 51, 0.5);
  animation: rcl-rise 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rcl-toast svg {
  color: #7fd0a4;
  flex-shrink: 0;
}

/* Desktop: tuck into the bottom-right rather than spanning the viewport — the
   same corner the rest of the app uses for non-blocking chrome. */
@media (min-width: 768px) {
  .rcl-root {
    left: auto;
    right: 0;
    align-items: flex-end;
    padding: 0 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rcl-sheet,
  .rcl-toast {
    animation: none;
  }
  .rcl-btn-primary {
    transition: none;
  }
}

/**
 * LegalReacceptGate.css
 *
 * Only the two affordances the re-acceptance gate adds on top of the existing
 * `.legal-*` suite in UnifiedAuthModal.css (which this component reuses for
 * the card, title, checkboxes and primary button). Nothing here touches the
 * frozen legacy styles.css.
 */

/* Sign-out escape hatch. Deliberately quiet — it is a secondary action next
   to "Accept & continue", present so the user is never trapped, not
   advertised as the expected choice. */
.legal-reaccept-signout {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  /* ≥48px effective tap target incl. padding — musDir tappable floor. */
  min-height: 48px;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.legal-reaccept-signout:hover:not(:disabled) {
  background: rgba(107, 114, 128, 0.08);
  color: #374151;
}

.legal-reaccept-signout:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 2px;
}

.legal-reaccept-signout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Failure copy for a rejected accept POST. */
.legal-reaccept-error {
  color: #b91c1c;
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .legal-reaccept-signout {
    transition: none;
  }
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: -webkit-fit-content;
  width: fit-content;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: 320px;
  width: var(--toastify-toast-width);
  min-height: 64px;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 14px;
  padding: var(--toastify-toast-padding);
  border-radius: 6px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  box-shadow: var(--toastify-toast-shadow);
  max-height: 800px;
  max-height: var(--toastify-toast-max-height);
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: auto;
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: 320px;
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: hsl(6, 78%, 57%);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: #bb86fc;
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: #07bc0c;
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: hsl(6, 78%, 57%);
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: auto;
  right: initial;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: 0;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: 6px;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: 0.2;
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

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

/* ================================================================
   eidOverlay.css — Eid Mubarak Greeting Overlay
   Celebratory, warm, festive — musDir palette
   All classes namespaced with .eid- to avoid collisions
   ================================================================ */

/* ── Overlay shell ─────────────────────────────────────────────── */

.eid-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Warm festive gradient: deep emerald → dark teal */
  background: radial-gradient(
      ellipse 120% 90% at 50% 20%,
      #0a3d2e 0%,
      #041a14 70%
    ),
    #041a14;

  overflow: hidden;
  animation: eid-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Subtle grain texture for depth */
.eid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27 opacity=%270.04%27/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

/* Fade-out class */
.eid-overlay.eid-fade-out {
  animation: eid-fade-out 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Content stack ─────────────────────────────────────────────── */

.eid-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 480px;
  padding: 0 24px;
  text-align: center;
}

/* ── Crescent + Star SVG ──────────────────────────────────────── */

.eid-crescent-wrap {
  width: 100px;
  height: 100px;
  margin-bottom: 12px;
  animation: eid-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both,
    eid-shimmer 3.5s ease-in-out 1.5s infinite;
}

@media (min-width: 480px) {
  .eid-crescent-wrap {
    width: 120px;
    height: 120px;
  }
}

/* ── Arabic greeting ──────────────────────────────────────────── */

.eid-arabic {
  font-family: "Scheherazade New", serif;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 700;
  color: #d4af37;
  line-height: 1.2;
  margin: 0;
  padding: 10px 0 8px;
  letter-spacing: 0.01em;
  animation: eid-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

/* ── English title ────────────────────────────────────────────── */

.eid-title {
  font-family: "Cinzel", serif;
  font-size: clamp(1.2rem, 5vw, 1.7rem);
  font-weight: 600;
  color: rgba(232, 201, 74, 0.9);
  letter-spacing: 0.08em;
  margin: 0 0 18px;
  animation: eid-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

/* ── Warm message tagline ─────────────────────────────────────── */

.eid-tagline {
  font-family: "Outfit", "Montserrat", sans-serif;
  font-size: clamp(0.88rem, 3.2vw, 1.05rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin: 0 0 14px;
  animation: eid-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

/* ── Dua subtitle ─────────────────────────────────────────────── */

.eid-subtitle {
  font-family: "Outfit", "Montserrat", sans-serif;
  font-size: clamp(0.75rem, 2.5vw, 0.88rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(212, 175, 55, 0.55);
  line-height: 1.5;
  margin: 0 0 24px;
  animation: eid-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

/* ── Brand mark ───────────────────────────────────────────────── */

.eid-brand {
  font-family: "Outfit", "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.14em;
  animation: eid-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both;
}

/* ── Progress bar ─────────────────────────────────────────────── */

.eid-progress-track {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  animation: eid-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.eid-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b8942a 0%, #d4af37 60%, #e8c94a 100%);
  border-radius: 2px;
  animation: eid-progress-fill 6000ms linear 1s both;
  animation: eid-progress-fill var(--eid-duration, 6000ms) linear 1s both;
}

/* ── Skip button ──────────────────────────────────────────────── */

.eid-skip {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.55);
  font-family: "Outfit", "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

  min-height: 44px;
  animation: eid-fade-in 0.6s ease 1.5s both;
}

.eid-skip:hover,
.eid-skip:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.8);
  outline: none;
}

.eid-skip svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* ── Star sparkles ────────────────────────────────────────────── */

.eid-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.eid-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #d4af37;
  animation: eid-twinkle 3s ease-in-out 0s infinite;
  animation: eid-twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}

/* ── Confetti particles ───────────────────────────────────────── */

.eid-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.eid-confetti-piece {
  position: absolute;
  top: -10px;
  width: 6px;
  width: var(--confetti-size, 6px);
  height: 6px;
  height: var(--confetti-size, 6px);
  background: #d4af37;
  background: var(--confetti-color, #d4af37);
  border-radius: 2px;
  opacity: 0;
  animation: eid-confetti-fall 3s ease-in 0s infinite;
  animation: eid-confetti-fall var(--fall-dur, 3s) ease-in var(--fall-delay, 0s) infinite;
}

/* Every 3rd piece is a circle */
.eid-confetti-piece:nth-child(3n) {
  border-radius: 50%;
}

/* Every 5th piece is elongated */
.eid-confetti-piece:nth-child(5n) {
  width: calc(6px * 0.5);
  width: calc(var(--confetti-size, 6px) * 0.5);
  height: calc(6px * 1.5);
  height: calc(var(--confetti-size, 6px) * 1.5);
}

/* ── Keyframes ────────────────────────────────────────────────── */

@keyframes eid-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes eid-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes eid-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes eid-shimmer {
  0%, 100% {
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.45))
      drop-shadow(0 0 40px rgba(212, 175, 55, 0.2))
      brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(212, 175, 55, 0.65))
      drop-shadow(0 0 55px rgba(212, 175, 55, 0.35))
      brightness(1.15);
  }
}

@keyframes eid-twinkle {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.8);
  }
}

@keyframes eid-confetti-fall {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
  10% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

@keyframes eid-progress-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── prefers-reduced-motion overrides ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .eid-overlay,
  .eid-overlay.eid-fade-out,
  .eid-content,
  .eid-crescent-wrap,
  .eid-arabic,
  .eid-title,
  .eid-tagline,
  .eid-subtitle,
  .eid-brand,
  .eid-progress-track,
  .eid-skip,
  .eid-star,
  .eid-confetti-piece {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .eid-overlay.eid-fade-out {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }

  .eid-progress-bar {
    animation: none !important;
    width: 100% !important;
  }

  .eid-confetti-piece {
    display: none;
  }
}

.mapboxgl-map{-webkit-tap-highlight-color:rgb(0 0 0/0);font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative}.mapboxgl-canvas{left:0;position:absolute;top:0}.mapboxgl-map:-webkit-full-screen{height:100%;width:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.mapboxgl-ctrl-top-left{left:0;top:0}.mapboxgl-ctrl-top-right{right:0;top:0}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-bottom-right{bottom:0;right:0}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{float:left;margin:10px 0 0 10px}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{float:right;margin:10px 10px 0 0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl{float:left;margin:0 0 10px 10px}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{float:right;margin:0 10px 10px 0}.mapboxgl-ctrl-group{background:#fff;border-radius:4px}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{background-color:transparent;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;overflow:hidden;padding:0;width:29px}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:transparent}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:rgb(0 0 0/5%)}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z%27/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z%27/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z%27/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z%27/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z%27/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z%27/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10.5 14l4-8 4 8h-8z%27/%3E%3Cpath id=%27south%27 d=%27M10.5 16l4 8 4-8h-8z%27 fill=%27%23ccc%27/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10.5 14l4-8 4 8h-8z%27/%3E%3Cpath id=%27south%27 d=%27M10.5 16l4 8 4-8h-8z%27 fill=%27%23999%27/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10.5 14l4-8 4 8h-8z%27/%3E%3Cpath id=%27south%27 d=%27M10.5 16l4 8 4-8h-8z%27 fill=%27%23ccc%27/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23aaa%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 fill=%27%23f00%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%2333b5e5%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23e58978%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%2333b5e5%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27 display=%27none%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23e54e33%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27 display=%27none%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23999%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 fill=%27%23f00%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%2333b5e5%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23e58978%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%2333b5e5%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27 display=%27none%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23e54e33%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27 display=%27none%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23666%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 fill=%27%23f00%27/%3E%3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 fill-rule=%27evenodd%27 viewBox=%270 0 88 23%27%3E%3Cdefs%3E%3Cpath id=%27logo%27 d=%27M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z%27/%3E%3Cpath id=%27text%27 d=%27M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z%27/%3E%3C/defs%3E%3Cmask id=%27clip%27%3E%3Crect x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27 fill=%27white%27/%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/mask%3E%3Cg id=%27outline%27 opacity=%270.3%27 stroke=%27%23000%27 stroke-width=%273%27%3E%3Ccircle mask=%27url%28%23clip%29%27 cx=%2711.5%27 cy=%2711.5%27 r=%279.25%27/%3E%3Cuse xlink:href=%27%23text%27 mask=%27url%28%23clip%29%27/%3E%3C/g%3E%3Cg id=%27fill%27 opacity=%270.9%27 fill=%27%23fff%27%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 fill-rule=%27evenodd%27 viewBox=%270 0 88 23%27%3E%3Cdefs%3E%3Cpath id=%27logo%27 d=%27M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z%27/%3E%3Cpath id=%27text%27 d=%27M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z%27/%3E%3C/defs%3E%3Cmask id=%27clip%27%3E%3Crect x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27 fill=%27white%27/%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/mask%3E%3Cg id=%27outline%27 opacity=%271%27 stroke=%27%23000%27 stroke-width=%273%27%3E%3Ccircle mask=%27url%28%23clip%29%27 cx=%2711.5%27 cy=%2711.5%27 r=%279.25%27/%3E%3Cuse xlink:href=%27%23text%27 mask=%27url%28%23clip%29%27/%3E%3C/g%3E%3Cg id=%27fill%27 opacity=%271%27 fill=%27%23fff%27%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/g%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 fill-rule=%27evenodd%27 viewBox=%270 0 88 23%27%3E%3Cdefs%3E%3Cpath id=%27logo%27 d=%27M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z%27/%3E%3Cpath id=%27text%27 d=%27M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z%27/%3E%3C/defs%3E%3Cmask id=%27clip%27%3E%3Crect x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27 fill=%27white%27/%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/mask%3E%3Cg id=%27outline%27 opacity=%271%27 stroke=%27%23fff%27 stroke-width=%273%27 fill=%27%23fff%27%3E%3Ccircle mask=%27url%28%23clip%29%27 cx=%2711.5%27 cy=%2711.5%27 r=%279.25%27/%3E%3Cuse xlink:href=%27%23text%27 mask=%27url%28%23clip%29%27/%3E%3C/g%3E%3Cg id=%27fill%27 opacity=%271%27 fill=%27%23000%27%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/g%3E%3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{background-color:#fff;border-radius:12px;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:rgb(0 0 0/5%)}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0;top:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0;top:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill-rule=%27evenodd%27 fill=%27%23fff%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:hsla(0,0%,100%,.75);border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.mapboxgl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.mapboxgl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.mapboxgl-popup-close-button:hover{background-color:rgb(0 0 0/5%)}.mapboxgl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:10px 10px 15px;pointer-events:auto;position:relative}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{left:0;opacity:1;position:absolute;top:0;transition:opacity .2s;will-change:transform}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.mapboxgl-user-location-dot:before{animation:mapboxgl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.mapboxgl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px rgba(0,0,0,.35);box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{height:0;width:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-bottom:7.5px solid #4aa1eb;content:"";position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid transparent;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid transparent;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{align-items:center;background:rgba(0,0,0,.7);color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;top:0;transition:opacity .75s ease-in-out;transition-delay:1s;width:100%}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}

/*# sourceMappingURL=main.89379d1b.css.map*/