/* ============================================================================
   UTILITY CLASSES - Extracted from inline styles
   ============================================================================ */

.hidden {
  display: none !important;
}

.cursor-pointer {
  cursor: pointer;
}

.body-scroll-locked {
  overflow: hidden;
}

/* Button disabled/enabled states */
.btn-state-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status text colors (admin panel, forms) */
.status-text-pending {
  color: #6B7280;
}

.status-text-success {
  color: #10B981;
}

.status-text-error {
  color: #EF4444;
}

/* Character count states */
.char-count-over {
  color: #DC2626;
}

.char-count-normal {
  color: #6B7280;
}

/* Form validation border */
.field-border-valid {
  border-color: #10B981;
}

.field-border-default {
  border-color: #E5E7EB;
}

/* ============================================================================
   CHECKLIST STATES (Create/Edit Yoink modals)
   ============================================================================ */

.checklist-item-met {
  color: #059669;
  text-decoration: line-through;
}

.checklist-item-unmet {
  color: #92400E;
  text-decoration: none;
}

.checklist-all-met {
  background: #ECFDF5;
  border-color: #10B981;
}

.checklist-incomplete {
  background: #FEF3C7;
  border-color: #F59E0B;
}

/* ============================================================================
   TOGGLE BUTTON STATES (Category Picker)
   ============================================================================ */

.toggle-btn-active {
  background: white;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-btn-inactive {
  background: transparent;
  color: #6B7280;
  box-shadow: none;
}

/* ============================================================================
   FOLLOW BUTTON STATES
   ============================================================================ */

.follow-btn-following {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.follow-btn-default-blue {
  background: white;
  color: #0369A1;
}

.follow-btn-default-brown {
  background: white;
  color: #795548;
}

/* ============================================================================
   MAP SLOT DISPLAY
   ============================================================================ */

.map-slot-visible {
  display: block;
  height: 500px;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
}

.map-slot-visible-sm {
  display: block;
  height: 400px;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
}

/* ============================================================================
   DRAG & DROP (Photo reordering)
   ============================================================================ */

.drag-source {
  opacity: 0.5;
}

.drag-hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.drag-ghost {
  position: fixed;
  width: 80px;
  height: 80px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
}

/* ============================================================================
   PHOTO THUMBNAILS (Create/Edit Yoink modals)
   ============================================================================ */

.photo-thumb-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s;
}

.photo-thumb-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
  z-index: 1;
}

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

.photo-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* ============================================================================
   SET DISCOVERY NOTIFICATION (Create Yoink)
   ============================================================================ */

.set-discovery-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #0369A1, #0EA5E9);
  color: white;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 10001;
  text-align: center;
  animation: setDiscoveryPopIn 0.3s ease-out;
  max-width: 320px;
}

.set-discovery-notification-emoji {
  font-size: 48px;
  margin-bottom: 12px;
}

.set-discovery-notification-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
}

.set-discovery-notification-text {
  margin: 0 0 12px 0;
  font-size: 15px;
  opacity: 0.9;
}

.set-discovery-notification-count {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}

.set-discovery-notification-hint {
  margin: 12px 0 0 0;
  font-size: 13px;
  opacity: 0.8;
}

.set-discovery-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

@keyframes setDiscoveryPopIn {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes setDiscoveryFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* ============================================================================
   HOVER LIFT EFFECT (Cards, items)
   ============================================================================ */

.hover-lift {
  transition: transform 0.2s, box-shadow 0.2s;
}

.hover-lift:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hover-lift-sm:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hover-lift-md:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
   REGION FILTER INDICATOR (User Panel)
   ============================================================================ */

.region-filter-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 8px auto;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 8px;
}

/* ============================================================================
   ADMIN PANEL COMPONENTS
   ============================================================================ */

/* Admin dropdown menu (transfer user, change category) */
.admin-dropdown-menu {
  position: absolute;
  z-index: 1000;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
}

/* ============================================================================
   USER PANEL COMPONENTS
   ============================================================================ */

/* Collection/Set item in user panel */
.user-collection-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.user-collection-emoji {
  font-size: 24px;
}

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

