@import url('./styles/gamification.css');
@import url('./styles/search.css');
@import url('./styles/polish.css');
@import url('./styles/admin.css');
@import url('./styles/notifications.css');
@import url('./styles/user-search.css');
@import url('./styles/special-detail.css');
@import url('./styles/map-view.css');
@import url('./styles/moderation.css');
@import url('./styles/chat.css');

:root {
  --black: #1a1a1a;
  --white: #ffffff;
  --cream: #f5f1ea;
  --pink: #ff6b9d;
  --light-blue: #b8e6ff;
  --mint: #95e1d3;
  --yellow: #ffd93d;
  --shadow: 4px 4px 0px var(--black);
  --shadow-lg: 8px 8px 0px var(--black);
  --border: 3px solid var(--black);
  --radius: 16px;
  --gray-200: #e5e5e5;
  --gray-400: #999;
  --gray-500: #666;
  --gray-600: #555;
  --gray-700: #444;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  padding-bottom: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn {
  font-weight: 800;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 3px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.15s ease;
  background: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}

/* Mobile: Use active state instead of hover */
@media (hover: none) and (pointer: coarse) {
  .btn:hover {
    transform: none;
    box-shadow: var(--shadow);
  }
}

.btn-primary {
  background: var(--pink);
  color: var(--black);
}

.btn-secondary {
  background: var(--white);
  color: var(--black);
}

.card {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  -webkit-tap-highlight-color: transparent;
}

.card-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.card-clickable:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.card-clickable:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--black);
}

/* List view specific hover */
.business-card-list:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.business-card-list:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--black);
  touch-action: manipulation;
  user-select: none;
}

.card-clickable:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--black);
}

/* Mobile: Remove hover, use active */
@media (hover: none) and (pointer: coarse) {
  .card-clickable:hover {
    transform: none;
    box-shadow: var(--shadow-lg);
  }
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 4px solid var(--black);
  padding: 16px 20px;
  z-index: 1000;
}

.header-content {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.header-left {
  justify-self: start;
  display: flex;
  align-items: center;
}

.logo {
  font-weight: 900;
  font-size: 24px;
  text-transform: lowercase;
  color: var(--black);
  line-height: 1.2;
  text-align: center;
  justify-self: center;
}

.logo-image {
  height: 40px;
  width: auto;
  display: block;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pink);
  border: 3px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--black);
}

.avatar-button {
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.avatar-button:hover {
  transform: scale(1.05);
  box-shadow: 2px 2px 0 var(--black);
}

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

.avatar-lg {
  width: 80px;
  height: 80px;
  font-size: 32px;
}

/* Bottom Nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 4px solid var(--black);
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  padding: 4px;
  align-items: center;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  min-height: 56px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 12px;
  box-shadow: none;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  margin: 4px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.nav-tab:hover {
  transform: none;
  box-shadow: none;
  background: var(--cream);
}

.nav-tab.active {
  background: var(--pink);
  border: 3px solid var(--black);
  box-shadow: 2px 2px 0px var(--black);
}

.nav-emoji {
  font-size: 24px;
  margin-bottom: 4px;
}

.nav-icon {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-label {
  font-size: 11px;
  text-transform: lowercase;
  font-weight: 600;
  color: var(--black);
}

/* Content Area */
.content {
  padding-top: 110px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 120px; /* Ensure content doesn't hide behind bottom nav */
  max-width: 600px;
  margin: 0 auto;
  min-height: calc(100vh - 180px);
}

.page-title {
  font-size: 48px;
  font-weight: 900;
  text-transform: lowercase;
  color: var(--black);
  margin-top: 0;
  margin-bottom: 24px;
}

/* Input Fields */
.input-field {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px; /* 16px prevents iOS zoom on focus */
  font-weight: 600;
  border: 3px solid var(--black);
  border-radius: 12px;
  font-family: inherit;
  margin-bottom: 16px;
  background: var(--white);
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.input-field:focus {
  outline: none;
  box-shadow: var(--shadow);
}

/* Textarea and Select - Mobile Friendly */
textarea, select {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px; /* Prevents iOS zoom */
  font-weight: 600;
  border: 3px solid var(--black);
  border-radius: 12px;
  font-family: inherit;
  background: var(--white);
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.input-field::placeholder {
  color: var(--black);
  opacity: 0.4;
  text-transform: lowercase;
}

/* Auth Modal */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 26, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2000;
}

.auth-modal {
  width: 100%;
  max-width: 400px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transition: all 0.15s ease;
  z-index: 10;
}

.modal-close:hover {
  background: var(--cream);
  transform: scale(1.1);
}

.auth-context-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--light-blue);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.4;
}

.auth-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 12px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14px;
  border: 3px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  background: var(--white);
  font-family: 'Inter', sans-serif;
  transition: all 0.15s ease;
}

.auth-tab.active {
  background: var(--pink);
}

.auth-tab:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--black);
}

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

.error-message {
  color: #ff0000;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 12px;
  background: #ffe0e0;
  border: 2px solid #ff0000;
  border-radius: 8px;
}

/* Loading */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--cream);
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--black);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Stats Row */
.stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-item {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 16px 8px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
}

.stat-number {
  font-size: 24px;
  font-weight: 900;
  color: var(--black);
}

.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
  margin-top: 4px;
}

/* Search Bar */
.search-bar {
  position: relative;
  margin-bottom: 16px;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  pointer-events: none;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 14px 48px 14px 48px;
  font-size: 16px;
  font-weight: 600;
  border: 3px solid var(--black);
  border-radius: 12px;
  font-family: inherit;
  background: var(--white);
}

.search-input:focus {
  outline: none;
  box-shadow: var(--shadow);
}

.search-input::placeholder {
  color: var(--black);
  opacity: 0.4;
}

.search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--cream);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.search-clear:hover {
  background: var(--pink);
}

/* Filter Chips */
.filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 16px 0;
  margin-bottom: 16px;
}

.filter-chips::-webkit-scrollbar {
  display: none;
}

.chip {
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid var(--black);
  border-radius: 20px;
  background: var(--white);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s ease;
}

.chip.active {
  background: var(--pink);
}

.chip:hover {
  transform: translateY(-1px);
}

/* Clickable Cards */
.card-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px var(--black);
}

.card-clickable:active {
  transform: translateY(0);
}

/* Business List */
.business-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.business-card {
  display: flex;
  gap: 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--black);
}

.business-image {
  width: 80px;
  height: 80px;
  min-width: 80px;
  border-radius: 8px;
  background: #e0e0e0;
  border: 2px solid var(--black);
  overflow: hidden;
}

.business-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.business-name {
  font-weight: 800;
  font-size: 18px;
  color: var(--black);
}

.business-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--black);
  border-radius: 12px;
  width: fit-content;
}

.business-neighborhood {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.business-meta {
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  margin-top: auto;
}

.price-level {
  color: var(--black);
}

.rating {
  color: var(--black);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

/* Business Detail */
.detail-cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border: 3px solid var(--black);
  border-radius: 16px;
}

.quick-actions {
  display: flex;
  gap: 12px;
  margin: 20px 0;
}

.quick-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}

.quick-action-btn:hover {
  background: var(--cream);
}

.info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 2px solid var(--cream);
  font-weight: 600;
}

.info-row:last-child {
  border-bottom: none;
}

/* Specials Container - one box like hours */
.specials-container {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
}

/* Individual Special Cards inside container */
.special-card {
  background: var(--white);
  padding: 16px;
  border-bottom: 3px solid var(--black);
  transition: background 0.15s ease;
  cursor: pointer;
}

.special-card:hover {
  background: var(--cream);
}

.special-card:active {
  background: #e8e0d0;
}

.special-card-last {
  border-bottom: none;
}

.special-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
}

.active-badge {
  display: inline-block;
  background: var(--pink);
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  animation: pulse 2s infinite;
  text-transform: uppercase;
}

.event-detail-card {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.event-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 4px;
}

.event-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-top: 8px;
}

/* Check-in Modal */
.check-in-modal {
  text-align: center;
}

.photo-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 120px;
  background: var(--cream);
  border: 3px dashed #ccc;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-500);
  margin-bottom: 16px;
  transition: all 0.15s ease;
}

.photo-upload-btn:hover {
  border-color: var(--pink);
  background: #fff5f7;
}

.photo-upload-btn span:first-child {
  font-size: 32px;
}

.photo-preview {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--black);
  margin-bottom: 16px;
}

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

.photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease;
}

.photo-remove:hover {
  background: var(--pink);
  transform: scale(1.1);
}

.check-in-note {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--black);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  min-height: 80px;
  margin-bottom: 4px;
}

.check-in-note:focus {
  outline: none;
  box-shadow: var(--shadow);
}

.char-count {
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
  margin-top: 4px;
  margin-bottom: 16px;
}

.success-check {
  width: 80px;
  height: 80px;
  background: var(--mint);
  border: 3px solid var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 16px;
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  0% { transform: scale(0); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Check-in Photos Display */
.checkin-photo-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.checkin-photo-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--black);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.checkin-photo-thumb:hover {
  transform: scale(1.05);
}

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

.checkins-list {
  display: flex;
  flex-direction: column;
}

.checkin-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 2px solid var(--cream);
}

.checkin-item:last-child {
  border-bottom: none;
}

.checkin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--light-blue);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.checkin-info {
  flex: 1;
  min-width: 0;
}

.checkin-user {
  font-weight: 700;
  font-size: 14px;
}

.checkin-time {
  font-size: 12px;
  color: var(--gray-400);
}

.checkin-note {
  font-size: 13px;
  color: var(--gray-600);
  font-style: italic;
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 1.4;
}

.checkin-photo-mini {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--black);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.checkin-photo-mini:hover {
  transform: scale(1.1);
}

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

/* Photo Lightbox */
.photo-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: var(--white);
  color: var(--black);
  border: 3px solid var(--black);
  border-radius: 50%;
  font-size: 32px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 10001;
  transition: all 0.15s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.lightbox-close:hover {
  background: var(--pink);
  transform: scale(1.1);
}

.lightbox-info {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  padding: 12px 16px;
  border: 3px solid var(--black);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--black);
  z-index: 10001;
}

.lightbox-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--light-blue);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.lightbox-user {
  font-weight: 800;
  font-size: 16px;
  color: var(--black);
}

.lightbox-business {
  font-size: 14px;
  color: var(--gray-600);
  font-weight: 600;
}

.lightbox-image-container {
  position: relative;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-loading {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border: 4px solid var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.lightbox-note {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  padding: 12px 20px;
  border: 3px solid var(--black);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--black);
  max-width: 80%;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--gray-600);
  font-weight: 600;
  z-index: 10001;
}

.lightbox-instruction {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  opacity: 0.7;
  z-index: 10001;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .lightbox-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 28px;
  }

  .lightbox-info {
    top: 12px;
    left: 12px;
    padding: 8px 12px;
    gap: 8px;
  }

  .lightbox-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .lightbox-user {
    font-size: 14px;
  }

  .lightbox-business {
    font-size: 12px;
  }

  .lightbox-image-container {
    max-width: 95vw;
    max-height: 65vh;
  }

  .lightbox-image {
    max-height: 65vh;
  }

  .lightbox-note {
    bottom: 60px;
    max-width: 90%;
    font-size: 13px;
    padding: 10px 16px;
  }
}

/* User Profile Page */
.user-profile-page {
  padding-bottom: 100px;
}

.profile-header {
  text-align: center;
  padding: 24px 20px;
  border-bottom: 3px solid var(--cream);
  margin-bottom: 24px;
}

.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--pink);
  border: 4px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  margin: 0 auto 12px;
  box-shadow: 4px 4px 0 var(--black);
}

.profile-name {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 4px;
  text-transform: lowercase;
}

.profile-bio {
  color: var(--gray-500);
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.profile-stats-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.profile-stat:hover {
  transform: translateY(-2px);
}

.profile-stat:hover .stat-value {
  color: var(--pink);
}

.stat-value {
  font-size: 20px;
  font-weight: 900;
  transition: color 0.15s ease;
}

.stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
}

.profile-section {
  padding: 0 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 16px;
  text-transform: lowercase;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  padding: 16px;
  border: 3px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 3px 3px 0 var(--black);
  background: var(--white);
}

.activity-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
}

.activity-business-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.activity-business-name {
  font-weight: 800;
  font-size: 15px;
}

.activity-time {
  font-size: 12px;
  color: var(--gray-400);
}

.activity-note {
  font-size: 14px;
  color: var(--gray-600);
  font-style: italic;
  margin: 8px 0 0;
}

.activity-photo {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--black);
  cursor: pointer;
}

.activity-photo img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

.empty-text {
  text-align: center;
  color: var(--gray-400);
  font-style: italic;
  padding: 40px 20px;
}

/* Follow List Modal */
.follow-list {
  max-height: 400px;
  overflow-y: auto;
}

.follow-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 2px solid var(--cream);
  cursor: pointer;
  transition: background 0.15s ease;
}

.follow-list-item:hover {
  background: var(--cream);
}

.follow-list-item:last-child {
  border-bottom: none;
}

.follow-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--light-blue);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.follow-name {
  font-weight: 700;
  font-size: 15px;
  flex: 1;
}

/* Clickable elements */
.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.clickable:hover {
  color: var(--pink);
}

.stat-item.clickable:hover .stat-number {
  color: var(--pink);
}

/* Notification Prompt */
.notification-prompt-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.modal-small {
  max-width: 320px;
  text-align: center;
}

.modal-small h3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 8px;
}

.modal-small p {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 50px;
  height: 26px;
  background: var(--gray-200);
  border: 2px solid var(--black);
  border-radius: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle-switch.active {
  background: var(--pink);
}

.toggle-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.toggle-switch.active .toggle-slider {
  transform: translateX(24px);
}

/* Save Indicator */
.save-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 16px;
  z-index: 1;
  pointer-events: none;
}

/* =====================================================
   BUSINESS PHOTO GALLERY
   ===================================================== */

.business-photo-gallery {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 4px 4px 0 var(--black);
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.gallery-title {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  text-transform: lowercase;
}

.gallery-upload-form {
  margin-bottom: 20px;
}

.gallery-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-600);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.photo-grid-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--black);
  background: var(--cream);
  aspect-ratio: 1;
}

.photo-grid-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.photo-grid-item:hover .photo-grid-image {
  transform: scale(1.05);
}

.photo-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.photo-grid-item:hover .photo-actions {
  opacity: 1;
}

.photo-lightbox-content {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 8px 8px 0 var(--black);
}

.photo-caption-section {
  margin-top: 16px;
}

.photo-gallery-loading {
  display: flex;
  justify-content: center;
  padding: 40px;
}

/* User Dropdown in Header */
.user-dropdown {
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item:hover {
  background: var(--cream) !important;
}

.dropdown-item:last-child:hover {
  background: var(--pink) !important;
  filter: brightness(1.1);
}

@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  
  .business-photo-gallery {
    padding: 16px;
  }
  
  .user-dropdown {
    right: 0;
    left: auto;
  }
}

/* =====================================================
   MENU MANAGER
   ===================================================== */

.menu-manager {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 4px 4px 0 var(--black);
}

.menu-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.menu-manager-title {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  text-transform: lowercase;
}

.menu-manager-loading {
  display: flex;
  justify-content: center;
  padding: 60px 20px;
}

.menu-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-600);
}

.menu-categories-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-category-card {
  background: var(--cream);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 20px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}

.category-title {
  flex: 1;
  min-width: 0;
}

.category-icon {
  font-size: 24px;
  margin-right: 8px;
}

.category-title span:nth-child(2) {
  font-size: 20px;
  font-weight: 800;
}

.category-description {
  display: block;
  font-size: 13px;
  color: var(--gray-600);
  font-style: italic;
  margin-top: 4px;
}

.category-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.category-empty {
  padding: 20px;
  text-align: center;
  color: var(--gray-600);
  font-style: italic;
  background: var(--white);
  border: 2px dashed var(--gray-400);
  border-radius: 8px;
}

.menu-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 8px;
  gap: 16px;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}

.item-description {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.4;
}

.item-price-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.item-price {
  font-weight: 800;
  font-size: 16px;
  color: var(--pink);
  white-space: nowrap;
}

.item-actions {
  display: flex;
  gap: 4px;
}

/* AI Menu Extractor */
.ai-menu-extractor {
  background: var(--white);
}

.ai-extractor-header {
  margin-bottom: 20px;
}

.ai-extractor-header h2 {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 8px 0;
}

.ai-extractor-upload {
  margin-top: 20px;
}

.upload-zone {
  transition: all 0.2s;
}

.upload-zone:hover {
  border-color: var(--black);
  background: var(--white);
}

.ai-extractor-preview {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .menu-manager {
    padding: 16px;
  }
  
  .menu-manager-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .category-header {
    flex-direction: column;
  }
  
  .category-actions {
    width: 100%;
  }
  
  .category-actions button {
    flex: 1;
  }
  
  .menu-item-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .item-price-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Saved Spots */
.saved-spots-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 12px 0;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.saved-spots-scroll::-webkit-scrollbar {
  display: none;
}

.saved-spot-card {
  min-width: 150px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
}

.saved-spot-card:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--black);
}

.saved-spot-image {
  width: 100%;
  height: 80px;
  object-fit: cover;
  background: #e0e0e0;
  border-bottom: 2px solid var(--black);
}

.saved-spot-info {
  padding: 10px;
}

.saved-spot-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--black);
  margin-bottom: 4px;
}

/* Reviews */
.reviews-list {
  margin-top: 16px;
}

.review-card {
  padding: 16px;
  border-bottom: 2px solid var(--cream);
}

.review-card:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.review-meta {
  font-size: 14px;
}

.review-author {
  font-weight: 700;
  color: var(--black);
}

.review-date {
  color: #999;
}

/* Check-in Timeline */
.checkin-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkin-date-header {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: #666;
  padding: 16px 0 8px 40px;
  position: relative;
}

.checkin-timeline-item {
  position: relative;
  padding-left: 40px;
  padding-bottom: 24px;
  cursor: pointer;
}

.checkin-timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--pink);
  border: 3px solid var(--black);
  border-radius: 50%;
  z-index: 2;
}

.checkin-timeline-line {
  position: absolute;
  left: 6.5px;
  top: 4px;
  bottom: 0;
  width: 3px;
  background: var(--black);
  z-index: 1;
}

.checkin-timeline-item:last-child .checkin-timeline-line {
  display: none;
}

.checkin-timeline-content {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--black);
  transition: transform 0.15s ease;
}

.checkin-timeline-content:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

/* Past Hangouts / Memories */
.past-hangouts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.memory-card {
  transition: transform 0.15s ease;
}

.memory-card:hover {
  transform: translate(-2px, -2px);
}

@media (max-width: 600px) {
  .past-hangouts-grid {
    grid-template-columns: 1fr;
  }
}

.review-date {
  font-size: 12px;
  margin-top: 2px;
}

.review-stars {
  margin: 8px 0;
}

.review-content {
  font-size: 15px;
  line-height: 1.5;
  color: var(--black);
  margin-top: 8px;
}

.review-actions {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}

.review-actions a {
  color: #999;
  margin-right: 12px;
  cursor: pointer;
  text-decoration: none;
}

.review-actions a:hover {
  color: var(--pink);
}

.star-selector {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
}

/* Notifications */
.notifications-list {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  overflow: hidden;
}

.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-bottom: 2px solid var(--cream);
  cursor: pointer;
  transition: background 0.15s;
}

.notification-card:last-child {
  border-bottom: none;
}

.notification-card:hover {
  background: var(--cream);
}

.notification-card.unread {
  background: #fff5f7;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
  color: var(--black);
}

.notification-message {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: #999;
}

.notification-business {
  color: var(--pink);
  font-weight: 600;
  text-decoration: underline;
  font-size: 14px;
  margin-bottom: 4px;
}

