: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;
}

.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) as base64 to avoid minimizer parsing issues */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PSc2JyB2aWV3Qm94PScwIDAgMTAgNic+PHBhdGggZmlsbD0nIzBCMjUzMycgZD0nTTAgMGw1IDUgNS01SDB6Jy8+PC9zdmc+);
  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;
}

.action-button.liked {
  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;
}

.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;
}
/* 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: 1000;
}

/* 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-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) as base64 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PSc2JyB2aWV3Qm94PScwIDAgMTAgNic+PHBhdGggZmlsbD0nIzBCMjUzMycgZD0nTTAgMGw1IDUgNS01SDB6Jy8+PC9zdmc+);
  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;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTAgMGw1IDUgNS01SDB6Ii8+PC9zdmc+);
  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;
}

.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;
}

/* ---------- 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;
}

/* 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;
}

/* ----- Scoped to UnifiedAuthModal (namespace: .uam) ----- */
.uam {
}

/* 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;
}

/* ===== 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 */
.footer-left {
  gap: 8px;
  color: #667684;
  font-size: 14px;
  order: 1;
}
.footer-logo {
  height: 90px;
  width: auto;
  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;
}
.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;
    grid-template-columns: 1fr auto 1fr;
    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 */

/* Gentle hover lift while preserving brand color */
@media (hover: hover) {
  .footer-social .social-link.ig:hover,
  .footer-social .social-link.fb:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
  }
}

/* Keep brand colors for IG/FB (default + hover) */
.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 */
}

/* Only darken on hover for non-brand icons */
.footer-social .social-link:not(.ig):not(.fb):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 */
}

/* musDir feedback modal — mobile-first, Montserrat */
.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;
}

/* === SearchOverlay (scoped) === */
:root {
  --brand: #0b2533;
  --cta: #da2a58;
}

/* Backdrop */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000; /* ensure above Discovery tabs/footer */
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  /* iOS-safe viewport coverage */
  height: 100svh;
  min-height: 100vh;
  overscroll-behavior: contain;
}

.search-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Sheet */
.so-sheet {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Header */
.so-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  height: 56px;
  padding: 0 8px;
  border-bottom: 1px solid #f1f1f1;
  background: #fff;
  transition: box-shadow 0.15s ease;
}
.so-header.scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.so-title {
  text-align: center;
  font-weight: 800;
}
.so-header-spacer {
  width: 24px;
}
.so-close {
  background: transparent;
  border: 0;
  font-size: 26px;
  cursor: pointer;
}

/* Inputs */
.so-inputs {
  padding: 10px 14px 6px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.so-input-row {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.so-label {
  font-size: 12px;
  color: #666;
}
.so-input {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 16px;
  background: #f7f7f7;
  width: 100%;
  box-sizing: border-box;
}
.so-input:focus {
  outline: none;
  border: 2px solid #000;
  background: #fff;
}
.so-input-wrap {
  position: relative;
}
.so-input-wrap .so-input {
  padding-right: 38px;
}
.so-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.so-clear:active {
  transform: translateY(-50%) scale(0.96);
}

/* Location Dropdown */
.so-loc-card {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 10;
  max-height: 50vh;
  overflow-y: auto;
}
.so-loc-row {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font-weight: 400;
}
.so-loc-row + .so-loc-row {
  border-top: 1px solid #f1f1f1;
}
.so-loc-row:active {
  background: #f8fafc;
}
.so-loc-current {
  display: flex;
  align-items: center;
  gap: 10px;
}
.so-loc-pin {
  font-size: 18px;
}
.so-loc-text {
  display: flex;
  flex-direction: column;
  font-weight: 700;
}
.so-loc-sub {
  font-weight: 500;
  font-size: 12px;
  color: #6b7280;
}
.so-skel-loc {
  height: 14px;
  width: 80%;
  border-radius: 8px;
}

/* Content */
.so-content {
  flex: 1 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* room for CTA + iOS home indicator */
  padding: 8px 8px calc(120px + env(safe-area-inset-bottom, 0px));
}
/* When typing, reduce bottom padding since CTA is hidden */
.so-content.typing {
  padding-top: 0;
  padding-top: 0;
  padding-bottom: 24px;
}

.so-section {
  padding: 4px 8px 8px;
}
.so-section-title {
  margin: 6px 2px 6px;
  font-size: 13px;
  color: #777;
  font-weight: 700;
  text-align: left !important;
}

/* Skeletons */
@keyframes soShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.so-skel {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: soShimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}
.so-skel-title {
  height: 14px;
  width: 60%;
  margin: 4px 0 8px;
}
.so-skel-sub {
  height: 12px;
  width: 40%;
  opacity: 0.85;
}

/* Sticky CTA */
.so-cta-wrap {
  position: fixed;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: none; /* remove gradient since it's floating */
  border-top: none; /* remove border since it's floating */
  padding: 0;
}
.so-cta {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 16px;
  background: #da2a58;
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-cta:disabled {
  background: #cfcfcf;
  color: #f8f8f8;
  box-shadow: none;
}

/* Hints */
.so-hint {
  padding: 8px 10px;
  color: #666;
  font-size: 13px;
}

/* a11y */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
}

/* === Suggestion List (icon left, distance right) === */
.so-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.so-item {
  display: grid;
  grid-template-columns: 22px 1fr auto; /* icon | main | right */
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.so-item:hover {
  background: #fafafa;
}
.so-item--active {
  background: #f5f5f5;
}

.so-item--action {
  background: #fcfcfd;
}
.so-item--action:hover {
  background: #f6f7fb;
}
.so-item--action .so-name {
  font-weight: 600;
}
.so-item--action .so-meta {
  font-size: 0.85rem;
  color: #6b7280;
}

.so-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.so-icon {
  color: #6b7280;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.so-main {
  min-width: 0;
  text-align: left;
}
.so-name {
  font-size: 1rem;
  font-weight: 500;
  color: #0b2533;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-meta {
  margin-top: 2px;
  font-size: 0.875rem;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.so-right {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}
.so-distance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
}
.so-online {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #e6f7ff;
  color: #1890ff;
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
}

.so-hybrid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: #eef6ff; /* subtle blue bg */
  color: #0b2533; /* musDir primary */
  border: 1px solid #d6e9ff;
}

.so-localservice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: #f4f6ff;
  color: #0b2533;
  border: 1px solid #e0e6ff;
}

.so-chip-text {
  display: inline-block;
} /* ensures text doesn't collapse */

/* Tags */
.so-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  justify-content: left;
}
.so-tag {
  border: 1px solid #000;
  background: #fff;
  color: #000;
  border-radius: 9999px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
}
.so-tag-more {
  opacity: 0.75;
  font-weight: 600;
}

/* highlight only the matched pieces */
.so-name .hl,
.so-meta .hl,
.so-tag .hl,
.so-cat-chip .hl {
  font-weight: 600;
  color: #da2a58;
}

/* Location suggestion highlighting */
.so-loc-row .hl {
  font-weight: 700;
  color: #da2a58;
  background-color: rgba(218, 42, 88, 0.1);
  padding: 0 1px;
  border-radius: 2px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .so-panel {
    padding: 0 12px;
  }
}
@media (max-width: 360px) {
  .so-input {
    padding: 10px;
  }
  .so-cta {
    padding: 12px 14px;
  }
}

/* === REFINEMENTS for sticky row === */
/* When typing, make the sticky row flush under the inputs */
.so-content.typing {
  padding-top: 0;
}
.so-content.typing .so-list {
  margin-top: 0;
}

/* Make the sticky row feel attached and cover any hairline gap */
.so-item--action.so-sticky {
  top: 0;
  z-index: 3;
  border-top: 1px solid #f1f1f1; /* crisp divider under the inputs */
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); /* subtle */
}

/* Category chip under name */
.so-category {
  margin-top: 2px;
}
.so-cat-chip {
  display: inline-flex; /* or: inline-block */
  align-items: center;
  gap: 0;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #0b2533;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
  font-feature-settings: none;
  font-variant-ligatures: none; /* stop kerning jumps during partial bolding */
  letter-spacing: normal;
}

/* MusDir palette */
:root {
  --brand: #0b2533;
  --cta: #da2a58;
  --cta-hover: #c1254e;
  --text: #0b2533;
  --icon: #64748b;
  --border: #e5e7eb;
  --field-bg: #f8fafc;
  --white: #fff;
  --musdir-pink: #f44b79;
}

/* Base wrapper for centering */
.sl-wrap {
  width: 100%;
  max-width: 1200px; /* Increased from 700px */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 16px;
}

/* =============================================== */
/* UNIFIED Search Bar - Target-inspired Layout     */
/* =============================================== */

.sl-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 40px; /* Fully rounded on all screen sizes */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 0;
  height: 48px;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.sl-bar:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Fields are now just flexible containers for text */
.sl-field {
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  height: 100%;
  min-width: 0;
  padding: 0 16px;
  position: relative;
}

/* Set field proportions */
.sl-field:first-child {
  flex: 2.2 1;
  padding-right: 12px; /* Reduced right padding */
}
.sl-field:nth-child(2) {
  flex: 1.8 1;
  padding-left: 8px; /* Reduced left padding to move location right */
}

/* VERTICAL DIVIDER - Add this back with proper positioning */
.sl-field:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: #e5e7eb;
  display: block !important; /* Force display */
}

/* Unified subtle icon button at the end */
.sl-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0b2533;
  color: var(--brand);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: none;
  margin-left: auto;
}

.sl-cta:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Shared input styling */
.sl-input {
  appearance: none;
  -webkit-appearance: none;
  font-size: 14px;
  color: #0b2533;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  cursor: pointer;
  height: 100%;
}

.sl-input::placeholder {
  color: #94a3b8;
  font-size: 14px;
}

/* Hide original icons within text fields by default (mobile-first) */
.sl-icon {
  display: none;
}

