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

:root {
  --bg-color: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-color: #333333;
  --text-secondary: #666666;
  --border-color: #e0e0e0;
  --accent-color: #0066cc;
  --accent-hover: #0052a3;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial,
    sans-serif;
  background-color: var(--bg-secondary);
  color: var(--text-color);
  line-height: 1.6;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  padding: 1.5rem 2rem;
  text-align: center;
  /* The mark and the wordmark are one unit, so they are centred together
     rather than each being centred in its own box. Wrapping keeps the pair
     intact on narrow screens instead of letting the title overflow. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.app-logo {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .app-header {
    padding: 1rem 0.75rem;
    gap: 0.5rem;
  }

  .app-logo {
    width: 1.9rem;
    height: 1.9rem;
  }
}

.app-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}

.app-main {
  flex: 1;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem;
}

@media (max-width: 768px) {
  .app-main {
    padding: 1.5rem 1rem;
  }
}

/* Filters */
.filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  background-color: var(--bg-color);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  border: 1px solid var(--border-color);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 150px;
}

.filter-group label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.filter-group select {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
  background-color: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
}

.filter-group select:hover {
  border-color: var(--accent-color);
}

.filter-group select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* API Request Editor */
.api-request-editor {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 2rem;
  overflow: hidden;
}

.api-request-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  cursor: pointer;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.api-request-header:hover {
  background-color: #e8e8e8;
}

.api-request-label {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.95rem;
}

