/*
 * Global styles for SinSync.ai enhanced website
 *
 * The colour palette is inspired by a dark, neon‑lit cyberpunk aesthetic.
 * All sections use generous spacing and a modular scale for typography so
 * that text flows comfortably on both desktop and mobile. A handful of CSS
 * custom properties define the core colours and radii so you can tweak the
 * look in a single place. You can freely adjust these variables at the top
 * of the file to fine tune the mood of the site.
 */

:root {
  /* Core colour palette */
  --colour-background: #0A0A0A;
  --colour-surface: #111111;
  --colour-primary: #A855F7; /* violet glow */
  --colour-accent: #FF3366; /* neon red/pink */
  --colour-text: #F5F5F5;
  --colour-muted: #888888;
  --colour-glass: rgba(255,255,255,0.05);
  /* Sizing variables */
  --border-radius: 12px;
  --spacing: 1rem;
  --max-width: 1200px;
  /* Font families */
  --font-heading: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-digital: 'Courier New', monospace;
  /* Additional brand fonts */
  /*
   * The logo uses a heavy display face inspired by neon signs.  It falls back
   * gracefully to Monoton or Tilt Neon if they're loaded via Google Fonts.
   */
  --font-logo: 'Monoton', 'Tilt Neon', 'Segoe UI', sans-serif;

  /* Extra glow colour used for logo neon effect */
  --colour-logo-glow: #C47AFF;
}

/* ------------------------------------------------------------
   Custom overrides for sign‑up and general improvements
   These rules are appended at the end of the base stylesheet to
   ensure they override previous definitions where necessary.
--------------------------------------------------------------*/

/* Prevent horizontal scrolling on the entire site */
html, body {
  overflow-x: hidden;
  /* Hide horizontal scrollbars on WebKit browsers (Chrome, Safari). This
     prevents an unsightly bottom bar on the vendor dashboard while
     preserving vertical scrolling. */
  scrollbar-width: thin;
}

/* Hide horizontal scrollbar in WebKit */
body::-webkit-scrollbar {
  height: 0;
}

/* Add top padding to the signup wrapper so the sticky header
   does not overlap the "Grab Your Spot" heading. This pushes
   the card down and ensures the headline is fully visible on
   initial page load. */
.signup-wrapper {
  /* Provide generous top padding so that the sticky header does not
     overlap the sign‑up card.  Increasing the value here
     ensures that the "Grab Your Spot" headline is fully visible on
     page load across devices. */
  padding-top: 7rem;
}

/* ------------------------------------------------------------------
   Member dashboard styling
   This block styles the profile sidebar, verified badge with devil horns,
   active status indicator, section navigation, and the blurred map
   placeholder. It also adds a custom toggle switch used for incognito
   mode in settings.  All colours inherit from the global palette.
--------------------------------------------------------------------*/
/* Container for the entire dashboard */
.member-dashboard {
  display: flex;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}
/* Fixed sidebar with avatar and navigation */
.member-sidebar {
  width: 250px;
  background: var(--colour-surface);
  padding: 2rem 1rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  box-sizing: border-box;
}
.member-sidebar .profile {
  text-align: center;
  margin-bottom: 2rem;
}
.member-sidebar .avatar-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.member-sidebar .avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--colour-primary);
}
.member-sidebar .upload-avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--colour-accent);
  color: var(--colour-background);
  font-size: 0.75rem;
  cursor: pointer;
  border: none;
}
.member-sidebar .upload-avatar input {
  display: none;
}
.member-sidebar h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
  color: var(--colour-text);
}
/* Verified badge with devil horns */
.verified-badge {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid var(--colour-primary);
  border-radius: 50%;
  margin-left: 0.25rem;
}
.verified-badge::before,
.verified-badge::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 8px;
  height: 12px;
  background: var(--colour-primary);
  border-radius: 4px 4px 0 0;
}
.verified-badge::before {
  left: 2px;
  transform: rotate(-20deg);
}
.verified-badge::after {
  right: 2px;
  transform: rotate(20deg);
}
/* Active/online status indicator */
.active-status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--colour-muted);
  margin-left: 0.5rem;
}
.active-status.online {
  background: var(--colour-accent);
}
/* Navigation links in the member dashboard */
.member-nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: var(--border-radius);
  color: var(--colour-muted);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.member-nav a:hover,
