/*
 * Generated by scripts/build-card-css.mjs from:
 *   src/styles/theme/base-theme.css
 *   src/styles/listing-card.css
 *   src/styles/app.css
 * Do not edit directly — see CARD_CONTRACT.md.
 */
/* Agora Widget Base Theme Variables */

.agora-widget {
  /* Brand Colors */
  --agora-primary: #2b00dc;
  --agora-primary-dark: #1a00a3;
  --agora-primary-light: #4c1d95;
  
  /* Card Header Colors */
  --card-header-start: #8b5cf6;
  --card-header-end: #7c3aed;
  
  /* Info Bar Colors */
  --info-bar-bg: #1e3a8a;
  --info-bar-text: #ffffff;
  --info-bar-text-muted: rgba(255, 255, 255, 0.8);
  
  /* Action Button Colors */
  --btn-share-bg: #3b82f6;
  --btn-share-hover: #2563eb;
  --btn-details-bg: #1e3a8a;
  --btn-details-hover: #1e40af;
  /* Text Colors */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-white: #ffffff;
  --text-black: #000000;
  --text-btn:#ffffff;
  /* Text Colors */

  
  /* Background Colors */
  --bg-white: #ffffff;
  --bg-gray-50: #f9fafb;
  --bg-gray-100: #f3f4f6;
  --bg-gray-200: #e5e7eb;
  
  /* Border Colors */
  --border-light: #e1e5e9;
  --border-medium: #d1d5db;
  
  /* Listing Card Border  */
  --card-border: 1px solid var(--agora-primary);
  
  /* Shadow Colors */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 50%;
  
  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 30px;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-Index */
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-tooltip: 1100;
}

/* Listing Card Styles */
.agora-widget .listing-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal);
  border: var(--card-border);
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 400px;
}

.agora-widget .listing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Image Header with Overlay */
.agora-widget .card-image-header {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.agora-widget .header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agora-widget .org-header-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.agora-widget .no-image-header {
  width: 100%;
  height: 100%;
  background: var(--agora-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.agora-widget .no-image-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-white);
  width: 100%;
  height: 100%;
  position: relative;
}

.agora-widget .placeholder-icon {
  font-size: var(--text-4xl);
  opacity: 0.7;
  color: var(--text-white);
  margin-bottom: var(--space-md);
}

.agora-widget .no-image-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agora-widget .no-image-info .quantity-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.agora-widget .no-image-info .price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.agora-widget .no-image-info .quantity-number {
  color: var(--text-white);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.agora-widget .no-image-info .status-text {
  color: #ff6b9d;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--space-xs);
}

.agora-widget .no-image-info .price-amount {
  color: var(--text-white);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: end;
}

.agora-widget .image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,1,0.8);
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  align-items: center;
  color: var(--text-white);
}

.agora-widget .quantity-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.agora-widget .quantity-number {
  color: var(--text-white);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.agora-widget .price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.agora-widget .status-text {
  color: #ff6b9d;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--space-xs);
}

.agora-widget .price-amount {
  color: var(--text-white);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: end;
}

/* White Details Section */
.agora-widget .card-details-section {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-white);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Important for truncation to work in flex container */
  overflow: hidden;
}

.agora-widget .listing-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agora-widget .detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  min-width: 0; /* Important for truncation to work in flex container */
  overflow: hidden;
}