.unread-dot {
  width: 8px;
  height: 8px;
  background: var(--pink);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

.nav-badge {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(12px);
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid var(--black);
}

/* Today Page */
.live-clock {
  display: inline-block;
  padding: 4px 10px;
  background: var(--mint);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse 2s infinite;
  display: inline-block;
}

.specials-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.happening-now-card {
  position: relative;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--black);
  overflow: hidden;
}

.card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--pink);
}

.card-content {
  margin-left: 8px;
}

.special-business {
  font-weight: 800;
  font-size: 14px;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.special-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin-top: 4px;
}

.special-type-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--black);
  border-radius: 12px;
}

.countdown-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  background: #fef3c7;
  border: 2px solid var(--black);
  border-radius: 12px;
  text-transform: uppercase;
}

.special-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-top: 8px;
}

.coming-up-card {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 2px 2px 0 var(--black);
}

.special-business-small {
  font-weight: 700;
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.special-title-small {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-top: 2px;
}

.starts-at-text {
  font-size: 12px;
  font-weight: 600;
  color: #666;
}

.events-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.event-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--black);
}

.event-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 4px;
}

.event-business {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
}

.event-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 8px;
}

.event-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--black);
  border-radius: 12px;
}

/* Business Management Dashboard */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--black);
}

.stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-top: 4px;
}

.tabs {
  display: flex;
  border-bottom: 3px solid var(--black);
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 12px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 14px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  transition: background 0.2s;
}

.tab:hover {
  background: var(--cream);
}

.tab.active {
  background: var(--pink);
  border-radius: 8px 8px 0 0;
}

.day-toggles {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.day-toggle {
  width: 40px;
  height: 40px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  background: var(--white);
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}

.day-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.day-toggle.selected {
  background: var(--pink);
  color: var(--black);
}

.special-item, .event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 2px solid var(--black);
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--white);
}

.toggle-switch {
  width: 50px;
  height: 28px;
  background: var(--cream);
  border-radius: 14px;
  border: 2px solid var(--black);
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.toggle-switch:hover {
  background: #e5e0d8;
}

.toggle-switch.active {
  background: var(--mint);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.toggle-switch.active::after {
  transform: translateX(22px);
}

/* Enhanced Explore Page Styles */
.search-container {
  position: relative;
  margin-bottom: 16px;
}

.search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
  font-weight: 300;
  z-index: 2;
}

.search-clear:hover {
  color: var(--pink);
}

.recent-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.recent-chip {
  padding: 6px 12px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.recent-chip:hover {
  background: var(--light-blue);
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.filter-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-button:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.filter-button.active {
  animation: pulse 0.3s ease;
}

.filter-badge {
  background: var(--pink);
  color: var(--black);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.filter-panel {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-lg);
  animation: slideDown 0.3s ease;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-section:last-of-type {
  margin-bottom: 0;
}

.filter-section-title {
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--black);
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
  font-family: 'Inter', sans-serif;
  transition: all 0.15s ease;
  user-select: none;
}

.filter-option:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.filter-option.selected {
  background: var(--light-blue);
  font-weight: 700;
}

.filter-option input[type="checkbox"] {
  display: none;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.active-filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  animation: popIn 0.2s ease;
}

.active-filter-chip button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  min-width: 32px;
  min-height: 32px;
  line-height: 1;
  color: var(--black);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.active-filter-chip button:hover {
  color: white;
}

.sort-select {
  padding: 10px 16px;
  border: 2px solid var(--black);
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  background: var(--white);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  flex: 1;
  max-width: 200px;
  min-width: 150px;
}

.sort-select:focus {
  outline: none;
  box-shadow: var(--shadow);
}

/* View mode toggle */
.view-mode-toggle {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.view-mode-toggle button {
  transition: all 0.2s ease;
}

.view-mode-toggle button:hover:not(.active) {
  background: var(--cream);
}

/* Quick filter chips */
.quick-filter-chip {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  font-family: 'Inter', sans-serif;
}

.quick-filter-chip:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--black);
}

.quick-filter-chip:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 var(--black);
}

/* Category chips */
.category-chip {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  font-family: 'Inter', sans-serif;
}

.category-chip:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--black) !important;
}

.category-chip:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 var(--black) !important;
}

.category-chip.active {
  animation: pop 0.3s ease;
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll to top button */
.scroll-to-top {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  font-family: 'Inter', sans-serif;
}

.scroll-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--black);
}

.scroll-to-top:active {
  transform: translateY(0);
  box-shadow: 2px 2px 0 var(--black);
}

/* Responsive adjustments for filter row */
@media (max-width: 640px) {
  .sort-select {
    min-width: 120px;
    max-width: 150px;
  }
  
  .view-mode-toggle {
    flex-shrink: 0;
  }
  
  .filter-button span {
    font-size: 13px;
  }
  
  .quick-filter-chip {
    font-size: 12px;
    padding: 6px 12px !important;
  }
  
  .category-chip {
    padding: 12px 8px !important;
  }
  
  .category-chip span:first-child {
    font-size: 24px !important;
  }
}

.results-count {
  font-size: 14px;
  color: #666;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Enhanced business card hover */
.business-card:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0px var(--black);
}

/* Happening Now Widget */
.happening-now-widget {
  margin-bottom: 24px;
}

.happening-now-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.happening-now-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding: 4px 0 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.happening-now-filters::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 2px 2px 0 var(--black);
}

.filter-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--black);
}

.filter-pill:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}

.filter-pill.active {
  background: var(--pink);
  color: var(--white);
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}

.filter-count {
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
}

.filter-pill.active .filter-count {
  background: rgba(255, 255, 255, 0.3);
}

.happening-now-title {
  font-size: 18px;
  font-weight: 900;
  text-transform: lowercase;
  color: var(--black);
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.happening-now-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 12px 0;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding: 20px;
}

.happening-now-scroll::-webkit-scrollbar {
  display: none;
}

.happening-now-card {
  scroll-snap-align: start;
}

.happening-now-card {
  min-width: 160px;
  max-width: 160px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

.happening-now-card.detailed {
  min-width: 100%;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 0;
}

.happening-now-card:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--black);
}

.happening-now-image {
  height: 80px;
  background: linear-gradient(135deg, var(--pink), #c4b5fd);
  position: relative;
}

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

.happening-now-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: white;
}

.happening-now-business {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.happening-now-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.happening-now-footer {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.happening-now-countdown {
  font-size: 12px;
  font-weight: 700;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

.live-badge {
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.happening-now-empty {
  text-align: center;
  padding: 24px;
  color: #999;
  font-weight: 600;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
}

.happening-now-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.happening-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cream);
  border-bottom: 2px solid var(--black);
}

.happening-icon {
  width: 40px;
  height: 40px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.happening-info {
  flex: 1;
  min-width: 0;
}

.happening-business-name {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}

.happening-tagline {
  font-size: 11px;
  font-style: italic;
  color: var(--gray-600);
  margin: 2px 0;
  line-height: 1.3;
}

.happening-neighborhood {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}

.happening-items-list {
  display: flex;
  flex-direction: column;
}

.happening-item-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cream);
  transition: background 0.15s;
}

.happening-item-row:last-child {
  border-bottom: none;
}

.happening-item-row:hover {
  background: var(--cream);
}

/* Type Badge (Special/Event) */
.happening-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.badge-emoji {
  font-size: 14px;
}

.badge-label {
  font-size: 10px;
}

/* Countdown Timer */
.happening-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--mint);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  margin-left: auto;
  flex-shrink: 0;
}

.happening-countdown.ending-soon {
  background: var(--pink);
  animation: pulse-urgent 2s ease-in-out infinite;
}

@keyframes pulse-urgent {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.countdown-icon {
  font-size: 12px;
}

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

.happening-item-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.happening-item-details {
  flex: 1;
  min-width: 0;
}

.happening-item-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--black);
}

.happening-item-description {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.4;
}

.happening-item-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #ef4444;
  flex-shrink: 0;
}

.time-icon {
  font-size: 14px;
}

.load-more-btn {
  width: 100%;
  padding: 14px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 12px;
}

.load-more-btn:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--black);
}

/* Grouped Business Cards for Today Page */
.grouped-business-card {
  background: var(--beige);
  border: 4px solid var(--black);
  border-radius: 16px;
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.grouped-business-card:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--black);
}

.grouped-business-card:active {
  transform: translateY(0);
  box-shadow: 2px 2px 0 var(--black);
}

.grouped-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--beige);
  border-bottom: 3px solid var(--black);
}

.grouped-business-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
}

.grouped-business-info {
  flex: 1;
  min-width: 0;
}

.grouped-business-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 4px;
}

.grouped-business-tagline {
  font-size: 12px;
  font-style: italic;
  color: var(--gray-600);
  margin: 2px 0 4px 0;
  line-height: 1.3;
}

.grouped-business-neighborhood {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.grouped-items-list {
  background: var(--white);
}

.grouped-item-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
  border-bottom: 2px solid var(--beige);
}

.grouped-item-row:last-child {
  border-bottom: none;
}

.grouped-item-content {
  flex: 1;
  min-width: 0;
}

.grouped-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
  line-height: 1.3;
}

.grouped-item-description {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 1.4;
  margin-bottom: 6px;
}

.special-type-badge-small {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
  margin-top: 4px;
}

.grouped-item-time {
  text-align: right;
  flex-shrink: 0;
}

.grouped-time-label {
  font-size: 16px;
  font-weight: 900;
  color: var(--pink);
  margin-bottom: 4px;
}

.grouped-time-range {
  font-size: 12px;
  font-weight: 600;
  color: #666;
}

.grouped-businesses-list {
  display: flex;
  flex-direction: column;
}

.happening-now-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 16px;
}

.happening-now-compact:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

/* Coming Up Next Widget */
.coming-up-widget {
  margin-bottom: 24px;
}

.coming-up-header {
  margin-bottom: 16px;
}

.coming-up-title {
  font-size: 18px;
  font-weight: 900;
  text-transform: lowercase;
  margin-bottom: 2px;
}

.coming-up-subtitle {
  font-size: 13px;
  color: #666;
  font-weight: 600;
}

.coming-up-list {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
}

.coming-up-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--cream);
  cursor: pointer;
  transition: background 0.15s;
}

.coming-up-item.detailed {
  align-items: flex-start;
  padding: 16px;
}

.coming-up-item:last-child {
  border-bottom: none;
}

.coming-up-item:hover {
  background: var(--cream);
}

.coming-up-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.coming-up-info {
  flex: 1;
  min-width: 0;
}

.coming-up-business {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.coming-up-neighborhood {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
}

.coming-up-name {
  font-size: 13px;
  color: #666;
  font-weight: 600;
  margin-bottom: 4px;
}

.coming-up-description {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
  margin-top: 6px;
  margin-bottom: 8px;
}

.coming-up-type-badge {
  display: inline-block;
  padding: 4px 8px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 6px;
}

.coming-up-time {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.coming-up-starts {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.coming-up-until {
  font-size: 11px;
  color: #999;
  font-weight: 600;
}

.reminder-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  flex-shrink: 0;
}

.reminder-btn:hover:not(:disabled) {
  background: var(--cream);
}

.reminder-btn.set {
  color: var(--pink);
}

.reminder-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.coming-up-empty {
  padding: 32px;
  text-align: center;
}

.coming-up-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.coming-up-empty-text {
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
}

.coming-up-empty-subtext {
  font-size: 13px;
  color: var(--gray-400);
}

.coming-up-empty-link {
  color: var(--pink);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.coming-up-empty-link:hover {
  text-decoration: none;
}

.show-all-btn, .show-less-btn {
  width: 100%;
  padding: 12px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-top: none;
  border-radius: 0 0 14px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.show-all-btn:hover, .show-less-btn:hover {
  background: var(--white);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  z-index: 1000;
  animation: toastIn 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@keyframes toastIn {
  from { 
    opacity: 0; 
    transform: translateX(-50%) translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(-50%) translateY(0); 
  }
}

/* Neighborhood Browsing */
.browse-neighborhoods-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 16px;
  box-shadow: 3px 3px 0 var(--black);
}

.browse-neighborhoods-btn:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--black);
}

.neighborhood-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px 0;
  margin: 0 -20px 12px -20px;
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-width: none;
}

.neighborhood-scroll::-webkit-scrollbar {
  display: none;
}

.neighborhood-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}

.neighborhood-chip:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.neighborhood-chip.active {
  box-shadow: 3px 3px 0 var(--black);
  transform: translateY(-1px);
}

.neighborhood-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0 var(--black);
}

.neighborhood-header-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.neighborhood-header-info {
  flex: 1;
}

.neighborhood-header-info h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 2px 0;
  text-transform: lowercase;
}

.neighborhood-header-info p {
  font-size: 13px;
  color: #666;
  margin: 0;
  font-weight: 600;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border: 2px solid var(--black);
  border-radius: 10px;
  background: var(--white);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: var(--cream);
  transform: translateY(-1px);
}

/* ====================================
   MOBILE-FIRST OPTIMIZATIONS
   ==================================== */

/* Ensure all interactive elements are touch-friendly */
button, a, .card-clickable, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* Better tap targets for small elements */
.nav-tab, .btn-icon, .avatar, .search-btn, .notification-btn {
  min-width: 44px;
  min-height: 44px;
}

/* Smooth scrolling with momentum */
.content, .search-content, .modal-content, 
.happening-now-scroll, .coming-up-scroll,
.business-list, .events-list, .deals-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Prevent text selection on UI elements */
.header, .bottom-nav, .nav-tab, button {
  -webkit-user-select: none;
  user-select: none;
}

/* Improve touch feedback on active state */
button:active, .card-clickable:active, .nav-tab:active {
  opacity: 0.8;
}

/* Mobile viewport optimization */
@media (max-width: 768px) {
  /* Larger touch targets */
  .btn {
    padding: 14px 24px;
    min-height: 48px;
  }
  
  /* Better spacing for mobile */
  .content {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  /* Optimize header for mobile */
  .header {
    padding: 12px 16px;
  }
  
  .header-content {
    gap: 8px;
  }
  
  .logo {
    font-size: 22px;
  }
  
  .logo-image {
    height: 32px;
  }
  
  .header-actions {
    gap: 8px;
  }
  
  .search-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  
  .search-btn .search-icon {
    width: 18px;
    height: 18px;
  }
  
  /* Card spacing */
  .card {
    padding: 20px;
    border-width: 3px;
  }
  
  /* Page titles */
  .page-title {
    font-size: 40px;
    margin-bottom: 20px;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .page-title {
    font-size: 36px;
  }
  
  .content {
    padding-top: 100px;
  }
  
  /* Smaller cards on very small screens */
  .card {
    padding: 16px;
  }
  
  /* Grouped cards responsive */
  .grouped-card-header {
    padding: 12px;
    gap: 10px;
  }
  
  .grouped-business-icon {
    width: 48px;
    height: 48px;
    font-size: 28px;
  }
  
  .grouped-business-name {
    font-size: 16px;
  }
  
  .grouped-business-neighborhood {
    font-size: 13px;
  }
  
  .grouped-item-row {
    padding: 12px;
  }
  
  .grouped-item-time {
    text-align: right;
    flex-shrink: 0;
    min-width: 100px;
  }
  
  .grouped-time-label {
    font-size: 14px;
  }
  
  .grouped-time-range {
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Landscape mobile optimization */
@media (max-height: 500px) and (orientation: landscape) {
  .page-title {
    font-size: 32px;
    margin-bottom: 16px;
  }
  
  .content {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* Touch device specific styles */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices */
  .btn:hover, .card:hover, .nav-tab:hover {
    transform: none;
    box-shadow: var(--shadow);
  }
  
  /* Enhance active/pressed states */
  .btn:active {
    transform: scale(0.98) translate(2px, 2px);
    box-shadow: 0 0 0 var(--black);
  }
  
  .card-clickable:active {
    transform: scale(0.99) translate(4px, 4px);
    box-shadow: 0 0 0 var(--black);
  }
}

/* Notch/safe area support */
@supports (padding: max(0px)) {
  .header {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  .bottom-nav {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
  
  .content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}



/* Enhanced mobile touch feedback */
@media (max-width: 768px) {
  /* All interactive cards get better feedback */
  .business-card, .event-card, .deal-card, 
  .happening-now-card, .coming-up-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }
  
  /* Ensure minimum spacing between tappable elements */
  .nav-tab {
    padding: 14px 10px;
  }
  
  /* Make modals full-screen on mobile */
  .auth-modal, .confirm-dialog {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }
  
  /* Optimize font sizes for mobile readability */
  body {
    font-size: 15px;
  }
  
  /* Bigger hit areas for close buttons */
  .modal-close, .back-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Very small devices - extra optimization */
@media (max-width: 375px) {
  .content {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .page-title {
    font-size: 32px;
  }
  
  .card {
    padding: 14px;
  }
}

/* Neighborhood Browser */
.neighborhood-browser {
  padding-bottom: 24px;
}

.neighborhood-browser-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.neighborhood-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.neighborhood-card {
  padding: 16px;
  border: 3px solid var(--black);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 3px 3px 0 var(--black);
}

.neighborhood-card:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--black);
}

.neighborhood-card-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.neighborhood-card-name {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}

.neighborhood-card-desc {
  font-size: 12px;
  color: #666;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}

.neighborhood-card-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
}

.hot-neighborhoods {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  overflow-x: auto;
  scrollbar-width: none;
}

.hot-neighborhoods::-webkit-scrollbar {
  display: none;
}

.hot-neighborhoods-label {
  font-weight: 800;
  white-space: nowrap;
}

.hot-neighborhood-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
  font-weight: 700;
  border: 2px solid var(--black);
}

/* Game Day Mode */
.game-day-banner {
  background: linear-gradient(90deg, #00274C, #003366);
  color: #FFCB05;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 14px;
  border-bottom: 3px solid #FFCB05;
}

.game-day-banner-icon {
  font-size: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.game-day-banner-text {
  flex: 1;
  margin-left: 12px;
}

.game-day-banner-btn {
  background: #FFCB05;
  color: #00274C;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}

.game-day-banner-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.game-day-mode {
  background: linear-gradient(180deg, #00274C 0%, #001a33 100%);
  min-height: 100vh;
  color: white;
  padding-bottom: 100px;
}

.game-day-header {
  background: #FFCB05;
  color: #00274C;
  padding: 24px 20px;
  text-align: center;
  border-bottom: 4px solid #00274C;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.game-day-title {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.game-day-matchup {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.game-day-kickoff {
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}

.game-day-countdown {
  background: #00274C;
  color: #FFCB05;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 16px;
  display: inline-block;
  margin-top: 12px;
  border: 2px solid #FFCB05;
}

.game-day-section {
  padding: 20px;
}

.game-day-section-title {
  color: #FFCB05;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.game-day-card {
  background: white;
  color: var(--black);
  border: 3px solid #FFCB05;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 3px 3px 0 rgba(255, 203, 5, 0.3);
}

.game-day-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px #FFCB05, 5px 5px 0 rgba(255, 203, 5, 0.3);
}

.crowd-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  border: 2px solid var(--black);
}

.crowd-light { 
  background: #d1fae5; 
  color: #065f46; 
}

.crowd-moderate { 
  background: #fef3c7; 
  color: #92400e; 
}

.crowd-packed { 
  background: #fee2e2; 
  color: #991b1b; 
}

.walk-time {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

.game-day-exit {
  position: fixed;
  top: 16px;
  right: 16px;
  background: white;
  color: #00274C;
  border: 2px solid #00274C;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}

.game-day-exit:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.3);
}

.game-day-toggle {
  background: #FFCB05;
  border: 3px solid #00274C;
  padding: 12px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  animation: pulse-gold 2s infinite;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 50px;
  margin: 4px;
  box-shadow: 2px 2px 0px #00274C;
  transition: all 0.2s ease;
}

.game-day-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px #00274C;
}

@keyframes pulse-gold {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(255, 203, 5, 0.7); 
  }
  50% { 
    box-shadow: 0 0 0 8px rgba(255, 203, 5, 0); 
  }
}

/* Settings Page */
.settings-page {
  padding: 20px;
  padding-bottom: 100px;
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: lowercase;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.persona-card {
  padding: 16px;
  border: 3px solid var(--black);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  box-shadow: 3px 3px 0 var(--black);
}

.persona-card:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--black);
}

.persona-card.selected {
  border-color: var(--pink);
  background: #fff5f7;
  box-shadow: 0 0 0 3px var(--pink), 5px 5px 0 var(--black);
}

.persona-card.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--pink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: white;
  border: 2px solid var(--black);
}

.persona-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.persona-label {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 4px;
}

.persona-desc {
  font-size: 12px;
  color: #666;
  font-weight: 600;
  line-height: 1.3;
}

.pref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pref-chip {
  padding: 10px 16px;
  border: 2px solid var(--black);
  border-radius: 20px;
  background: var(--white);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}

.pref-chip:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.pref-chip.selected {
  background: var(--pink);
  color: white;
  box-shadow: 3px 3px 0 var(--black);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 2px solid var(--cream);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
  margin-right: 16px;
}

.setting-label {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}

.setting-desc {
  font-size: 13px;
  color: #666;
  font-weight: 500;
  line-height: 1.3;
}

.toggle-switch {
  width: 52px;
  height: 30px;
  background: #e5e5e5;
  border-radius: 15px;
  border: 2px solid var(--black);
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-switch.active {
  background: var(--mint);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.toggle-switch.active::after {
  transform: translateX(22px);
}

.view-toggle-setting {
  display: flex;
  border: 2px solid var(--black);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.view-toggle-option {
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  background: var(--white);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s;
}

.view-toggle-option:first-child {
  border-right: 2px solid var(--black);
}

.view-toggle-option.active {
  background: var(--pink);
  color: white;
}

.time-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.time-picker-row span {
  font-weight: 600;
  color: #666;
}

.time-picker {
  padding: 10px;
  border: 2px solid var(--black);
}

.danger-zone {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px dashed #fca5a5;
}

.danger-zone-title {
  font-size: 14px;
  font-weight: 700;
  color: #ef4444;
  margin-bottom: 12px;
}

.btn-danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #991b1b;
}

.btn-danger:hover {
  background: #fecaca;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #991b1b;
}

/* Share Modal */
.share-modal {
  text-align: center;
  max-width: 400px;
}

.share-preview {
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}

.share-options {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.share-btn {
  width: 56px;
  height: 56px;
  border: 2px solid var(--black);
  border-radius: 12px;
  background: var(--white);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--black);
}

.share-btn.twitter { 
  background: #1DA1F2;
  color: white;
}

.share-btn.facebook { 
  background: #4267B2;
  color: white;
}

.share-btn.whatsapp { 
  background: #25D366;
  color: white;
}

.share-btn.sms { 
  background: var(--mint);
}

.share-btn.copy { 
  background: var(--cream);
}

.copy-link-row {
  display: flex;
  gap: 8px;
}

.copy-link-input {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--cream);
  font-family: 'Inter', sans-serif;
}

/* Sub-tabs */
.sub-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.sub-tab {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--black);
  border-radius: 12px;
  background: var(--white);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  font-family: 'Inter', sans-serif;
}

.sub-tab:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.sub-tab.active {
  background: var(--pink);
  color: white;
  box-shadow: 3px 3px 0 var(--black);
}

.sub-tab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--yellow);
  color: var(--black);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  border: 2px solid var(--black);
}

/* Activity Feed */
.activity-feed {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
}

.activity-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--cream);
  transition: background 0.15s;
}