.api-request-toggle {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.api-request-content {
  padding: 1.5rem;
}

.api-url-display {
  margin-bottom: 1.5rem;
}

.api-url-display > label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.url-display-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.url-display {
  flex: 1;
  min-width: 300px;
  padding: 0.75rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: "Monaco", "Menlo", "Courier New", monospace;
  font-size: 0.875rem;
  word-break: break-all;
  color: var(--text-color);
}

.url-input-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.url-input {
  flex: 1;
  min-width: 300px;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: "Monaco", "Menlo", "Courier New", monospace;
  font-size: 0.875rem;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.url-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.url-edit-btn,
.url-copy-btn,
.url-apply-btn,
.url-cancel-btn {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
  white-space: nowrap;
}

.url-edit-btn:hover,
.url-copy-btn:hover {
  background-color: var(--bg-secondary);
  border-color: var(--accent-color);
}

.url-apply-btn {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.url-apply-btn:hover {
  background-color: var(--accent-hover);
}

.url-cancel-btn {
  background-color: var(--bg-secondary);
}

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

.api-params-editor {
  margin-top: 1.5rem;
}

.api-params-editor > label {
  display: block;
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.apply-filters-btn {
  padding: 0.5rem 1rem;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.apply-filters-btn:hover {
  background-color: var(--accent-hover);
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.param-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.param-item label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.param-item input,
.param-item select {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.875rem;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.param-item input:focus,
.param-item select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* Results Info */
.results-info {
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  background-color: var(--bg-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: inline-block;
}

/* Apartment List */
.apartment-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Apartment Card */
.apartment-card {
  background-color: var(--bg-color);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.apartment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--accent-color);
}

.apartment-image-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background-color: var(--bg-secondary);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.apartment-card:hover .apartment-image-container {
  transform: scale(1.02);
}

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

.image-counter {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

.image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.image-nav:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.image-nav-prev {
  right: 0.5rem;
}

.image-nav-next {
  left: 0.5rem;
}

.apartment-content {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.apartment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.apartment-price {
  font-family: "Courier New", monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1.2;
}

.apartment-type {
  font-size: 1rem;
  color: var(--text-secondary);
  white-space: nowrap;
  padding-top: 0.25rem;
}

.apartment-address-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.apartment-address {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.4;
}

.apartment-neighborhood {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.apartment-description {
  font-size: 1.275rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text-color);
  line-height: 1.9;
  padding: 1.5rem;
  background-color: var(--bg-secondary);
  border-radius: 8px;
  margin: 1rem 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.apartment-details {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.75rem 0;
}

.detail-item {
  display: inline-block;
}

.apartment-amenities {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.amenity-icon {
  font-size: 1.5rem;
}

.amenity-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
}

.apartment-contact-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.5rem;
}

.contact-name {
  font-weight: 600;
  color: var(--text-color);
  font-size: 1rem;
}

.contact-phone {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.contact-phone:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.source-link.facebook-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #1877F2;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  border-radius: 6px;
}

.source-link.facebook-link:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.facebook-icon {
  width: 24px;
  height: 24px;
}

.maps-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #34A853;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  border-radius: 6px;
  flex-shrink: 0;
}

.maps-link:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.maps-icon {
  width: 24px;
  height: 24px;
}

.agent-badge {
  display: inline-block;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Gallery Overlay */
.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}

.gallery-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  cursor: default;
}

.gallery-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.gallery-close {
  position: absolute;
  top: -40px;
  left: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-close:hover {
  opacity: 0.7;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.gallery-nav:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.gallery-nav-prev {
  right: -60px;
}

.gallery-nav-next {
  left: -60px;
}

.gallery-counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 1rem;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding: 1.5rem;
  background-color: var(--bg-color);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.pagination-button {
  padding: 0.75rem 1.5rem;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pagination-button:hover:not(:disabled) {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

.pagination-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

/* Loading and Error States */
.loading,
.error {
  text-align: center;
  padding: 3rem;
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.error {
  color: #d32f2f;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
  font-size: 1.125rem;
}

/* Source Filter Bar */
.source-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  background-color: var(--bg-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* Each row is one group of controls. Wrapping rather than overflowing keeps a
   long chip inside the viewport on narrow screens instead of pushing the page
   into horizontal scroll. */
.source-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.source-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-color);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}

.source-filter-btn:hover {
  background-color: var(--bg-secondary);
  border-color: var(--accent-color);
}

.source-filter-btn.active {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.source-filter-btn.active.yad2-btn {
  background-color: #FF6600;
  border-color: #FF6600;
}

.source-filter-logo {
  height: 16px;
  width: auto;
}

.source-filter-btn.active .source-filter-logo {
  filter: brightness(10);
}

.source-filter-count {
  opacity: 0.7;
  font-size: 0.8rem;
}

/* Yad2 source link in card */
.source-link.yad2-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  border-radius: 6px;
}

.source-link.yad2-link:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.yad2-icon {
  height: 22px;
  width: auto;
}

.yad2-order-id {
  font-family: "Monaco", "Menlo", "Courier New", monospace;
  font-size: 0.75rem;
  color: #FF6600;
  opacity: 0.7;
}

/* Load More Button */
.load-more-btn {
  display: block;
  margin: 2rem auto;
  padding: 0.75rem 2rem;
  background-color: #FF6600;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.load-more-btn:hover:not(:disabled) {
  background-color: #e55b00;
  transform: translateY(-1px);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Results Bar (info + view toggle) */
.results-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.view-toggle {
  display: flex;
  gap: 0.25rem;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.25rem;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.view-toggle-btn:hover {
  background-color: var(--bg-secondary);
}

.view-toggle-btn.active {
  background-color: var(--accent-color);
  color: white;
}

/* Map */
.map-container {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--bg-color);
}

.map-legend {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.fb {
  background-color: #1877f2;
  border: 2px solid #1564cc;
}

.legend-dot.yad2 {
  background-color: #FF6600;
  border: 2px solid #e55b00;
}

.legend-dot.street-only {
  background-color: transparent;
  border-width: 3px;
}

.legend-divider {
  color: var(--border-color);
  font-size: 0.9rem;
  margin: 0 0.25rem;
}

.legend-note {
  margin-right: auto;
  opacity: 0.7;
  font-size: 0.8rem;
}

.geocoding-banner {
  padding: 0.5rem 1rem;
  background-color: #eff6ff;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: #1d4ed8;
  text-align: center;
}

.geocoding-done {
  background-color: #f0fdf4;
  color: #166534;
}

.geocoding-refresh-btn {
  background: none;
  border: none;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
}

.map-element {
  height: 550px;
  width: 100%;
  direction: ltr;
}

/* Map markers */
.leaflet-div-icon {
  background: none !important;
  border: none !important;
}

.marker-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.marker-dot.fb {
  background-color: #1877f2;
}

.marker-dot.yad2 {
  background-color: #FF6600;
}

/* Street-only: hollow ring */
.marker-dot.street-only {
  background-color: transparent;
  border-width: 4px;
}

.marker-dot.street-only.fb {
  border-color: #1877f2;
}

.marker-dot.street-only.yad2 {
  border-color: #FF6600;
}

/* Map popups */
.map-popup {
  direction: rtl;
  text-align: right;
  font-family: inherit;
  min-width: 180px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.popup-price {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-color, #1a1a2e);
}

.popup-source {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: white;
}

.popup-source-yad2 {
  background-color: #FF6600;
}

.popup-source-dira {
  background-color: #1877f2;
}

.popup-address {
  font-size: 0.85rem;
  color: #444;
  margin-bottom: 0.3rem;
}

.popup-precision {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
}

.precision-exact {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.precision-street {
  background-color: #fef3c7;
  color: #92400e;
}

.popup-details {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.3rem;
}

.popup-link {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--accent-color, #2563eb);
  text-decoration: none;
  margin-top: 0.2rem;
}

.popup-link:hover {
  text-decoration: underline;
}

/* Watched badge on card */
.apartment-card.watched {
  opacity: 0.85;
}

.apartment-card.watched:hover {
  opacity: 1;
}

.watched-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  background-color: rgba(34, 197, 94, 0.85);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
  pointer-events: none;
}

.apartment-card {
  position: relative;
}

/* WhatsApp link */
.contact-phone-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #25D366;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

.whatsapp-link:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

.whatsapp-icon {
  width: 22px;
  height: 22px;
}

/* Watched marker on map */
.marker-dot.watched {
  opacity: 0.7;
}

.marker-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  color: white;
  border-radius: 50%;
  font-size: 6px;
  line-height: 10px;
  text-align: center;
  pointer-events: none;
}

.marker-dot {
  position: relative;
}

/* Archive button on card */
.archive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  margin-right: auto;
}

.archive-btn:hover {
  background-color: #fee2e2;
  border-color: #ef4444;
  color: #ef4444;
}

.archive-btn.restore-btn:hover {
  background-color: #dcfce7;
  border-color: #22c55e;
  color: #22c55e;
}

/* Archive toggle in source filter bar. It sits on its own row under the source
   chips with a rule above it: a saved-items view is a different affordance from
   picking a source, and the separation reads as deliberate at any width. */
.source-filter-row-archive {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.source-filter-btn.archived-btn.active {
  background-color: #6b7280;
  border-color: #6b7280;
  color: white;
}

/* Archive button in map popup */
.popup-archive-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.2s;
}

.popup-archive-btn:hover {
  opacity: 1;
  background-color: #fee2e2;
}

/* Responsive */
@media (max-width: 1024px) {
  .apartment-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .app-main {
    padding: 1.5rem 1rem;
  }

  .filters {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  .apartment-image-container {
    height: 250px;
  }

  .apartment-content {
    padding: 1.25rem;
  }

  .apartment-price {
    font-size: 1.5rem;
  }

  .gallery-nav-prev {
    right: 10px;
  }

  .gallery-nav-next {
    left: 10px;
  }

  .gallery-close {
    top: 10px;
    left: 10px;
  }

  .params-grid {
    grid-template-columns: 1fr;
  }

  .url-display-group,
  .url-input-group {
    flex-direction: column;
  }

  .url-display,
  .url-input {
    min-width: 100%;
  }

  .url-edit-btn,
  .url-copy-btn,
  .url-apply-btn,
  .url-cancel-btn {
    width: 100%;
  }
}

/* ===== Swipe Deck (Tinder-style) ===== */
.swipe-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* Header actions group (fullscreen toggle + undo). */
.swipe-header-actions {
  display: flex;
  gap: 0.5rem;
}

/* Fullscreen: cover the whole viewport and show only the deck + controls,
   hiding the rest of the app. Fixed positioning works on iOS Safari, unlike
   the element Fullscreen API. */
.swipe-deck--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  gap: 0.6rem;
  padding: calc(0.6rem + env(safe-area-inset-top)) 0.6rem
    calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--bg-color);
  box-sizing: border-box;
}

/* Keep header/card a sane width on large screens while the backdrop fills. */
.swipe-deck--fullscreen .swipe-deck-header,
.swipe-deck--fullscreen .swipe-stage {
  max-width: 480px;
}

/* Stage grows to fill the available height in fullscreen. */
.swipe-deck--fullscreen .swipe-stage {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 0;
}

/* Page scroll/bounce lock applied to <body> while the deck is fullscreen.
   position:fixed + inset:0 collapses the page to the viewport box, killing any
   horizontal overflow (wide filters/editor) that would otherwise misalign the
   fixed overlay on mobile so it only covers part of the screen. */
body.swipe-fs-lock {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

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

.swipe-remaining {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.swipe-btn-undo-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.swipe-btn-undo-top:hover:not(:disabled) {
  background: var(--bg-secondary);
  color: var(--accent-color);
}

.swipe-btn-undo-top:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.swipe-stage {
  position: relative;
  width: 100%;
  height: 70vh;
  max-height: 640px;
  min-height: 440px;
}

.swipe-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border-color);
  user-select: none;
  will-change: transform;
}

.swipe-card--active {
  cursor: grab;
  /* pan-y removes horizontal panning and double-tap zoom from the browser's
     repertoire here, so the only native gesture left to compete with a swipe is
     the vertical scroll. That last competitor is settled in JS: the card's
     non-passive touchmove listener resolves the gesture axis below the browser's
     touch-slop and vetoes the pan when it is horizontal. touch-action alone
     cannot do it — pan-y still lets any downward drift start a scroll, and a
     started scroll cancels the pointer stream mid-swipe. */
  touch-action: pan-y;
  z-index: 2;
}

.swipe-card--active:active {
  cursor: grabbing;
}

.swipe-card:not(.swipe-card--active) {
  transform: scale(0.95) translateY(12px);
  z-index: 1;
}

/* Vertical scroll container holding the photo + the text. */
.swipe-card-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* no rubber-band revealing the page behind */
  -webkit-overflow-scrolling: touch;
}

/* While a horizontal swipe is locked in, freeze scrolling so a vertical finger
   movement can't scroll the text mid-swipe (mirrors the scroll→no-swipe lock). */
.swipe-card-scroll--locked {
  overflow: hidden;
}

.swipe-card-media {
  /* ~72% tall, and sticky with a negative top so it scrolls up with the text
     until only its bottom strip (price/address) stays pinned
     (top:-50% leaves 72%-50% = 22% visible). */
  position: sticky;
  top: -50%;
  height: 72%;
  flex: none;
  background: var(--bg-secondary);
}

/* Photo progress bars (one segment per image) with a sliding active indicator. */
.swipe-progress {
  position: absolute;
  top: 0.5rem;
  inset-inline: 0.6rem;
  display: flex;
  gap: 4px;
  height: 3px;
  z-index: 3;
  pointer-events: none;
  direction: ltr; /* photo order stays LTR regardless of page dir="rtl" */
}

.swipe-progress-seg {
  flex: 1 1 0;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
}

.swipe-progress-active {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease;
}

/* Tap "press" ripple shown on the side/center that was tapped. */
.swipe-tap-flash {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  z-index: 2;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.22);
  animation: swipeTapFlash 0.35s ease-out forwards;
}

.swipe-tap-flash--left {
  left: 0;
  border-radius: 0 36px 36px 0;
}

.swipe-tap-flash--right {
  right: 0;
  border-radius: 36px 0 0 36px;
}

.swipe-tap-flash--center {
  left: 25%;
  width: 50%;
  border-radius: 24px;
}

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

.swipe-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.swipe-card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-secondary);
  font-size: 1rem;
}

.swipe-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}

.swipe-card-overlay-info {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 1rem 1.25rem;
  color: #fff;
  pointer-events: none;
}

.swipe-card-price {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.swipe-card-type {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.92;
  margin-top: 0.15rem;
}

.swipe-card-address {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}

.swipe-image-counter {
  position: absolute;
  top: 0.6rem;
  inset-inline-start: 0.6rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
}

.swipe-image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swipe-image-nav-prev {
  inset-inline-start: 0.6rem;
}

.swipe-image-nav-next {
  inset-inline-end: 0.6rem;
}

.swipe-card-body {
  /* Flows after the sticky photo inside the scroll container. min-height fills
     the space under the photo when the text is short (no awkward blank gap);
     longer text grows past it, which is what drives the photo to scroll up.
     Solid background + z-index so the text cleanly covers the photo as it
     scrolls up — the photo never bleeds through behind the text. */
  position: relative;
  z-index: 1;
  min-height: 28%;
  background: var(--bg-color);
  padding: 0.9rem 1.1rem 1.1rem;
}

.swipe-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.swipe-detail-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.swipe-maps-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--accent-color);
  text-decoration: none;
}

.swipe-maps-link:hover {
  background: var(--border-color);
}

.swipe-detail {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  background: var(--bg-secondary);
  padding: 0.15rem 0.55rem;
  border-radius: 8px;
}

.swipe-card-amenities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.swipe-amenity {
  font-size: 0.78rem;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  padding: 0.1rem 0.45rem;
  border-radius: 8px;
}

.swipe-card-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  white-space: pre-line; /* show the full description (body scrolls if long) */
  /* Auto-detect text direction per line (or per block if there are no line
     breaks) from its first strong character: Hebrew lines render RTL, English
     lines render LTR — each aligned to its own side. */
  unicode-bidi: plaintext;
  text-align: start;
}

.swipe-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Origin items (source/agent/time) grouped at the start; the maps button is the
   meta row's other child and sits at the far end via space-between. */
.swipe-meta-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.swipe-agent-badge {
  background: var(--accent-color);
  color: #fff;
  font-size: 0.78rem;
  padding: 0.1rem 0.45rem;
  /* transparent 1px border so the box matches .swipe-amenity (which has a 1px
     border) exactly — same height/size in the amenities row. */
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
}

.swipe-source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
}

.swipe-source-link:hover span {
  text-decoration: underline;
}

/* WhatsApp contact link in the source row (Facebook listings only; Yad2 carries
   no phone, so formatWhatsAppUrl returns null and the link is omitted). */
.swipe-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #25d366;
  text-decoration: none;
  font-weight: 600;
}

.swipe-whatsapp-link:hover span {
  text-decoration: underline;
}

.swipe-source-logo {
  height: 16px;
  width: auto;
  display: block;
}

.swipe-source-logo-fb {
  width: 16px;
  height: 16px;
  color: #1877f2;
}

/* Combined top row: origin + details on one wrapping line, maps button at end. */
.swipe-card-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.swipe-toprow-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Heart button (deck header) opening the wanted list, with a count badge. */
.swipe-btn-wanted {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-color);
  color: #e74c3c;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.swipe-btn-wanted:hover {
  background: var(--bg-secondary);
}

.swipe-wanted-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-sizing: border-box;
}

