@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Global Styles */
:root {
  --color-primary: #570df8;
  --color-primary-focus: #4506cb;
  --color-primary-content: #ffffff;

  --color-secondary: #f000b8;
  --color-secondary-focus: #bd0091;
  --color-secondary-content: #ffffff;

  --color-accent: #37cdbe;
  --color-accent-focus: #2aa79b;
  --color-accent-content: #ffffff;

  --color-neutral: #3d4451;
  --color-neutral-focus: #2a2e37;
  --color-neutral-content: #ffffff;

  --color-base-100: #ffffff;
  --color-base-200: #f9fafb;
  --color-base-300: #d1d5db;
  --color-base-content: #1f2937;

  --color-info: #2094f3;
  --color-info-content: #ffffff;

  --color-success: #009485;
  --color-success-content: #ffffff;

  --color-warning: #ff9900;
  --color-warning-content: #ffffff;

  --color-error: #ff5724;
  --color-error-content: #ffffff;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --color-primary: #570df8;
  --color-primary-focus: #4506cb;
  --color-primary-content: #ffffff;

  --color-secondary: #f000b8;
  --color-secondary-focus: #bd0091;
  --color-secondary-content: #ffffff;

  --color-accent: #37cdbe;
  --color-accent-focus: #2aa79b;
  --color-accent-content: #ffffff;

  --color-neutral: #2a323c;
  --color-neutral-focus: #222a33;
  --color-neutral-content: #e5e7eb;

  --color-base-100: #1d232a;
  --color-base-200: #191e24;
  --color-base-300: #15191e;
  --color-base-content: #e5e7eb;

  --color-info: #2094f3;
  --color-info-content: #ffffff;

  --color-success: #00b894;
  --color-success-content: #ffffff;

  --color-warning: #f59e0b;
  --color-warning-content: #1f2937;

  --color-error: #ff5724;
  --color-error-content: #ffffff;
}

html {
  font-family: 'Inter', sans-serif;
}

/* Custom Card Styles */
.item-card {
  transition: all 0.3s ease;
  height: auto;
  min-height: 20rem;
}

.item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.item-card h2 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

/* Image Gallery Styles */
.image-gallery {
  position: relative;
  overflow: hidden;
}

.image-gallery img {
  transition: opacity 0.3s ease;
}

/* Heart Overlay Styles */
.heart-overlay {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}

.heart-overlay:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.heart-overlay:active {
  transform: scale(0.95);
}

.heart-overlay span {
  transition: all 0.3s ease;
}

.heart-overlay:hover span {
  transform: scale(1.1);
}

/* Only color filled hearts (saved items) red */
.heart-overlay span .fa-solid.fa-heart {
  color: #ef4444; /* Red color for filled hearts */
}

.heart-overlay:hover span .fa-solid.fa-heart {
  color: #dc2626; /* Darker red on hover for filled hearts */
}

/* Heart animation when toggling */
@keyframes heartBeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.heart-overlay.heart-beat span {
  animation: heartBeat 0.6s ease;
}

/* Ensure search inputs work properly in dark mode */
#searchInput {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-color: var(--color-base-300);
}

#searchInput::placeholder {
  color: var(--color-base-content);
  opacity: 0.5;
}

[data-theme="dark"] #searchInput {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-color: var(--color-base-300);
}

[data-theme="dark"] #searchInput::placeholder {
  color: var(--color-base-content);
  opacity: 0.5;
}

/* Currency Dropdown Styles */
.currency-dropdown-btn {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid var(--color-base-300);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  position: relative;
}

/* Ensure dropdown container has proper positioning */
.form-control.dropdown {
  position: relative;
}

/* Ensure dropdowns appear above other content */
.dropdown-content {
  position: absolute !important;
  z-index: 99999 !important;
}

.currency-dropdown-btn:hover {
  background-color: var(--color-base-200);
  border-color: var(--color-primary);
}

.currency-dropdown-content {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 0.5rem;
  border-radius: 0.5rem;
  width: 16rem;
  min-width: 14rem;
  max-width: 90vw;
  z-index: 9999;
  max-height: 20rem;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  display: none;
}

/* Dark mode overrides for currency/agent dropdown inputs */
[data-theme="dark"] .currency-search-input,
[data-theme="dark"] .agent-search-input {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-color: var(--color-base-300);
}

[data-theme="dark"] .currency-search-input::placeholder,
[data-theme="dark"] .agent-search-input::placeholder {
  color: var(--color-base-content);
  opacity: 0.6;
}