.activity-card:last-child {
  border-bottom: none;
}

.activity-card:hover {
  background: var(--cream);
}

.activity-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  color: white;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: 14px;
  line-height: 1.4;
}

.activity-user {
  font-weight: 700;
}

.activity-business {
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
}

.activity-business:hover {
  text-decoration: underline;
}

.activity-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  font-weight: 600;
}

.activity-icon {
  font-size: 16px;
  margin-right: 4px;
}

.activity-business-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--cream);
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
  border: 2px solid transparent;
  transition: all 0.15s;
}

.activity-business-preview:hover {
  border-color: var(--black);
  transform: translateY(-1px);
}

.activity-business-image {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid var(--black);
  flex-shrink: 0;
}

.activity-business-name {
  font-weight: 700;
  font-size: 13px;
}

/* Recent Check-ins */
.recent-checkins {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

.recent-checkin-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -8px;
  background: var(--light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--black);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.recent-checkin-avatar:first-child {
  margin-left: 0;
}

.recent-checkins-count {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-left: 8px;
}

/* Badge System */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 26, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.4s ease;
}

@media (max-width: 480px) {
  .modal-content {
    padding: 24px;
  }
  
  .badge-modal {
    max-width: 100%;
  }
  
  .earned-badge-icon {
    width: 100px;
    height: 100px;
    font-size: 48px;
  }
  
  .badge-modal-title {
    font-size: 26px;
    margin-bottom: 24px;
  }
  
  .earned-badge-name {
    font-size: 22px;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.badge-modal {
  text-align: center;
  position: relative;
  overflow: visible;
  max-width: 450px;
  background: linear-gradient(135deg, var(--white) 0%, var(--cream) 100%);
}

.sparkles-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-sparkle {
  position: absolute;
  font-size: 20px;
  animation: floatSparkle 3s ease-in-out infinite;
  opacity: 0;
}

@keyframes floatSparkle {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(1.2) rotate(360deg);
  }
}

.confetti-bg {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 80px;
  opacity: 0.15;
  pointer-events: none;
  animation: confettiFloat 3s ease-in-out infinite;
}

@keyframes confettiFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-10px) rotate(5deg);
  }
}

.badge-modal-title {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 32px;
  text-transform: lowercase;
  animation: titlePulse 1.5s ease-in-out infinite;
  background: linear-gradient(45deg, var(--pink), var(--yellow), var(--mint), var(--light-blue));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes titlePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.earned-badge-display {
  margin-bottom: 24px;
}

.earned-badge-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin: 0 auto 16px;
  position: relative;
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 215, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.2), 
    6px 6px 0 var(--black);
  animation: badgePop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% {
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.6),
      0 0 60px rgba(255, 215, 0, 0.3),
      0 8px 16px rgba(0, 0, 0, 0.2), 
      6px 6px 0 var(--black);
  }
  50% {
    box-shadow: 
      0 0 40px rgba(255, 215, 0, 0.8),
      0 0 80px rgba(255, 215, 0, 0.5),
      0 8px 16px rgba(0, 0, 0, 0.2), 
      6px 6px 0 var(--black);
  }
}

.earned-badge-icon::before {
  content: '✨';
  position: absolute;
  font-size: 28px;
  animation: sparkle1 2s ease-in-out infinite;
  top: -15px;
  right: -15px;
}

.earned-badge-icon::after {
  content: '✨';
  position: absolute;
  font-size: 24px;
  animation: sparkle2 2.5s ease-in-out infinite;
  bottom: -10px;
  left: -10px;
}

@keyframes badgePop {
  0% { 
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  70% { 
    transform: scale(1.15) rotate(10deg);
  }
  100% { 
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes sparkle1 {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(180deg);
  }
}

@keyframes sparkle2 {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) rotate(-180deg);
  }
}

.earned-badge-name {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 12px;
  text-transform: lowercase;
  color: var(--black);
  animation: fadeInUp 0.5s ease 0.3s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.earned-badge-desc {
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.5;
  animation: fadeInUp 0.5s ease 0.4s both;
}

.earned-badge-points {
  display: inline-block;
  background: var(--yellow);
  border: 3px solid var(--black);
  border-radius: 24px;
  padding: 8px 20px;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 3px 3px 0 var(--black);
  animation: pointsBounce 1s ease-in-out 0.5s;
}

@keyframes pointsBounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-5px);
  }
}

.profile-badges-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.profile-badges-title {
  font-size: 24px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: lowercase;
}

.profile-points {
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 14px;
}

.profile-badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.profile-badge {
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s;
}

.profile-badge:hover {
  transform: scale(1.05);
}

.profile-badge-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 6px;
  box-shadow: 3px 3px 0 var(--black);
}

.profile-badge-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-600);
  line-height: 1.2;
}

.badge-category {
  margin-bottom: 32px;
}

.badge-category-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: lowercase;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.badge-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  transition: all 0.15s;
  cursor: pointer;
}

.badge-card.earned:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--black);
}

.badge-card.locked {
  opacity: 0.5;
}

.badge-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 10px;
}

.badge-card-name {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
  text-transform: lowercase;
}

.badge-card-points {
  font-size: 11px;
  font-weight: 700;
  color: #999;
}

.badge-card.earned .badge-card-points {
  color: var(--black);
}

.badges-progress {
  margin-bottom: 20px;
  text-align: center;
}

.badges-count {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.badges-total-points {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.badge-detail-modal {
  text-align: center;
  max-width: 400px;
}

.badge-detail-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin: 0 auto 20px;
  box-shadow: 8px 8px 0 var(--black);
}

.badge-detail-name {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 12px;
  text-transform: lowercase;
}

.badge-detail-desc {
  font-size: 16px;
  color: #666;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.4;
}

.badge-detail-points {
  display: inline-block;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}

.badge-detail-status {
  display: inline-block;
  background: var(--mint);
  border: 2px solid var(--black);
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 20px;
}

.badge-detail-locked {
  display: inline-block;
  background: #e5e5e5;
  border: 2px solid var(--black);
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 20px;
  color: #666;
}

/* Onboarding */
.onboarding {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cream);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

.skip-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-400);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  z-index: 10;
}

.skip-btn:hover {
  color: var(--gray-600);
}

.onboarding-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 20px 0;
}

.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  transition: all 0.3s ease;
}

.progress-dot.active {
  background: var(--pink);
  transform: scale(1.2);
}

.onboarding-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px 0;
}

.onboarding-step {
  text-align: center;
  max-width: 400px;
  width: 100%;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.step-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -1px;
  text-transform: lowercase;
}

.step-subtitle {
  font-size: 16px;
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 32px;
}

.step-note {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 600;
  margin-top: 16px;
}

.onboarding-footer {
  display: flex;
  gap: 12px;
  padding: 20px 0;
}

.onboarding-footer .btn {
  flex: 1;
}

/* Welcome Step */
.welcome-logo {
  font-size: 80px;
  margin-bottom: 16px;
}

.welcome-title {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: lowercase;
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 32px;
}

.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.welcome-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  text-align: left;
}

.welcome-feature-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.welcome-cta {
  font-size: 14px;
  font-weight: 700;
  color: var(--pink);
}

/* Name Step */
.onboarding-input {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  max-width: 300px;
  margin: 0 auto;
}

/* Persona Step */
.persona-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.persona-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  border: 3px solid var(--black);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.persona-option:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--black);
}

.persona-option.selected {
  box-shadow: 6px 6px 0 var(--black);
}

.persona-option-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.persona-option-label {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 2px;
  text-transform: lowercase;
}

.persona-option-desc {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 600;
}

.persona-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

/* Neighborhoods Step */
.neighborhood-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.neighborhood-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border: 3px solid var(--black);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.neighborhood-option:hover {
  transform: translateY(-2px);
}

.neighborhood-option.selected {
  box-shadow: 4px 4px 0 var(--black);
}

.neighborhood-option-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.neighborhood-option-name {
  font-size: 14px;
  font-weight: 800;
  text-transform: lowercase;
}

.neighborhood-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.skip-link {
  background: none;
  border: none;
  color: var(--gray-400);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  font-family: 'Inter', sans-serif;
}

.skip-link:hover {
  color: var(--gray-600);
}

/* Notifications Step */
.notification-preview {
  margin-bottom: 24px;
}

.notification-preview-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Enhanced Profile Page */
.profile-page {
  padding-bottom: 100px;
}

.profile-cover {
  height: 150px;
  margin: -20px -20px 0;
  overflow: hidden;
}

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

.cover-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--pink), var(--light-blue));
}

.profile-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: -40px;
  padding: 0 20px;
  margin-bottom: 16px;
}

.profile-avatar-large {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--mint);
  border: 4px solid var(--white);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 2px;
}

.profile-location {
  font-size: 13px;
  color: var(--gray-500);
  display: block;
}

.profile-joined {
  font-size: 12px;
  color: var(--gray-400);
  display: block;
}

.follow-btn {
  padding: 10px 20px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--black);
  font-family: 'Inter', sans-serif;
}

.follow-btn.following {
  background: var(--cream);
}

.edit-profile-btn {
  padding: 8px 16px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.profile-bio {
  padding: 0 20px;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.profile-social-links {
  display: flex;
  gap: 16px;
  padding: 0 20px;
  margin-bottom: 16px;
}

.profile-social-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
}

.profile-social-links a:hover {
  color: var(--pink);
}

/* Stats Row */
.profile-stats-row {
  display: flex;
  justify-content: space-around;
  padding: 16px 20px;
  background: var(--white);
  border-top: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  margin-bottom: 16px;
}

.stat-item {
  text-align: center;
}

.stat-item .stat-value {
  display: block;
  font-size: 22px;
  font-weight: 900;
}

.stat-item .stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
}

/* Badges Preview */
.badges-preview {
  padding: 0 20px;
  margin-bottom: 16px;
}

.badges-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.badges-preview-header h3 {
  font-size: 14px;
  font-weight: 800;
}

.badges-preview-header button {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.badges-preview-list {
  display: flex;
  gap: 8px;
}

.badge-preview-item {
  width: 44px;
  height: 44px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.badge-preview-more {
  width: 44px;
  height: 44px;
  background: var(--gray-200);
  border: 2px solid var(--black);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* Favorites */
.profile-favorites {
  display: flex;
  gap: 12px;
  padding: 0 20px;
  margin-bottom: 16px;
}

.favorite-item {
  flex: 1;
  padding: 12px;
  background: var(--cream);
  border-radius: 12px;
}

.favorite-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 4px;
}

.favorite-value {
  font-size: 14px;
  font-weight: 700;
}

/* Profile Tabs */
.profile-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.profile-tab {
  padding: 12px 16px;
  background: var(--white);
  border: 2px solid var(--cream);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.profile-tab.active {
  background: var(--pink);
  border-color: var(--black);
  box-shadow: 2px 2px 0 var(--black);
}

.profile-tab-content {
  padding: 0 20px;
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--cream);
  border-radius: 12px;
}

.activity-type-icon {
  font-size: 20px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
}

.activity-text .business-link {
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
}

.activity-note, .activity-post-content {
  font-size: 14px;
  margin: 6px 0;
  color: var(--gray-700);
}

.activity-location {
  font-size: 12px;
  color: var(--gray-500);
}

.activity-time {
  font-size: 11px;
  color: var(--gray-400);
  display: block;
  margin-top: 4px;
}

.activity-photo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

/* Profile Reviews */
.profile-review-card {
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--cream);
  border-radius: 12px;
  margin-bottom: 12px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.review-business {
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
}

.review-rating {
  font-size: 12px;
}

.review-content {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.review-time {
  font-size: 11px;
  color: var(--gray-400);
}

/* Badges Grid */
.badge-category h4 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
}

.category-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.badge-card.earned {
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--black);
}

.badge-card.locked {
  opacity: 0.4;
  filter: grayscale(1);
}

.badge-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}

.badge-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
}

.badge-description {
  display: block;
  font-size: 11px;
  color: var(--gray-600);
}

.badge-earned-at {
  display: block;
  font-size: 10px;
  color: var(--gray-500);
  margin-top: 6px;
}

/* Saved Content */
.saved-content {
  padding: 0;
}

.saved-place-item, .saved-deal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--cream);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}

.saved-place-item:hover {
  background: var(--cream);
}

.place-name {
  font-weight: 700;
}

.place-meta {
  font-size: 12px;
  color: var(--gray-500);
  margin-left: auto;
}

.saved-deal-item .deal-value {
  padding: 8px 12px;
  background: var(--pink);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  color: white;
}

.saved-deal-item .deal-info {
  flex: 1;
}

.saved-deal-item .deal-title {
  display: block;
  font-weight: 700;
}

.saved-deal-item .deal-business {
  font-size: 12px;
  color: var(--gray-500);
}

/* Edit Profile Modal */
.edit-profile-modal {
  max-height: 90vh;
  overflow-y: auto;
}

.edit-cover-section {
  margin: -20px -20px 20px;
  height: 120px;
}

.cover-upload {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

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

.cover-upload input {
  display: none;
}

.cover-placeholder {
  width: 100%;
  height: 100%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--gray-500);
}

.edit-avatar-section {
  margin-top: -50px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.avatar-upload {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid var(--white);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.avatar-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload input {
  display: none;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
}

.upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.avatar-upload:hover .upload-overlay {
  opacity: 1;
}

.uploading-text {
  text-align: center;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.empty-state-small {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-500);
}

.empty-text {
  text-align: center;
  color: var(--gray-400);
  padding: 20px;
}

.loading-text {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-500);
  font-weight: 600;
}

.back-btn {
  margin-bottom: 16px;
  padding: 10px 20px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.save-btn {
  width: 100%;
  margin-top: 20px;
}

.notification-preview-card {
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: left;
}

.notification-preview-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.notification-preview-content {
  flex: 1;
}

.notification-preview-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}

.notification-preview-text {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 600;
}

.notification-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
}

.notification-toggle-info {
  flex: 1;
  text-align: left;
  margin-right: 16px;
}

.notification-toggle-label {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}

.notification-toggle-desc {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 600;
}

@media (max-width: 480px) {
  .onboarding {
    padding: 16px;
  }
  
  .welcome-logo {
    font-size: 64px;
  }
  
  .welcome-title {
    font-size: 28px;
  }
  
  .step-title {
    font-size: 24px;
  }
  
  .step-icon {
    font-size: 52px;
  }
}

/* Loading States & Skeletons */
.skeleton {
  background: linear-gradient(90deg, #e5e5e5 25%, #f5f5f5 50%, #e5e5e5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  margin-bottom: 12px;
}

.skeleton-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 12px;
}

.skeleton-content {
  flex: 1;
}

.skeleton-title {
  height: 20px;
  width: 70%;
  margin-bottom: 8px;
}

.skeleton-text {
  height: 14px;
  width: 100%;
  margin-bottom: 6px;
}

.skeleton-text.short {
  width: 50%;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
}

/* Page Loader */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.page-loader-content {
  text-align: center;
}

.page-loader-logo {
  font-size: 64px;
  margin-bottom: 20px;
  animation: logoBounce 1s ease infinite;
}

@keyframes logoBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Error States */
.error-page {
  text-align: center;
  padding: 60px 20px;
}

.error-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.error-page h2 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: lowercase;
}

.error-page p {
  color: var(--gray-500);
  margin-bottom: 24px;
  font-weight: 600;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fee2e2;
  border: 2px solid #991b1b;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #991b1b;
  margin: 12px 0;
}

.error-message-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.error-message-text {
  flex: 1;
}