.member-nav a.active {
  background: rgba(255,255,255,0.05);
  color: var(--colour-primary);
}
/* Main content area of the member dashboard */
.member-content {
  margin-left: 270px;
  padding: 2rem;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}
.dashboard-section {
  display: none;
}
.dashboard-section.active {
  display: block;
}
/* Placeholder for the map until integrated with real map API */
/* Map placeholder: generate a subtle grid on a dark background to simulate
   a blurred map. This avoids external image dependencies. */
.map-placeholder {
  width: 100%;
  height: 300px;
  background-color: var(--colour-surface);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.map-placeholder::before,
.map-placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.map-placeholder::before {
  /* diagonal stripes */
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 8px
  );
}
.map-placeholder::after {
  /* faint grid */
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 30px
  ),
  repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 30px
  );
}
/* Toggle switch used for incognito mode */
.toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.toggle-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-label .slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: var(--colour-muted);
  border-radius: 20px;
  transition: background 0.3s;
  margin-left: auto;
}
.toggle-label .slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--colour-background);
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}
.toggle-label input:checked + .slider {
  background: var(--colour-primary);
}
.toggle-label input:checked + .slider::before {
  transform: translateX(20px);
}

/* Adjusted chat interface for attachments, emoji and voice buttons */
.chat-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.chat-input textarea {
  flex: 1;
  padding: 0.75rem;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--colour-text);
  height: 70px;
  resize: vertical;
}
.chat-input button,
.chat-input .attachment-btn,
.chat-input .emoji-btn,
.chat-input .voice-btn,
.chat-input .send-btn {
  background: transparent;
  border: none;
  color: var(--colour-primary);
  font-size: 1.3rem;
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.chat-input button:hover,
.chat-input .attachment-btn:hover,
.chat-input .emoji-btn:hover,
.chat-input .voice-btn:hover,
.chat-input .send-btn:hover {
  color: var(--colour-accent);
}
/* Emoji picker panel */
.emoji-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  background: var(--colour-surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.25rem;
  z-index: 20;
}
.emoji-panel button {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
}
.emoji-panel button:hover {
  transform: scale(1.2);
}

/* Style the instructions in the Step 2 verification form */
.signup-step p.instructions {
  font-size: 0.9rem;
  color: var(--colour-text);
  margin-bottom: 1rem;
}
.signup-step ul.instructions-list {
  margin-left: 1rem;
  margin-bottom: 1rem;
  list-style: disc;
}
.signup-step ul.instructions-list li {
  margin-bottom: 0.5rem;
  color: var(--colour-muted);
}
.signup-step ul.instructions-list li strong {
  color: var(--colour-primary);
}

/* Custom file input styling for dark theme */
.signup-step input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--colour-glass);
  background: rgba(255,255,255,0.05);
  color: var(--colour-text);
  border-radius: var(--border-radius);
  cursor: pointer;
}
.signup-step input[type="file"]::file-selector-button {
  background: var(--colour-primary);
  color: var(--colour-background);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  margin-right: 0.5rem;
  cursor: pointer;
}
.signup-step input[type="file"]:hover::file-selector-button {
  background: var(--colour-accent);
}

/* Lighter placeholder text in messaging composer */
.chat-input textarea::placeholder {
  color: var(--colour-muted);
  opacity: 0.8;
}

/* Ensure vendor dashboard content does not horizontally scroll */
.vendor-content {
  overflow-x: hidden;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--colour-text);
  background: var(--colour-background);
  line-height: 1.5;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  margin-top: 0;
  color: var(--colour-text);
}

p {
  margin-top: 0;
  margin-bottom: var(--spacing);
  color: var(--colour-muted);
}

a {
  color: var(--colour-primary);
  text-decoration: none;
}

a:hover {
  color: var(--colour-accent);
}

/* Global container to constrain content */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Utility classes */
.flex {
  display: flex;
}

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

.grid {
  display: grid;
  gap: var(--spacing);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  background: var(--colour-primary);
  color: var(--colour-background);
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn:hover {
  background: var(--colour-accent);
  color: var(--colour-background);
  box-shadow: 0 0 10px var(--colour-accent);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--colour-primary);
  color: var(--colour-primary);
}