/* Show dropdown when parent has dropdown-open class */
.dropdown.dropdown-open .currency-dropdown-content,
.dropdown.dropdown-open .agent-dropdown-content {
  display: block !important;
}

.currency-option {
  color: var(--color-base-content);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  min-width: 0;
}

.currency-option:hover {
  background-color: var(--color-base-200);
}

.currency-option.selected {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.currency-option.selected:hover {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.currency-flag {
  font-size: 1.125rem;
}

.currency-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.currency-code {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.currency-name {
  font-size: 0.75rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.checkmark {
  margin-left: auto;
  color: var(--color-primary);
}

.dropdown-arrow {
  margin-left: auto;
  color: var(--color-base-content);
  opacity: 0.7;
  font-size: 0.75rem;
}

.agent-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  margin-right: 8px;
}

/* Currency Search Styles */
.currency-search-container {
  padding: 0.5rem;
}

.currency-search-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.25rem;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.currency-search-input:focus {
  border-color: var(--color-primary);
}

.currency-search-input::placeholder {
  color: var(--color-base-content);
  opacity: 0.5;
}

.currency-divider {
  height: 1px;
  background-color: var(--color-base-300);
  margin: 0.25rem 0;
}

/* Product Card Styles - Override any conflicting styles */
.item-card .card-title {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.item-card h2 {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Custom Scrollbar for Currency Dropdown */
.currency-dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.currency-dropdown-content::-webkit-scrollbar-track {
  background: var(--color-base-200);
  border-radius: 3px;
}

.currency-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--color-base-300);
  border-radius: 3px;
}

.currency-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Agent Dropdown Styles */
.agent-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  color: var(--color-base-content);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 1.125rem;
}

.agent-dropdown-btn:hover {
  background-color: var(--color-base-200);
  border-color: var(--color-primary);
}

.agent-dropdown-content {
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  min-width: 250px;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  z-index: 9999;
}

.agent-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: var(--color-base-content);
  text-decoration: none;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.agent-option:hover {
  background-color: var(--color-base-200);
}

.agent-option.selected {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.agent-icon {
  font-size: 1.25rem;
  min-width: 1.5rem;
  text-align: center;
}

.agent-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.agent-name {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.agent-desc {
  font-size: 0.75rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Agent Search Styles */
.agent-search-container {
  padding: 0.5rem;
}

.agent-search-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.25rem;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.agent-search-input:focus {
  border-color: var(--color-primary);
}

.agent-search-input::placeholder {
  color: var(--color-base-content);
  opacity: 0.5;
}

.agent-divider {
  height: 1px;
  background-color: var(--color-base-300);
  margin: 0.25rem 0;
}

/* Custom Scrollbar for Agent Dropdown */
.agent-dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.agent-dropdown-content::-webkit-scrollbar-track {
  background: var(--color-base-200);
  border-radius: 3px;
}

.agent-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--color-base-300);
  border-radius: 3px;
}

.agent-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Clean navbar spacing - no conflicts */
.navbar {
  gap: 1rem !important;
  padding: 1rem 2rem !important;
}

.navbar-start, .navbar-center, .navbar-end {
  display: flex !important;
  align-items: center !important;
}

.navbar-center .flex {
  gap: 1rem !important;
}

.navbar .btn {
  margin: 0 !important;
  padding: 0.75rem 1.25rem !important;
}

/* Category Pill Button Styles - Modern DaisyUI Enhancement */
.category-btn {
  @apply badge badge-lg cursor-pointer select-none whitespace-nowrap;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-base-300);
  position: relative;
  overflow: hidden;
}

.category-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.category-btn:hover::before {
  left: 100%;
}

.category-btn:not(.active) {
  @apply badge-ghost;
  color: var(--color-base-content);
  background-color: var(--color-base-200);
  border-color: var(--color-base-300);
}

.category-btn:not(.active):hover {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-primary), 0.4);
}

.category-btn.active {
  @apply badge-primary;
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(var(--color-primary), 0.3);
}

.category-btn:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* Dark theme adjustments for category pills */
[data-theme="dark"] .category-btn:not(.active) {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-color: var(--color-base-300);
}

[data-theme="dark"] .category-btn:not(.active):hover {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-primary);
}

/* Smooth transitions for category button check icon */
.category-btn.active i {
  display: inline-block;
  margin-left: 0.25rem;
  opacity: 0.9;
  font-weight: bold;
}