.error-retry {
  margin-left: auto;
  background: none;
  border: none;
  color: #991b1b;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

.error-retry:hover {
  color: #7f1d1d;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
  width: 90%;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--black);
  color: var(--white);
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  animation: toastSlide 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@keyframes toastSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-success {
  background: #065f46;
}

.toast-error {
  background: #991b1b;
}

.toast-info {
  background: var(--black);
}

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* PWA Install Banner */
.install-banner {
  position: fixed;
  bottom: 80px;
  left: 12px;
  right: 12px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.install-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.install-banner-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.install-banner-title {
  font-weight: 800;
  font-size: 16px;
  text-transform: lowercase;
}

.install-banner-text {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 600;
}

.install-banner-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.install-banner-dismiss {
  background: none;
  border: none;
  font-weight: 700;
  color: var(--gray-400);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.install-banner-dismiss:hover {
  color: var(--gray-600);
}

.btn-small {
  padding: 8px 16px;
  font-size: 13px;
}

/* Offline Banner */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fbbf24;
  color: var(--black);
  padding: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  z-index: 3000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--black);
  color: var(--white);
  padding: 8px 16px;
  z-index: 4000;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  font-family: 'Inter', sans-serif;
}

.skip-link:focus {
  top: 0;
}

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

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Better tap targets on mobile */
@media (max-width: 768px) {
  .btn, button:not(.btn-icon), a:not(.skip-link) {
    min-height: 44px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Print styles */
@media print {
  .bottom-nav, .header, .btn, .modal-overlay, .install-banner, .offline-banner {
    display: none !important;
  }
  
  body {
    background: white;
    padding: 0;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #000;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card, .btn, .modal-content {
    border-width: 4px;
  }
  
  .badge-card-icon, .profile-badge-icon {
    border-width: 4px;
  }
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

/* User Profiles & Following */
.profile-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 3px solid var(--black);
  padding-bottom: 8px;
}

.profile-tab {
  flex: 1;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  text-transform: lowercase;
  border: 2px solid var(--black);
  border-radius: 12px 12px 0 0;
  background: var(--white);
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-tab:hover {
  background: var(--cream);
}

.profile-tab.active {
  background: var(--pink);
  transform: translateY(2px);
}

.business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* Mobile: Better grid for touch */
@media (max-width: 480px) {
  .business-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.business-card {
  cursor: pointer;
  transition: transform 0.15s ease;
  overflow: hidden;
}

.business-card:hover {
  transform: translateY(-4px);
}

.business-card-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-bottom: 2px solid var(--black);
}

.business-card-content {
  padding: 12px;
}

.business-card-name {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
  text-transform: lowercase;
  line-height: 1.2;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.badge-card {
  text-align: center;
  padding: 16px 12px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  padding: 16px;
}

.activity-business-link {
  color: var(--pink);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.activity-business-link:hover {
  opacity: 0.8;
}

.badge {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid var(--black);
  border-radius: 12px;
  font-weight: 700;
  font-size: 12px;
  text-transform: lowercase;
}

/* Form styles */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  text-transform: lowercase;
}

/* Check-In Timeline */
.checkin-timeline {
  position: relative;
  padding-left: 0;
}

.checkin-date-header {
  font-weight: 800;
  font-size: 14px;
  color: var(--black);
  background: var(--yellow);
  padding: 8px 16px;
  border: 2px solid var(--black);
  border-radius: 12px;
  margin-bottom: 16px;
  margin-top: 24px;
  display: inline-block;
  text-transform: lowercase;
}

.checkin-date-header:first-child {
  margin-top: 0;
}

.checkin-timeline-item {
  position: relative;
  padding-left: 32px;
  padding-bottom: 24px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.checkin-timeline-item:hover {
  opacity: 0.8;
}

.checkin-timeline-item:last-child {
  padding-bottom: 0;
}

.checkin-timeline-item:last-child .checkin-timeline-line {
  display: none;
}

.checkin-timeline-dot {
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  background: var(--pink);
  border: 3px solid var(--black);
  border-radius: 50%;
  z-index: 2;
}

.checkin-timeline-line {
  position: absolute;
  left: 7px;
  top: 24px;
  width: 2px;
  height: calc(100% - 16px);
  background: var(--gray-200);
  z-index: 1;
}

.checkin-timeline-content {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 4px 4px 0px var(--black);
  transition: all 0.15s ease;
}

.checkin-timeline-item:hover .checkin-timeline-content {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--black);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .business-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .profile-tabs {
    gap: 4px;
  }
  
  .profile-tab {
    padding: 10px 8px;
    font-size: 11px;
  }
  
  .checkin-timeline-item {
    padding-left: 24px;
  }
  
  .checkin-timeline-dot {
    width: 12px;
    height: 12px;
    left: -2px;
  }
  
  .checkin-timeline-line {
    left: 3px;
  }
}

/* Surprise Me Button */
.surprise-me-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: var(--yellow);
  border: 3px solid var(--black);
  border-radius: 16px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 4px 4px 0 var(--black);
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
}

.surprise-me-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.surprise-me-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}

.surprise-icon {
  font-size: 24px;
}

.surprise-text {
  text-transform: lowercase;
}

/* Surprise Modal */
.surprise-modal {
  text-align: center;
  min-height: 300px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 600px;
  width: 95%;
}

.surprise-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.filter-chip {
  padding: 8px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

/* ====================================
   FAVORITES PAGE
   ==================================== */

.favorites-page {
  padding-bottom: 100px;
}

.favorites-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--black);
}

.favorites-count {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
}

.favorites-sort {
  display: flex;
  align-items: center;
}

.favorites-sort-select {
  padding: 8px 12px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  background: var(--white);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.favorite-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
  transition: all 0.15s ease;
}

.favorite-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.favorite-card-main {
  padding: 16px;
  cursor: pointer;
}

.favorite-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.favorite-icon {
  width: 48px;
  height: 48px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.favorite-info {
  flex: 1;
  min-width: 0;
}

.favorite-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 4px;
  text-transform: lowercase;
}

.favorite-tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--gray-600);
  margin-bottom: 6px;
  line-height: 1.3;
}

.favorite-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.favorite-neighborhood {
  color: var(--gray-600);
}

.favorite-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.favorite-status.open {
  color: #059669;
}

.favorite-status.closed {
  color: #dc2626;
}

.favorite-stats {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--cream);
}

.favorite-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
}

.favorite-notes-section {
  padding: 12px 16px;
  background: var(--cream);
  border-top: 2px solid var(--black);
}

.favorite-note-display {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.favorite-note-display:hover {
  border-color: var(--black);
  transform: translateY(-1px);
}

.favorite-note-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.favorite-note-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray-700);
  font-style: italic;
}

.favorite-add-note-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--white);
  border: 2px dashed var(--gray-400);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
  width: 100%;
}

.favorite-add-note-btn:hover {
  border-color: var(--black);
  border-style: solid;
  color: var(--black);
}

.favorite-note-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.favorite-note-textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  resize: vertical;
  line-height: 1.4;
}

.favorite-note-textarea:focus {
  outline: none;
  border-color: var(--pink);
}

.favorite-note-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.favorite-card-actions {
  padding: 12px 16px;
  background: var(--cream);
  border-top: 2px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
}

.favorite-remove-btn {
  padding: 6px 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.favorite-remove-btn:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #991b1b;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .favorites-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .favorite-stats {
    flex-wrap: wrap;
  }
}

/* ====================================
   BUSINESS HOURS CARD
   ==================================== */

.business-hours-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
}

.hours-unknown {
  padding: 24px;
  text-align: center;
  color: var(--gray-500);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hours-unknown-icon {
  font-size: 24px;
}

/* Hours Summary Section */
.hours-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-bottom: 2px solid var(--cream);
}

.hours-today-info {
  flex: 1;
}

.hours-today-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.hours-today-time {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
}

/* Open Status Badge */
.open-status-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.status-badge-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 3px solid var(--black);
  box-shadow: 3px 3px 0 var(--black);
}

.status-badge-main .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.status-badge-main .status-text {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.status-badge-info {
  font-size: 12px;
  font-weight: 700;
  padding: 0 16px;
  color: var(--gray-600);
}

/* Open State */
.open-status-badge.status-open .status-badge-main {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.open-status-badge.status-open .status-dot {
  background: #065f46;
}

.open-status-badge.status-open .status-text {
  color: #065f46;
}

/* Closed State */
.open-status-badge.status-closed .status-badge-main {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.open-status-badge.status-closed .status-dot {
  background: #991b1b;
  animation: none;
}

.open-status-badge.status-closed .status-text {
  color: #991b1b;
}

/* Size Variants */
.open-status-badge.size-large .status-badge-main {
  padding: 12px 20px;
}

.open-status-badge.size-large .status-badge-main .status-dot {
  width: 12px;
  height: 12px;
}

.open-status-badge.size-large .status-badge-main .status-text {
  font-size: 16px;
}

.open-status-badge.size-large .status-badge-info {
  font-size: 13px;
}

/* Toggle Button */
.hours-toggle-btn {
  width: 100%;
  padding: 14px 20px;
  background: var(--cream);
  border: none;
  border-top: 2px solid var(--cream);
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
}

.hours-toggle-btn:hover {
  background: #e5e0d5;
}

.hours-toggle-icon {
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* Week Schedule */
.hours-week-schedule {
  background: var(--cream);
  padding: 16px 20px;
}

.hours-week-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #e5e0d5;
  transition: background 0.15s ease;
}

.hours-week-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hours-week-row:hover {
  background: rgba(255, 255, 255, 0.5);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
}

.hours-week-day {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.hours-week-day-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-700);
  min-width: 80px;
}

.hours-week-today-dot {
  width: 8px;
  height: 8px;
  background: var(--pink);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.hours-week-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
  text-align: right;
}

/* Row States */
.hours-week-row.is-today .hours-week-day-name {
  color: var(--black);
  font-weight: 900;
}

.hours-week-row.is-today .hours-week-time {
  color: var(--black);
  font-weight: 700;
}

.hours-week-row.is-closed .hours-week-time {
  color: var(--gray-400);
  font-style: italic;
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .hours-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .open-status-badge {
    width: 100%;
  }
  
  .status-badge-main {
    width: 100%;
    justify-content: center;
  }
  
  .hours-week-day-name {
    min-width: 70px;
    font-size: 14px;
  }
  
  .hours-week-time {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .hours-summary {
    padding: 16px;
  }
  
  .hours-toggle-btn {
    padding: 12px 16px;
    font-size: 13px;
  }
  
  .hours-week-schedule {
    padding: 12px 16px;
  }
  
  .hours-week-row {
    padding: 10px 0;
  }
  
  .hours-today-time {
    font-size: 16px;
  }
}

.filter-chip:hover {
  transform: translateY(-2px);
}

.filter-chip.active {
  background: var(--pink);
  box-shadow: 2px 2px 0 var(--black);
}

.surprise-spinning {
  text-align: center;
}

.spinner-emoji {
  font-size: 64px;
  animation: spin 0.5s linear infinite;
}

.surprise-spinning-image {
  animation: spin 1s linear infinite;
  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.2));
}

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

.surprise-spinning p {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-600);
}

.surprise-result {
  animation: popIn 0.4s ease;
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.surprise-result-icon {
  font-size: 56px;
  margin-bottom: 12px;
}

.surprise-result-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-500);
  margin-bottom: 8px;
  text-transform: lowercase;
}

.surprise-result-business {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: lowercase;
}

.surprise-result-reason {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-600);
  padding: 10px 16px;
  background: var(--cream);
  border-radius: 8px;
  margin-bottom: 24px;
}

.surprise-business-details {
  width: 100%;
}

.surprise-result {
  width: 100%;
}

.surprise-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
}

.surprise-actions .btn {
  flex: 1;
}

.surprise-btn-small {
  width: 44px;
  height: 44px;
  background: var(--yellow);
  border: 3px solid var(--black);
  border-radius: 12px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  transition: all 0.15s ease;
}

.surprise-btn-small:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
}

.explore-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Late Night Mode */
.late-night-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 3px solid #c4b5fd;
  border-radius: 16px;
  color: var(--white);
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.15s ease;
  box-shadow: 4px 4px 0 #c4b5fd;
}

.late-night-banner:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #c4b5fd;
}

.late-night-icon {
  font-size: 24px;
}

.late-night-text {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
}

.late-night-arrow {
  font-size: 18px;
  opacity: 0.7;
}

.late-night-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
  z-index: 1000;
  overflow-y: auto;
  padding-bottom: 100px;
}

.late-night-header {
  padding: 20px;
  text-align: center;
  border-bottom: 3px solid rgba(196, 181, 253, 0.3);
  position: relative;
}

.late-night-header .back-btn {
  position: absolute;
  left: 20px;
  top: 20px;
  color: var(--white);
  background: none;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

.late-night-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.late-night-title span {
  font-size: 36px;
}

.late-night-title h1 {
  font-size: 42px;
  font-weight: 900;
  color: var(--white);
  margin: 0;
  text-transform: lowercase;
}

.late-night-subtitle {
  color: #c4b5fd;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
  margin-bottom: 0;
}

.late-night-content {
  padding: 20px;
}

.late-section {
  margin-bottom: 32px;
}

.late-section .section-title {
  color: var(--white);
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 900;
  text-transform: lowercase;
}

.specials-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.late-special-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(196, 181, 253, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.late-special-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #c4b5fd;
  transform: translateX(4px);
}

.late-special-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.late-special-business {
  font-size: 12px;
  font-weight: 700;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.late-special-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
}

.late-special-time {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--mint);
  background: rgba(149, 225, 211, 0.15);
  padding: 6px 10px;
  border-radius: 6px;
}

.late-spots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.late-spot-card {
  padding: 20px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(196, 181, 253, 0.3);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.late-spot-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--pink);
  transform: translateY(-4px);
}

.late-spot-type {
  font-size: 32px;
  margin-bottom: 8px;
}

.late-spot-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
  text-transform: lowercase;
}

.late-spot-neighborhood {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

.late-tips {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(196, 181, 253, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.late-tip {
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(196, 181, 253, 0.1);
}

.late-tip:last-child {
  border-bottom: none;
}

.badge-late {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: var(--white);
  border-color: #c4b5fd;
}

.late-night-mode .empty-text {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 20px;
  font-weight: 600;
}

.late-night-mode .loading-spinner {
  color: var(--white);
  text-align: center;
  padding: 40px;
  font-weight: 600;
}

/* Open Late filter chip style */
.neighborhood-chip.late-active {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: var(--white);
  border-color: #c4b5fd;
}

/* Weekly Digest */
.weekly-digest {
  min-height: 100vh;
  background: var(--cream);
  padding-bottom: 100px;
}

.digest-header {
  padding: 20px;
  border-bottom: 3px solid var(--black);
  background: var(--white);
}

.digest-header .back-btn {
  background: none;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: var(--black);
}

.digest-header .page-title {
  margin-bottom: 4px;
}

.digest-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
  margin: 0;
}

.day-tabs {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 16px 20px;
  background: var(--white);
  border-bottom: 3px solid var(--black);
  scrollbar-width: none;
}

.day-tabs::-webkit-scrollbar {
  display: none;
}

.day-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  min-width: 70px;
  transition: all 0.15s ease;
  position: relative;
  font-family: 'Inter', sans-serif;
}

.day-tab:hover {
  transform: translateY(-2px);
}

.day-tab.active {
  background: var(--pink);
  box-shadow: 3px 3px 0 var(--black);
}

.day-tab.hot::after {
  content: '🔥';
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 14px;
}

.day-tab-name {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.day-tab-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  margin-top: 2px;
}

.day-tab.active .day-tab-date {
  color: var(--black);
}

.day-tab-count {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-tab.active .day-tab-count {
  background: var(--white);
  color: var(--black);
}

.digest-content {
  padding: 20px;
}

.digest-day-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
}

.digest-section {
  margin-bottom: 28px;
}

.digest-section .section-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 12px;
  text-transform: lowercase;
}

.digest-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.digest-card-icon {
  width: 44px;
  height: 44px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.digest-card-info {
  flex: 1;
  min-width: 0;
}

.digest-card-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: lowercase;
}

.digest-card-business {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  margin-top: 2px;
}

.digest-card-time {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  background: var(--cream);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.digest-footer {
  position: fixed;
  bottom: 80px;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 3px solid var(--black);
  padding: 16px 20px;
  z-index: 10;
}

.week-stats {
  display: flex;
  justify-content: space-around;
}

.week-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.week-stat-value {
  font-size: 24px;
  font-weight: 900;
}

.week-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
}

.digest-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.15s ease;
  box-shadow: 4px 4px 0 var(--black);
}

.digest-promo:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

/* Popular Right Now Section */
.popular-section {
  margin-bottom: 28px;
}

.popular-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.popular-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
}

.popular-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.popular-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 4px 4px 0 var(--black);
}

.popular-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.popular-card:active {
  transform: translate(1px, 1px);
  box-shadow: 3px 3px 0 var(--black);
}

.popular-rank {
  font-size: 24px;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.rank-number {
  font-size: 18px;
  font-weight: 900;
  color: var(--gray-400);
}

.popular-info {
  flex: 1;
  min-width: 0;
}

.popular-name {
  display: block;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popular-meta {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: capitalize;
  margin-top: 2px;
}

.popular-stats {
  text-align: right;
  flex-shrink: 0;
}

.popular-checkins {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--pink);
}

.popular-time {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
}

/* Trending Badge on Business Cards */
.trending-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  z-index: 1;
}

/* Trending Carousel */
.trending-carousel {
  margin-bottom: 28px;
}

.trending-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 0 16px;
  scrollbar-width: none;
}

.trending-scroll::-webkit-scrollbar {
  display: none;
}

.trending-card {
  min-width: 160px;
  max-width: 160px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 4px 4px 0 var(--black);
  position: relative;
  flex-shrink: 0;
}

.trending-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 8px 0 var(--black);
}

.trending-card-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  z-index: 2;
}

.trending-card-image {
  height: 100px;
  position: relative;
}

.trending-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.trending-card-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
}

.trending-card-info {
  padding: 12px;
}

.trending-card-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.trending-card-checkins {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}

/* Popularity Badge on Business Detail */
.popularity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.popularity-icon {
  font-size: 16px;
}

.popularity-text {
  font-size: 13px;
  font-weight: 700;
}

/* Live Check-In Counter */
.live-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--mint);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.live-counter.pulse {
  transform: scale(1.05);
  background: var(--pink);
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.live-text {
  font-size: 13px;
  font-weight: 700;
}

/* Recently Viewed Section */
.recently-viewed {
  margin-bottom: 24px;
}

.recently-viewed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.clear-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: color 0.15s ease;
}

.clear-btn:hover {
  color: var(--pink);
  text-decoration: underline;
}

.recent-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 16px;
  scrollbar-width: none;
}

.recent-scroll::-webkit-scrollbar {
  display: none;
}

.recent-card {
  min-width: 140px;
  max-width: 140px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 3px 3px 0 var(--black);
  flex-shrink: 0;
}

.recent-card:hover {
  transform: translateY(-4px);
  box-shadow: 5px 7px 0 var(--black);
}

.recent-card-image {
  height: 80px;
  position: relative;
}

.recent-card-type {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 3px 8px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.recent-card-info {
  padding: 10px;
}

.recent-card-name {
  display: block;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.recent-card-neighborhood {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
}

/* Search Input Wrapper */
.search-container {
  position: relative;
  margin-bottom: 20px;
}

/* ================================================
   FEED PAGE & SOCIAL FEED CARDS
   ================================================ */

/* Feed Page */
.feed-page {
  padding: 20px;
  padding-bottom: 100px;
}

.feed-header {
  margin-bottom: 20px;
}

.feed-filter-tabs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.filter-tab {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--black);
  border-radius: 12px;
  background: var(--white);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.filter-tab.active {
  background: var(--pink);
  box-shadow: 3px 3px 0 var(--black);
}

.filter-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.create-post-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  margin-bottom: 20px;
  box-shadow: 3px 3px 0 var(--black);
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.create-post-btn:hover {
  background: var(--cream);
}

.create-post-icon {
  font-size: 20px;
}

.feed-loading, .feed-empty {
  text-align: center;
  padding: 60px 20px;
}

.feed-empty .empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.feed-empty .empty-hint {
  font-size: 14px;
  color: var(--gray-400);
  margin-top: 8px;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.load-more-btn {
  width: 100%;
  padding: 14px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s ease;
}

.load-more-btn:hover {
  background: var(--gray-200);
}

/* Feed Cards */
.feed-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
}

.feed-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.user-avatar, .business-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--light-blue);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}

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