.agora-widget .detail-icon {
  font-size: var(--text-sm);
  width: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.agora-widget .detail-text {
  font-size: var(--text-base);
  flex: 1;
  color: var(--text-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Important for flex truncation */
}

.agora-widget .status-filled {
  font-size: var(--text-base);
  color: #dc2626 !important;
  flex: 1;
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Important for flex truncation */
}

.agora-widget .status-under-offer {
  font-size: var(--text-base);
  color: var(--agora-primary) !important;
  flex: 1;
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Important for flex truncation */
}

/* Action Buttons */
.agora-widget .action-buttons {
  display: flex;
  margin-top: auto;
  cursor: pointer;
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
}

.agora-widget .action-btn {
  width: 100%;
  padding: var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.agora-widget .details-btn {
  background: var(--btn-details-bg);
  color: var(--text-btn);
}

.agora-widget .details-btn:hover {
  background: var(--btn-details-hover);
}

.agora-widget .wanted-btn {
  background: var(--btn-details-wanted-bg, var(--btn-details-bg));
  color: var(--wanted-text-btn, var(--text-btn));
}

.agora-widget .wanted-btn:hover {
  background: var(--btn-details-wanted-hover, var(--btn-details-hover));
}

/* Mobile: up to 576px */
@media (max-width: 576px) {
  .agora-widget .listing-card {
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  .agora-widget .card-image-header {
    height: 170px;
  }

  .agora-widget .image-overlay {
    padding: var(--space-sm);
    flex-direction: column;
    align-items: flex-start;
  }

  .agora-widget .quantity-number,
  .agora-widget .price-amount {
    font-size: var(--text-lg);
  }

  .agora-widget .listing-title {
    font-size: var(--text-lg);
  }

  .agora-widget .detail-text {
    font-size: var(--text-sm);
  }

  .agora-widget .action-btn {
    width: 100%;
  }
}

/* Tablet: 577px – 768px */
@media (min-width: 577px) and (max-width: 768px) {
  .agora-widget .listing-card {
    max-width: 340px;
  }

  .agora-widget .card-image-header {
    height: 190px;
  }

  .agora-widget .image-overlay {
    padding: var(--space-md);
  }

  .agora-widget .quantity-number,
  .agora-widget .price-amount {
    font-size: var(--text-lg);
  }

  .agora-widget .listing-title {
    font-size: var(--text-xl);
  }
}

/* Large Tablet: 769px – 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .agora-widget .listing-card {
    max-width: 360px;
  }

  .agora-widget .card-image-header {
    height: 210px;
  }

  .agora-widget .listing-title {
    font-size: var(--text-xl);
  }
}

/* Desktop: 1025px – 1440px */
@media (min-width: 1025px) and (max-width: 1440px) {
  .agora-widget .listing-card {
    max-width: 400px;
  }

  .agora-widget .card-image-header {
    height: 220px;
  }
}

/* Large Desktop: 1441px and up */
@media (min-width: 1441px) {
  .agora-widget .listing-card {
    max-width: 440px;
  }

  .agora-widget .card-image-header {
    height: 240px;
  }

  .agora-widget .listing-title {
    font-size: var(--text-3xl);
  }
}

.agora-widget {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: visible;
  contain: layout style;
  box-sizing: border-box;
}

.agora-widget .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.agora-widget .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--bg-gray-100);
  border-top: 4px solid var(--agora-primary);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-md);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.agora-widget .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  color: #e74c3c;
}

.agora-widget .error-icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

.agora-widget .listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  justify-items: center;
  width: 100%;
  padding: var(--space-sm);
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .agora-widget .listings-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .agora-widget .listings-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .agora-widget .listings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 400px) {
  .agora-widget .listings-grid {
    gap: 12px;
  }
}

.agora-widget .no-listings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  color: var(--text-secondary);
}

.agora-widget .no-listings-icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
  opacity: 0.6;
}

/* Error State Styles (Development Only) */
.agora-widget .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  color: var(--text-secondary);
  background: #fef2f2;
  border: 2px solid #fecaca;
  border-radius: var(--radius-lg);
  margin: var(--space-md);
}

.agora-widget .error-icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
  color: #dc2626;
}

.agora-widget .error-details {
  margin-top: var(--space-md);
  text-align: left;
  max-width: 100%;
  overflow-x: auto;
}

.agora-widget .error-details summary {
  cursor: pointer;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.agora-widget .error-details pre {
  background: #f3f4f6;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}