.btn-secondary:hover {
  background: var(--colour-primary);
  color: var(--colour-background);
}

/* Navigation styles */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--colour-glass);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--spacing);
}

nav a {
  margin: 0 0.5rem;
  font-weight: 500;
}

nav .nav-links {
  display: flex;
  align-items: center;
}

nav .cta {
  margin-left: 1rem;
}

/* Hero section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #090909 30%, #1a093d 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(168,85,247,0.3), transparent 60%);
  transform: rotate(30deg);
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.25rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  color: var(--colour-muted);
}

/* Sections */
section {
  padding: 4rem 0;
  position: relative;
}

section:nth-of-type(even) {
  background: var(--colour-surface);
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

/* Cards */
.card {
  background: var(--colour-glass);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius);
  padding: 2rem;
  position: relative;
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(255,51,102,0.15));
  z-index: -1;
  opacity: 0.6;
}

/* Pricing cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: var(--spacing);
}

.pricing-card {
  background: var(--colour-glass);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px var(--colour-primary);
}

.pricing-card .plan-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--colour-primary);
}

.pricing-card .price {
  font-size: 2rem;
  margin: 0.5rem 0 1.5rem;
  color: var(--colour-accent);
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.pricing-card ul li {
  margin: 0.25rem 0;
  color: var(--colour-muted);
}

/* Signup form */
.signup-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #090909, #1a093d);
  position: relative;
}

.signup-card {
  background: var(--colour-glass);
  padding: 3rem 2rem;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.signup-card h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--colour-primary);
}

.signup-card p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--colour-muted);
}

.signup-card label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: var(--colour-text);
}

.signup-card input[type="text"],
.signup-card input[type="email"],
.signup-card input[type="password"],
.signup-card select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: var(--colour-text);
  font-size: 1rem;
}

.signup-card input::placeholder {
  color: var(--colour-muted);
}

.signup-card select {
  appearance: none;
}

/* Improve visibility of options in select drop‑down */
.signup-card select option {
  background: var(--colour-surface);
  color: var(--colour-text);
}
.signup-card select option:checked {
  background: var(--colour-primary);
  color: var(--colour-text);
}

/* Neon logo styling */
/*
 * The primary brand mark uses an uppercase neon typeface with an exaggerated
 * glow.  We override any previous definitions to ensure consistency.  If
 * Google Fonts (Monoton/Tilt Neon) are available they will be used; otherwise
 * it falls back gracefully to system fonts.
 */
.neon-logo {
  font-family: var(--font-logo);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--colour-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow:
    0 0 6px var(--colour-primary),
    0 0 12px var(--colour-primary),
    0 0 20px var(--colour-accent),
    0 0 30px var(--colour-accent),
    0 0 40px var(--colour-logo-glow);
}

/* Vendor dashboard layout */
.vendor-dashboard {
  display: flex;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}
.vendor-sidebar {
  width: 220px;
  background: var(--colour-surface);
  padding: 1rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}
.vendor-sidebar a {
  display: block;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  color: var(--colour-muted);
  text-decoration: none;
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
}
.vendor-sidebar a:hover,
.vendor-sidebar a.active {
  background: rgba(255,255,255,0.05);
  color: var(--colour-primary);
}
/*
 * Main content area of the vendor dashboard
 * We remove the fixed width and let flexbox allocate the remaining
 * space.  The margin matches the sidebar width, and min-width:0
 * prevents the content from overflowing horizontally.  Box‑sizing
 * ensures that padding is included in the element's width.
 */
.vendor-content {
  margin-left: 240px;
  padding: 2rem;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}
.vendor-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: var(--spacing);
  margin-bottom: 2rem;
}
.vendor-stats .stat-card {
  background: var(--colour-glass);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
  padding: 1rem;
  text-align: center;
}
.vendor-stats .stat-card h4 {
  margin-bottom: 0.25rem;
  color: var(--colour-muted);
  font-weight: 600;
  font-size: 0.9rem;
}
.vendor-stats .stat-card .stat-value {
  font-size: 1.6rem;
  color: var(--colour-primary);
}