.feed-card-info {
  flex: 1;
  min-width: 0;
}

.feed-card-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.feed-card-name:hover {
  text-decoration: underline;
}

.business-name {
  color: var(--pink);
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
}

.feed-card-meta {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.tagged-business {
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
}

.tagged-business:hover {
  text-decoration: underline;
}

.post-type-badge {
  padding: 4px 10px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.check-in-badge, .hangout-badge {
  font-size: 20px;
}

.review-rating {
  font-size: 12px;
}

.feed-card-content {
  padding: 0 16px 14px;
}

.feed-card-content p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* Media Grid */
.feed-card-media {
  display: grid;
  gap: 2px;
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}

.feed-card-media.media-count-1 {
  grid-template-columns: 1fr;
}

.feed-card-media.media-count-2 {
  grid-template-columns: 1fr 1fr;
}

.feed-card-media.media-count-3 {
  grid-template-columns: 1fr 1fr;
}

.feed-card-media.media-count-3 .media-item:first-child {
  grid-row: span 2;
}

.feed-card-media.media-count-4 {
  grid-template-columns: 1fr 1fr;
}

.media-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.feed-card-media.media-count-1 .media-item {
  aspect-ratio: 16/9;
  max-height: 300px;
}

.media-item img, .media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-more {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 900;
}

/* Check-in business card */
.check-in-business-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 14px;
  padding: 12px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.check-in-business-card:hover {
  background: var(--light-blue);
}

.business-mini-image {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--black);
}

.business-mini-info {
  flex: 1;
}

.business-mini-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.business-mini-meta {
  font-size: 12px;
  color: var(--gray-500);
}

.business-mini-arrow {
  font-size: 18px;
  color: var(--gray-400);
}

/* Feed Card Actions */
.feed-card-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 2px solid var(--cream);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cream);
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.action-btn:hover {
  background: var(--gray-200);
}

.action-btn.liked {
  background: #fee2e2;
}

.action-btn.primary {
  background: var(--pink);
}

/* Hangout Preview */
.hangout-preview {
  margin: 0 16px 14px;
  padding: 14px;
  background: linear-gradient(135deg, var(--light-blue), var(--mint));
  border: 2px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hangout-preview:hover {
  transform: translateY(-2px);
}

.hangout-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hangout-type-icon {
  font-size: 20px;
}

.hangout-preview-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.hangout-preview-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.hangout-preview-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}

.going-count {
  color: var(--black);
}

.spots-left {
  color: #059669;
}

.spots-full {
  color: #dc2626;
}

/* Comments Section */
.comments-section {
  border-top: 2px solid var(--cream);
  padding: 14px 16px;
  background: var(--cream);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.comment {
  display: flex;
  gap: 10px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--light-blue);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  background: var(--white);
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid var(--black);
}

.comment-author {
  font-size: 13px;
  font-weight: 800;
  display: block;
  margin-bottom: 2px;
}

.comment-text {
  font-size: 14px;
  margin: 0 0 4px;
}

.comment-time {
  font-size: 11px;
  color: var(--gray-400);
}

.comments-loading {
  text-align: center;
  padding: 12px;
  color: var(--gray-500);
}

.comment-input-row {
  display: flex;
  gap: 8px;
}

.comment-input-row input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}

.comment-input-row button {
  padding: 10px 18px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.comment-input-row button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Create Post Modal */
.create-post-modal {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 500px;
}

.create-post-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--cream);
  margin-bottom: 16px;
}

.cancel-btn {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-500);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.post-btn {
  padding: 8px 18px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.post-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.post-composer {
  flex: 1;
  overflow-y: auto;
}

.composer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.visibility-select {
  padding: 6px 12px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
}

.post-composer textarea {
  width: 100%;
  border: none;
  font-size: 16px;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
}

.post-composer textarea:focus {
  outline: none;
}

.tagged-business-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: 10px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}

.tagged-business-preview button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.media-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.media-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--black);
}

.media-preview-item img, .media-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-media {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-progress {
  text-align: center;
  padding: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

.composer-actions {
  display: flex;
  gap: 12px;
  padding-top: 14px;
  border-top: 2px solid var(--cream);
  margin-top: 14px;
}

.composer-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--cream);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.composer-action input[type="file"] {
  display: none;
}

/* Business Search Modal */
.business-search-modal {
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.search-input-container {
  margin-bottom: 16px;
}

.search-input-container input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
}

.search-loading, .search-empty, .search-prompt {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-500);
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-result-item:hover {
  background: var(--light-blue);
}

.search-result-item img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--black);
}

.search-result-info {
  flex: 1;
}

.search-result-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}

.search-result-meta {
  font-size: 12px;
  color: var(--gray-500);
}

.refresh-indicator {
  text-align: center;
  padding: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

/* ================================================
   BUSINESS DASHBOARD
   ================================================ */

/* Business Dashboard */
.business-dashboard {
  padding: 20px;
  padding-bottom: 100px;
}

.dashboard-header {
  margin-bottom: 24px;
}

.dashboard-header .back-btn {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  margin-bottom: 12px;
  font-family: 'Inter', sans-serif;
}

.dashboard-business-info h1 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 4px;
}

.dashboard-business-info .business-type {
  font-size: 14px;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: capitalize;
}

.view-public-btn {
  margin-top: 12px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.dashboard-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--cream);
}

.dashboard-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-width: 70px;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.dashboard-tab.active {
  background: var(--pink);
  box-shadow: 3px 3px 0 var(--black);
}

.dashboard-tab span:first-child {
  font-size: 20px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 3px 3px 0 var(--black);
}

.stat-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 28px;
  font-weight: 900;
  display: block;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
}

/* Quick Actions */
.quick-actions {
  margin-bottom: 24px;
}

.quick-actions h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.quick-action-btn:hover {
  background: var(--cream);
  transform: translateY(-2px);
}

.quick-action-btn span:first-child {
  font-size: 20px;
}

/* Recent Activity */
.recent-activity h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
}

.activity-list {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--black);
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 2px solid var(--cream);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  font-size: 20px;
}

.activity-content {
  flex: 1;
  font-size: 14px;
}

.activity-user {
  font-weight: 700;
}

.activity-time {
  display: block;
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 2px;
}

/* Dashboard Posts */
.dashboard-posts .posts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-post-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 3px 3px 0 var(--black);
}

.dashboard-post-card.pinned {
  border-color: var(--pink);
}

.pinned-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--pink);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
}

.post-type-indicator {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.post-content {
  font-size: 15px;
  margin-bottom: 12px;
}

.post-media-preview {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.media-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--black);
}

.media-thumb img, .media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 12px;
}

.post-date {
  margin-left: auto;
}

.post-actions {
  display: flex;
  gap: 8px;
}

.post-actions button {
  padding: 8px 14px;
  background: var(--cream);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.post-actions .delete-btn:hover {
  background: #fee2e2;
}

.post-type-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--cream);
}

.post-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-width: 70px;
  font-family: 'Inter', sans-serif;
}

.post-type-btn.active {
  background: var(--pink);
  box-shadow: 2px 2px 0 var(--black);
}

.post-type-btn span:first-child {
  font-size: 20px;
}

/* Dashboard Reviews */
.rating-summary {
  display: flex;
  gap: 24px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 3px 3px 0 var(--black);
}

.rating-overview {
  text-align: center;
  min-width: 100px;
}

.big-rating {
  font-size: 48px;
  font-weight: 900;
  display: block;
}

.rating-stars {
  font-size: 14px;
}

.review-count {
  font-size: 12px;
  color: var(--gray-500);
}

.rating-bars {
  flex: 1;
}

.rating-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rating-label {
  width: 30px;
  font-size: 12px;
  font-weight: 700;
}

.rating-bar {
  flex: 1;
  height: 12px;
  background: var(--cream);
  border-radius: 6px;
  overflow: hidden;
}

.rating-bar-fill {
  height: 100%;
  background: var(--yellow);
  border-radius: 6px;
}

.rating-count {
  width: 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-align: right;
}

.quick-tags-summary {
  background: var(--cream);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.quick-tags-summary h4 {
  font-size: 14px;
  margin-bottom: 10px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  padding: 6px 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
}

.reviews-list h4 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
}

.review-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 3px 3px 0 var(--black);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.reviewer-name {
  font-weight: 800;
  font-size: 14px;
}

.review-rating {
  font-size: 12px;
}

.review-date {
  margin-left: auto;
  font-size: 12px;
  color: var(--gray-400);
}

.review-content {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.review-reply {
  background: var(--cream);
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.reply-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  display: block;
  margin-bottom: 4px;
}

.reply-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.reply-form textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--black);
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 10px;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

.reply-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Analytics */
.time-range-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.time-range-selector button {
  padding: 10px 18px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.time-range-selector button.active {
  background: var(--pink);
}

.analytics-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.summary-stat {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  box-shadow: 3px 3px 0 var(--black);
}

.summary-value {
  font-size: 36px;
  font-weight: 900;
  display: block;
}

.summary-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-600);
}

.summary-avg {
  font-size: 12px;
  color: var(--gray-400);
}

.analytics-chart {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 3px 3px 0 var(--black);
}

.analytics-chart h4 {
  font-size: 14px;
  margin-bottom: 16px;
}

.chart-container {
  height: 150px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
}

.chart-bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart-bar {
  width: 100%;
  background: var(--pink);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
}

.chart-bar.checkins {
  background: var(--mint);
}

.bar-tooltip {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
}

.chart-bar:hover .bar-tooltip {
  opacity: 1;
}

.bar-label {
  font-size: 8px;
  font-weight: 600;
  color: var(--gray-400);
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
}

.best-days h4 {
  font-size: 14px;
  margin-bottom: 12px;
}

.best-days-list {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--black);
}

.best-day-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--cream);
}

.best-day-item:last-child {
  border-bottom: none;
}

.best-day-rank {
  font-weight: 900;
  color: var(--gray-400);
  width: 30px;
}

.best-day-date {
  flex: 1;
  font-weight: 600;
}

.best-day-count {
  font-weight: 700;
  color: var(--pink);
}

/* Settings */
.dashboard-settings h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 20px;
}

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

.settings-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.settings-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.save-btn {
  width: 100%;
  margin-top: 20px;
}

/* Hours Editor */
.hours-editor {
  background: var(--cream);
  border-radius: 12px;
  padding: 12px;
}

.hours-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-200);
}

.hours-row:last-child {
  border-bottom: none;
}

.day-label {
  width: 80px;
  font-weight: 700;
  font-size: 13px;
}

.closed-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}

.time-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.time-inputs input {
  padding: 6px 10px;
  border: 2px solid var(--black);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.time-inputs span {
  font-size: 12px;
  color: var(--gray-500);
}

/* Dashboard Events */
.dashboard-events .events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.dashboard-events h3 {
  font-size: 18px;
  font-weight: 800;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.filter-tabs button {
  padding: 8px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

.filter-tabs button.active {
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--black);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 3px 3px 0 var(--black);
}

.event-card.unpublished {
  opacity: 0.7;
  border-style: dashed;
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.event-category {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--cream);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.category-emoji {
  font-size: 16px;
}

.draft-badge {
  padding: 4px 10px;
  background: var(--gray-200);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-600);
}

.event-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.event-description {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 12px;
  line-height: 1.4;
}

.event-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.event-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.detail-icon {
  font-size: 16px;
}

.event-ticket-link {
  margin-bottom: 12px;
}

.event-ticket-link a {
  display: inline-block;
  padding: 8px 14px;
  background: var(--light-blue);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--black);
}

.event-actions {
  display: flex;
  gap: 8px;
}

.event-actions button {
  padding: 8px 14px;
  background: var(--cream);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.event-actions .delete-btn:hover {
  background: #fee2e2;
}

/* Event Editor Modal */
.event-editor-modal {
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.event-editor-form {
  padding: 20px;
}

.event-editor-form .form-group {
  margin-bottom: 20px;
}

.event-editor-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.event-editor-form .input-field {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.event-editor-form textarea.input-field {
  resize: vertical;
  min-height: 80px;
}

.event-editor-form .form-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 6px;
  font-weight: 500;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: center;
}

.category-btn.active {
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--black);
}

.category-btn .category-emoji {
  font-size: 24px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.days-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.day-btn {
  padding: 10px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.day-btn.active {
  background: var(--mint);
  box-shadow: 2px 2px 0 var(--black);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pricing-toggle {
  display: flex;
  gap: 12px;
}

.pricing-btn {
  flex: 1;
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.pricing-btn.active {
  background: var(--light-blue);
  box-shadow: 2px 2px 0 var(--black);
}

/* Today's Events Component */
.todays-events {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.todays-events-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--black);
}

.todays-events-header h2 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 8px;
}

.events-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-600);
}

.events-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.count-badge {
  font-size: 18px;
  font-weight: 900;
}

/* Loading State */
.loading-state {
  text-align: center;
  padding: 40px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 4px solid var(--cream);
  border-top: 4px solid var(--pink);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.loading-state p {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-500);
}

/* Error State */
.error-state {
  text-align: center;
  padding: 40px 20px;
}

.error-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.error-state p {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.error-message {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 600 !important;
}

/* Empty State */
.empty-events-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--cream);
  border-radius: 12px;
  border: 2px dashed var(--black);
}

.empty-icon {
  font-size: 64px;
  display: block;
  margin-bottom: 16px;
}

.empty-events-state h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}

.empty-events-state p {
  font-size: 14px;
  color: var(--gray-600);
  font-weight: 600;
}

/* Time Group */
.events-time-group {
  margin-bottom: 32px;
}

.events-time-group:last-child {
  margin-bottom: 0;
}

.time-group-label {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 16px;
  padding: 8px 16px;
  background: var(--cream);
  border-radius: 10px;
  display: inline-block;
  border: 2px solid var(--black);
}

/* Events Grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
}

/* Event Card */
.event-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--black);
  transition: all 0.2s ease;
  cursor: pointer;
}

.event-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.event-card:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--black);
}

/* Category Badge */
.event-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}

.category-emoji {
  font-size: 16px;
}

.category-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Event Title */
.event-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 12px;
  line-height: 1.3;
}

/* Business Info */
.event-business {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--cream);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.event-business:hover {
  background: var(--yellow);
}

.business-logo-tiny {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid var(--black);
  object-fit: cover;
  flex-shrink: 0;
}

.business-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.business-name {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-neighborhood {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Event Time */
.event-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  padding: 8px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 8px;
}

.time-icon {
  font-size: 16px;
}

/* Event Description */
.event-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-600);
  margin-bottom: 12px;
  font-weight: 500;
}

/* Event Footer */
.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--cream);
}

.event-pricing {
  flex: 1;
}

.free-badge {
  display: inline-block;
  padding: 6px 12px;
  background: var(--mint);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-badge {
  display: inline-block;
  padding: 6px 12px;
  background: var(--light-blue);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.ticket-link {
  display: inline-block;
  padding: 8px 14px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}

.ticket-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}

.ticket-link:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--black);
}

/* Create Event Form */
.create-event-form {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  max-width: 700px;
  margin: 0 auto;
}

.form-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--black);
}

.form-header h2 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
}

.form-subtitle {
  font-size: 15px;
  color: var(--gray-600);
  font-weight: 600;
}

/* Form Error */
.form-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fee2e2;
  border: 3px solid #dc2626;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 700;
  color: #991b1b;
}

.form-error span:first-child {
  font-size: 24px;
}

/* Form Groups */
.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-label .required {
  color: var(--pink);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 3px solid var(--black);
  border-radius: 10px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  background: var(--white);
  transition: all 0.15s;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--black);
  transform: translate(-2px, -2px);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.form-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 6px;
  font-weight: 600;
}

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Category Selector */
.category-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.category-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}

.category-option:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}

.category-option.active {
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--black);
  transform: translate(-2px, -2px);
}

.cat-emoji {
  font-size: 28px;
}

.cat-label {
  text-align: center;
}

/* Toggle Label */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 10px;
  font-weight: 700;
  transition: background 0.15s;
}

.toggle-label:hover {
  background: var(--yellow);
}

.toggle-label input[type="checkbox"] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  accent-color: var(--pink);
}

.toggle-text {
  font-size: 15px;
}

/* Days Grid */
.days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}

.day-checkbox {
  position: relative;
  padding: 14px 10px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.day-checkbox:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}

.day-checkbox.active {
  background: var(--mint);
  box-shadow: 4px 4px 0 var(--black);
  transform: translate(-2px, -2px);
}

.day-short {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.check-mark {
  font-size: 18px;
  color: var(--black);
}

/* Pricing Buttons */
.pricing-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pricing-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}

.pricing-option:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}

.pricing-option.active {
  background: var(--light-blue);
  box-shadow: 4px 4px 0 var(--black);
  transform: translate(-2px, -2px);
}

.pricing-option span:first-child {
  font-size: 32px;
}

/* File Upload */
.file-upload-label {
  display: block;
  cursor: pointer;
}

.file-input {
  display: none;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  background: var(--cream);
  border: 3px dashed var(--black);
  border-radius: 12px;
  transition: all 0.15s;
}

.upload-area:hover {
  background: var(--yellow);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}

.upload-icon {
  font-size: 48px;
}

.upload-text {
  font-size: 15px;
  font-weight: 700;
}

.upload-hint {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

/* Image Preview */
.image-preview-container {
  position: relative;
}

.image-preview {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border: 3px solid var(--black);
  border-radius: 12px;
  display: block;
}

.remove-image-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px 14px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  box-shadow: 2px 2px 0 var(--black);
}

.remove-image-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--black);
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 3px solid var(--black);
}

.form-actions .btn {
  flex: 1;
  padding: 16px;
  font-size: 15px;
}

.form-actions .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .create-event-form {
    padding: 24px;
    border-radius: 12px;
  }

  .form-header h2 {
    font-size: 24px;
  }

  .category-selector {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .days-grid {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  }

  .form-actions {
    flex-direction: column;
  }
}

/* Business Upcoming Events */
.upcoming-events {
  margin-top: 20px;
}

.upcoming-events-loading {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.upcoming-events-empty {
  text-align: center;
  padding: 40px 20px;
  background: var(--cream);
  border-radius: 12px;
  border: 2px dashed var(--black);
}

.upcoming-events-empty .empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.upcoming-events-empty p {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.upcoming-events-empty .empty-hint {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 600;
}

.upcoming-events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Event Card */
.upcoming-event-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--black);
  cursor: pointer;
  transition: all 0.15s;
}

.upcoming-event-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
}

.upcoming-event-card:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--black);
}

.event-card-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  border: 2px solid var(--black);
  border-radius: 10px;
  min-width: 60px;
  flex-shrink: 0;
}

.event-card-badge .badge-emoji {
  font-size: 24px;
}

.event-card-badge .badge-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.2;
}

.event-card-content {
  flex: 1;
  min-width: 0;
}

.event-card-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
  line-height: 1.3;
}

.event-card-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 4px;
}

.info-icon-small {
  font-size: 14px;
}

.event-card-pricing {
  margin-top: 8px;
}

.free-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--mint);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.paid-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--light-blue);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

.event-card-arrow {
  font-size: 20px;
  color: var(--gray-400);
  flex-shrink: 0;
}

/* Event Detail Modal */
.event-detail-modal {
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.event-detail-header {
  position: relative;
  margin-bottom: 20px;
}

.modal-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 10;
}

.modal-close-btn:hover {
  background: var(--pink);
  transform: rotate(90deg);
}

.event-detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-detail-badge span:first-child {
  font-size: 18px;
}