.user-collection-name {
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-collection-count {
  font-size: 13px;
  color: #0369A1;
  font-weight: 600;
}

/* Progress ring for collections */
.user-collection-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.user-collection-ring-inner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F0F9FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #0369A1;
}

/* Collection children list */
.user-collection-children {
  margin-left: 32px;
  margin-top: 8px;
  padding: 8px;
  background: #FAFAFA;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

/* Collection child item */
.user-collection-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
}

.user-collection-child:hover {
  background: #F0F0F0;
}

.user-collection-child-emoji {
  font-size: 16px;
}

.user-collection-child-name {
  flex: 1;
  font-size: 13px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-collection-child-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #059669;
  color: white;
  border-radius: 50%;
  font-size: 12px;
}

.user-collection-child-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #E5E7EB;
  border-radius: 50%;
  font-size: 12px;
  color: #9CA3AF;
}

/* Navigate to set button */
.user-collection-nav-btn {
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #0369A1;
  transition: transform 0.2s, background 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-collection-nav-btn:hover {
  background: #BAE6FD;
}

/* Trophy case */
.user-trophy-case {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E5E7EB;
  flex: 1;
  min-height: 0;
  align-self: stretch;
}

.user-trophy-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #F9FAFB;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}

.user-trophy-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Trophy medal button */
.user-trophy-medal-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #FFFBEB;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  transition: background-color 0.15s;
}

.user-trophy-medal-btn:hover {
  background-color: #FEF3C7;
}

.user-trophy-medal-emoji {
  font-size: 14px;
}

.user-trophy-medal-arrow {
  color: #9CA3AF;
  font-size: 10px;
}

/* Geography sections expand/collapse */
.expand-icon {
  font-size: 10px;
  color: #6B7280;
  transition: transform 0.2s;
}

.expand-icon-rotated {
  transform: rotate(90deg);
}

.expand-icon-rotated-180 {
  transform: rotate(180deg);
}

.expand-icon-rotated-neg90 {
  transform: rotate(-90deg);
}

/* Location search result hover */
.location-result-item:hover {
  background: #F3F4F6;
}

/* ============================================================================
   LOCATION PANEL COMPONENTS
   ============================================================================ */

/* Location panel suggestion button */
.loc-suggestion-btn {
  transition: background 0.15s, border-color 0.15s;
}

.loc-suggestion-btn:hover {
  background: #DCFCE7;
  border-color: #86EFAC;
}

/* Location panel loading state */
.loc-panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  font-family: system-ui, sans-serif;
}

/* Location panel error state */
.loc-panel-error {
  text-align: center;
  padding: 60px 20px;
  font-family: system-ui, sans-serif;
}

.loc-panel-error-text {
  color: #EF4444;
}