/* Mobile-optimized category pills */
@media (max-width: 768px) {
  .category-btn {
    @apply badge;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* Ensure check icons are properly styled if present */
.category-btn.active i {
  display: inline-block;
  margin-left: 0.25rem;
  opacity: 0.9;
  font-weight: bold;
}

/* Mobile-first approach with proper breakpoints */
@media (max-width: 639px) {
  .navbar {
    padding: 1rem 1rem !important;
    gap: 0.5rem !important;
  }

  .navbar-center .flex {
    gap: 0.5rem !important;
  }

  .navbar .btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* Tablet breakpoint */
@media (min-width: 640px) and (max-width: 1023px) {
  .navbar {
    padding: 1rem 2rem !important;
    gap: 1rem !important;
  }
  
  .navbar-center .flex {
    gap: 1rem !important;
  }
}

/* Desktop breakpoint - highest specificity */
@media (min-width: 1024px) {
  .navbar {
    padding: 1.5rem 4rem !important; /* increased horizontal padding for desktop */
    gap: 2.5rem !important; /* slightly larger gap between navbar sections */
  }
  
  .navbar-center .flex {
    gap: 2rem !important; /* more space between nav buttons on desktop */
  }
}

/* Hide theme toggle checkbox on all screen sizes */
.navbar-end input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* Shared custom navbar + theme toggle styles (used across all pages) */
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background-color: var(--color-base-100);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
  width: 100%;
  min-height: 4rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.navbar-brand { flex-shrink:0; font-size:1.125rem; font-weight:700; text-decoration:none; padding:0.5rem 0.75rem; }

.navbar-nav { display:flex; align-items:center; gap:0.25rem; flex-wrap:wrap; justify-content:center; flex-grow:1; }

.navbar-nav .nav-btn { padding:0.5rem 0.75rem; border-radius:0.375rem; text-decoration:none; font-size:0.875rem; display:flex; align-items:center; gap:0.375rem; white-space:nowrap; }

.navbar-nav .nav-btn.active { background-color:var(--color-primary); color:var(--color-primary-content); border:1px solid rgba(0,0,0,0.03); }

.navbar-actions { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }

/* Theme toggle visuals: hide native checkbox and show sun/moon */
.theme-toggle { position:relative; width:2.5rem; height:1.4rem; display:inline-flex; align-items:center; justify-content:center; }
.theme-toggle input { position:absolute; opacity:0; width:0; height:0; pointer-events:auto; }
.theme-toggle i { position:relative; font-size:0.95rem; transition:transform 0.22s ease, opacity 0.22s ease; }
.theme-toggle i.sun { opacity:1; transform:rotate(0deg); }
.theme-toggle i.moon { position:absolute; opacity:0; transform:scale(0.8) rotate(-15deg); }
.theme-toggle input:checked + .sr-only + .sun { opacity:0; transform:scale(0.8) rotate(15deg); }
.theme-toggle input:checked + .sr-only + .sun + .moon { opacity:1; transform:scale(1) rotate(0deg); }

/* Make theme toggle look interactive */
.theme-toggle { cursor: pointer; }
.theme-toggle:hover i.sun, .theme-toggle:hover i.moon { transform: scale(1.05); opacity: 0.95; }
.theme-toggle:active i { transform: scale(0.95); }
.theme-toggle:focus-within { outline: 2px solid rgba(87, 61, 255, 0.15); outline-offset: 3px; border-radius: 6px; }

/* Mobile layout: stacked + 2x2 grid for nav buttons */
@media (max-width:639px) {
  .custom-navbar { padding:0.5rem; gap:0.75rem; flex-direction:column; align-items:stretch; min-height:auto; }
  .navbar-brand { text-align:center; font-size:1rem; padding:0.5rem; }
  .navbar-nav { justify-content:center; gap:0.125rem; width:100%; display:grid; grid-template-columns:repeat(2,1fr); }
  .navbar-nav .nav-btn { font-size:0.75rem; padding:0.375rem 0.5rem; justify-content:center; min-width:0; }
  .navbar-actions { justify-content:center; width:100%; }
}

@media (min-width:640px) and (max-width:1023px) {
  .custom-navbar { padding:0.75rem 1.5rem; gap:1rem; }
  .navbar-brand { font-size:1.25rem; }
  .navbar-nav { gap:0.5rem; }
}

@media (min-width:1024px) {
  .custom-navbar { padding:1rem 3rem; gap:2rem; }
  .navbar-brand { font-size:1.5rem; padding:0.75rem 1rem; }
  .navbar-nav { gap:1rem; }
  .navbar-nav .nav-btn { font-size:1rem; padding:0.75rem 1.25rem; }
  .navbar-actions { gap:1rem; }
}