/* =============================================== */
/* Desktop-specific Adjustments                    */
/* =============================================== */
@media (min-width: 768px) {
  /* Show icons inside the fields on desktop */
  .sl-icon {
    display: inline-block;
    color: #64748b;
    color: var(--icon);
    font-size: 15px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  /* COLORED MAP MARKER - MusDir pink color */
  .sl-icon-location {
    color: #f44b79 !important;
    color: var(--musdir-pink) !important;
  }

  /* Hide the search icon in the first field */
  .sl-field:first-child .sl-icon-search {
    display: none;
  }

  /* Adjust padding for better spacing on desktop */
  .sl-field:first-child {
    padding-right: 16px; /* Increased right padding to push it right */
  }
  .sl-field:nth-child(2) {
    padding-left: 12px;
  }
}

/* UNIFIED ICON STYLES (Mobile & Desktop) */
.sl-icon-location {
  display: inline-block;
  color: #f44b79;
  color: var(--musdir-pink);
}

/* Reset mobile padding for the wrapper to allow full-width bar */
@media (max-width: 767px) {
  .sl-wrap {
    padding: 0;
  }

  /* Mobile-specific spacing adjustments */
  .sl-field:first-child {
    padding-right: 8px; /* Less space before divider */
  }

  .sl-field:nth-child(2) {
    padding-left: 6px; /* Less space after divider, moving location right */
  }

  /* Make icon smaller and reduce its right margin */
  .sl-icon-location {
    font-size: 13px;
    margin-right: 4px; /* Reduced space between icon and text */
    flex-shrink: 0;
    color: #f44b79 !important;
    color: var(--musdir-pink) !important;
  }

  /* Show vertical divider on mobile too */
  .sl-field:first-child::after {
    display: block !important;
    height: 20px;
  }

  /* Adjust input font size for better fit */
  .sl-input {
    font-size: 13px;
  }

  .sl-input::placeholder {
    font-size: 13px;
  }
}

/* === FIXES: SearchLauncher (append at end) === */

/* Ensure the location icon always uses the musDir accent across breakpoints */
.sl-bar .sl-field .sl-icon.sl-icon-location {
  color: #f44b79;
  color: var(--musdir-pink);
}

/* Make the mini GPS Lottie match icon size + alignment */
.sl-lottie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; /* Reduced from 16px to 14px */
  height: 14px; /* Reduced from 16px to 14px */
  margin-right: 6px; /* Reduced from 8px to 6px */
}
.sl-lottie > * {
  width: 100% !important;
  height: 100% !important;
}

/* Additional fix for location field spacing */
.sl-field:nth-child(2) {
  justify-content: flex-start; /* Align content to the left within the field */
}

/* NEW: Add ellipsis for truncated location text and ensure no extra margin */
.sl-field:nth-child(2) .sl-input {
  margin-left: 0;
  padding-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep pin tight next to the Where text */
.sl-where-label {
  display: inline-flex;
  align-items: center;
  gap: 7px; /* Increased the gap between pin and location text */
  min-width: 0; /* allows input ellipsis inside flex */
}

.sl-where-pin {
  color: #f44b79;
  color: var(--musdir-pink);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* Desktop: show the pin */
@media (min-width: 768px) {
  .sl-where-pin-wrapper {
    display: inline-flex;
    align-items: center;
  }
}

/* Mobile: hide the pin */
@media (max-width: 767px) {
  .sl-where-pin-wrapper {
    display: none;
  }
}

/* Scope to the search area width */
.smart-tip-container {
  display: block;
  width: 100%;
  max-width: 680px;
  margin: 8px auto 0;
  padding: 0 8px;
  /* kill any inherited card styles */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Base */
.smart-tip {
  position: relative;
  margin: 0;
}

/* Legacy text variant (kept intact) */
.smart-tip--text {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
  color: #374151;
}
.smart-tip--text .tip-text {
  font-size: 13px;
}

.tip-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* Chips variant — forcefully remove any card look */
.smart-tip--chips {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.smart-tip__inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.smart-tip__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #6b7280; /* neutral gray */
  font-weight: 500; /* subtle emphasis */
}

.smart-tip__icon {
  font-size: 13px;
  opacity: 0.85;
}

.smart-tip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.smart-tip__chip {
  padding: 6px 10px;
  border: 1px solid #e5e7eb; /* ghost/outline style */
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  color: #0b2533; /* musDir primary text */
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.smart-tip__chip:active {
  transform: scale(0.98);
}
.smart-tip__chip:focus-visible {
  outline: 2px solid #0b2533;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .smart-tip-container {
    margin-top: 10px;
  }
}

/* src/components/ShareOverlay/ShareOverlay.css */

/* ====== Root overlay layer (above bd-lightbox 1100) ====== */
.share-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 2000; /* sits above BusinessDetail lightbox */
  display: grid;
  place-items: center;
  background: transparent; /* never tint the viewport */
  isolation: isolate; /* stop ancestor filters from bleeding */
}

/* no stray pseudo bgs */
.share-overlay-root::before,
.share-overlay-root::after {
  content: none !important;
}

/* ====== Scrim (the only background behind content) ====== */
.share-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* dim only; no white tint */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ====== Neutral panel container (transparent) ====== */
.share-overlay-panel {
  position: relative; /* render above the scrim */
  width: min(92vw, 560px);
  max-height: min(86vh, 720px);
  overflow: auto;

  /* keep this container neutral – the card inside provides the white */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* ====== Interior layout (scoped) ====== */
.share-overlay-panel .share-overlay-airbnb {
  position: relative;
  padding: 18px; /* inner breathing room for the card + actions */
}

/* Close (top-right inside the panel) */
.share-overlay-panel .close-button {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
  color: #6b7280;
}
.share-overlay-panel .close-button:hover {
  color: #111827;
}

/* Header */
.share-overlay-panel .share-modal-header {
  text-align: center;
  margin-bottom: 12px;
}
.share-overlay-panel .share-header-icon {
  font-size: 20px;
  margin-bottom: 8px;
}
.share-overlay-panel .share-subtext {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 0.95rem;
}

/* Share targets grid */
.share-overlay-panel .share-icon-grid.responsive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 10px;
}
@media (min-width: 480px) {
  .share-overlay-panel .share-icon-grid.responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 640px) {
  .share-overlay-panel .share-icon-grid.responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.share-overlay-panel .share-icon-grid.responsive-grid > div {
  display: grid;
  place-items: center;
  grid-gap: 6px;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 12px;
  background: #f6f7f9;
  border: 1px solid #eceff2;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.share-overlay-panel .share-icon-grid.responsive-grid > div:hover {
  transform: translateY(-2px);
  background: #f0f2f5;
}

/* Footer “Shared by musDir” */
.share-overlay-panel .card-signature {
  text-align: center;
  margin: 16px 0 6px;
  color: #374151;
}
.share-overlay-panel .logo-inline {
  vertical-align: middle;
}

/* give the overlay breathing room on mobile (safe areas) */
.share-overlay-root {
  padding: 12px 8px calc(12px + env(safe-area-inset-bottom, 0px));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

/* keep the panel fully visible with rounded corners on small screens */
.share-overlay-panel {
  max-height: calc(
    100vh - 24px - env(safe-area-inset-top, 0px) -
      env(safe-area-inset-bottom, 0px)
  );
  overscroll-behavior: contain;
}

@supports (height: 100dvh) {
  .share-overlay-panel {
    /* use dynamic viewport on iOS to avoid toolbar jump */
    max-height: calc(
      100dvh - 24px - env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px)
    );
  }
}

: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);
  }
}

/* src/components/BusinessCard/BusinessCard.css */

.business-card {
  -webkit-user-select: none;
  user-select: none;
}

/* keep if the class existed previously; harmless if absent */
.business-card.card-pressed {
  /* no-op now that long-press is disabled */
}

/* Cover photo ratio & fit (scoped) */
.business-card .business-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f5f7;
}

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

.business-card .icon-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #9aa3ab;
}

/* add breathing room when compact cards show an image */
.compact-business-card .business-image {
  margin-bottom: 10px;
}

/* Logo overlay on card cover */
.business-card .business-image {
  position: relative;
}
.business-card .card-logo-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
@media (min-width: 640px) {
  .business-card .card-logo-badge {
    width: 40px;
    height: 40px;
  }
}

/* --- Distance pill (mobile-first) --- */
.business-card .location-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.business-card .distance-chip {
  margin-left: auto; /* push to the right edge of the row */
  padding: 4px 8px;
  border-radius: 12px;
  background: #f1f3f5;
  color: #0b2533;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

@media (min-width: 768px) {
  .business-card .distance-chip {
    font-size: 0.8rem;
  }
}

/* Corner distance badge */
.business-card {
  position: relative;
} /* safe; many cards already have this */

.business-card .distance-badge {
  position: absolute;
  right: 10px;
  bottom: 12px; /* sits just above actions row */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #0b2533;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
          backdrop-filter: saturate(120%) blur(2px);
}

/* service area text */
.business-card .service-area {
  font-weight: 600;
  color: #0b2533;
}
.business-card .service-area span {
  font-weight: 500;
  color: #475569;
}

/* ===== FilterOverlay (scoped, mobile-first) ===== */

/* Top progress shimmer while categories load */
.fo-progress {
  height: 3px;
  margin: 0 12px;
  background: linear-gradient(
    90deg,
    rgba(218, 42, 88, 0.1),
    rgba(218, 42, 88, 0.9),
    rgba(218, 42, 88, 0.1)
  );
  background-size: 200% 100%;
  animation: foLine 1.1s linear infinite;
  border-radius: 2px;
}
@keyframes foLine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Chips area */
.fo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* a touch more bottom space in the chips scroller */
  padding-bottom: 24px;
}
.fo-chip {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.fo-chip.selected {
  border-color: #000;
  color: #000;
  font-weight: 700;
}
.fo-chips.is-loading {
  pointer-events: none;
}
.fo-chip.skel {
  height: 34px;
  width: 92px;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: foShimmer 1.1s ease-in-out infinite;
  border: 0;
}
@keyframes foShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Button styles (used in sheet-actions) */
.fo-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  flex: 1 1; /* Allow buttons to grow */
}
.fo-btn.cancel:hover {
  background: #fafafa;
}
.fo-btn.primary {
  background: #da2a58;
  color: #fff;
  border-color: #da2a58;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
  will-change: transform, box-shadow;
  flex: 1.2 1; /* Give primary button more space */
}
.fo-btn.primary:disabled {
  background: #e6a3b5;
  border-color: #e6a3b5;
  color: #fff;
}
.fo-btn.primary:active {
  transform: translateY(1px);
}