/* Location panel main container */
.loc-panel-container {
  font-family: system-ui, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Location panel header card */
.loc-panel-header-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

/* Location panel hero image */
.loc-panel-hero {
  height: 200px;
  background: linear-gradient(135deg, #10B981, #795548);
  background-size: cover;
  background-position: center;
}

/* Location panel hero fallback (no image) */
.loc-panel-hero-fallback {
  height: 200px;
  background: linear-gradient(135deg, #10B981, #795548);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 48px;
}

/* Location panel photo collage (replaces single hero when 3+ images) */
.loc-panel-collage {
  display: flex;
  height: 200px;
  gap: 0;
}

.loc-panel-collage-img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

/* Location panel header body */
.loc-panel-header-body {
  padding: 24px;
}

/* Location panel title */
.loc-panel-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: #1F2937;
}

/* Location panel address */
.loc-panel-address {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #6B7280;
}

/* Location panel quick stats row */
.loc-panel-quick-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

/* Location panel yoink count badge */
.loc-panel-yoink-count {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #EBF5FF;
  color: #795548;
  border-radius: 6px;
  font-size: 14px;
}

/* Location panel map link */
.loc-panel-map-link {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.loc-panel-map-link:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Location panel map thumbnail */
.loc-panel-map-thumb {
  width: 120px;
  height: 70px;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #2e7d32;
  font-size: 11px;
}

/* Location panel map icon */
.loc-panel-map-icon {
  font-size: 24px;
}

/* Location panel map label */
.loc-panel-map-label {
  font-weight: 500;
}

/* Location panel section heading */
.loc-panel-section-heading {
  margin: 0 0 16px 0;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
  background: #FFFBEB;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-block;
}

/* Location panel details section (standalone card below header) */
.loc-panel-details {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px 24px;
  margin-bottom: 24px;
}

/* Location panel detail row */
.loc-panel-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #F3F4F6;
}

/* Location panel detail label */
.loc-panel-detail-label {
  color: #6B7280;
  font-size: 14px;
}

/* Location panel detail value */
.loc-panel-detail-value {
  font-size: 14px;
  color: #1F2937;
}

/* Location panel detail link */
.loc-panel-detail-link {
  font-size: 14px;
  color: #795548;
  text-decoration: none;
}

/* Location panel detail link with truncation (website) */
.loc-panel-detail-link-truncate {
  font-size: 14px;
  color: #795548;
  text-decoration: none;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Location panel hours row */
.loc-panel-hours-row {
  padding: 8px 0;
  border-bottom: 1px solid #F3F4F6;
}

/* Location panel hours label */
.loc-panel-hours-label {
  color: #6B7280;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Location panel hours text */
.loc-panel-hours-text {
  font-size: 13px;
  color: #1F2937;
  line-height: 1.6;
}

/* Location panel description row */
.loc-panel-desc-row {
  padding: 8px 0;
}

/* Location panel description text */
.loc-panel-desc-text {
  margin: 0;
  font-size: 14px;
  color: #4B5563;
  line-height: 1.6;
}

/* Location panel permanently closed banner */
.loc-panel-banner-closed {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid #F59E0B;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.loc-panel-banner-closed-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.loc-panel-banner-closed-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.loc-panel-banner-closed-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #92400E;
}

.loc-panel-banner-closed-text {
  margin: 0;
  font-size: 14px;
  color: #A16207;
  line-height: 1.5;
}

/* Location panel temporarily closed banner */
.loc-panel-banner-temp {
  background: #FEF9C3;
  border: 1px solid #FACC15;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.loc-panel-banner-temp-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loc-panel-banner-temp-icon {
  font-size: 20px;
}

.loc-panel-banner-temp-text {
  margin: 0;
  font-size: 14px;
  color: #854D0E;
}

/* Location panel also visited section (standalone card below details) */
.loc-panel-also-visited {
  background: #F0FDF4;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loc-panel-also-visited-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #166534;
}

.loc-panel-also-visited-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Location panel also visited chip */
.loc-panel-also-visited-chip {
  display: inline-block;
  padding: 6px 12px;
  background: white;
  border: 1px solid #BBF7D0;
  border-radius: 20px;
  font-size: 13px;
  color: #166534;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.loc-panel-also-visited-chip:hover {
  background: #DCFCE7;
  border-color: #86EFAC;
}

/* Location panel map error */
.loc-panel-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #F3F4F6;
}

/* ============================================================================
   YOINK DETAIL PANEL
   ============================================================================ */

/* Yoink card hover in detail view */
.yoink-detail-card-hover {
  transition: transform 0.2s, box-shadow 0.2s;
}

.yoink-detail-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Image carousel dot */
.carousel-dot-active {
  background: white;
}

.carousel-dot-inactive {
  background: rgba(255, 255, 255, 0.5);
}

/* ============================================================================
   Edit Yoink Components
   ============================================================================ */

/* Modal content container */
.edit-yoink-modal-content {
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Disable decorative inner border on scrollable edit panel — it cuts through content */
.edit-yoink-modal-content::before {
  display: none;
}

/* Modal body padding */
.edit-yoink-body {
  padding: 24px;
}

/* Modal heading */
.edit-yoink-heading {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1F2937;
}

/* Error banner */
.edit-yoink-error {
  padding: 12px;
  background: #FEE2E2;
  color: #DC2626;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Form layout */
.edit-yoink-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Form labels */
.edit-yoink-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.edit-yoink-label-photos {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

/* Required asterisk */
.edit-yoink-required {
  color: #DC2626;
}

/* Location display box (when location is selected) */
.edit-location-display-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #F9FAFB;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
}

/* Location name text */
.edit-location-name {
  margin: 0;
  font-size: 15px;
  color: #1F2937;
  font-weight: 500;
}

/* Location address text */
.edit-location-address {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #6B7280;
}

/* Change location button */
.edit-location-change-btn {
  padding: 6px 12px;
  background: white;
  color: #374151;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* Location search input wrapper */
.edit-location-input-wrapper {
  position: relative;
}

/* Location search input */
.edit-location-search-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
}

/* Location search icon */
.edit-location-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #9CA3AF;
}

/* Location search results container */
.edit-location-search-results {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

/* Cancel location search button */
.edit-location-cancel-btn {
  margin-top: 8px;
  padding: 8px 12px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* Photos container grid */
.edit-photos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

/* Photos action bar */
.edit-photos-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Add photo label/button */
.edit-add-photo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #F3F4F6;
  color: #374151;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* Photo count display */
.edit-photo-count {
  font-size: 13px;
  color: #6B7280;
}

/* Hint text (used in multiple places) */
.edit-yoink-hint {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #6B7280;
}

/* Photo error text */
.edit-photo-error {
  color: #DC2626;
  font-size: 12px;
  margin-top: 8px;
}

/* Text input fields */
.edit-yoink-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Title character count */
.edit-title-count {
  text-align: right;
  font-size: 12px;
  color: #6B7280;
  margin: 4px 0 0 0;
}

/* Textarea (legacy, kept for fallback) */
.edit-yoink-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  resize: vertical;
  box-sizing: border-box;
}

/* ============================================================================
   Quill Editor v2.0.3 - Snow Theme (embedded to avoid CDN/CSS extraction issues)
   https://quilljs.com - Copyright (c) 2017-2024, Slab
   ============================================================================ */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}
.ql-container.ql-disabled .ql-tooltip{visibility:hidden}
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}
.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}
.ql-clipboard p{margin:0;padding:0}
.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}
.ql-editor > *{cursor:text}
.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}
.ql-editor table{border-collapse:collapse}
.ql-editor td{border:1px solid #000;padding:2px 5px}
.ql-editor ol{padding-left:1.5em}
.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}
.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}
.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}
.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}
.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}
.ql-editor li[data-list=ordered]{counter-increment:list-0}
.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}
.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}
.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}
.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}
.ql-editor table{table-layout:fixed;width:100%}
.ql-editor table td{outline:none}
.ql-editor .ql-video{display:block;max-width:100%}
.ql-editor .ql-bg-black{background-color:#000}
.ql-editor .ql-bg-red{background-color:#e60000}
.ql-editor .ql-bg-orange{background-color:#f90}
.ql-editor .ql-bg-yellow{background-color:#ff0}
.ql-editor .ql-bg-green{background-color:#008a00}
.ql-editor .ql-bg-blue{background-color:#06c}
.ql-editor .ql-bg-purple{background-color:#93f}
.ql-editor .ql-color-white{color:#fff}
.ql-editor .ql-color-red{color:#e60000}
.ql-editor .ql-color-orange{color:#f90}
.ql-editor .ql-color-yellow{color:#ff0}
.ql-editor .ql-color-green{color:#008a00}
.ql-editor .ql-color-blue{color:#06c}
.ql-editor .ql-color-purple{color:#93f}
.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}
.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}
.ql-editor .ql-size-small{font-size:.75em}
.ql-editor .ql-size-large{font-size:1.5em}
.ql-editor .ql-size-huge{font-size:2.5em}
.ql-editor .ql-align-center{text-align:center}
.ql-editor .ql-align-justify{text-align:justify}
.ql-editor .ql-align-right{text-align:right}
.ql-editor .ql-ui{position:absolute}
.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}

/* Snow theme - toolbar */
.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}
.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}
.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}
.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}
.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}
.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}
.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill{fill:#06c}
.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter{stroke:#06c}

/* Snow theme - core */
.ql-snow{box-sizing:border-box}
.ql-snow *{box-sizing:border-box}
.ql-snow .ql-hidden{display:none}
.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}
.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}
.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}
.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}
.ql-snow .ql-formats{display:inline-block;vertical-align:middle}
.ql-snow .ql-formats:after{clear:both;content:'';display:table}
.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}
.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}
.ql-snow .ql-empty{fill:none}
.ql-snow .ql-even{fill-rule:evenodd}
.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}
.ql-snow .ql-transparent{opacity:.4}
.ql-snow .ql-direction svg:last-child{display:none}
.ql-snow .ql-direction.ql-active svg:last-child{display:inline}
.ql-snow .ql-direction.ql-active svg:first-child{display:none}
.ql-snow .ql-editor h1{font-size:2em}
.ql-snow .ql-editor h2{font-size:1.5em}
.ql-snow .ql-editor h3{font-size:1.17em}
.ql-snow .ql-editor h4{font-size:1em}
.ql-snow .ql-editor h5{font-size:.83em}
.ql-snow .ql-editor h6{font-size:.67em}
.ql-snow .ql-editor a{text-decoration:underline}
.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}
.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}
.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}
.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}
.ql-snow .ql-editor img{max-width:100%}