/* Analytics placeholder */
.analytics-card {
  background: var(--colour-glass);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.analytics-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--colour-primary);
}
.analytics-placeholder {
  width: 100%;
  height: 200px;
  border-radius: var(--border-radius);
  background: linear-gradient(to right, var(--colour-primary), var(--colour-accent));
  position: relative;
  overflow: hidden;
}
.analytics-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.1) 0,
    rgba(255,255,255,0.1) 2px,
    transparent 2px,
    transparent 12px
  );
}

/* Service list */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.service-item {
  display: flex;
  align-items: center;
  background: var(--colour-glass);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius);
  padding: 1rem;
  gap: 1rem;
  backdrop-filter: blur(6px);
}
.service-item .service-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.service-item .service-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-item .service-info h4 {
  margin: 0;
  color: var(--colour-text);
}
.service-item .service-info p {
  margin: 0.25rem 0;
  color: var(--colour-muted);
  font-size: 0.9rem;
}
.service-item .service-actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}
.service-item .service-actions .btn-small {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  background: var(--colour-surface);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--colour-text);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background 0.2s;
}
.service-item .service-actions .btn-small:hover {
  background: var(--colour-primary);
  color: #fff;
}

/* Upgrade banner */
.upgrade-banner {
  background: var(--colour-surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  text-align: center;
}
.upgrade-banner h3 {
  margin-top: 0;
  color: var(--colour-primary);
}
.upgrade-banner p {
  color: var(--colour-muted);
  margin-bottom: 1rem;
}

/* Messaging platform */
.messaging-container {
  display: flex;
  height: calc(100vh - 80px);
}
.conversation-list {
  width: 280px;
  background: var(--colour-surface);
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow-y: auto;
}
.conversation-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.conversation-item:hover,
/* Active conversation highlight: use a subtle violet glow instead of default hover colour */
.conversation-item.active {
  background: rgba(168,85,247,0.15);
}

/* Maintain gentle highlight on hover */
.conversation-item:hover {
  background: rgba(255,255,255,0.05);
}
.conversation-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.75rem;
}
.conversation-item .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.conversation-item .conversation-info {
  flex: 1;
}
.conversation-item .conversation-info h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--colour-text);
}
.conversation-item .conversation-info p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--colour-muted);
}
.conversation-item .time {
  font-size: 0.75rem;
  color: var(--colour-muted);
  margin-left: 0.5rem;
}
.chat-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--colour-glass);
  padding: 1rem;
}
.chat-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}
.chat-header .chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.75rem;
}
.chat-header .chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-header .chat-info h4 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--colour-text);
}
.chat-header .chat-info p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--colour-muted);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.message-bubble {
  max-width: 70%;
  padding: 0.75rem 1rem;
  border-radius: 20px;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.message-bubble.sent {
  background: var(--colour-primary);
  align-self: flex-end;
  color: #fff;
}
.message-bubble.received {
  background: var(--colour-accent);
  align-self: flex-start;
  color: #fff;
}
.chat-input {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}
.chat-input textarea {
  flex: 1;
  background: var(--colour-surface);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.75rem;
  color: var(--colour-text);
  resize: none;
  height: 50px;
}
.chat-input button {
  margin-left: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--colour-primary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background 0.2s;
}
.chat-input button:hover {
  background: var(--colour-accent);
}

.signup-card .form-row {
  display: flex;
  gap: 1rem;
}

.signup-card .form-row > * {
  flex: 1;
}

.signup-card .countdown {
  font-family: var(--font-digital);
  font-size: 2rem;
  text-align: center;
  color: var(--colour-accent);
  margin-bottom: 2rem;
}

/* Dashboard styles */
.dashboard {
  padding-top: 5rem;
  min-height: 100vh;
}

.dashboard .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing);
  margin-bottom: 2rem;
}

.dashboard .stats .stat-card {
  background: var(--colour-glass);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
  padding: 1rem;
  text-align: center;
}

/* Marketplace cards */
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: var(--spacing);
}

.marketplace-card {
  background: var(--colour-glass);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  position: relative;
  text-align: center;
  backdrop-filter: blur(8px);
}

.marketplace-card .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--colour-surface);
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.marketplace-card .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px);
}

.marketplace-card h4 {
  margin-bottom: 0.25rem;
  color: var(--colour-primary);
}

.marketplace-card p {
  font-size: 0.9rem;
  color: var(--colour-muted);
  margin: 0;
}