/* Inline spinner in primary button */
.fo-btn.primary.is-loading {
  pointer-events: none;
  opacity: 0.95;
}
.fo-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-top-color: #fff;
  animation: foSpin 0.7s linear infinite;
}
@keyframes foSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fo-progress,
  .fo-chip.skel,
  .fo-spinner {
    animation: none;
  }
}

.fo-empty {
  width: 100%;
  padding: 16px 12px;
  color: #6b7280;
  font-size: 14px;
}

/* screen-reader only */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Scoped overrides for the UserProfile bottom sheet --- */

/* Stronger rounding + clip to curve (overrides generic 12px) */
.user-profile-sheet.sheet-container {
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  overflow: hidden; /* content follows the curve */
}

/* Subtle grabber */
.user-profile-sheet.sheet-container::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #ddd;
}

/* Nudge header down so the grabber doesn’t overlap */
.user-profile-sheet .sheet-header {
  padding-top: 18px;
}

.sheet-actions {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eaeaea;

  /* Safe-area aware padding so buttons don't hug screen edges */
  padding-top: 10px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));

  display: flex;
  gap: 8px;
  z-index: 1;
  flex-shrink: 0;
}

.sheet-content {
  padding: 12px 16px calc(80px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* === DiscoveryTabs.css — scoped, presentation-only ================== */

/* Desktop/tablet two-tier controls  --------------------------------- */
.dt-twoTier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin: 0 0 6px 0;
}

.dt-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e9ecef;
  background: #fff;
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.dt-seg--scope {
  margin-left: auto;
}

.dt-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  color: #0b2533;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease,
    transform 60ms ease;
}
.dt-seg__btn:hover {
  background: #f8f9fb;
}
.dt-seg__btn:active {
  transform: translateY(1px);
}

.dt-seg__btn.is-active {
  background: rgba(11, 37, 51, 0.08);
  color: #0b2533;
  border-color: #0b2533;
}

.dt-badge {
  display: inline-block;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: #eef2f6;
  color: #0b2533;
}
.dt-seg__btn.is-active .dt-badge {
  background: #0b2533;
  color: #fff;
}

/* Card list rhythm */
.discovery-tabs-container .card-list {
  margin-top: 6px;
}

/* =========================  MOBILE ONLY  =========================== */

/* 1) Hide desktop segments on mobile; show the mode chip row instead */
@media (max-width: 768px) {
  .dt-twoTier {
    display: none;
  }
  .dt-modeRow {
    display: flex;
    justify-content: flex-end;
    padding: 6px 12px 4px;
  }
}

/* 2) Mode Chip (the single control users see on mobile) */
.dt-modeChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #e5eaef;
  background: #f9fbfc;
  color: #0b2533;
  font-size: 0.95rem;
  line-height: 1.1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.dt-chipIcon {
  opacity: 0.9;
}
.dt-chipText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-chipCount {
  font-weight: 700;
}
.dt-chipCaret {
  opacity: 0.7;
}

/* 3) Bottom sheet for choosing the 4 combos */
.dt-modeBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.35);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
          backdrop-filter: saturate(120%) blur(2px);
  z-index: 40;
  border: 0;
}
.dt-modeSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.18);
  padding: 10px 12px 14px;
}
.dt-modeOption {
  width: 100%;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid #eef1f4;
  background: #fff;
  font-size: 0.95rem;
  margin-top: 8px;
}
.dt-modeOption.is-active {
  border-color: #0b2533;
  background: rgba(11, 37, 51, 0.05);
}
.dt-optionIcon {
  color: #0b2533;
  opacity: 0.9;
}
.dt-optionText {
  color: #0b2533;
}
.dt-optionCount {
  min-width: 28px;
  text-align: right;
  font-weight: 700;
  color: #0b2533;
}

/* Accessibility focus for all buttons in this module */
.dt-seg__btn:focus-visible,
.dt-modeChip:focus-visible,
.dt-modeOption:focus-visible {
  outline: 2px solid #0b2533;
  outline-offset: 2px;
}

/* Add to DiscoveryTabs.css */
.location-error-help {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  opacity: 0.8;
}