.event-detail-image {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  border: 3px solid var(--black);
  border-radius: 12px;
  margin-bottom: 20px;
}

.event-detail-title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 12px;
  line-height: 1.3;
}

.event-detail-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 20px;
}

.event-detail-info {
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 16px;
}

.event-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-200);
}

.event-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.event-info-row:first-child {
  padding-top: 0;
}

.event-info-row .info-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.event-info-row > div,
.event-info-row > span {
  flex: 1;
  font-size: 14px;
  color: var(--gray-700);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .event-card-badge {
    min-width: 50px;
    padding: 8px 6px;
  }

  .event-card-badge .badge-emoji {
    font-size: 20px;
  }

  .event-card-badge .badge-label {
    font-size: 8px;
  }

  .event-card-title {
    font-size: 15px;
  }

  .event-card-info {
    font-size: 12px;
  }

  .event-detail-title {
    font-size: 20px;
  }
}

/* Claim Business */
.claim-status {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-top: 16px;
}

.claim-status.pending {
  background: #fef3c7;
  color: #92400e;
}

.claim-status.approved {
  background: #dcfce7;
  color: #166534;
}

.claim-status.rejected {
  background: #fee2e2;
  color: #991b1b;
}

.claim-btn {
  width: 100%;
  margin-top: 16px;
}

/* Owned Businesses */
.owned-businesses {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.owned-business-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  transition: all 0.15s ease;
}

.owned-business-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
}

.owned-business-card .business-name {
  flex: 1;
  font-weight: 800;
  font-size: 16px;
}

.owned-business-card .business-type {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: capitalize;
}

.dashboard-arrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--pink);
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 16px;
  font-size: 18px;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 14px 44px 14px 48px;
  font-size: 15px;
  font-weight: 600;
  border: 3px solid var(--black);
  border-radius: 14px;
  background: var(--white);
  font-family: 'Inter', sans-serif;
  transition: box-shadow 0.15s ease;
}

.search-input:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--black);
}

.search-clear {
  position: absolute;
  right: 14px;
  background: var(--gray-200);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.search-clear:hover {
  background: var(--pink);
  color: var(--white);
}

/* Search History Dropdown */
.search-history-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  overflow: hidden;
  z-index: 100;
  box-shadow: 6px 6px 0 var(--black);
  max-height: 400px;
  overflow-y: auto;
}

.search-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 2px solid var(--cream);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
}

.search-history-header button {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-transform: lowercase;
}

.search-history-header button:hover {
  text-decoration: underline;
}

.search-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-history-item:hover {
  background: var(--cream);
}

.history-icon {
  font-size: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.history-query {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
}

.history-remove {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-400);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.history-remove:hover {
  color: var(--pink);
  background: var(--cream);
}

/* Menu System */
.menu-preview {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 0 var(--black);
}

.menu-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.view-full-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: opacity 0.15s ease;
}

.view-full-btn:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.menu-section-preview {
  margin-bottom: 16px;
}

.menu-section-preview:last-of-type {
  margin-bottom: 12px;
}

.menu-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--gray-600);
  text-transform: lowercase;
}

.menu-items-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--cream);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.menu-item-preview:hover {
  background: #e8e4dc;
}

.menu-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.menu-item-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--yellow);
  border: 1px solid var(--black);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.menu-item-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--gray-600);
  white-space: nowrap;
  flex-shrink: 0;
}

.menu-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
  text-align: center;
  padding: 6px;
}

.menu-more-sections {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  text-align: center;
  padding: 8px;
  border-top: 2px dashed var(--gray-200);
  margin-top: 4px;
}

.menu-updated {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  text-align: right;
  margin-top: 12px;
}

/* Full Menu Modal */
.menu-modal {
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.menu-modal-header {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--cream);
  margin-bottom: 16px;
}

.menu-modal-header h2 {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 4px;
  text-transform: lowercase;
}

.menu-modal-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: lowercase;
}

.menu-search {
  margin-bottom: 16px;
}

.menu-search-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid var(--black);
  border-radius: 10px;
  background: var(--cream);
  font-family: 'Inter', sans-serif;
  transition: background 0.15s ease;
}

.menu-search-input:focus {
  outline: none;
  background: var(--white);
  box-shadow: 2px 2px 0 var(--black);
}

.menu-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--cream);
  scrollbar-width: none;
}

.menu-tabs::-webkit-scrollbar {
  display: none;
}

.menu-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}

.menu-tab:hover {
  transform: translateY(-2px);
}

.menu-tab.active {
  background: var(--pink);
  box-shadow: 3px 3px 0 var(--black);
}

.menu-items {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.menu-section {
  margin-bottom: 8px;
}

.menu-item {
  padding: 14px;
  background: var(--cream);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: all 0.15s ease;
}

.menu-item:hover {
  background: #e8e4dc;
}

.menu-item.has-special {
  background: #fff5f7;
  border: 2px solid var(--pink);
}

.menu-item-main {
  display: flex;
  flex-direction: column;
}

.menu-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
  gap: 12px;
}

.menu-item-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 8px;
  line-height: 1.4;
  font-weight: 600;
}

.menu-item-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.menu-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  color: var(--gray-600);
  text-transform: uppercase;
}

.menu-item-pricing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.price-original {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-400);
  text-decoration: line-through;
}

.price-special {
  font-size: 16px;
  font-weight: 800;
  color: var(--pink);
}

.menu-special-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
}

.menu-footer {
  padding-top: 12px;
  border-top: 2px solid var(--cream);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  text-align: center;
  margin-top: 12px;
}

.menu-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 18px;
  opacity: 0.7;
  z-index: 1;
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-400);
  font-weight: 600;
  font-size: 14px;
}

.loading-text {
  text-align: center;
  padding: 40px;
  color: var(--gray-400);
  font-weight: 600;
  font-size: 14px;
}

.empty-state-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.digest-promo-icon {
  font-size: 32px;
}

.digest-promo-content {
  flex: 1;
}

.digest-promo-title {
  display: block;
  font-size: 16px;
  font-weight: 800;
  text-transform: lowercase;
}

.digest-promo-text {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pink);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-state-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.empty-state-text {
  font-size: 14px;
  color: var(--gray-500);
  font-weight: 600;
}

/* Calendar Export Buttons */
.calendar-btn-wrapper {
  position: relative;
}

.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 6px;
  border: 1px solid var(--black);
}

.neighborhood-chip.active .chip-count {
  background: var(--black);
  color: var(--mint);
}

.neighborhood-chip.late-active .chip-count {
  background: var(--white);
  color: var(--black);
}

/* ===================== */
/* FRIENDS PAGE */
/* ===================== */
.friends-page { 
  padding: 20px; 
  padding-bottom: 100px; 
}

.friends-header { 
  margin-bottom: 20px; 
}

.friends-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.friends-tabs .tab {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--black);
  border-radius: 10px;
  background: var(--white);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-transform: none;
}

.friends-tabs .tab.active {
  background: var(--pink);
  box-shadow: 3px 3px 0 var(--black);
}

.friends-tabs .tab .badge {
  background: var(--black);
  color: var(--white);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 4px;
}

.friend-card, 
.request-card, 
.search-result-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  margin-bottom: 10px;
}

.friend-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--light-blue);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.friend-info { 
  flex: 1; 
  cursor: pointer; 
}

.friend-name { 
  display: block; 
  font-weight: 800; 
  font-size: 15px; 
}

.friend-email { 
  font-size: 12px; 
  color: var(--gray-500); 
  display: block;
}

.request-actions { 
  display: flex; 
  gap: 8px; 
}

.remove-friend-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--gray-400);
  padding: 4px 8px;
}

.remove-friend-btn:hover {
  color: #e53e3e;
}

.status-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  padding: 4px 10px;
  background: var(--cream);
  border-radius: 12px;
}

.find-friends .search-input-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.find-friends .input-field { 
  flex: 1; 
}

/* ===================== */
/* HANGOUT PLANNER */
/* ===================== */
.hangout-planner { 
  padding: 20px; 
  padding-bottom: 100px; 
}

.hangout-header { 
  margin-bottom: 20px; 
}

.hangout-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-btn {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--black);
  border-radius: 8px;
  background: var(--white);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-transform: none;
}

.filter-btn.active { 
  background: var(--pink); 
}

.new-hangout-btn { 
  width: 100%; 
  margin-bottom: 20px; 
}

.new-hangout-form {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 0 var(--black);
}

.new-hangout-form h3 { 
  margin-bottom: 16px; 
  font-size: 18px; 
}

.new-hangout-form .input-field { 
  margin-bottom: 12px; 
}

.type-selector { 
  display: flex; 
  gap: 12px; 
  margin-bottom: 16px; 
}

.type-option { 
  flex: 1; 
}

.type-option input { 
  display: none; 
}

.type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 2px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.type-option input:checked + .type-card {
  background: var(--mint);
  box-shadow: 3px 3px 0 var(--black);
}

.type-icon { 
  font-size: 28px; 
  margin-bottom: 6px; 
}

.type-label { 
  font-weight: 800; 
  font-size: 14px; 
}

.type-desc { 
  font-size: 11px; 
  color: var(--gray-500); 
}

.form-row { 
  display: flex; 
  gap: 12px; 
}

.form-row .input-field { 
  flex: 1; 
}

.visibility-selector { 
  margin-bottom: 16px; 
}

.visibility-selector label { 
  font-weight: 700; 
  font-size: 14px; 
  display: block; 
  margin-bottom: 10px; 
}

.visibility-options { 
  display: flex; 
  gap: 8px; 
}

.visibility-option {
  flex: 1;
  padding: 12px 8px;
  border: 2px solid var(--black);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  text-align: center;
}

.visibility-option.active { 
  background: var(--light-blue); 
  box-shadow: 2px 2px 0 var(--black); 
}

.vis-icon { 
  font-size: 20px; 
  display: block; 
  margin-bottom: 4px; 
}

.vis-label { 
  font-weight: 800; 
  font-size: 12px; 
  display: block; 
}

.vis-desc { 
  font-size: 10px; 
  color: var(--gray-500); 
}

.max-attendees-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.max-attendees-row label { 
  font-size: 13px; 
  font-weight: 700; 
}

.max-attendees-row .input-field.small { 
  width: 100px; 
  margin: 0; 
}

/* Vibe Tags Section */
.vibe-tags-section {
  margin-bottom: 20px;
}

.section-label {
  display: block;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 12px;
  text-transform: lowercase;
}

.vibe-tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.vibe-tag-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: 3px solid var(--black);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.vibe-tag-chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--black);
}

.vibe-tag-chip.selected {
  box-shadow: 3px 3px 0 var(--black);
  transform: translate(-2px, -2px);
}

.tag-emoji {
  font-size: 18px;
  line-height: 1;
}

.tag-label {
  font-size: 13px;
}

/* Requirements Section */
.requirements-section {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
}

.requirement-field {
  margin-bottom: 12px;
}

.requirement-field:last-child {
  margin-bottom: 0;
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #666;
}

.requirement-field .input-field {
  margin-bottom: 0;
}

.requirement-field .input-field.small {
  width: 120px;
}

/* Discovery Scope Section */
.discovery-scope-section {
  margin-bottom: 20px;
}

.discovery-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.discovery-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.discovery-option:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--black);
}

.discovery-option.selected {
  background: var(--mint);
  box-shadow: 3px 3px 0 var(--black);
  transform: translate(-2px, -2px);
}

.discovery-option input[type="radio"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--pink);
  flex-shrink: 0;
}

.discovery-content {
  flex: 1;
}

.discovery-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}

.discovery-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* Hangout Discovery Styles */
.hangout-discovery {
  padding-top: 20px;
}

.discovery-header {
  margin-bottom: 24px;
}

.discovery-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: lowercase;
}

.discovery-subtitle {
  font-size: 15px;
  color: #666;
  font-weight: 600;
}

/* Discovery Filters */
.discovery-filters {
  background: var(--cream);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 4px 4px 0 var(--black);
  overflow: visible; /* Ensure buttons aren't clipped */
}

.filter-section {
  margin-bottom: 20px;
  overflow: visible; /* Ensure buttons aren't clipped */
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px; /* Increased from 10px to give more space */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible; /* Changed from overflow-x: auto */
  padding-bottom: 4px;
  padding-top: 4px; /* Add padding at top to prevent clipping */
}

.filter-pill {
  padding: 8px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.filter-pill:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.filter-pill.active {
  background: var(--pink);
  box-shadow: 2px 2px 0 var(--black);
  transform: translateY(-2px);
}

.vibe-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vibe-filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 2px solid var(--black);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.vibe-filter-chip:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.vibe-filter-chip.selected {
  box-shadow: 2px 2px 0 var(--black);
  transform: translateY(-2px);
}

.vibe-more-btn {
  padding: 8px 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.vibe-more-btn:hover {
  background: var(--yellow);
}

/* Discovery Results */
.discovery-results {
  margin-top: 24px;
}

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .discovery-grid {
    grid-template-columns: 1fr;
  }
}

/* Discovery Card */
.hangout-discovery-card {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 4px 4px 0 var(--black);
}

.hangout-discovery-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.discovery-card-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cream);
}

.discovery-card-title {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: lowercase;
  line-height: 1.2;
}

.discovery-card-host {
  display: flex;
  align-items: center;
  gap: 8px;
}

.host-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pink);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.host-name {
  font-size: 13px;
  font-weight: 600;
  color: #666;
}

.mutual-friends-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: 2px 2px 0 var(--black);
}

.mutual-avatar-stack {
  display: flex;
  margin-right: 4px;
}

.mutual-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--black);
  background: var(--light-blue);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  margin-left: -8px;
  position: relative;
}

.mutual-avatar:first-child {
  margin-left: 0;
}

.discovery-card-venue,
.discovery-card-datetime,
.discovery-card-going {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.venue-icon,
.datetime-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.venue-text,
.datetime-text {
  color: #333;
}

.discovery-card-spots {
  margin: 12px 0;
}

.spots-text {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  margin-bottom: 6px;
}

.spots-progress-bar {
  height: 8px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 4px;
  overflow: hidden;
}

.spots-progress-fill {
  height: 100%;
  background: var(--mint);
  transition: width 0.3s ease;
}

.discovery-card-vibes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.discovery-vibe-chip {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.discovery-vibe-more {
  display: inline-block;
  padding: 4px 10px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.discovery-card-requirements {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
}

.discovery-card-custom-req {
  font-size: 13px;
  font-style: italic;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.4;
}

.discovery-join-btn {
  width: 100%;
  margin-top: 12px;
}

.join-hangout-btn {
  width: 100%;
  position: relative;
}

/* Button variants for join states */
.btn-muted {
  background: var(--cream);
  color: #666;
  border: 2px solid var(--black);
  font-weight: 700;
  cursor: pointer;
}

.btn-muted:hover {
  background: #e5e0d8;
}

.btn-success {
  background: var(--mint);
  color: var(--black);
  border: 3px solid var(--black);
  font-weight: 800;
  cursor: default;
  box-shadow: 3px 3px 0 var(--black);
}

.btn-disabled {
  background: #e0e0e0;
  color: #999;
  border: 2px solid #ccc;
  cursor: not-allowed;
}

/* Cancel Modal */
.cancel-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.cancel-modal {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 8px 8px 0 var(--black);
}

.cancel-modal h3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 12px;
}

.cancel-modal p {
  font-size: 15px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 12px;
}

.modal-actions .btn {
  flex: 1;
}

.btn-destructive {
  background: var(--pink);
  color: var(--black);
  border: 3px solid var(--black);
  font-weight: 800;
  cursor: pointer;
}

.btn-destructive:hover {
  background: #ff6b9d;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--black);
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 3px solid var(--black);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--black);
  z-index: 10001;
  min-width: 300px;
  max-width: 90vw;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.toast-icon {
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}

.toast-close {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  color: var(--black);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.toast-close:hover {
  opacity: 0.7;
}

/* Request Status Banner */
.request-status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 3px solid var(--black);
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--black);
}

.request-status-banner.pending {
  background: var(--yellow);
}

.request-status-banner.waitlisted {
  background: #e0e0e0;
}

.request-status-banner.approved {
  background: var(--mint);
}

.request-status-banner.declined {
  background: var(--pink);
}

.banner-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.banner-message {
  flex: 1;
  line-height: 1.4;
}

/* Hangout Join Section */
.hangout-join-section {
  margin-bottom: 24px;
}

/* Hangouts Tonight Widget */
.hangouts-tonight-widget {
  margin-bottom: 32px;
}

.today-hangouts-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.today-hangouts-scroll::-webkit-scrollbar {
  height: 8px;
}

.today-hangouts-scroll::-webkit-scrollbar-track {
  background: var(--cream);
  border-radius: 4px;
}

.today-hangouts-scroll::-webkit-scrollbar-thumb {
  background: var(--black);
  border-radius: 4px;
}

/* Today Hangout Card */
.today-hangout-card {
  background: var(--cream);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 16px;
  min-width: 220px;
  max-width: 220px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 3px 3px 0 var(--black);
  flex-shrink: 0;
}

.today-hangout-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--black);
}

.today-hangout-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 6px;
  line-height: 1.2;
  text-transform: lowercase;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.today-hangout-host {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}

.today-mutual-friends {
  color: var(--black);
  font-weight: 700;
}

.today-hangout-divider {
  height: 2px;
  background: var(--black);
  margin: 10px 0;
}

.today-hangout-venue,
.today-hangout-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.today-hangout-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.today-hangout-spots {
  margin: 8px 0;
}

.today-spots-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

.today-spots-bar {
  height: 4px;
  background: var(--white);
  border: 1px solid var(--black);
  border-radius: 2px;
  overflow: hidden;
}

.today-spots-fill {
  height: 100%;
  background: var(--mint);
  transition: width 0.3s ease;
}

.today-hangout-vibes {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.today-vibe-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 14px;
}

.today-hangout-button-wrapper {
  margin-top: 12px;
}

.today-hangout-button-wrapper .join-hangout-btn {
  width: 100%;
  padding: 10px;
  font-size: 13px;
}

/* Today Hangout Skeleton */
.today-hangout-skeleton {
  min-width: 220px;
  max-width: 220px;
  height: 320px;
  background: linear-gradient(
    90deg,
    var(--cream) 0%,
    #f0ebe3 50%,
    var(--cream) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border: 3px solid var(--black);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--black);
  flex-shrink: 0;
}