/* Snow theme - pickers (header dropdown, etc.) */
.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}
.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}
.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}
.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}
.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}
.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}
.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}
.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}
.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}
.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}
.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}
.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}

/* Snow theme - header picker labels */
.ql-snow .ql-picker.ql-header{width:98px}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}

/* Snow theme - toolbar chrome */
.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}
.ql-toolbar.ql-snow .ql-formats{margin-right:15px}
.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}
.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}
.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}

/* Snow theme - tooltip */
.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}
.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}
.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}
.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}
.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}
.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}
.ql-snow .ql-tooltip a{line-height:26px}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}
.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}
.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}
.ql-snow a{color:#06c}
.ql-container.ql-snow{border:1px solid #ccc}
.ql-code-block-container{position:relative}
.ql-code-block-container .ql-ui{right:5px;top:5px}

/* Quill Rich Text Editor - shared styles for create & edit modals */
.yoink-quill-editor {
  border-radius: 0 0 8px 8px;
  font-size: 16px;
  min-height: 100px;
}

.yoink-quill-editor .ql-editor {
  min-height: 100px;
  font-size: 16px;
  line-height: 1.5;
}

.yoink-quill-editor .ql-editor.ql-blank::before {
  font-style: normal;
  color: #9CA3AF;
}

/* Quill toolbar styling to match the app theme */
.yoink-quill-editor + .ql-toolbar,
.ql-toolbar.ql-snow {
  border-radius: 8px 8px 0 0;
  border-color: #D1D5DB;
}

.ql-container.ql-snow {
  border-color: #D1D5DB;
  border-radius: 0 0 8px 8px;
}

/* Rich text display in detail view */
.yoink-rich-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.yoink-rich-text p {
  margin: 0 0 8px 0;
}

.yoink-rich-text p:last-child {
  margin-bottom: 0;
}

.yoink-rich-text h1,
.yoink-rich-text h2,
.yoink-rich-text h3 {
  margin: 16px 0 8px 0;
  line-height: 1.3;
}

.yoink-rich-text h1:first-child,
.yoink-rich-text h2:first-child,
.yoink-rich-text h3:first-child {
  margin-top: 0;
}

.yoink-rich-text h1 { font-size: 1.4em; }
.yoink-rich-text h2 { font-size: 1.2em; }
.yoink-rich-text h3 { font-size: 1.1em; }

.yoink-rich-text ul,
.yoink-rich-text ol {
  margin: 8px 0;
  padding-left: 24px;
}

.yoink-rich-text li {
  margin-bottom: 4px;
}

.yoink-rich-text blockquote {
  border-left: 3px solid #D1D5DB;
  margin: 8px 0;
  padding: 4px 16px;
  color: #6B7280;
}

.yoink-rich-text a {
  color: #795548;
  text-decoration: underline;
}

.yoink-rich-text strong,
.yoink-rich-text b {
  font-weight: 600;
}

.yoink-rich-text code {
  background: #F3F4F6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.yoink-rich-text pre {
  background: #F3F4F6;
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
}

/* Category button */
.edit-category-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 15px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

/* Requirements checklist container */
.edit-requirements-checklist {
  padding: 12px;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* Checklist heading */
.edit-checklist-heading {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: #92400E;
}

/* Checklist items list */
.edit-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Single requirement item */
.edit-requirement-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #92400E;
}

/* Action buttons container */
.edit-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Cancel button */
.edit-cancel-btn {
  flex: 1;
  padding: 12px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

/* Submit button */
.edit-submit-btn {
  flex: 1;
  padding: 12px;
  background: #795548;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Submit spinner override */
.edit-submit-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* Search status message */
.edit-search-status {
  padding: 12px;
  color: #6B7280;
}

/* Search error message */
.edit-search-error {
  padding: 12px;
  color: #DC2626;
}

/* Location result item */
.edit-location-result-item {
  padding: 12px;
  border-bottom: 1px solid #E5E7EB;
  cursor: pointer;
}

/* Location result name */
.edit-location-result-name {
  font-size: 15px;
  color: #1F2937;
  font-weight: 500;
}

/* Location result secondary text */
.edit-location-result-secondary {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* Location type warning container */
.edit-location-warning-container {
  padding: 12px;
  text-align: center;
}

/* Location type warning box */
.edit-location-warning-box {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* Location type warning title */
.edit-location-warning-title {
  color: #92400E;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Location type warning description */
.edit-location-warning-text {
  color: #78350F;
  font-size: 12px;
  line-height: 1.3;
}

/* Location type warning button */
.edit-location-warning-btn {
  background: #F59E0B;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* Social URL hint */
.edit-social-url-hint {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6B7280;
}

/* ============================================================================
   Category Picker Components
   ============================================================================ */

.cat-picker-modal-content {
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.cat-picker-header {
  padding: 24px 24px 16px;
}

.cat-picker-title {
  margin: 0 0 16px 0;
  font-size: 22px;
  font-weight: 600;
  color: #1F2937;
}

.cat-picker-search-wrapper {
  position: relative;
}

.cat-picker-search-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
}

.cat-picker-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #9CA3AF;
}

.cat-picker-state-parks-toggle {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-picker-state-parks-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #6B7280;
}

.cat-picker-state-parks-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.cat-picker-filter-container {
  margin-top: 12px;
}

.cat-picker-filter-toggle {
  display: inline-flex;
  background: #F3F4F6;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.cat-picker-filter-btn {
  padding: 6px 12px;
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cat-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 24px;
}

.cat-picker-section-heading {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

.cat-picker-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6B7280;
}

.cat-picker-empty-text {
  margin: 0;
}

.cat-picker-empty-gap-text {
  margin: 0 0 8px 0;
}

.cat-picker-empty-subtext {
  margin: 0;
  font-size: 13px;
}

.cat-picker-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #F3F4F6;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  margin-bottom: 16px;
  width: 100%;
  text-align: left;
}

.cat-picker-drill-section {
  margin-bottom: 16px;
}

.cat-picker-drill-heading {
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-picker-drill-emoji {
  font-size: 20px;
}

.cat-picker-drill-subtitle {
  font-size: 12px;
  color: #6B7280;
  margin: 0;
}

.cat-picker-no-subcategories {
  color: #6B7280;
  font-size: 14px;
  padding: 12px;
}

.cat-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  margin-bottom: 8px;
}

.cat-picker-item-set {
  background: #F0F9FF;
  border-color: #BAE6FD;
}

.cat-picker-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-picker-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cat-picker-emoji {
  font-size: 20px;
}

.cat-picker-name {
  font-size: 15px;
  color: #1F2937;
}

.cat-picker-name-bold {
  font-size: 15px;
  font-weight: 500;
  color: #1F2937;
}

.cat-picker-count {
  font-size: 12px;
  color: #9CA3AF;
  margin-left: 6px;
}

.cat-picker-set-badge {
  display: inline-block;
  padding: 2px 6px;
  background: #DBEAFE;
  color: #2563EB;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  margin-left: 6px;
}

.cat-picker-parent-set-link {
  margin-top: 4px;
}

.cat-picker-parent-set-btn {
  padding: 2px 8px;
  background: #F0F9FF;
  color: #0369A1;
  border: 1px solid #BAE6FD;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.cat-picker-select-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cat-picker-select-btn-default {
  background: #F3F4F6;
  color: #374151;
}

.cat-picker-select-btn-selected {
  background: #795548;
  color: white;
}

.cat-picker-unfollow-btn {
  padding: 6px 10px;
  background: #FEE2E2;
  color: #DC2626;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cat-picker-follow-btn {
  padding: 6px 10px;
  background: #D1FAE5;
  color: #059669;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cat-picker-set-unfollow-btn {
  padding: 6px 10px;
  background: #FEE2E2;
  color: #DC2626;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cat-picker-set-follow-btn {
  padding: 6px 10px;
  background: #DBEAFE;
  color: #2563EB;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cat-picker-goto-btn {
  padding: 6px 12px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cat-picker-action-row {
  display: flex;
  align-items: center;
}

.cat-picker-action-row-gap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-picker-progress {
  font-size: 12px;
  color: #6B7280;
}

.cat-picker-progress-mr {
  margin-right: 4px;
}

.cat-picker-mr-6 {
  margin-right: 6px;
}

.cat-picker-parent {
  margin-bottom: 8px;
}

.cat-picker-parent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
}

.cat-picker-parent-header-set {
  background: #F0F9FF;
  border-color: #BAE6FD;
}

.cat-picker-expand-arrow {
  font-size: 12px;
  color: #6B7280;
  transition: transform 0.2s;
}

.cat-picker-expand-arrow-expanded {
  transform: rotate(90deg);
}

.cat-picker-parent-count {
  font-size: 12px;
  color: #9CA3AF;
}

.cat-picker-children {
  margin-left: 24px;
  margin-top: 8px;
  display: none;
}

.cat-picker-children-expanded {
  display: block;
}


/* Popular Categories Grid (onboarding) */

.popular-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E5E7EB;
}

.popular-subtitle {
  font-size: 13px;
  color: #6B7280;
  margin: 0 0 12px 0;
}

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

@media (max-width: 400px) {
  .popular-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.popular-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: #F9FAFB;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}

.popular-tile:hover {
  border-color: #059669;
  background: #ECFDF5;
}

.popular-tile:active {
  transform: scale(0.97);
}

.popular-tile-emoji {
  font-size: 28px;
  line-height: 1;
}

.popular-tile-name {
  font-size: 12px;
  font-weight: 600;
  color: #1F2937;
  line-height: 1.2;
}

.popular-tile-count {
  font-size: 10px;
  color: #9CA3AF;
}

.popular-tile-followed {
  border-color: #059669;
  background: #ECFDF5;
  position: relative;
}

.popular-tile-followed:hover {
  border-color: #DC2626;
  background: #FEF2F2;
}

.popular-tile-check {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 14px;
  color: #059669;
  font-weight: 700;
}

.popular-tile-followed:hover .popular-tile-check {
  color: #DC2626;
}

.popular-tile-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6B7280;
  letter-spacing: 0.5px;
}

/* "Let's Go!" button shown after user picks popular categories */
.popular-lets-go-btn {
  display: block;
  margin: 16px auto 0;
  padding: 10px 32px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brass) 0%, var(--brass-shine) 100%);
  color: var(--leather-dark);
  border: 2px solid var(--leather-dark);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: fabTooltipIn 0.3s ease-out;
}

.popular-lets-go-btn:hover {
  background: linear-gradient(135deg, var(--brass-shine) 0%, #FFE066 100%);
  transform: scale(1.04);
}

/* ============================================================================
   Create Yoink Components
   ============================================================================ */

/* Modal structure */
.create-modal-content {
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.create-modal-body {
  padding: 24px;
}

.create-modal-title {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1F2937;
}

.create-error {
  padding: 12px;
  background: #FEE2E2;
  color: #DC2626;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.create-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.create-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.create-label-sm {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.create-required {
  color: #DC2626;
}

/* GPS Status */
.create-gps-status {
  padding: 12px;
  background: #F3F4F6;
  border-radius: 8px;
  margin-bottom: 12px;
}

.create-gps-status-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.create-gps-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* Location display card */
.create-location-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #F0FDF4;
  border: 1px solid #86EFAC;
  border-radius: 8px;
  gap: 12px;
}

.create-location-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.create-location-icon {
  flex-shrink: 0;
}

.create-location-text {
  min-width: 0;
}

.create-location-name {
  margin: 0;
  font-size: 15px;
  color: #1F2937;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-location-address {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-location-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.create-btn-small {
  padding: 6px 10px;
  background: white;
  color: #374151;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

/* Nearby places */
.create-nearby-header {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.create-nearby-hint {
  font-size: 13px;
  color: #6B7280;
}

.create-nearby-search-link {
  padding: 4px 8px;
  background: transparent;
  color: #795548;
  border: none;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.create-nearby-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

.create-nearby-item {
  padding: 12px;
  border-bottom: 1px solid #E5E7EB;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
}

.create-nearby-item-selected {
  background: #F0FDF4;
}

.create-nearby-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.create-nearby-radio-selected {
  border-color: #16A34A;
}

.create-nearby-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #16A34A;
}

.create-nearby-item-text {
  min-width: 0;
}

.create-nearby-item-name {
  font-size: 15px;
  color: #1F2937;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-nearby-item-address {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Location search */
.create-search-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.create-btn-gps {
  padding: 10px 16px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.create-btn-back {
  padding: 10px 16px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.create-search-field {
  position: relative;
}

.create-search-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
}

.create-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #9CA3AF;
}

.create-search-results {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

.create-search-tip {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #6B7280;
}

/* Photos section */
.create-photos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.create-photos-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.create-add-photo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #F3F4F6;
  color: #374151;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.create-photo-count {
  font-size: 13px;
  color: #6B7280;
}

.create-photo-hint {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #6B7280;
}

.create-photo-error {
  color: #DC2626;
  font-size: 12px;
  margin-top: 8px;
}

/* Form inputs */
.create-text-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

.create-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  resize: vertical;
  box-sizing: border-box;
}

.create-char-count {
  text-align: right;
  font-size: 12px;
  color: #6B7280;
  margin: 4px 0 0 0;
}

.create-tip {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6B7280;
}

/* Category button */
.create-category-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 15px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

/* Requirements checklist */
.create-checklist {
  padding: 12px;
  border: 1px solid;
  border-radius: 8px;
  margin-bottom: 8px;
}

.create-checklist-title {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: #92400E;
}

.create-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.create-requirement-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* Submit buttons */
.create-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.create-btn-cancel {
  flex: 1;
  padding: 12px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.create-btn-submit {
  flex: 1;
  padding: 12px;
  background: #795548;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.create-submit-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* Location type warning */
.create-warning-container {
  padding: 12px;
  text-align: center;
}

.create-warning-box {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.create-warning-title {
  color: #92400E;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.create-warning-text {
  color: #78350F;
  font-size: 12px;
  line-height: 1.3;
}

.create-warning-btn {
  background: #F59E0B;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* Search result items */
.create-search-status {
  padding: 12px;
  color: #6B7280;
}

.create-search-error-text {
  padding: 12px;
  color: #DC2626;
}

.create-result-name {
  font-size: 15px;
  color: #1F2937;
  font-weight: 500;
}

.create-result-address {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* Backdrop fade for dismiss */
.create-backdrop-fading {
  opacity: 0;
  transition: opacity 0.2s;
}