.no-business-message {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.no-business-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.load-more-button {
  display: inline-block !important;
  background-color: #0b2533 !important; /* musDir dark */
  color: #fff !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  border: none !important;
  border-radius: 6px !important; /* ✅ rectangular with subtle curves */
  cursor: pointer !important;
  text-align: center !important;
  transition: background-color 0.2s ease !important;
}

.load-more-button:hover:not(:disabled) {
  background-color: #243648 !important; /* slightly lighter hover */
}

.load-more-button:disabled {
  opacity: 0.6 !important;
  cursor: default !important;
}

.hero-search {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Ensure search bar and banner have consistent width */
.hero-search .sl-wrap {
  max-width: 600px;
  width: 100%;
}

@media (max-width: 768px) {
  .hero-search .sl-wrap {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-search {
    padding: 0 16px;
    margin: 8px 0 0;
  }
  .hero-content {
    padding: 20px 16px 8px;
  }

  .hero-search .sl-wrap {
    width: 100%;
    max-width: 100%;
  }

  .hero-title,
  .hero-subtitle {
    margin-bottom: 10px;
  }

  .listings-container .section-title {
    margin-top: 8px;
  }
}

/* For very large screens, limit the maximum width */
@media (min-width: 1400px) {
  .hero-search {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  padding: 30px 16px 30px;
  box-sizing: border-box;
}

/* Keep the 600px rail for hero children EXCEPT the title */
.hero-content > *:not(.hero-title) {
  width: 100%;
  max-width: 600px;
}

@media (max-width: 768px) {
  .hero-content > * {
    max-width: 100%;
  }
}

.hero-title,
.hero-subtitle {
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
}

/* Container padding so "Showing" doesn't hug the edge on mobile */
.listings-container {
  padding: 0 16px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .listings-container {
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Applied filters rail */
.active-filters-rail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
  padding: 0;
}

.active-filters-label {
  flex: 0 0 auto;
  color: #0b2533;
  font-size: 13px;
  font-weight: 700;
}

/* horizontally scrollable chip rail with subtle edge fade */
.active-filters-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding: 2px 0;
  flex: 1 1 auto;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12px,
    black calc(100% - 12px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12px,
    black calc(100% - 12px),
    transparent 100%
  );
}
.active-filters-scroll::-webkit-scrollbar {
  display: none;
}

.active-filter-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12.5px;
  line-height: 1.1;
  font-weight: 600;
}

/* Clear link aligned to the right */
.clear-filters-btn {
  margin-left: 8px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #da2a58;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 2px;
  line-height: 1;
}
.clear-filters-btn:active {
  transform: translateY(1px);
}

/* Search results header with clear button */
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.clear-search-btn {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #da2a58;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.clear-search-btn:hover {
  background-color: rgba(218, 42, 88, 0.1);
}

.clear-search-btn:active {
  transform: translateY(1px);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .search-results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .clear-search-btn {
    align-self: flex-end;
    margin-top: -4px;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  .search-results-header {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .clear-search-btn {
    align-self: auto;
    margin-top: 0;
    font-size: 13px;
    padding: 3px 6px;
  }
}

.lp-gps-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.lp-gps-hero .lp-gps-lottie {
  width: 140px;
  height: 140px;
}
.lp-gps-note {
  margin-top: 8px;
  font-size: 14px;
  color: #475569;
  text-align: center;
}

.muslim-rotator-group {
  display: inline-block;
}

.sliding-text-container {
  display: inline-block;
  vertical-align: top;
}

.sliding-word {
  white-space: nowrap;
}

/* Keep "Discover Near ..." on one line on desktop, with graceful truncation */
@media (min-width: 1024px) {
  .discover-heading {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

/* Make the hero-time skeletons use the listings rail instead of the 600px hero rail */
.hero-content .card-list.skeleton-list {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .hero-content .card-list.skeleton-list {
    padding: 0;
  }
}

/* Make banner visually equal to the SearchLauncher */
.hero-content .lp-gps-banner {
  width: calc(100% - 32px);
  max-width: 600px;
  margin: 12px auto 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .hero-content .lp-gps-banner {
    max-width: none;
  }
}

.lp-gps-banner,
.lp-gps-banner.lp-gps-banner--airbnb,
.lp-gps-banner.lp-gps-banner--simple-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff8f6;
  border: 1px solid #ffd6cc;
  border-radius: 12px;
  padding: 12px 16px;
}

.lp-gps-banner .lp-gps-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.lp-gps-banner .lp-gps-pin {
  color: #d93a00;
  font-size: 16px;
  line-height: 1;
}
.lp-gps-banner .lp-gps-text {
  color: #4d2d0f;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.lp-gps-banner .lp-gps-close {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lp-gps-banner .lp-gps-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
  .hero-title {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.muslim-rotator-group,
.sliding-text-container,
.sliding-word {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}

.lp-gps-banner--clean {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
}

.lp-gps-banner--clean .lp-gps-pin {
  color: #da2a58;
  font-size: 16px;
  line-height: 1;
}

.lp-gps-banner--clean .lp-gps-title {
  font-weight: 700;
  font-size: 14px;
  color: #0b2533;
  margin-bottom: 2px;
}

.lp-gps-banner--clean .lp-gps-sub {
  font-size: 13px;
  color: #64748b;
  line-height: 1.35;
}

.lp-gps-banner--clean .lp-gps-close {
  color: #8b8b8b;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.lp-gps-banner--clean .lp-gps-close:hover {
  background: #f5f5f5;
}

@media (min-width: 1024px) {
  .lp-gps-banner--clean .lp-gps-title {
    font-size: 15px;
  }
  .lp-gps-banner--clean .lp-gps-sub {
    font-size: 14px;
  }
}

.lp-gps-banner.lp-gps-banner--clean {
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 12px 16px;
}

.lp-gps-banner--airbnb {
  margin: 12px auto 0;
  padding: 14px;
}

@media (min-width: 1024px) {
  .lp-gps-banner .lp-gps-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .lp-gps-banner .lp-gps-title,
  .lp-gps-banner .lp-gps-sub {
    display: inline;
    margin: 0;
    line-height: 1.2;
  }
  .lp-gps-banner .lp-gps-sub::before {
    content: " — ";
  }
}

/* ===== Stable 3-button toolbar (Samsung/iPhone safe) ===== */
.filter-add-business-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* even spread */
  gap: 10px !important;
  width: 100% !important;
  margin: 8px 0 12px !important;
  box-sizing: border-box !important;
}

/* Make each button take equal width and center its content */
.add-business-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  /* equal thirds, never overflow */
  flex: 1 1 !important; /* <- key: equal growth */
  min-width: 0 !important; /* <- allow shrink on Android */
  max-width: none !important;
  width: auto !important;

  margin: 0 !important; /* clear any default margins */
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #0b2533 !important;
  font: 700 14px/1 "Montserrat", ui-sans-serif, system-ui, -apple-system,
    Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  white-space: nowrap !important; /* keep label on one line */
  -webkit-appearance: none; /* iOS/Android consistency */
}

/* If an icon element exists inside the button, keep it compact */
.add-business-button svg,
.add-business-button i {
  flex: 0 0 auto !important;
}

/* Ultra-narrow devices only (older phones): small font to avoid wrap */
@media (max-width: 360px) {
  .add-business-button {
    font-size: 13px !important;
    padding: 9px 10px !important;
  }
}

/* src/components/BusinessSuccessOverlay.css */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(11, 37, 51, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.overlay-content {
  background: white;
  padding: 24px;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.success-overlay-content .success-icon {
  font-size: 48px;
  color: #28a745;
  margin-bottom: 16px;
}

.success-overlay-content h2 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #0b2533;
}

.success-overlay-content p {
  margin-bottom: 24px;
  color: #4a5568;
  line-height: 1.5;
}

.button-group-corner {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Scoped centering & stacking for the success modal only */
.overlay.overlay--success {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px; /* prevents edge clipping on small viewports */
  z-index: 12000; /* stays above page content/sheets */
}

/* Be explicit for the content block so it can't shift */
.overlay.overlay--success > .overlay-content {
  margin: 0; /* remove any inherited margins */
}

/* src/pages/AddBusinessPage/AddBusinessPage.css */

/* Optional brand color hints for icons inside the existing .social-icon-button */
.social-icon-pinterest {
  color: #bd081c;
} /* Pinterest red */
.social-icon-etsy {
  color: #f45800;
} /* Etsy orange */
.social-icon-telegram {
  color: #229ed9;
} /* Telegram blue */

/* --- Areas served chips --- */
.chips-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  position: relative;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3f5f7;
  border: 1px solid #d8dee3;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0b2533;
}
.chip-remove {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #7a8793;
}
.chip-text-input {
  min-width: 180px;
  flex: 1 1 180px;
}

/* Ensure the suggestions list is flush to the input for the Address */
.address-suggestions-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: auto;
  margin-top: 0; /* override any prior margin */
  z-index: 20; /* above other form elements */
}

/* Anchor for the absolute dropdown */
.areas-input-wrapper {
  position: relative;
  width: 100%;
}

/* Stronger selector so it beats global `.suggestions-list { z-index: 5 }` */
.areas-input-wrapper .areas-suggestions-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5eaef;
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1050; /* sits above the form & any siblings */
}

/* sentinel has no visual footprint */
.mid-form-sentinel {
  width: 100%;
  height: 1px;
}

/* optional: make the sheet title lowercase like the rest of musDir */
.user-profile-sheet .sheet-title {
  text-transform: lowercase;
}

/* BottomSheet hero: Lottie + copy */
.assist-hero {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
}

.assist-lottie {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: radial-gradient(
    120% 120% at 30% 20%,
    #ffefd5 0%,
    #ffe9c0 35%,
    #ffd166 100%
  );
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.assist-fallback {
  position: absolute;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  font-size: 26px; /* Style for the fallback emoji */
}

.assist-copy {
  font-size: 14px;
  line-height: 1.45;
}

/* Micro-interactions inspired by Target/Airbnb */
.assist-sheet-btn {
  transform: translateZ(0);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.assist-sheet-btn:active {
  transform: scale(0.98);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* In your CSS file */
.button.secondary {
  background-color: #6c757d;
  border: 1px solid #6c757d;
  color: #fff; /* NEW: ensure readable text */
}

.button.secondary:hover,
.button.secondary:focus {
  background-color: #5a6268;
  border-color: #545b62;
  color: #fff; /* NEW: keep white on hover/focus */
}

/* snap overlay (always above) */
.snap-overlay-host {
  position: fixed;
  inset: 0;
  z-index: 10000; /* over sheets, forms, toasts */
}

/* Button group alignment for the form footer */
.button-group {
  display: flex;
  gap: 12px;
  justify-content: flex-end; /* right-align on wider screens */
  align-items: center;
  flex-wrap: wrap;
}

/* deployment */

@media (max-width: 480px) {
  .button-group {
    gap: 8px;
    justify-content: stretch;
  }
  .button-group .button {
    flex: 1 1; /* full-width, even sizing on mobile */
  }
}

/* ---- Photos section (namespaced) ---- */
.photos-row {
  margin: 14px 0;
}
.photo-field {
  display: block;
}

.photo-uploader {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.photo-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  background: #f3f5f7;
  border: 1px solid #e5eaef;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #7a8793;
  font-weight: 700;
}
.photo-thumb.cover {
  width: 144px;
  height: 81px;
} /* ~16:9 */
.photo-thumb.logo {
  width: 72px;
  height: 72px;
  border-radius: 999px;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-actions input[type="file"] {
  display: block;
}
.photo-actions .help {
  display: block;
  margin-top: 6px;
  color: #7a8793;
  font-size: 12px;
}

.photo-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.add-thumb {
  width: 72px;
  height: 72px;
  border: 2px dashed #d8dee3;
  border-radius: 12px;
  color: #7a8793;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.add-thumb input[type="file"] {
  display: none;
}

/* subtle one-shot highlight when we jump to Photos */
@keyframes photosPulseGlow {
  0% {
    box-shadow: 0 0 0 rgba(11, 37, 51, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(11, 37, 51, 0.12);
  }
  100% {
    box-shadow: 0 0 0 rgba(11, 37, 51, 0);
  }
}
.photos-pulse {
  display: inline-block;
  border-radius: 10px;
  animation: photosPulseGlow 1.6s ease-out 1;
}

.button-like-label {
  cursor: pointer;
  background: #f3f5f7;
  border: 1px solid #d8dee3;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: background-color 0.2s;
}

.button-like-label:hover {
  background-color: #e5eaef;
}

/* Info callout (not input-like) */
.info-callout {
  background: #f7fbff;
  border: 1px solid #cfe8ff;
  color: #0b2533;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  margin: 8px 0 16px;
}

/* Unified photos layout */
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* mobile-first two-up */
  grid-gap: 12px;
  gap: 12px;
}

@media (min-width: 640px) {
  .media-grid {
    grid-template-columns: repeat(3, 1fr); /* cover, logo, gallery panel */
  }
}

.photo-tile {
  position: relative;
  background: #f3f5f7;
  border: 1px solid #e5eaef;
  border-radius: 12px;
  overflow: hidden;
  min-height: 120px; /* mobile-first */
  display: grid;
  place-items: center;
}

.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-tile .ph {
  font-size: 12px;
  color: #7a8793;
}

.tile-spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.7);
  z-index: 5;
}

/* upload buttons inside tiles */
.tile-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 8px;
  justify-content: center;
  background: rgba(11, 37, 51, 0.04);
}

/* delete “×” over image */
.remove-thumb {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  background: #000;
  color: #fff;
  line-height: 22px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* inline spinner dot */
.spinner-inline {
  width: 22px;
  height: 22px;
  border: 2px solid #cfe8ff;
  border-top-color: #0b2533;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Equal-size primary & cancel in the footer */
.button-group.buttons-equal {
  display: flex;
  gap: 12px;
}

.button-group.buttons-equal .button {
  flex: 1 1;
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}

/* Mobile: stack full-width for thumb reach */
@media (max-width: 480px) {
  .button-group.buttons-equal {
    flex-direction: column;
  }
  .button-group.buttons-equal .button {
    width: 100%;
  }
}

/* Make the cancel look intentional (not “disabled”) */
.button.cancel {
  background: #f3f5f7;
  border: 1px solid #d8dee3;
  color: #0b2533;
}
.button.cancel:active {
  filter: brightness(0.96);
}

/* Add this to your AddBusinessPage.css file */

.media-grid .photo-tile {
  position: relative;
  display: flex;
  flex-direction: column;
}

.photo-tile .photo-actions {
  order: 2; /* This will make the help text appear above the button */
  margin-bottom: 8px;
}

.tile-actions {
  order: 3; /* This will make the button appear below the help text */
}

/* Ensure the help text is properly styled and positioned */
.photo-actions .help {
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

/* If you need more specific targeting for the media-grid layout */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.media-grid .photo-tile {
  min-height: 200px;
}

/* Root: perfectly centered with symmetric safe-area padding */
.se-root {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex; /* more reliable centering on iOS than grid */
  align-items: center;
  justify-content: center;

  /* symmetric padding that respects safe-areas */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
}

.se-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Panel: shorter, strictly centered, no overflow creep */
.se-panel {
  position: relative;
  width: min(94vw, 560px);
  /* shorter so top/bottom borders are visible even on mobile chrome/notch */
  max-height: calc(
    100dvh - 72px - env(safe-area-inset-top, 0px) -
      env(safe-area-inset-bottom, 0px)
  );
  box-sizing: border-box; /* ensure padding doesn't push width */
  margin: 0 auto; /* hard-center even if parent scrolls */
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  padding: 10px;
  /* give a little breathing room below the buttons, incl. safe-area */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.se-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  font-size: 20px;
  color: #6b7280;
  cursor: pointer;
}

.se-title {
  text-align: center;
  margin: 6px 0 12px;
  font-weight: 800;
  color: #0b2533;
}

.se-error {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

/* Form */
.se-form {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.se-form label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.se-form input,
.se-form textarea,
.se-form select,
.se-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 16px; /* prevent iOS zoom */
  outline: none;
  background: #fff;
}

/* black border while editing (focus) */
.se-form input:focus,
.se-form textarea:focus,
.se-form select:focus,
.se-input:focus {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* keep black border on fields that already changed */
.se-input--changed {
  border-color: #000 !important;
}

/* Group */
.se-group {
  margin: 6px 0 2px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.se-group-title {
  font-weight: 700;
  color: #111827;
}

/* Actions (sticky-ish footer) */
.se-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0; /* sit at the true bottom of the scroll container */
  padding: 6px 0 4px;
  margin-top: 8px;
  background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
}
.se-btn {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #e5e7eb;
}
.se-btn-primary {
  background: #000;
  color: #fff;
  border-color: #000;
}
.se-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.se-btn-secondary {
  background: #fff;
  color: #000;
}

/* OwnerDashboardPanel.css — musDir clean look (mobile-first) */

:root {
  --panel-bg: #fff;
  --ink-1: #0b2533;
  --ink-2: #243648;
  --ink-3: #5b6977;
  --line: #eceff2;
  --surface: #f7f9fb;
  --success: #10b981;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Overlay & container */
.odp-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 16px;
  z-index: 1300;
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  backdrop-filter: saturate(140%) blur(2px);
}
.odp-panel {
  width: 100%;
  max-width: 800px;
  background: #fff;
  background: var(--panel-bg);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow);
  color: #0b2533;
  color: var(--ink-1);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, Helvetica, Arial, sans-serif;
}

/* Header */
.odp-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 40px;
  grid-template-areas: "title seg close";
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #eceff2;
  border-bottom: 1px solid var(--line);
}
.odp-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.2px;
  color: #0b2533;
  color: var(--ink-1);
}
.odp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #e9fbf4;
  color: #10b981;
  color: var(--success);
  border: 1px solid #c9f3e4;
}

/* Segmented buttons + close */
.odp-actions-inline {
  grid-area: seg;
  display: flex;
  align-items: center;
  gap: 10px;
}
.odp-btn {
  -webkit-appearance: none;
          appearance: none;
  border: 1px solid #eceff2;
  border: 1px solid var(--line);
  background: #fff;
  color: #243648;
  color: var(--ink-2);
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.odp-btn.light {
  background: #fff;
}
.odp-btn[aria-pressed="true"] {
  background: #f7f9fb;
  background: var(--surface);
  color: #0b2533;
  color: var(--ink-1);
}
.odp-close {
  grid-area: close;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #0b2533;
  color: var(--ink-1);
  font-size: 24px;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
}
.odp-close:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Body & cards (scroll area) */
.odp-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 18px;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.odp-card {
  background: #fff;
  border: 1px solid #eceff2;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.odp-card h4 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: #243648;
  color: var(--ink-2);
}
.odp-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-gap: 8px;
  gap: 8px;
  align-items: baseline;
  margin: 8px 0;
}
.odp-row label {
  color: #243648;
  color: var(--ink-2);
  font-weight: 800;
}
.odp-small {
  color: #5b6977;
  color: var(--ink-3);
  font-size: 12px;
}

/* Hours (preview header) */
.odp-hours-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

/* Hours (edit) blocks */
.odp-days {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}
.odp-day {
  border: 1px solid #eceff2;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.odp-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.day-label {
  font-weight: 800;
  color: #243648;
  color: var(--ink-2);
}
.odp-checkbox {
  transform: translateY(1px);
  margin-right: 6px;
}

/* Time row uses flex so inputs can shrink gracefully on iOS */
.odp-day-times {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Time inputs: compact, never spill */
.odp-time {
  flex: 1 1 128px;
  max-width: 164px;
  min-width: 112px;
  border: 1px solid #eceff2;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.odp-time::-webkit-calendar-picker-indicator {
  transform: scale(0.9);
  opacity: 0.9;
  margin-right: 2px;
}

/* Footer (inside panel; never cut off) */
.odp-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eceff2;
  border-top: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@supports (padding: max(0px)) {
  .odp-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
.odp-btn.primary {
  background: #000;
  color: #fff;
  border-color: #000;
}
.odp-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Spinners */
.odp-loading {
  padding: 18px;
  text-align: center;
  color: #243648;
  color: var(--ink-2);
}
.odp-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #e5e7eb;
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: odp-spin 0.8s linear infinite;
}
@keyframes odp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .odp-header {
    grid-template-columns: 1fr auto 40px;
    grid-template-areas:
      "title title close"
      "seg   seg   seg";
    row-gap: 10px;
  }
  .odp-body {
    padding: 16px;
  }
  .odp-row {
    grid-template-columns: 92px 1fr;
  }
  .odp-day-times {
    gap: 8px;
  }
  .odp-time {
    flex: 1 1 120px;
    max-width: 150px;
  }
}

/* Keep the overlay centered and prevent sideways scroll */
.odp-overlay {
  overflow: hidden; /* no horizontal scroll on the overlay */
}

/* Panel: hard-center and box-size correctly */
.odp-panel {
  width: min(100%, 820px); /* center width math */
  margin: 0 auto; /* hard center */
  box-sizing: border-box; /* prevent padding from pushing width */
}

/* Scroll area: hide any incidental x-overflow from inner rows */
.odp-body {
  overflow-x: hidden;
}

/* Time row: allow wrap when space gets tight */
.odp-day-times {
  display: flex;
  flex-wrap: wrap; /* <-- key: wrap instead of overflowing */
  gap: 10px;
  align-items: center;
}

/* Time inputs: compact defaults (already have min/max) */
.odp-time {
  flex: 1 1 128px;
  max-width: 164px;
  min-width: 112px;
}

/* Ultra-narrow devices: stack both inputs full-width */
@media (max-width: 380px) {
  .odp-day-times .odp-time {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* --- Hard stop for sideways scroll & content-box drift --- */
.odp-overlay {
  overflow: hidden;
}

/* Panel clamps to viewport and stays perfectly centered */
.odp-panel {
  width: min(100vw - 32px, 820px); /* 16px side breathing room on mobile */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Everything inside the panel uses border-box so padding/border don't push width */
.odp-panel *,
.odp-panel *::before,
.odp-panel *::after {
  box-sizing: border-box;
}

/* Scroll area never exposes horizontal scrollbars */
.odp-body {
  overflow-x: hidden;
}

/* If header controls ever get tight, wrap them (prevents tiny overflows) */
.odp-actions-inline {
  flex-wrap: wrap;
}

/* Time row wraps on narrow screens rather than pushing width */
.odp-day-times {
  display: flex;
  flex-wrap: wrap; /* <— key: wrap instead of overflowing */
  gap: 10px;
  align-items: center;
}

/* Time inputs—compact, never wider than the card */
.odp-time {
  flex: 1 1 128px;
  max-width: 164px;
  min-width: 112px;
  height: 40px; /* iOS respects explicit control height */
  line-height: 40px;
}

/* Ultra-narrow (older iPhones): stack both time inputs full width */
@media (max-width: 380px) {
  .odp-day-times .odp-time {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* --- FINAL CLAMPS: kill right-edge creep on Android/iOS --- */

/* Center the sheet and give it safe side padding */
.odp-panel {
  width: min(100vw - 32px, 820px);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Grid children in the header must be allowed to shrink */
.odp-header > * {
  min-width: 0;
}

/* Make the name wrap nicely instead of forcing a wider layout */
.odp-title {
  overflow-wrap: anywhere; /* long names won't push width */
  word-break: break-word;
  min-width: 0; /* critical inside CSS grid */
}

/* Actions can wrap if space is tight */
.odp-actions-inline {
  flex-wrap: wrap;
  min-width: 0;
}

/* Ensure every content row and card respects the panel width */
.odp-body,
.odp-card,
.odp-row,
.odp-hours-head,
.odp-days,
.odp-day {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* Time row wraps before it can overflow the card */
.odp-day-times {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Compact time inputs; never allow them to force wider layout */
.odp-time {
  flex: 1 1 128px;
  max-width: 160px; /* slightly tighter than before */
  min-width: 112px;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
}

/* Ultra-narrow: stack both time inputs full width */
@media (max-width: 380px) {
  .odp-day-times .odp-time {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Overlay: no horizontal scroll ever */
.odp-overlay {
  overflow: hidden;
}

/* Verified pill: never wrap or compress */
.odp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* lock its size/shape */
  height: 28px; /* consistent chip height */
  padding: 0 10px;
  line-height: 28px;

  /* prevent wrap/squeeze on iOS/Android */
  white-space: nowrap;
  min-width: -webkit-max-content;
  min-width: max-content;
  flex: 0 0 auto;

  /* (keep your existing colors/border) */
  background: #e9fbf4;
  color: #10b981;
  border: 1px solid #c9f3e4;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

/* ensure the title row allows the pill to sit comfortably */
.odp-title {
  display: flex;
  align-items: center; /* vertical align with text */
  gap: 10px;
  min-width: 0; /* allow shrink without pushing panel */
}

/* Namespaced “bd-*” so it’s page-scoped and conflict-free */

:root {
  --bd-gap: 20px;
  --bd-radius: 12px;
  --bd-card-bg: #fff;
  --bd-border: #eaeaea;
  --bd-text: #333;
  --bd-subtext: #666;
}

/* Page wrapper accounts for fixed global header (64px) */
.bd-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 72px 20px 32px; /* was 96px ... 40px */
  padding-top: calc(72px + env(safe-area-inset-top));
  color: #333;
  color: var(--bd-text);
}

/* Local toolbar (back + share) */
.bd-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.bd-btn:hover {
  transform: translateY(-2px);
}
.bd-btn:active {
  transform: translateY(0);
}
.bd-btn.bd-btn-light {
  background: #fff;
  color: #000;
  border-color: #ddd;
}

/* Hero */
.bd-hero {
  text-align: center;
  margin-bottom: 20px;
  margin-bottom: var(--bd-gap);
}
.bd-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  color: #0b2533;
  letter-spacing: -0.02em;
}
.bd-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  font-size: 1rem;
  color: #0b9e6e;
  vertical-align: middle;
}
.bd-category {
  margin-top: 10px;
}
.bd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f7f7f7;
  border: 1px solid #eaeaea;
  border: 1px solid var(--bd-border);
  font-weight: 600;
  color: #444;
}

/* Sections */
.bd-section {
  margin-top: 22px;
}

/* Map */
.bd-map {
  border-radius: 12px;
  border-radius: var(--bd-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Grid of small cards */
.bd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  grid-gap: 20px;
  grid-gap: var(--bd-gap);
  gap: var(--bd-gap);
}
@media (max-width: 900px) {
  .bd-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .bd-grid {
    grid-template-columns: 1fr;
  }
}

.bd-card {
  background: #fff;
  background: var(--bd-card-bg);
  border: 1px solid #eaeaea;
  border: 1px solid var(--bd-border);
  border-radius: 12px;
  border-radius: var(--bd-radius);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.bd-h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: #222;
}

/* Rows with icons */
.bd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  color: #333;
  color: var(--bd-text);
}
.bd-row-icon {
  color: #666;
  font-size: 1rem;
}

/* Links */
.bd-link {
  color: #0b2533;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.bd-link:hover {
  border-bottom-color: #0b2533;
}

/* Description */
.bd-body {
  line-height: 1.6;
  color: #444;
}

/* Social icons row */
.bd-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bd-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #eaeaea;
  border: 1px solid var(--bd-border);
  background: #fff;
  color: #333;
  transition: transform 0.15s ease, background 0.15s ease;
}
.bd-social a:hover {
  transform: translateY(-2px);
  background: #f9f9f9;
}

/* Tags */
.bd-tags {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bd-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bd-tag {
  background: #fff;
  color: #000;
  border: 1.5px solid #000;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Loading / error variants (use your global patterns) */
.bd-loading,
.bd-error {
  max-width: 680px;
  margin: 96px auto 0;
  text-align: center;
}

/* Map viewport height — slimmer like JetBrite */
.bd-map-viewport {
  height: 160px; /* was 220px */
}
@media (min-width: 640px) {
  .bd-map-viewport {
    height: 190px;
  } /* was 260px */
}
@media (min-width: 900px) {
  .bd-map-viewport {
    height: 220px;
  } /* was 300px */
}

/* Keep the map filling the viewport */
.bd-map-viewport > div,
.bd-map-viewport .mapboxgl-map,
.bd-map-viewport .maplibregl-map {
  height: 100% !important;
  width: 100% !important;
}

/* Slightly tighter spacing around the map card */
.bd-section.bd-map {
  margin-top: 14px; /* down from ~22px */
  margin-bottom: 14px;
  border-radius: 16px; /* a bit rounder, closer to JetBrite feel */
}

/* Colored social icons (match EventDetail) */
.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;
}
.social-icon-x {
  color: #000000;
}
.social-icon-youtube {
  color: #ff0000;
}
.social-icon-linkedin {
  color: #0a66c2;
}

/* Verified badge (match card vibe) */
.bd-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #0b9e6e;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
}
.bd-verified-badge svg {
  font-size: 0.9rem;
}
.bd-verified-text {
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .bd-verified-text {
    display: none;
  }
}

/* Hero cover (Airbnb-like) */
.bd-hero-cover {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  margin-bottom: var(--bd-gap);
}
.bd-hero-cover .bd-cover-img {
  width: 100%;
  height: 220px; /* mobile */
  object-fit: cover;
  display: block;
}
@media (min-width: 640px) {
  .bd-hero-cover .bd-cover-img {
    height: 260px;
  }
}
@media (min-width: 900px) {
  .bd-hero-cover .bd-cover-img {
    height: 300px;
  }
}

/* Gallery strip */
.bd-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px;
  -webkit-overflow-scrolling: touch;
}
.bd-thumb {
  flex: 0 0 auto;
  width: 128px; /* mobile-first */
  height: 86px; /* ~3:2 */
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
}
.bd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 640px) {
  .bd-thumb {
    width: 156px;
    height: 104px;
  }
}
@media (min-width: 900px) {
  .bd-thumb {
    width: 180px;
    height: 120px;
  }
}

/* Lightbox */
.bd-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  display: grid;
  place-items: center;
  z-index: 1100;
  padding: 24px;
}
.bd-lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.bd-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: #000;
  font-size: 24px;
  line-height: 40px;
  cursor: pointer;
}
.bd-lightbox-nav {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 6px 12px;
}
.bd-nav-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 20px;
  line-height: 36px;
  cursor: pointer;
}
.bd-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.bd-count {
  font-weight: 700;
  color: #000;
  font-size: 0.9rem;
}

/* Title row with logo */
.bd-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bd-logo {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
@media (min-width: 640px) {
  .bd-logo {
    width: 56px;
    height: 56px;
  }
}

/* slightly smaller logo on mobile, keeps title clear */
@media (max-width: 639px) {
  .bd-logo {
    width: 36px;
    height: 36px;
  }
  .bd-title {
    line-height: 1.15;
  }
}

/* Ensure hero can position the badge */
.bd-hero-cover {
  position: relative;
}

/* Mobile hero logo badge (shown only on mobile) */
.bd-hero-logo-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  display: none; /* default hidden; enabled on mobile below */
}

/* Mobile-first: show badge on hero, hide title-row logo */
@media (max-width: 639px) {
  .bd-hero-logo-badge {
    display: block;
  }
  .bd-logo {
    display: none;
  } /* hide stacked logo near title */
}

/* Desktop: keep current beside-title logo, hide hero badge */
@media (min-width: 640px) {
  .bd-hero-logo-badge {
    display: none;
  }
  /* (your .bd-logo sizes already defined for desktop) */
}

.bd-service-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.bd-sa-chip {
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 4px 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #0b2533;
  background: #fff;
}

/* subtle action link for secondary actions in toolbars */
.bd-link-quiet {
  font-weight: 600;
  color: #0b2533;
  border-bottom: 1px solid transparent;
  padding: 4px 6px;
}
.bd-link-quiet:hover {
  border-bottom-color: #0b2533;
}

/* Subtle, Yelp/Google-style link under the header */
.bd-subactions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.bd-suggest-link {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 0;
  font-size: 14px;
  font-weight: 600;
  color: #0b2533;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.bd-suggest-link:hover {
  opacity: 1;
}
/* Suggest edit row aligns left under category, like Yelp/Google */
.bd-suggest-row {
  margin-top: 6px;
  text-align: left;
}

.bd-suggest-link {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #0b2533;
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.bd-suggest-link:hover {
  opacity: 1;
}

/* Subtle Yelp/Google-style disabled note */
.bd-suggest-disabled {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  opacity: 0.85;
  margin-top: 4px;
  display: inline-block;
}

/* Compact status chips (Yelp-like) */
.bd-status-bar {
  display: flex;
  justify-content: flex-end; /* right aligned, like Yelp subactions */
  gap: 10px;
  margin-top: 6px;
}

.bd-chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
}

.bd-chip-claimed {
  background: #12b8861a; /* soft green bg */
  color: #0b9e6e; /* match your verified green */
  border-color: #0b9e6e33;
}

.bd-chip-pending {
  background: #ffbe0b1a; /* soft amber bg */
  color: #b08900; /* readable amber text */
  border-color: #b0890040;
}

/* keep Suggest link visually balanced next to chips when shown */
.bd-subactions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.bd-subactions .bd-suggest-link {
  margin-left: auto; /* push to right if alone */
}

/* Keep the session modal centered above the panel on mobile */
.session-expired-modal,
.modal.session-expired {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300; /* above OwnerDashboardPanel (1200) */
}

.session-expired-modal .modal-content,
.modal.session-expired .modal-content {
  margin: 0 auto !important;
}

/* R1: Claim CTA */
.bd-claim-cta {
  margin: 8px 0 4px;
  display: flex;
  justify-content: flex-start; /* change to flex-end if you prefer right-aligned */
}

.bd-claim-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #0b2533;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease,
    transform 0.05s ease;
}

.bd-claim-link:hover {
  background: #f7f9fb;
  border-color: #dfe3e8;
}

@media (max-width: 720px) {
  .bd-claim-cta {
    margin-top: 6px;
  }
}

/* ===== Home (page-scoped) ===== */
.home-page {
  background: #f7f7f7; /* Airbnb-like off-white */
  color: #0b2533;
}

/* Liked/Bookmarked sections = white cards on gray page */
.home-like-sections-dark .liked-businesses-section,
.home-like-sections-dark .bookmarked-businesses-section,
.home-like-sections-dark .liked-events-section,
.home-like-sections-dark .bookmarked-events-section {
  background: #fff;
  color: #0b2533;
  border: 1px solid #e6e8ea;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  margin-bottom: 16px;
  /* updated */
}

.home-like-sections-dark .liked-businesses-section h3,
.home-like-sections-dark .bookmarked-businesses-section h3,
.home-like-sections-dark .liked-events-section h3,
.home-like-sections-dark .bookmarked-events-section h3 {
  color: #0b2533;
  margin: 0 0 10px;
}

/* --- Carousel (peek the next card, no gradient) --- */
.carousel-container.has-peek {
  position: relative; /* anchors arrows */
}

/* Show a partial next card */
.carousel-peek {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;

  /* create right-side peek without a gradient */
  --peek: 48px;
  padding-right: var(--peek);
  margin-right: calc(var(--peek) * -1);
}
.carousel-peek::-webkit-scrollbar {
  display: none;
}

/* Make items slightly narrower than viewport so next card is visible */
.carousel-peek > * {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(82vw - 24px); /* tweak 76–86vw to taste */
  scroll-snap-align: start;
}
@media (min-width: 480px) {
  .carousel-peek > * {
    flex-basis: 320px;
  }
}
@media (min-width: 768px) {
  .carousel-peek > * {
    flex-basis: 360px;
  }
}

/* --- Arrows (auto-hidden via [disabled]) --- */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  display: grid;
  place-items: center;
  z-index: 5; /* above cards */
}
.carousel-arrow.left-arrow {
  left: 8px;
}
.carousel-arrow.right-arrow {
  right: 8px;
}

/* Hide/disable cleanly */
.carousel-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Flatten cards inside the carousels (no inner white card) */
.home-page .carousel-peek .business-card,
.home-page .carousel-peek .event-card {
  background: transparent !important;
}

/* Home: make "Add Business" + "Add Event" match Admin blue */
.home-page .quick-actions .button.primary {
  background-color: #0b2533;
  border-color: #0b2533;
  color: #fff;
}

.home-page .quick-actions .button.primary:hover {
  background-color: #163a4d; /* subtle darken */
}

.home-page .quick-actions .button.primary:focus-visible {
  outline: 2px solid rgba(11, 37, 51, 0.4);
  outline-offset: 2px;
}

.section-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #666;
  padding: 8px 0;
}

/* Banner sizing scoped to Home page */
.home-page .profile-incompletion-message {
  /* parent .home-page already has left/right padding, so no side margins */
  margin: 8px 0 16px; /* vertical rhythm like other sections */
  width: 100%;
  max-width: none; /* do NOT cap the width here */
}

/* Banner visuals scoped to Home only */
.home-page .profile-incompletion-message .profile-completion-reminder {
  width: 100%;
  margin: 0; /* override any default margins */
  background-color: #da2a58;
  color: #fff;
  padding: 15px;
  border-radius: 12px; /* match card rounding */
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: opacity 0.25s ease-in-out;
  box-sizing: border-box;
}

.home-page .profile-incompletion-message .profile-completion-reminder.fade-out {
  opacity: 0;
}

.home-page .profile-incompletion-message .profile-completion-reminder p {
  margin: 0;
}

.home-page .profile-incompletion-message .profile-reminder-link {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

/* --- Page surface & header offset --- */
.user-profile-page {
  /* musDir type */
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto,
    sans-serif;

  /* keep page clear of fixed header, on all breakpoints */
  --header-h: 64px;
  background: #fff; /* avoids the gray merging into footer */
  padding: calc(64px + 20px) 16px clamp(96px, 12vh, 160px);
  padding: calc(var(--header-h, 64px) + 20px) 16px clamp(96px, 12vh, 160px);
  max-width: 1120px;
  margin: 0 auto;
  box-sizing: border-box;
}

.profile-title {
  scroll-margin-top: 96px;
  margin: 4px 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: #0b2533;
}

/* --- White card hosting the chip rail --- */
.profile-hero {
  background: #fff;
  border: 1px solid #e6e8ea;
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 8px;
}

/* Tabs rail — mobile: horizontal; desktop: wrap */
.user-profile-page .profile-tabs {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px;
  scrollbar-width: none;
  background: transparent !important;
}
.user-profile-page .profile-tabs::-webkit-scrollbar {
  display: none;
}

/* Edge fades */
.user-profile-page .scroll-fade {
  --fade: 16px;
  position: relative;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
}
@media (min-width: 768px) {
  .user-profile-page .scroll-fade {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .user-profile-page .profile-tabs {
    flex-wrap: wrap !important;
    overflow: visible;
    padding: 2px;
  }
}

/* Chip buttons */
.user-profile-page .profile-tabs .tab-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid #e6e8ea;
  background: #fff;
  color: #0b2533;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease,
    background 0.15s ease;
}
.user-profile-page .profile-tabs .tab-item:hover {
  background: #f5f7f8;
}
.user-profile-page .profile-tabs .tab-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 37, 51, 0.18);
  border-color: #0b2533;
}
.user-profile-page .profile-tabs .tab-item.active {
  border-color: #0b2533;
  background: #eef3f6;
}

/* Status dot: complete=green, dirty=amber, pending=gray */
.user-profile-page .profile-tabs .tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #cfd8dc;
  flex: 0 0 auto;
}
.user-profile-page .profile-tabs .tab-dot.ok {
  background: #22c55e;
}
.user-profile-page .profile-tabs .tab-dot.dirty {
  background: #f59e0b;
}

/* Small hint below rail */
.unsaved-hint {
  display: inline-block;
  margin: 6px 2px 10px;
  padding: 4px 8px;
  font-size: 12px;
  color: #8a5400;
  background: #fff8e6;
  border: 1px solid #ffe3b3;
  border-radius: 9999px;
}

/* Panel fade */
.tab-panel.fade-in {
  animation: fadeIn 0.18s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fields */
.profile-field {
  margin-bottom: 14px;
}
.profile-field label {
  display: block;
  font-size: 13px;
  color: #3a4a57;
  margin-bottom: 6px;
}
.profile-field input,
.profile-field select,
.profile-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e1e5e8;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box; /* prevents any overflow */
  max-width: 100%;
  font-family: inherit; /* ensure Montserrat in inputs */
}

/* Optional: placeholders too */
.profile-field input::placeholder,
.profile-field textarea::placeholder {
  font-family: inherit;
}

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
  outline: none;
  border-color: #0b2533;
  box-shadow: 0 0 0 3px rgba(11, 37, 51, 0.1);
}
.profile-field .field-help {
  font-size: 12px;
  color: #5b6b78;
  margin-top: 6px;
}
.profile-field.has-error input,
.profile-field.has-error select,
.profile-field.has-error textarea {
  border-color: #dc2626;
}
.field-error {
  color: #dc2626;
  font-size: 12px;
  margin-top: 4px;
}

/* DoB */
.dob-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}
.dob-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e1e5e8;
  background: #fff;
  font-size: 14px;
}
.dob-select:focus {
  border-color: #0b2533;
  box-shadow: 0 0 0 3px rgba(11, 37, 51, 0.1);
}