/* Discovery Loading State */
.discovery-loading {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.skeleton-card {
  height: 280px;
  background: linear-gradient(
    90deg,
    var(--cream) 0%,
    #f0ebe3 50%,
    var(--cream) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border: 4px solid var(--black);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--black);
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Discovery Empty State */
.discovery-empty {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.discovery-empty h3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 8px;
}

.discovery-empty p {
  font-size: 15px;
  color: #666;
  margin-bottom: 24px;
  line-height: 1.5;
}

.hangout-list { 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

.hangout-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
}

/* ===================== */
/* VENUE HANGOUTS SECTION */
/* ===================== */

.venue-hangouts-section {
  margin-top: 32px;
}

.venue-hangouts-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.venue-hangouts-title {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 4px;
}

.venue-hangouts-subtitle {
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.venue-hangouts-see-all {
  background: none;
  border: none;
  color: var(--pink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

.venue-hangouts-see-all:hover {
  text-decoration: underline;
}

.venue-hangout-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.venue-hangout-card {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 4px 4px 0 var(--black);
  cursor: pointer;
  transition: all 0.15s ease;
}

.venue-hangout-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.venue-hangout-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.venue-hangout-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

.venue-hangout-friends-badge {
  background: var(--light-blue);
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.venue-hangout-host {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.venue-hangout-host-name {
  font-weight: 700;
  color: var(--black);
}

.venue-hangout-mutual {
  font-size: 13px;
}

.venue-hangout-datetime {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 10px;
}

.venue-hangout-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.venue-hangout-spots {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-600);
}

.venue-hangout-vibes {
  display: flex;
  gap: 6px;
}

.venue-hangout-vibe-tag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid var(--black);
}

.venue-hangout-stop-context {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--cream);
  border-radius: 8px;
}

.venue-hangout-divider {
  height: 2px;
  background: var(--cream);
  margin: 12px 0;
}

.venue-hangout-button-container {
  margin-top: 12px;
}

.venue-hangout-button-container .join-hangout-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

/* Venue Hangout Skeleton Loading */
.venue-hangout-card.skeleton-card {
  height: 260px;
  background: linear-gradient(
    90deg,
    var(--cream) 0%,
    #f0ebe3 50%,
    var(--cream) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  pointer-events: none;
  cursor: default;
}

.venue-hangout-card.skeleton-card:hover {
  transform: none;
  box-shadow: 4px 4px 0 var(--black);
}

.skeleton-title {
  height: 24px;
  width: 70%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.skeleton-text {
  height: 16px;
  width: 50%;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  margin-bottom: 10px;
}

.skeleton-button {
  height: 44px;
  width: 100%;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin-top: 20px;
  box-shadow: 4px 4px 0 var(--black);
  transition: all 0.15s ease;
}

.hangout-card:hover { 
  transform: translate(-2px, -2px); 
  box-shadow: 6px 6px 0 var(--black); 
}

.hangout-card-header { 
  display: flex; 
  justify-content: space-between; 
  margin-bottom: 8px; 
}

.hangout-type-badge { 
  font-size: 11px; 
  font-weight: 700; 
}

.hangout-visibility-badge { 
  font-size: 14px; 
}

.hangout-card-title { 
  font-size: 18px; 
  font-weight: 900; 
  margin-bottom: 8px; 
}

.hangout-card-meta { 
  display: flex; 
  gap: 12px; 
  font-size: 12px; 
  color: var(--gray-500); 
  font-weight: 600; 
  margin-bottom: 10px; 
}

.hangout-card-footer { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

.going-count { 
  font-size: 13px; 
  font-weight: 700; 
}

.my-status { 
  font-size: 11px; 
  font-weight: 700; 
  padding: 4px 10px; 
  border-radius: 12px; 
}

.my-status.status-going { 
  background: var(--mint); 
}

.my-status.status-maybe { 
  background: var(--yellow); 
}

.my-status.status-invited { 
  background: var(--light-blue); 
}

.creator-badge { 
  font-size: 11px; 
  font-weight: 700; 
  background: var(--pink); 
  padding: 4px 10px; 
  border-radius: 12px; 
}

/* ===================== */
/* HANGOUT DETAIL */
/* ===================== */
.hangout-detail { 
  padding-bottom: 100px; 
}

.hangout-detail-header {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0 var(--black);
}

.hangout-badges { 
  display: flex; 
  gap: 8px; 
  margin-bottom: 10px; 
}

.hangout-title { 
  font-size: 24px; 
  font-weight: 900; 
  margin-bottom: 8px; 
}

.hangout-meta { 
  display: flex; 
  gap: 14px; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--gray-600); 
  margin-bottom: 8px; 
}

.hangout-host { 
  font-size: 13px; 
  color: var(--gray-500); 
}

.rsvp-section {
  background: var(--cream);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}

.rsvp-label { 
  font-weight: 700; 
  font-size: 14px; 
  display: block; 
  margin-bottom: 12px; 
}

.rsvp-buttons { 
  display: flex; 
  gap: 8px; 
}

.rsvp-btn {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--black);
  border-radius: 10px;
  background: var(--white);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-transform: none;
}

.rsvp-btn.active.going { 
  background: var(--mint); 
}

.rsvp-btn.active.maybe { 
  background: var(--yellow); 
}

.rsvp-btn.active.not-going { 
  background: var(--gray-200); 
}

.rsvp-btn:disabled { 
  opacity: 0.5; 
  cursor: not-allowed; 
}

.full-warning { 
  display: block; 
  margin-top: 10px; 
  color: #e53e3e; 
  font-size: 12px; 
  font-weight: 700; 
}

.hangout-tabs { 
  display: flex; 
  gap: 8px; 
  margin-bottom: 16px; 
}

.stops-list { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}

.stop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
}

.stop-number {
  width: 28px;
  height: 28px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
}

.stop-info { 
  flex: 1; 
  cursor: pointer; 
}

.stop-name { 
  display: block; 
  font-weight: 800; 
  font-size: 15px; 
}

.stop-meta { 
  font-size: 12px; 
  color: var(--gray-500); 
}

.remove-stop-btn { 
  background: none; 
  border: none; 
  font-size: 16px; 
  cursor: pointer; 
  color: var(--gray-400); 
}

.remove-stop-btn:hover { 
  color: #e53e3e; 
}

.add-stop-btn {
  width: 100%;
  padding: 14px;
  border: 2px dashed var(--gray-300);
  border-radius: 10px;
  background: none;
  font-weight: 700;
  color: var(--gray-500);
  cursor: pointer;
  margin-top: 8px;
}

.add-stop-btn:hover { 
  border-color: var(--pink); 
  color: var(--pink); 
}

.empty-stops {
  text-align: center;
  padding: 40px 20px;
  background: var(--cream);
  border-radius: 12px;
}

.empty-stops p {
  color: var(--gray-500);
  margin-bottom: 16px;
}

.attendees-section { 
  margin-bottom: 20px; 
}

.attendees-section h4 { 
  font-size: 14px; 
  font-weight: 800; 
  margin-bottom: 10px; 
  color: var(--gray-600); 
}

.attendee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cream);
}

.attendee-item.faded { 
  opacity: 0.6; 
}

.attendee-avatar { 
  width: 36px; 
  height: 36px; 
  border-radius: 50%; 
  background: var(--light-blue); 
  border: 2px solid var(--black); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: 800; 
  font-size: 14px; 
  text-transform: uppercase;
}

.attendee-name { 
  flex: 1; 
  font-weight: 700; 
  font-size: 14px; 
}

.organizer-badge { 
  font-size: 10px; 
  font-weight: 700; 
  background: var(--yellow); 
  padding: 3px 8px; 
  border-radius: 10px; 
}

.pending-badge { 
  font-size: 10px; 
  font-weight: 700; 
  color: var(--gray-500); 
}

.invite-btn { 
  width: 100%; 
  margin-bottom: 16px; 
}

.hangout-chat-tab { 
  display: flex; 
  flex-direction: column; 
  height: 400px; 
}

.chat-messages { 
  flex: 1; 
  overflow-y: auto; 
  padding: 10px 0; 
}

.empty-chat { 
  text-align: center; 
  color: var(--gray-400); 
  padding: 40px; 
}

.chat-message { 
  margin-bottom: 16px; 
}

.chat-message.mine { 
  text-align: right; 
}

.chat-author { 
  font-size: 12px; 
  font-weight: 700; 
  color: var(--gray-500); 
}

.chat-text {
  display: inline-block;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: 12px;
  font-size: 14px;
  max-width: 80%;
  text-align: left;
  margin-top: 4px;
}

.chat-message.mine .chat-text { 
  background: var(--pink); 
}

.chat-time { 
  font-size: 10px; 
  color: var(--gray-400); 
  display: block; 
  margin-top: 4px; 
}

.chat-input-row { 
  display: flex; 
  gap: 10px; 
  padding-top: 10px; 
  border-top: 2px solid var(--cream); 
}

.chat-input-row .input-field { 
  flex: 1; 
  margin: 0; 
}

.share-btn { 
  width: 100%; 
  margin-top: 20px; 
}

/* ===================== */
/* EVENTS SYSTEM */
/* ===================== */

/* Events Page */
.events-page {
  padding: 20px;
  padding-bottom: 100px;
}

.events-header {
  margin-bottom: 20px;
}

.view-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.view-toggle button {
  flex: 1;
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.view-toggle button.active {
  background: var(--pink);
  box-shadow: 3px 3px 0 var(--black);
}

.time-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.time-filter {
  padding: 10px 16px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.time-filter.active {
  background: var(--yellow);
}

.category-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.category-filters::-webkit-scrollbar {
  display: none;
}

.category-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.category-chip.active {
  background: var(--cat-color, var(--pink));
  color: white;
}

/* Events List */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.events-day-group {
  margin-bottom: 24px;
}

.date-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--black);
}

.date-day {
  font-size: 18px;
  font-weight: 900;
}

.date-full {
  font-size: 14px;
  color: var(--gray-500);
  font-weight: 600;
}

/* Event Card */
.event-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--black);
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.event-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.event-card:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}

.event-card-banner {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.event-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-icon {
  font-size: 40px;
}

.event-category-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  border: 2px solid var(--black);
}

.event-category-badge.large {
  font-size: 13px;
  padding: 6px 14px;
}

.event-favorited-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: pulse-star 2s ease-in-out infinite;
}

@keyframes pulse-star {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.event-card-content {
  padding: 14px;
}

.event-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 6px;
}

.event-time-icon {
  font-size: 14px;
}

.recurring-badge-inline {
  font-size: 14px;
  margin-left: 4px;
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.recurring-badge-inline:hover {
  opacity: 1;
}

.event-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 8px;
  line-height: 1.2;
}

.recurring-schedule {
  font-size: 12px;
  font-weight: 600;
  color: var(--mint);
  background: var(--mint);
  background: rgba(149, 225, 211, 0.15);
  border: 2px solid var(--mint);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: inline-block;
  cursor: help;
}

.event-venue {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 10px;
  cursor: pointer;
}

.venue-icon {
  font-size: 14px;
}

.venue-name {
  font-weight: 700;
  color: var(--pink);
}

.venue-hood {
  color: var(--gray-500);
}

.event-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.event-rsvp-counts {
  display: flex;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}

.event-price {
  padding: 4px 10px;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.my-rsvp-badge {
  padding: 4px 10px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.my-rsvp-badge.going {
  background: #dcfce7;
  color: #166534;
}

.my-rsvp-badge.interested {
  background: #fef3c7;
  color: #92400e;
}

/* Calendar */
.events-calendar {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--black);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-header button {
  width: 36px;
  height: 36px;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--cream);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-header button:hover {
  background: var(--pink);
}

.calendar-header h3 {
  font-size: 18px;
  font-weight: 800;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  padding: 8px 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 20px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  padding: 4px;
}

.calendar-day:hover {
  background: var(--cream);
}

.calendar-day.other-month {
  opacity: 0.3;
}

.calendar-day.today .day-number {
  background: var(--pink);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-day.selected {
  background: var(--light-blue);
  border: 2px solid var(--black);
}

.calendar-day.has-events {
  font-weight: 800;
}

.day-number {
  font-size: 14px;
  font-weight: 600;
}

.day-event-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.selected-date-events {
  padding-top: 16px;
  border-top: 2px solid var(--cream);
}

.selected-date-events h4 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
}

.no-events-text {
  color: var(--gray-400);
  font-size: 14px;
}

.mini-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-event-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--cream);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mini-event-card:hover {
  background: var(--light-blue);
}

.mini-event-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}

.mini-event-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
}

.mini-recurring-badge {
  font-size: 14px;
  line-height: 1;
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.mini-recurring-badge:hover {
  opacity: 1;
}

.mini-event-info {
  flex: 1;
}

.mini-event-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.mini-event-venue {
  font-size: 12px;
  color: var(--gray-500);
}

.mini-event-category {
  font-size: 20px;
}

/* Event Detail */
.event-detail {
  padding-bottom: 100px;
}

.event-hero {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: -20px -20px 20px;
}

.event-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-icon {
  font-size: 80px;
}

.event-info-section {
  padding: 0 20px;
}

.event-detail-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 16px;
  line-height: 1.2;
}

.recurring-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mint);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  box-shadow: 3px 3px 0 var(--black);
}

.recurring-icon {
  font-size: 20px;
}

.recurring-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}

.recurrence-end {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 500;
}

.event-detail-meta {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 3px 3px 0 var(--black);
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 2px solid var(--cream);
  font-size: 15px;
  font-weight: 600;
}

.meta-row:last-child {
  border-bottom: none;
}

.meta-row.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.meta-row.clickable:hover .venue-link {
  color: var(--pink);
}

.meta-icon {
  font-size: 18px;
}

.venue-link {
  font-weight: 700;
}

.venue-address {
  display: block;
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 500;
  margin-top: 2px;
}

.rsvp-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.rsvp-btn {
  flex: 1;
  padding: 14px;
  border: 3px solid var(--black);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--white);
}

.rsvp-btn:hover {
  transform: translateY(-2px);
}

.rsvp-btn.going.active {
  background: #dcfce7;
  box-shadow: 3px 3px 0 var(--black);
  color: #166534;
}

.rsvp-btn.interested.active {
  background: #fef3c7;
  box-shadow: 3px 3px 0 var(--black);
  color: #92400e;
}

.rsvp-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--gray-600);
}

.rsvp-count strong {
  font-size: 18px;
  font-weight: 900;
  margin-right: 4px;
}

.favorite-section {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 3px 3px 0 var(--black);
}

.favorite-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--black);
  border-radius: 10px;
  background: var(--cream);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.favorite-btn:hover {
  background: var(--yellow);
  transform: translateY(-2px);
  box-shadow: 2px 2px 0 var(--black);
}

.favorite-btn.favorited {
  background: var(--yellow);
  border-color: var(--black);
}

.favorite-icon {
  font-size: 20px;
}

.reminder-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--cream);
}

.reminder-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 2px solid var(--black);
  border-radius: 8px;
  background: var(--light-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 8px;
}

.reminder-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--black);
}

.toggle-arrow {
  font-size: 12px;
  margin-left: auto;
}

.reminder-options {
  margin-top: 10px;
  padding: 12px;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 8px;
}

.reminder-option-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.reminder-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 2px solid var(--black);
  border-radius: 8px;
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.reminder-option:hover {
  background: var(--light-blue);
  transform: translateX(2px);
}

.reminder-option.active {
  background: var(--mint);
  border-width: 3px;
  font-weight: 800;
}

.reminder-option.remove {
  background: #fee;
  color: #c00;
  border-color: #c00;
}

.reminder-option.remove:hover {
  background: #fcc;
}

.event-description {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 3px 3px 0 var(--black);
}

.event-description h3 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.event-description p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-700);
}

.upcoming-occurrences {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 3px 3px 0 var(--black);
}

.upcoming-occurrences h3 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.occurrence-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.occurrence-chip {
  background: var(--light-blue);
  border: 2px solid var(--black);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}

.occurrence-chip:hover {
  transform: translateY(-2px);
  box-shadow: 2px 2px 0 var(--black);
}

.occurrence-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.occurrence-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
}

.attendees-preview {
  margin-bottom: 20px;
}

.attendees-preview h3 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.attendees-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attendee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--cream);
  border-radius: 10px;
}

.attendee-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--light-blue);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.attendee-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}

.attendee-status {
  font-size: 16px;
}

.attendee-status.going {
  color: #166534;
}

.attendee-status.interested {
  color: #92400e;
}

.event-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-actions .btn {
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Create Event Modal */
.create-event-modal {
  max-height: 90vh;
  overflow-y: auto;
  max-width: 600px;
}

.image-upload-area {
  margin-bottom: 16px;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--black);
}

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

.image-preview button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--black);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
}

.upload-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  border: 2px dashed var(--gray-300);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  color: var(--gray-500);
  transition: all 0.15s ease;
}

.upload-placeholder input {
  display: none;
}

.upload-placeholder:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: var(--cream);
}

.category-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  min-width: 70px;
  transition: all 0.15s ease;
}

.category-option:hover {
  transform: translateY(-2px);
}

.category-option.active {
  background: var(--cat-color);
  color: white;
  box-shadow: 2px 2px 0 var(--black);
}

.category-option span:first-child {
  font-size: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  margin-top: 20px;
}

/* Mini Event Item (Business Detail) */
.upcoming-events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mini-event-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mini-event-item:hover {
  background: var(--cream);
  transform: translateY(-2px);
}

.mini-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: var(--pink);
  border-radius: 10px;
  min-width: 50px;
  border: 2px solid var(--black);
}

.event-day {
  font-size: 20px;
  font-weight: 900;
  color: white;
  line-height: 1;
}

.event-month {
  font-size: 10px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  margin-top: 2px;
}

.mini-event-details {
  flex: 1;
}

.mini-event-details .mini-event-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

.mini-event-details .mini-event-time {
  font-size: 13px;
  color: var(--gray-500);
  min-width: auto;
}

.mini-event-arrow {
  font-size: 16px;
  color: var(--gray-400);
}

/* ===================== */
/* MODALS */
/* ===================== */
.friends-select-list { 
  max-height: 300px; 
  overflow-y: auto; 
  margin-bottom: 16px; 
}

.friend-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.friend-select-item:hover { 
  background: var(--cream); 
}

.friend-select-item.selected { 
  background: var(--mint); 
}

.check-mark { 
  font-size: 18px; 
  font-weight: 900; 
  color: var(--black); 
}

.business-select-list {
  max-height: 400px;
  overflow-y: auto;
}

.business-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.business-select-item:hover {
  background: var(--cream);
  transform: translateY(-1px);
}

.business-info {
  flex: 1;
}

.business-name {
  display: block;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 2px;
}

.business-meta {
  font-size: 12px;
  color: var(--gray-500);
}

.add-btn {
  background: var(--mint);
  border: 2px solid var(--black);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.add-btn:hover {
  box-shadow: 2px 2px 0 var(--black);
}

.calendar-btn {
  padding: 8px 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 2px 2px 0 var(--black);
  font-family: 'Inter', sans-serif;
}

.calendar-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--black);
}

.calendar-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--black);
}

.calendar-btn-small {
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
}

.calendar-btn-small:hover {
  background: var(--yellow);
  transform: scale(1.1);
}

.calendar-options {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
  z-index: 100;
  min-width: 180px;
}

.calendar-options button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid var(--cream);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  color: var(--black);
}

.calendar-options button:last-child {
  border-bottom: none;
}

.calendar-options button:hover {
  background: var(--cream);
}

.google-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #4285f4;
  color: white;
  font-size: 12px;
  font-weight: 800;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Updated digest card to support calendar button */
.digest-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--black);
}

.digest-card-clickable {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.digest-card:hover .digest-card-clickable {
  /* Hover effect only on clickable part */
}

.digest-card:has(.digest-card-clickable:hover) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
  transition: all 0.15s ease;
}

.digest-day-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.digest-day-header h2 {
  font-size: 28px;
  font-weight: 900;
  margin: 0;
  text-transform: lowercase;
}

.btn-small {
  padding: 8px 14px;
  font-size: 12px;
  white-space: nowrap;
}

/* Vibe and Mood Filters */
.mood-section {
  margin-bottom: 24px;
}

.filter-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--gray-600);
  margin-bottom: 12px;
  display: block;
  text-transform: lowercase;
}

.mood-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 12px 0;
  scrollbar-width: none;
}

.mood-scroll::-webkit-scrollbar {
  display: none;
}

.mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  cursor: pointer;
  min-width: 100px;
  transition: all 0.15s ease;
  box-shadow: 3px 3px 0 var(--black);
  font-family: 'Inter', sans-serif;
}

.mood-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
}

.mood-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--black);
}

.mood-icon {
  font-size: 28px;
}

.mood-label {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-transform: lowercase;
}

.vibe-filter-section {
  margin-bottom: 20px;
}

.vibe-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.clear-vibes {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  text-decoration: underline;
  font-family: 'Inter', sans-serif;
  padding: 0;
}

.clear-vibes:hover {
  opacity: 0.8;
}

.vibe-tags-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px 0;
  scrollbar-width: none;
}

.vibe-tags-scroll::-webkit-scrollbar {
  display: none;
}