/* Footer */
footer {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--colour-muted);
  background: #050505;
  border-top: 1px solid var(--colour-glass);
}

/* ========================================================================
 * Custom overrides and enhancements
 * These styles override earlier definitions to refine the neon look and
 * implement new components such as progress rings and improved selects.
 * Place at the end of the stylesheet for cascade priority.
 * ====================================================================== */

/*
 * Override the neon logo again near the end of the stylesheet to ensure the
 * latest definition wins when multiple versions are loaded.  This rule
 * repeats the sizing and glow parameters defined above and ensures any
 * previously included definitions are superseded.  We avoid resetting
 * position here so the logo remains inline with text in the navbar.
 */
.neon-logo {
  /* Sharpen readability: tighter spacing and reduced blur */
  font-size: 2.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Use fewer, smaller-blur shadows to avoid fuzzy edges */
  text-shadow:
    0 0 2px var(--colour-primary),
    0 0 6px var(--colour-primary),
    0 0 10px var(--colour-accent);
  /* Add a subtle stroke for crisper letter contours on dark bg */
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.08);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
}

/* Prefer Tilt Neon at small sizes for better clarity */
@media (max-width: 900px) {
  .neon-logo {
    font-family: 'Tilt Neon', var(--font-logo);
    font-size: 2rem;
    letter-spacing: 0.04em;
    text-shadow:
      0 0 2px var(--colour-primary),
      0 0 5px var(--colour-accent);
  }
}

/* Improve option highlight visibility on dropdowns by aligning hover/focus states */
.signup-card select option:focus,
.signup-card select option:hover {
  background: var(--colour-primary);
  color: var(--colour-text);
}

/* Amplify digital countdown typography and glow */
.signup-card .countdown {
  font-family: var(--font-digital);
  font-size: 2.2rem;
  text-align: center;
  color: var(--colour-primary);
  margin-bottom: 2rem;
  letter-spacing: 0.1em;
  text-shadow:
    0 0 6px var(--colour-primary),
    0 0 12px var(--colour-primary),
    0 0 20px var(--colour-accent);
}

/* Sidebar icons helper */
.vendor-sidebar .icon {
  margin-right: 0.5rem;
  color: var(--colour-muted);
}

/* Circular progress / reach card */
.reach-card {
  background: var(--colour-glass);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------
 * Marketplace filter bar
 * A simple UI for filtering vendors by service type and radius. These
 * styles give the controls a cohesive look with the rest of the site.
 */
.marketplace-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}
.marketplace-filters div {
  flex: 1 1 220px;
  min-width: 200px;
}
.marketplace-filters label {
  display: block;
  font-size: 0.85rem;
  color: var(--colour-muted);
  margin-bottom: 0.25rem;
}
.marketplace-filters select,
.marketplace-filters input[type="range"] {
  width: 100%;
  padding: 0.6rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--colour-glass);
  background: rgba(255,255,255,0.05);
  color: var(--colour-text);
  -webkit-appearance: none;
  appearance: none;
}
/* Customise the slider thumb */
.marketplace-filters input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--colour-primary);
  cursor: pointer;
}
.marketplace-filters input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--colour-primary);
  border: none;
  cursor: pointer;
}
.marketplace-filters input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.05);
  height: 4px;
  border-radius: 2px;
}
.marketplace-filters input[type="range"]::-moz-range-track {
  background: rgba(255,255,255,0.05);
  height: 4px;
  border-radius: 2px;
}
/* Display the selected radius value next to the slider label */
.marketplace-filters .range-value {
  color: var(--colour-primary);
  font-weight: 600;
  margin-left: 0.4rem;
}
.reach-card .progress-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--colour-primary) 0% 70%, rgba(255,255,255,0.1) 70% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.reach-card .progress-ring .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--colour-primary);
}
.reach-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--colour-muted);
  text-align: center;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  nav .nav-links {
    display: none;
  }
  nav .menu-toggle {
    display: block;
    cursor: pointer;
  }

  /* When mobile menu is open, stack nav links vertically */
  nav .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.9);
    padding: 1rem;
    border-top: 1px solid var(--colour-glass);
  }
  nav .nav-links.open a {
    padding: 0.5rem 1rem;
  }
}