/* Actions */
.profile-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid #eef2f4;
}
.profile-actions .button.primary {
  background: #0b2533;
  border: 1px solid #0b2533;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
}
.profile-actions .button.primary:hover:enabled {
  background: #163a4d;
}
.profile-actions .button.secondary {
  background: #fff;
  border: 1px solid #e1e5e8;
  color: #0b2533;
  padding: 12px 16px;
  border-radius: 10px;
}
.profile-actions .button.primary:disabled,
.profile-actions .button.secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Errors */
.profile-error {
  color: #dc2626;
  background: #fff5f5;
  border: 1px solid #fee2e2;
  padding: 8px 12px;
  border-radius: 10px;
  margin: 6px 0 12px;
}

/* --- musDir overlay for unsaved changes --- */
.unsaved-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 23, 33, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.unsaved-modal {
  width: min(520px, 92vw);
  background: #fff;
  border: 1px solid #e6e8ea;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  padding: 16px;
  font-family: inherit;
}
.unsaved-modal h3 {
  margin: 4px 0 8px;
  font-size: 18px;
  color: #0b2533;
}
.unsaved-modal p {
  margin: 0 0 12px;
  color: #3a4a57;
  font-size: 14px;
  line-height: 1.35;
}
.unsaved-modal .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #eef3f6;
  border: 1px solid #e1e5e8;
  font-size: 12px;
  color: #0b2533;
}
.unsaved-modal .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.unsaved-modal .actions .button {
  border-radius: 10px;
  padding: 10px 14px;
}