.vibe-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.vibe-tag:hover {
  transform: translateY(-2px);
  box-shadow: 2px 2px 0 var(--black);
}

.vibe-tag.active {
  background: var(--vibe-color, var(--pink));
  box-shadow: 3px 3px 0 var(--black);
}

.vibe-tag-icon {
  font-size: 16px;
}

.vibe-tag-label {
  font-size: 13px;
}

.business-card-vibes {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.mini-vibe-tag {
  font-size: 14px;
}

.vibe-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vibe-tag-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section .section-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 12px;
  text-transform: lowercase;
}

/* ===================== */
/* DEALS SYSTEM */
/* ===================== */

/* Deals Page */
.deals-page {
  padding: 20px;
  padding-bottom: 100px;
}

.deals-header {
  margin-bottom: 20px;
}

.deals-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.filter-tab {
  flex: 1;
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.filter-tab.active {
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--black);
}

/* Featured Deals */
.featured-deals-section {
  margin-bottom: 24px;
}

.section-label {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
}

.featured-deals-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.featured-deals-carousel::-webkit-scrollbar {
  display: none;
}

.featured-deal-card {
  flex-shrink: 0;
  width: 280px;
  background: linear-gradient(135deg, var(--pink), #ec4899);
  border: 3px solid var(--black);
  border-radius: 16px;
  padding: 20px;
  color: white;
  cursor: pointer;
  position: relative;
  box-shadow: 4px 4px 0 var(--black);
  transition: all 0.15s ease;
}

.featured-deal-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.featured-deal-badge {
  margin-bottom: 12px;
}

.deal-value {
  font-size: 28px;
  font-weight: 900;
}

.featured-deal-content .deal-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
  color: white;
}

.featured-deal-content .deal-business {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
  cursor: pointer;
}

.featured-deal-content .deal-business:hover {
  text-decoration: underline;
}

.featured-deal-content .deal-validity {
  font-size: 12px;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.save-deal-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: white;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.save-deal-btn:hover {
  transform: scale(1.1);
}

.save-deal-btn.saved {
  background: var(--yellow);
}

/* Deal Card */
.deals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deal-card {
  display: flex;
  gap: 14px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.deal-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
}

.deal-card:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}

.deal-card.inactive {
  opacity: 0.6;
}

.deal-card-left {
  display: flex;
  align-items: flex-start;
}

.deal-type-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.deal-type-icon {
  font-size: 20px;
  color: white;
  font-weight: 700;
}

.deal-card-content {
  flex: 1;
  min-width: 0;
}

.deal-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.deal-discount {
  font-size: 16px;
  font-weight: 900;
  color: var(--pink);
}

.expiring-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 6px;
}

.active-now-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: #dcfce7;
  color: #166534;
  border-radius: 6px;
}

.deal-card .deal-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
}

.deal-business-link {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 6px;
  cursor: pointer;
}

.deal-business-link:hover {
  color: var(--pink);
}

.deal-timing {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.timing-item {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
}

.save-deal-btn-small {
  width: 32px;
  height: 32px;
  background: var(--cream);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.save-deal-btn-small:hover {
  transform: scale(1.1);
}

.save-deal-btn-small.saved {
  background: var(--yellow);
}

/* Deal Detail */
.deal-detail {
  padding-bottom: 100px;
}

.deal-hero {
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: -20px -20px 20px;
}

.deal-hero-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 40px;
  border-radius: 16px;
}

.deal-hero-icon {
  font-size: 32px;
  color: white;
  margin-bottom: 4px;
  font-weight: 700;
}

.deal-hero-value {
  font-size: 36px;
  font-weight: 900;
  color: white;
}

.active-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 12px;
  background: #dcfce7;
  border: 2px solid var(--black);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #166534;
}

.deal-info-section {
  padding: 0 20px;
}

.deal-detail-title {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 16px;
  line-height: 1.2;
}

.deal-business-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  margin-bottom: 16px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  transition: all 0.15s ease;
}

.deal-business-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
}

.business-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid var(--black);
  flex-shrink: 0;
}

.deal-business-card .arrow {
  font-size: 18px;
  color: var(--gray-400);
}

.deal-timing-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 3px 3px 0 var(--black);
}

.deal-timing-card h3 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.timing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 600;
}

.timing-icon {
  font-size: 18px;
}

.deal-description, .deal-terms {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 3px 3px 0 var(--black);
}

.deal-description h3, .deal-terms h3 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.deal-description p, .deal-terms p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray-700);
}

.deal-terms {
  background: var(--cream);
}

.deal-pricing {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.original-price {
  font-size: 18px;
  color: var(--gray-400);
  text-decoration: line-through;
}

.deal-price {
  font-size: 28px;
  font-weight: 900;
  color: var(--pink);
}

.redemption-limit {
  margin-bottom: 16px;
}

.limit-bar {
  display: block;
  height: 8px;
  background: var(--cream);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
  border: 2px solid var(--black);
}

.limit-fill {
  display: block;
  height: 100%;
  background: var(--pink);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.limit-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
}

.user-redemptions {
  margin-bottom: 16px;
  padding: 12px;
  background: #dcfce7;
  border-radius: 10px;
  border: 2px solid var(--black);
}

.redemption-note {
  font-size: 14px;
  font-weight: 600;
  color: #166534;
}

.deal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deal-actions .btn {
  width: 100%;
}

.redeem-btn {
  font-size: 16px;
}

.max-redeemed-notice {
  padding: 14px;
  background: var(--cream);
  border-radius: 10px;
  border: 2px solid var(--black);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
}

/* Redeem Modal */
.redeem-modal {
  text-align: center;
}

.redeem-deal-preview {
  padding: 20px;
  background: var(--cream);
  border-radius: 14px;
  margin-bottom: 16px;
  border: 2px solid var(--black);
}

.deal-value-large {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: var(--pink);
}

.deal-title-small {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-top: 6px;
}

.deal-business-small {
  display: block;
  font-size: 14px;
  color: var(--gray-500);
  margin-top: 4px;
}

.redeem-notice {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 20px;
  line-height: 1.5;
}

.verification-code-display {
  padding: 24px;
  background: var(--yellow);
  border: 3px solid var(--black);
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 0 var(--black);
}

.code-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.code-value {
  display: block;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 6px;
  font-family: 'Courier New', monospace;
}

.deal-summary {
  margin-bottom: 20px;
}

.deal-summary .deal-value {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--pink);
  margin-bottom: 4px;
}

.confirm-redeem-btn {
  width: 100%;
  margin-bottom: 12px;
}

.btn-text {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-500);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  padding: 8px;
}

.btn-text:hover {
  color: var(--pink);
}

.redeem-success {
  padding: 24px 0;
}

.redeem-success .success-icon {
  font-size: 64px;
  display: block;
  margin-bottom: 12px;
}

.redeem-success h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.redeem-success p {
  color: var(--gray-500);
  margin-bottom: 20px;
}

/* Create Deal Modal */
.create-deal-modal {
  max-height: 90vh;
  overflow-y: auto;
  max-width: 600px;
}

.deal-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.deal-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.deal-type-option:hover {
  transform: translateY(-2px);
}

.deal-type-option.active {
  background: var(--pink);
  color: white;
  box-shadow: 2px 2px 0 var(--black);
}

.deal-type-option .type-icon {
  font-size: 20px;
}

.deal-type-option .type-label {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.days-selector {
  display: flex;
  gap: 6px;
}

.day-btn {
  flex: 1;
  padding: 10px 4px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.day-btn:hover {
  transform: translateY(-2px);
}

.day-btn.active {
  background: var(--mint);
  box-shadow: 2px 2px 0 var(--black);
}

/* Deal Preview (Business Detail) */
.deals-preview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deal-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.deal-preview-item:hover {
  background: var(--cream);
  transform: translateY(-2px);
}

.deal-preview-badge {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
  border: 2px solid var(--black);
}

.deal-preview-info {
  flex: 1;
  min-width: 0;
}

.deal-preview-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.deal-preview-timing {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: capitalize;
  display: block;
}

.deal-preview-arrow {
  font-size: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
}

/* ===================== */
/* NOTIFICATIONS SYSTEM */
/* ===================== */

/* Header Notification Button */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-btn {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: var(--black);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  padding: 0;
}

.search-btn:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

.search-btn:active {
  transform: scale(0.95);
  opacity: 0.5;
}

.search-btn .search-icon {
  position: static;
  transform: none;
  display: block;
}

.notification-btn {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.notification-btn:hover {
  background: var(--cream);
  transform: translateY(-2px);
}

.notification-btn:active {
  transform: translateY(1px);
  background: var(--cream);
}

.notification-icon {
  font-size: 20px;
}

.notification-icon-svg {
  color: var(--black);
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  background: var(--pink);
  border: 2px solid var(--white);
  border-radius: 50%;
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--pink);
  border: 2px solid var(--white);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Notification Prompt Banner */
.notification-prompt-banner {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--white) 0%, var(--cream) 100%);
  border-bottom: 3px solid var(--black);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  animation: slideDown 0.3s ease;
}

.notification-prompt-banner.dismissed {
  animation: slideUp 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

.notification-prompt-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  animation: bellRing 2s ease-in-out infinite;
}

@keyframes bellRing {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30% {
    transform: rotate(-10deg);
  }
  20%, 40% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(0deg);
  }
}

.notification-prompt-content {
  flex: 1;
  min-width: 0;
}

.notification-prompt-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--black);
  margin-bottom: 2px;
}

.notification-prompt-desc {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.4;
}

.notification-prompt-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.notification-prompt-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-400);
  transition: all 0.15s ease;
}

.notification-prompt-close:hover {
  background: var(--gray-200);
  color: var(--black);
  transform: scale(1.1);
}

.btn-text {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 8px 12px;
  transition: all 0.15s ease;
}

.btn-text:hover {
  color: var(--black) !important;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .notification-prompt-banner {
    top: 68px;
    padding: 12px 16px;
    flex-wrap: wrap;
  }
  
  .notification-prompt-icon {
    width: 24px;
    height: 24px;
  }
  
  .notification-prompt-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .notification-prompt-content {
    flex: 1 1 100%;
  }
  
  .notification-prompt-actions {
    width: 100%;
    margin-top: 8px;
  }
  
  .notification-prompt-actions .btn {
    flex: 1;
  }
}

/* Calendar Page */
.calendar-page {
  padding: 20px;
  padding-bottom: 100px;
}

.calendar-view-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 4px;
}

.calendar-toggle-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-toggle-btn.active {
  background: var(--pink);
  box-shadow: 2px 2px 0 var(--black);
}

.calendar-container {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  margin-bottom: 20px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-month-title {
  font-size: 20px;
  font-weight: 900;
  text-transform: lowercase;
}

.calendar-nav-btn {
  width: 40px;
  height: 40px;
  border: 2px solid var(--black);
  background: var(--white);
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-nav-btn:hover {
  background: var(--cream);
  transform: scale(1.1);
}

.calendar-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.calendar-day-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  padding: 8px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  border: 2px solid var(--black);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.calendar-day:hover {
  background: var(--cream);
  transform: scale(1.05);
}

.calendar-day.other-month {
  opacity: 0.3;
  background: var(--gray-200);
}

.calendar-day.today {
  background: var(--light-blue);
  font-weight: 900;
}

.calendar-day.selected {
  background: var(--pink);
  box-shadow: 0 0 0 3px var(--pink);
  font-weight: 900;
}

.calendar-day.has-items .calendar-day-number {
  font-weight: 800;
}

.calendar-day-number {
  font-size: 14px;
  font-weight: 600;
}

.calendar-day-indicator {
  position: absolute;
  bottom: 4px;
  font-size: 8px;
  color: var(--pink);
  font-weight: 900;
}

.calendar-selected-date {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}

.calendar-selected-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--black);
}

.calendar-selected-header h3 {
  font-size: 18px;
  font-weight: 900;
  text-transform: lowercase;
}

.calendar-items-count {
  background: var(--pink);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  border: 2px solid var(--black);
}

.calendar-no-items {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-500);
  font-style: italic;
}

.calendar-selected-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calendar-item-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--cream);
  border: 3px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.calendar-item-card:hover {
  transform: translateX(4px);
  box-shadow: 4px 4px 0 var(--black);
}

.calendar-item-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.calendar-item-details {
  flex: 1;
}

.calendar-item-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}

.calendar-item-business {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 4px;
}

.calendar-item-time {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

.calendar-recurring-badge {
  display: inline-block;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.calendar-item-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--white);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.calendar-item-delete:hover {
  background: var(--pink);
  transform: scale(1.1);
}

/* Calendar List View */
.calendar-list-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.calendar-empty {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 60px 20px;
  text-align: center;
}

.calendar-list-group {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.calendar-list-date {
  background: var(--pink);
  padding: 12px 20px;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  border-bottom: 3px solid var(--black);
}

.calendar-list-item {
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 3px solid var(--black);
  box-shadow: none;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.calendar-list-item:last-child {
  border-bottom: none;
}

.calendar-list-item:hover {
  background: var(--cream);
}

.calendar-list-item-content {
  flex: 1;
}

.calendar-list-item-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}

.calendar-list-item-business {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 4px;
}

.calendar-list-item-time {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

.calendar-list-item-delete {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--white);
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-right: 8px;
}

.calendar-list-item-delete:hover {
  background: var(--pink);
  transform: scale(1.1);
}

/* Add to Calendar Modal */
.add-to-calendar-modal {
  max-width: 500px;
}

.add-calendar-header {
  text-align: center;
  margin-bottom: 24px;
}

.add-calendar-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.add-calendar-title {
  font-size: 24px;
  font-weight: 900;
  text-transform: lowercase;
}

.add-calendar-item {
  background: var(--cream);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.add-calendar-item-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.add-calendar-item-business {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.add-calendar-item-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
}

.add-calendar-section {
  margin-bottom: 24px;
}

.add-calendar-label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.add-calendar-frequency {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.frequency-btn {
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 700;
  text-align: center;
}

.frequency-btn:hover {
  background: var(--cream);
  transform: translateY(-2px);
}

.frequency-btn.active {
  background: var(--pink);
  box-shadow: 4px 4px 0 var(--black);
}

.add-calendar-select {
  width: 100%;
  padding: 12px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}

.add-calendar-notifications {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.add-calendar-actions {
  display: flex;
  gap: 12px;
}

.add-calendar-actions .btn {
  flex: 1;
}

@media (max-width: 640px) {
  .calendar-day {
    padding: 4px;
  }
  
  .calendar-day-number {
    font-size: 12px;
  }
  
  .calendar-day-indicator {
    font-size: 6px;
    bottom: 2px;
  }
  
  .calendar-frequency {
    grid-template-columns: 1fr;
  }
}

/* Notifications Page */
.notifications-page {
  padding: 20px;
  padding-bottom: 100px;
}

.notifications-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.notifications-header .unread-badge {
  padding: 4px 10px;
  background: var(--pink);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  color: white;
}

.notifications-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-tabs {
  display: flex;
  gap: 8px;
}

.mark-all-read-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  padding: 8px;
}

.mark-all-read-btn:hover {
  text-decoration: underline;
}

/* Notification Group */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.notification-group {
  margin-bottom: 8px;
}

.group-header {
  font-size: 13px;
  font-weight: 800;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cream);
}

/* Notification Item */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--cream);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.notification-item:hover {
  background: var(--cream);
  border-color: var(--black);
}

.notification-item.unread {
  background: var(--light-blue);
  border-color: var(--black);
  box-shadow: 3px 3px 0 var(--black);
}

.notification-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.notification-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  flex-shrink: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.notification-body {
  font-size: 13px;
  color: var(--gray-600);
  margin: 4px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.context-item {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--cream);
  padding: 2px 8px;
  border-radius: 6px;
}

.notification-time {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 6px;
  display: block;
}

.unread-dot {
  width: 10px;
  height: 10px;
  background: var(--pink);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.notification-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: var(--gray-200);
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
}

.notification-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

.clear-all-btn {
  width: 100%;
  padding: 14px;
  background: none;
  border: 2px dashed var(--gray-300);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-500);
  cursor: pointer;
  margin-top: 20px;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s ease;
}

.clear-all-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 80px;
  left: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.notification-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--black);
  animation: slideInDown 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.15s ease;
}

.notification-toast:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--black);
}

@keyframes slideInDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.toast-body {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toast-dismiss {
  width: 28px;
  height: 28px;
  background: var(--gray-200);
  border: none;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.toast-dismiss:hover {
  background: var(--gray-300);
  transform: scale(1.1);
}

/* Nav Notification Badge */
.nav-icon {
  position: relative;
}

.nav-notification-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--pink);
  border: 2px solid var(--white);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .toast-container {
    left: 10px;
    right: 10px;
    top: 70px;
  }
  
  .notification-toast {
    padding: 12px;
  }
  
  .toast-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .toast-title {
    font-size: 13px;
  }
  
  .toast-body {
    font-size: 11px;
  }
}

/* ============================================
   TEMPORARY: Hide some profile/business photos and icons
   Avatar in header is now enabled!
   ============================================ */
.profile-avatar-large,
.user-avatar,
.business-avatar,
.avatar-lg,
.checkin-avatar,
.follow-avatar,
.activity-avatar,
.recent-checkin-avatar,
.comment-avatar,
.friend-avatar,
.attendee-avatar,
.notification-avatar,
.lightbox-avatar,
.edit-avatar-section,
.avatar-upload,
.happening-icon,
.grouped-business-icon,
.trending-icon {
  display: none !important;
}

/* Header avatar is visible now */
.avatar-button {
  display: flex !important;
}

/* ============================================
   Business Logo Upload
   ============================================ */
.business-logo-upload-section {
  margin-bottom: 24px;
}

.logo-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-preview-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-preview-image {
  display: block;
  box-shadow: 4px 4px 0 var(--black);
}

.logo-upload-label {
  position: relative;
  overflow: hidden;
}

.logo-upload-label:hover {
  border-color: var(--black);
  background: var(--light-yellow);
  transform: translateY(-2px);
}

.logo-upload-label:active {
  transform: translateY(0);
  box-shadow: 2px 2px 0 var(--black);
}

/* ============================================
   Notifications
   ============================================ */
.notifications-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 80px;
}

.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
}

.back-btn-notifications {
  width: 44px;
  height: 44px;
  border: 3px solid var(--black);
  border-radius: 50%;
  background: var(--cream);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.back-btn-notifications:hover {
  background: var(--pink);
  transform: translateX(-2px);
}

.back-btn-notifications:active {
  transform: translateX(-2px) scale(0.95);
}

.notifications-title {
  font-size: 28px;
  font-weight: 900;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.notifications-badge {
  background: var(--pink);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: 2px solid var(--black);
}

.notifications-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--black);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.notification-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}

.notification-item.unread {
  background: var(--cream);
  border-color: var(--pink);
}

.notification-item.unread::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -6px;
  width: 10px;
  height: 10px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 50%;
}

.notification-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--black);
}

.notification-body {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 8px;
  line-height: 1.4;
}

.notification-special-details {
  margin-top: 8px;
  padding: 10px;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 8px;
}

.notification-special-desc {
  font-size: 13px;
  color: var(--gray-700);
  margin-bottom: 4px;
}

.notification-special-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
}

.notification-event-details {
  margin-top: 8px;
  padding: 10px;
  background: var(--light-blue);
  border: 2px solid var(--black);
  border-radius: 8px;
}

.notification-event-desc {
  font-size: 13px;
  color: var(--gray-700);
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.notification-time {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

.notification-location {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

.notification-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.notification-action-btn {
  width: 32px;
  height: 32px;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-action-btn:hover {
  background: var(--cream);
  transform: scale(1.05);
}

.notification-action-btn:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .notifications-container {
    padding: 16px;
  }

  .notifications-title {
    font-size: 24px;
  }

  .notification-item {
    padding: 12px;
  }

  .notification-icon {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}