/* Apply dark theme variables (can be customized) */
body.dark-theme {
  /* Ionic Dark Theme Variables (subset) */
  --ion-color-primary: #ff8a00; /* Example Accent: Orange/Pinkish */
  --ion-color-primary-rgb: 255, 138, 0;
  --ion-color-primary-contrast: #000000;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #e07900;
  --ion-color-primary-tint: #ff961a;

  --ion-background-color: #121212; /* Dark background */
  --ion-background-color-rgb: 18, 18, 18;

  --ion-text-color: #ffffff; /* Light text */
  --ion-text-color-rgb: 255, 255, 255;

  --ion-item-background: #1e1e1e; /* Slightly lighter dark for items */
  --ion-toolbar-background: #1e1e1e;
  --ion-card-background: #1e1e1e;

  --ion-border-color: #2e2e2e; /* Darker border */

  /* Custom Variables */
  --reject-color: #f85871; /* Red/Pink for Reject */
  --like-color: var(--ion-color-primary); /* Use primary accent for Like */
}

/* Ensure content takes full height and centers card */
ion-content.swipe-content {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Header Styles */
ion-header ion-toolbar {
  --background: #1f1f1f; /* Match card/footer background */
  --color: var(--ion-text-color);
  padding-top: 10px; /* Add some padding */
}

ion-segment {
  margin: 0 auto; /* Center segment */
  width: fit-content;
  --background: #333; /* Darker segment background */
  border-radius: 8px;
}

ion-segment-button {
  --color: #aaa; /* Inactive text color */
  --color-checked: var(--ion-text-color); /* Active text color */
  --indicator-color: var(--ion-color-primary); /* Active indicator color */
  --indicator-height: 3px;
  text-transform: none;
  font-weight: 500;
}
.menu-button {
  --color: var(--ion-text-color);
}

/* Card Stack & Card Styles */
.card-stack {
  position: relative; /* Context for stacking */
  width: 95%;
  max-width: 400px;
  height: 75%; /* Adjust height */
  max-height: 600px;
}

.swipe-card {
  position: absolute; /* Allow stacking */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden; /* Clip image to rounded corners */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex; /* For image */
  justify-content: center;
  align-items: center;
  background-color: var(--ion-card-background);
  /* Add transition for swipe effect later */
}
.swipe-card-behind {
  /* Style for cards behind the top one (e.g., slight scale down) */
  transform: scale(0.95) translateY(10px);
  z-index: -1; /* Put behind top card */
}

.swipe-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the card area */
  display: block;
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  color: white;
  z-index: 2;
}

.card-overlay ion-card-title {
  font-size: 1.6em;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}
.card-overlay ion-card-title ion-icon {
  margin-left: 8px;
  font-size: 0.9em; /* Make checkmark slightly smaller */
  color: var(--ion-color-primary); /* Or specific verified color */
}

/* Footer & Action Buttons */
ion-footer ion-toolbar.action-toolbar {
  --background: var(--ion-background-color); /* Match body background */
  display: flex;
  justify-content: space-evenly; 
  /* Distribute buttons */
  padding: 5px 20px;
  min-height: 70px; /* Make footer taller */
}

.action-button {
  --padding-start: 0;
  --padding-end: 0;
  width: 60px; /* Button size */
  height: 60px; /* Button size */
  font-size: 2em; /* Icon size */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  --border-radius: 50%;
}

.reject-button {
  --color: var(--reject-color);
  --background: var(--ion-item-background);
  --background-activated: #444; /* Darker grey on click */
}

.like-button {
  --color: var(--like-color);
  --background: var(--ion-item-background);
  --background-activated: #444;
}

/* ... (existing dark theme, layout, header, footer, button styles) ... */

/* Status Messages (Loading, Empty) */
.status-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ion-text-color-step-600, #999); /* Lighter text */
  z-index: 5; /* Ensure it's potentially above empty card stack */
}
.status-message ion-spinner {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  color: var(--ion-color-primary);
}
.status-message ion-icon {
  font-size: 3em;
  margin-bottom: 10px;
}
.status-message p {
  font-size: 1.1em;
}

/* Card Stack & Card Styles */
.card-stack {
  position: relative;
  width: 95%;
  max-width: 400px;
  height: 75%;
  max-height: 600px;
  /* Center the stack if needed (already done by flex in ion-content) */
}

.swipe-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--ion-card-background);
  user-select: none; /* Prevent text selection during drag */
  -webkit-user-drag: none; /* Prevent image drag */
  transition: transform 0.3s ease-out; /* Default transition for release */
  cursor: grab; /* Indicate draggable */
  will-change: transform, opacity; /* Optimize animation */
  z-index: 10; /* Ensure current card is on top */
}
.swipe-card.dragging {
  transition: none; /* No transition while actively dragging */
  cursor: grabbing;
}
.swipe-card img {
  pointer-events: none; /* Prevent image intercepting pointer events */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-overlay {
  /* ... (existing overlay styles) ... */
  pointer-events: none; /* Allow clicks/drags to go through to the card */
}

/* Style for cards behind the top one */
.swipe-card.next-card {
  transform: scale(0.95) translateY(15px);
  z-index: 9; /* Behind current card */
  filter: brightness(0.9);
}

/* Animation classes for swiping out */
.swipe-card.swipe-left {
  transform: translateX(-150%) rotate(-30deg) !important;
  opacity: 0;
  transition: transform 0.5s ease-in, opacity 0.4s ease-in;
}
.swipe-card.swipe-right {
  transform: translateX(150%) rotate(30deg) !important;
  opacity: 0;
  transition: transform 0.5s ease-in, opacity 0.4s ease-in;
}

/* Add styles for the menu if needed */
ion-menu ion-toolbar {
  /* Toolbar inside the menu */
  --background: var(--ion-item-background); /* Match item background */
}

ion-menu ion-content {
  /* Content area of the menu */
  --background: var(--ion-item-background);
}

ion-menu ion-list {
  padding: 0; /* Remove default list padding */
  background: transparent; /* Ensure list background is transparent */
}

ion-menu ion-item {
  --background: transparent; /* Let list background show */
  --color: var(--ion-text-color); /* Text color for menu items */
  --detail-icon-color: var(--ion-text-color-step-600, #999); /* Arrow color etc */
  --ripple-color: var(--ion-color-primary); /* Ripple effect color */
}
ion-menu ion-item ion-icon {
  color: var(--ion-text-color-step-600, #999); /* Icon color */
  margin-right: 15px; /* Space after icon */
}
ion-menu ion-item:hover {
  --background: rgba(255, 255, 255, 0.05); /* Slight hover effect */
}

/* Ensure main content area height calculation is correct if header height changed */
/* Usually not needed as Ionic manages this */