.user-profile-page .profile-tabs .tab-item,
.user-profile-page .profile-actions .button {
  font-family: inherit;
}

/* Mobile: reduce header offset so title sits closer to the header */
@media (max-width: 600px) {
  .user-profile-page {
    --header-h: 56px; /* typical mobile header */
    padding-top: calc(var(--header-h) + 6px);
  }
  .profile-title {
    margin: 0 0 10px; /* trim extra space above title */
  }
}

Yep—this is the classic iOS Safari “zoom on focus when font-size < 16px” issue. Your profile inputs/selects are set to 14px, which triggers the zoom. We’ll override to ≥16px on mobile (iOS-safe), scoped to the profile page only, and leave desktop unchanged.

## Patch (append to `src/pages/UserProfile/UserProfile.css`)

```css
/* --- Mobile: prevent iOS zoom-on-focus by using >=16px font size --- */
@media (max-width: 600px) {
  .user-profile-page .profile-field input,
  .user-profile-page .profile-field select,
  .user-profile-page .profile-field textarea,
  .user-profile-page .dob-select {
    font-size: 16px; /* key fix: iOS won’t zoom on focus */
    line-height: 1.25; /* keeps vertical rhythm tidy at 16px */
  }
}

/* Extra safety for iOS text autosizing */
.user-profile-page {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

/* Checkbox row: align with inputs on desktop, wrap nicely on mobile */
.checkbox-field .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0b2533;
  line-height: 1.25;
}

.checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0b2533; /* modern browsers */
  transform: translateY(1px); /* optical baseline align */
}

/* Indent help text so it lines up under the label text (not under the checkbox) */
.checkbox-field .field-help {
  margin-top: 6px;
  padding-left: 28px; /* ~ checkbox(18) + gap(10) */
}

/* Mobile: allow the long sentence to wrap cleanly */
@media (max-width: 600px) {
  .checkbox-field .checkbox-label {
    align-items: flex-start; /* keeps first line tight to checkbox */
  }
}

/* --- Mobile: prevent iOS zoom-on-focus by using >=16px font size --- */
@media (max-width: 600px) {
  .user-profile-page .profile-field input,
  .user-profile-page .profile-field select,
  .user-profile-page .profile-field textarea,
  .user-profile-page .dob-select {
    font-size: 16px; /* key fix: iOS won’t zoom on focus */
    line-height: 1.25; /* keeps vertical rhythm tidy at 16px */
  }
}

/* Extra safety for iOS text autosizing */
.user-profile-page {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

/* Checkbox row polish (optional but nice) */
.checkbox-field .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0b2533;
  line-height: 1.25;
}
.checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0b2533;
  transform: translateY(1px);
}
.checkbox-field .field-help {
  margin-top: 6px;
  padding-left: 28px; /* ~ checkbox(18) + gap(10) */
}
@media (max-width: 600px) {
  .checkbox-field .checkbox-label {
    align-items: flex-start;
  }
}

/* AddEventPage — platform icon coloring inspired by Business social icons */

/* Layout helpers used on this page */
.platform-select-wrapper {
  width: 100%;
}
.platform-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

/* Neutral base (not-online state) */
.platform-option-icon {
  font-size: 1rem;
  vertical-align: middle;
  color: #94a3b8; /* slate-400 */
}

/* Brand palette (same vibe as styles.css social icons) */
:root {
  --zoom: #2d8cff;
  --google-meet: #0f9d58;
  --microsoft-teams: #464eb8;
  --youtube: #ff0000;
  --facebook: #1877f2;
  --instagram: #e1306c;
  --twitch: #9146ff;
  --linkedin: #0a66c2;
  --tiktok: #000000;
  --clubhouse: #f1c40f; /* warm yellow */
  --other: #6b7280; /* slate-500 */
}

/* When eventType === 'online', flip icons to brand colors via data attributes */
.platform-select-wrapper.online .platform-option-icon[data-platform="Zoom"] {
  color: #2d8cff;
  color: var(--zoom);
}
.platform-select-wrapper.online
  .platform-option-icon[data-platform="Google Meet"] {
  color: #0f9d58;
  color: var(--google-meet);
}
.platform-select-wrapper.online
  .platform-option-icon[data-platform="Microsoft Teams"] {
  color: #464eb8;
  color: var(--microsoft-teams);
}
.platform-select-wrapper.online
  .platform-option-icon[data-platform="YouTube Live"] {
  color: #ff0000;
  color: var(--youtube);
}
.platform-select-wrapper.online
  .platform-option-icon[data-platform="Facebook Live"] {
  color: #1877f2;
  color: var(--facebook);
}
.platform-select-wrapper.online
  .platform-option-icon[data-platform="Instagram Live"] {
  color: #e1306c;
  color: var(--instagram);
}
.platform-select-wrapper.online .platform-option-icon[data-platform="Twitch"] {
  color: #9146ff;
  color: var(--twitch);
}
.platform-select-wrapper.online
  .platform-option-icon[data-platform="LinkedIn Live"] {
  color: #0a66c2;
  color: var(--linkedin);
}
.platform-select-wrapper.online
  .platform-option-icon[data-platform="TikTok Live"] {
  color: #000000;
  color: var(--tiktok);
}
.platform-select-wrapper.online
  .platform-option-icon[data-platform="Clubhouse"] {
  color: #f1c40f;
  color: var(--clubhouse);
}
.platform-select-wrapper.online .platform-option-icon[data-platform="Other"] {
  color: #6b7280;
  color: var(--other);
}

/* Keep selected value nicely aligned inside react-select's control */
.react-select__single-value .platform-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Subtle hover hint on desktop */
@media (hover: hover) {
  .platform-option:hover .platform-option-icon {
    opacity: 0.9;
  }
}

/* Address suggestions list (used elsewhere on this page) */
.address-suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 2px;
  max-height: 300px;
  overflow-y: auto;
}

.suggestion-item {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
}
.suggestion-item:hover {
  background: #f9f9f9;
}

/* Little highlight helper for matched text */
.highlight {
  font-weight: 700;
  color: #000;
}

/* Clear “X” inside inputs */
.clear-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  cursor: pointer;
}

/* src/components/admin/AdminBusinessTable/AdminBusinessTable.css */

/* ---------- Summary (mobile-first) ---------- */
.admin-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin: 6px 0 10px;
}
.summary-card {
  border: 1px solid #e1e5e8;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
}
.summary-card .summary-title {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
}
.summary-card .summary-value {
  font-weight: 800;
  font-size: 16px;
  color: #0b2533;
  line-height: 1; /* lock line-height for ticker */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.summary-card.approved .summary-value {
  color: #15803d;
} /* green */
.summary-card.pending .summary-value {
  color: #b45309;
} /* amber */
.summary-card.rejected .summary-value {
  color: #b91c1c;
} /* red */

/* --- Digit ticker (tight & no clipping) --- */
.digit-ticker {
  display: inline-flex;
  gap: 1px;
}
.digit-col {
  display: inline-block;
  width: 0.62em;
  height: 1em;
  overflow: hidden;
  box-sizing: content-box;
  padding-right: 2px;
} /* prevent right-edge cut */
.digit-stack {
  display: block;
  will-change: transform;
}
.digit {
  display: block;
  height: 1em;
  line-height: 1em;
}

/* ---------- Filters + Search ---------- */
.admin-table-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
  max-width: 100%;
  align-items: stretch;
}
.admin-table-filters > * {
  min-width: 0;
} /* critical to prevent overflow */

.admin-search {
  position: relative; /* anchor the clear '×' */
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e1e5e8;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.admin-search input {
  border: none;
  outline: none;
  min-width: 0;
  width: 100%;
  font-size: 14px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* inline clear “×” button */
.admin-search .admin-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: #000;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.admin-search .admin-clear:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Meta row + pager ---------- */
.admin-table-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #666;
  margin: 6px 0 8px;
}
.pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pager-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e1e5e8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pager-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pager-info {
  font-weight: 600;
  color: #0b2533;
}

/* ---------- Table ---------- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.user-table th,
.user-table td {
  padding: 8px 10px;
}
.clickable-cell {
  cursor: pointer;
  text-decoration: none;
}
.clickable-cell:hover {
  text-decoration: underline;
}

/* Verified toggle button inside the cell */
.verify-toggle {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid #e1e5e8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.verify-toggle.on {
  border-color: #15803d22;
  box-shadow: inset 0 0 0 1px #15803d22;
}

/* ---------- Load more / Next (optional helper) ---------- */
.load-more-container {
  text-align: center;
  margin: 14px 0 4px;
}
.load-more-button {
  background-color: #000;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.load-more-button:hover {
  background-color: #333;
}

/* ---------- Small devices ---------- */
@media (max-width: 380px) {
  .summary-card .summary-value {
    font-size: 15px;
  }
  .admin-search input::placeholder {
    font-size: 13px;
  }
}

/* ---------- ≥768px (tablet & up) ---------- */
@media (min-width: 768px) {
  .admin-summary {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px;
    margin: 6px 0 12px;
  }
  .admin-table-filters {
    grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
  }
  .pager-btn {
    width: 34px;
    height: 34px;
  }
}

/* AdminSuggestionsTable.css — independent & readable on web & mobile */

/* --- Table shell (desktop/tablet) --- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
  line-height: 1.35;
  background: transparent;
}

.user-table thead th {
  text-align: left;
  font-weight: 700;
  color: #0b2533;
  border-bottom: 2px solid #e5e7eb;
  padding: 10px 12px;
  white-space: nowrap;
}

.user-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere; /* long URLs/phones wrap gracefully */
}

/* Desktop-ish width hints so "Changes" gets space */
@media (min-width: 900px) {
  .user-table thead th:nth-child(1),
  .user-table tbody td:nth-child(1) {
    min-width: 200px;
    max-width: 260px;
  }

  .user-table thead th:nth-child(2),
  .user-table tbody td:nth-child(2) {
    min-width: 220px;
    max-width: 300px;
  }

  .user-table thead th:nth-child(3),
  .user-table tbody td:nth-child(3) {
    min-width: 380px;
  } /* Changes */

  .user-table thead th:nth-child(4),
  .user-table tbody td:nth-child(4) {
    min-width: 240px;
    max-width: 320px;
  } /* Comment */

  .user-table thead th:nth-child(5),
  .user-table tbody td:nth-child(5) {
    min-width: 160px;
    max-width: 200px;
    white-space: nowrap;
  } /* Submitted */

  .user-table thead th:nth-child(6),
  .user-table tbody td:nth-child(6) {
    min-width: 120px;
    max-width: 140px;
    white-space: nowrap;
  } /* Actions */
}

/* --- Filters / Search --- */
.admin-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.admin-search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-search input {
  flex: 1 1;
  min-width: 160px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
}
.admin-clear {
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}
.input-field {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

/* --- Meta / Pager --- */
.admin-table-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  color: #555;
  font-size: 13px;
}
.pager {
  display: inline-flex;
  gap: 6px;
}
.pager-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.pager-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --- Action buttons --- */
.action-icons .verify-toggle {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  margin-right: 8px;
}
.action-icons .verify-toggle:last-child {
  margin-right: 0;
}

/* --- Diff grid (inside “Changes” column) --- */
.diff-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 8px;
  gap: 8px;
}
.diff-row {
  display: grid;
  grid-template-columns: 110px 1fr 22px 1fr; /* key | before | → | after */
  grid-gap: 8px;
  gap: 8px;
  align-items: start;
}
.diff-key {
  font-weight: 700;
  color: #0b2533;
  font-size: 12px;
  white-space: nowrap;
}
.diff-val {
  font-size: 12px;
  color: #333;
  word-break: normal;
  overflow-wrap: anywhere;
}
.diff-val.before {
  color: #6b7280;
}
.diff-arrow {
  text-align: center;
  color: #999;
  font-weight: 700;
}

/* Wider layout for diffs */
@media (min-width: 1100px) {
  .diff-row {
    grid-template-columns: 130px 1fr 24px 1fr;
  }
}

/* --- Load more --- */
.load-more-container {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.load-more-button {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- Heading --- */
.user-management-container h2 {
  margin: 8px 0 10px;
  font-size: 18px;
  color: #0b2533;
}

/* Truncation helper (used for Comment cell in JS) */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
     MOBILE STACKED LAYOUT
     ========================= */
@media (max-width: 640px) {
  /* Hide header; make every row a card */
  .user-table thead {
    display: none;
  }
  .user-table,
  .user-table tbody,
  .user-table tr,
  .user-table td {
    display: block;
    width: 100%;
  }

  .user-table tr {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
  }

  .user-table td {
    padding: 6px 0;
    border: 0;
  }

  /* Business (row title) */
  .user-table tbody td:nth-child(1) {
    font-weight: 700;
    color: #0b2533;
    margin-bottom: 2px;
    word-break: break-all;
  }

  /* Submitter */
  .user-table tbody td:nth-child(2) {
    font-size: 12px;
    color: #555;
    margin-bottom: 6px;
    word-break: break-all;
  }

  /* Changes: full-width block */
  .user-table tbody td:nth-child(3) {
    margin-top: 6px;
  }

  /* Comment: full text on mobile */
  .user-table tbody td:nth-child(4),
  .user-table .truncate {
    white-space: normal;
  }

  /* Submitted (small meta) */
  .user-table tbody td:nth-child(5) {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
  }

  /* Actions at bottom */
  .user-table tbody td:nth-child(6) {
    margin-top: 8px;
  }
}

.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.798ce0be.css.map*/