/* Wanted-list panel: full-viewport scrollable list of liked apartments. Sits
   above the fullscreen deck (z 1000), below the photo lightbox (z 2000). */
.wanted-panel {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
}

.wanted-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex: none;
  padding: calc(0.7rem + env(safe-area-inset-top)) 0.9rem 0.7rem;
  border-bottom: 1px solid var(--border-color);
}

.wanted-panel-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-color);
}

.wanted-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* no rubber-band revealing the page behind */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem 0.9rem calc(1.5rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.wanted-list > .swipe-empty {
  margin: auto;
}

.wanted-item {
  flex: none;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.wanted-item-media {
  position: relative;
  height: 240px;
  background: var(--bg-secondary);
  cursor: pointer;
}

/* Remove-from-wanted button: archives the listing (moves it out of the pool). */
.wanted-remove-btn {
  position: absolute;
  top: 0.6rem;
  inset-inline-end: 0.6rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wanted-remove-btn:hover {
  background: #e74c3c;
}

.wanted-item-body {
  padding: 0.85rem 1rem 1rem;
}

/* Full-screen photo lightbox (opened by a center tap). Sits above the card
   fullscreen (z 1000) so the two never collide. */
.swipe-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  /* pinch-zoom = let the browser handle two-finger pinch (zoom the photo) while
     single-finger gestures (browse/exit) are still delivered to us. `none` here
     blocked pinch entirely. */
  touch-action: pinch-zoom;
  user-select: none;
}

.swipe-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

.swipe-lightbox-close {
  position: absolute;
  top: calc(0.8rem + env(safe-area-inset-top));
  inset-inline-end: 0.8rem;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.swipe-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.swipe-lightbox-prev {
  inset-inline-start: 0.8rem;
}

.swipe-lightbox-next {
  inset-inline-end: 0.8rem;
}

.swipe-lightbox-counter {
  position: absolute;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  inset-inline: 0;
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* LIKE / NOPE drag overlays */
.swipe-like-overlay,
.swipe-nope-overlay {
  position: absolute;
  top: 1.5rem;
  font-size: 2rem;
  font-weight: 800;
  padding: 0.3rem 0.8rem;
  border-radius: 10px;
  border: 4px solid;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

/* Physical left/right (not logical inset-inline) so the stamp matches the
   physical drag direction even under dir="rtl": drag right (LIKE) -> stamp on
   the right; drag left (NOPE) -> stamp on the left. */
.swipe-like-overlay {
  right: 1.5rem;
  color: #2ecc71;
  border-color: #2ecc71;
  transform: rotate(15deg);
}

.swipe-nope-overlay {
  left: 1.5rem;
  color: #e74c3c;
  border-color: #e74c3c;
  transform: rotate(-15deg);
}

.swipe-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.swipe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  background: var(--bg-color);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.swipe-btn:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.swipe-btn-nope {
  color: #e74c3c;
}

.swipe-btn-like {
  color: #2ecc71;
}

/* Empty state */
.swipe-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  max-width: 440px;
  margin: 2rem auto;
}

.swipe-empty-icon {
  font-size: 3rem;
}

.swipe-empty h2 {
  font-size: 1.3rem;
  color: var(--text-color);
}

.swipe-empty p {
  color: var(--text-secondary);
}

.swipe-btn-undo {
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--accent-color);
  border-radius: 10px;
  background: var(--bg-color);
  color: var(--accent-color);
  font-weight: 600;
  cursor: pointer;
}

.swipe-btn-undo:hover {
  background: var(--bg-secondary);
}

/* Save-failure toast (in-deck, auto-dismissed by SwipeDeck). */
.swipe-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #e74c3c;
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Loading spinner for the swipe view (no data yet). */
.swipe-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: swipe-spin 0.8s linear infinite;
}

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

/* Loading/error/empty states fill + center within the deck shell so they cover
   the app chrome in fullscreen exactly like the live deck. */
.swipe-deck > .swipe-empty {
  flex: 1 1 auto;
  margin: 0;
  max-width: none;
}

/* Loading skeleton — mirrors the card layout with a shimmer sweep. */
.swipe-skeleton-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.swipe-skeleton-media {
  flex: 0 0 72%;
}

.swipe-skeleton-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
}

.swipe-skeleton-chips {
  display: flex;
  gap: 0.4rem;
}

.swipe-skeleton-media,
.swipe-skeleton-line,
.swipe-skeleton-chip,
.swipe-skeleton-pill {
  background: linear-gradient(
    100deg,
    var(--bg-secondary) 30%,
    #ededed 50%,
    var(--bg-secondary) 70%
  );
  background-size: 220% 100%;
  animation: swipeShimmer 1.3s ease-in-out infinite;
}

.swipe-skeleton-pill {
  display: inline-block;
  width: 90px;
  height: 14px;
  border-radius: 7px;
}

.swipe-skeleton-line {
  height: 12px;
  border-radius: 6px;
}

.swipe-skeleton-line--row {
  width: 55%;
  height: 16px;
}

.swipe-skeleton-line--full {
  width: 100%;
}

.swipe-skeleton-line--mid {
  width: 80%;
}

.swipe-skeleton-line--short {
  width: 45%;
}

.swipe-skeleton-chip {
  width: 58px;
  height: 20px;
  border-radius: 8px;
}

@keyframes swipeShimmer {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -80% 0;
  }
}

/* Reduced motion: shorten the card transition rather than killing it.
   The commit pipeline no longer relies solely on transitionend (a JS timeout
   fallback fires onCommit even with no transition), but keeping a near-instant
   transition avoids a jarring snap and still respects the user's preference. */
@media (prefers-reduced-motion: reduce) {
  .swipe-card {
    transition-duration: 0.01ms !important;
  }
  .swipe-spinner {
    animation: none;
  }
  .swipe-progress-active {
    transition: none;
  }
  .swipe-tap-flash {
    animation-duration: 0.01ms;
  }
  .swipe-skeleton-media,
  .swipe-skeleton-line,
  .swipe-skeleton-chip,
  .swipe-skeleton-pill {
    animation: none;
  }
}

@media (max-width: 480px) {
  /* Tighten the chips so a full row of source filters fits a phone width
     without wrapping; the touch target stays above 32px tall. */
  .source-filter-btn {
    padding: 0.45rem 0.6rem;
    gap: 0.35rem;
    font-size: 0.8rem;
  }

  .source-filter-count {
    font-size: 0.72rem;
  }

  .swipe-deck {
    max-width: 100%;
  }
  .swipe-stage {
    height: 72vh;
    min-height: 400px;
  }
}