/* Styles centralisés pour la carte, popups et modals (déplacés depuis les insertions inline) */

/* Map popup */
.map-popup { min-width: 250px; }
.map-popup h4 { margin: 0 0 0.5rem 0; color: #1F2937; }
.map-popup p { margin: 0.25rem 0; color: #6B7280; font-size: 0.875rem; }
.popup-category { color: #2563EB !important; font-weight: 500; }
.popup-actions { margin-top: 1rem; display: flex; gap: 0.5rem; }

/* Custom marker */
.custom-marker { background: transparent; border: none; }
.marker-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); color: white; }
.custom-marker .marker-icon { transition: transform 160ms ease-in-out; }
.custom-marker:focus .marker-icon, .custom-marker:hover .marker-icon { transform: scale(1.08); }

/* Category color classes (kept in sync with window.APP_CONFIG.CATEGORY_COLORS) */
.marker-cat-restaurants-alimentation .marker-icon { background: #DC2626; }
.marker-cat-hotels-hebergement .marker-icon { background: #7C3AED; }
.marker-cat-commerces-shopping .marker-icon { background: #059669; }
.marker-cat-services-professionnels .marker-icon { background: #2563EB; }
.marker-cat-sante-medical .marker-icon { background: #DC2626; }
.marker-cat-education-formation .marker-icon { background: #7C2D12; }
.marker-cat-transport-logistique .marker-icon { background: #1F2937; }
.marker-cat-automobile .marker-icon { background: #374151; }
.marker-cat-immobilier .marker-icon { background: #0F766E; }
.marker-cat-finance-banque .marker-icon { background: #1E40AF; }
.marker-cat-technologie-informatique .marker-icon { background: #6366F1; }
.marker-cat-construction-btp .marker-icon { background: #92400E; }
.marker-cat-agriculture-peche .marker-icon { background: #16A34A; }
.marker-cat-artisanat-art .marker-icon { background: #BE123C; }
.marker-cat-sport-loisirs .marker-icon { background: #EA580C; }
.marker-cat-beaute-bien-etre .marker-icon { background: #BE185D; }
.marker-cat-tourisme-voyage .marker-icon { background: #0891B2; }
.marker-cat-autre .marker-icon { background: #6B7280; }

/* Loading / empty / error messages */
.loading-message, .empty-message, .error-message { text-align: center; padding: 3rem 2rem; margin: 2rem 0; }
.loading-content i, .error-content i { font-size: 2rem; color: #2563EB; margin-bottom: 1rem; }
.error-message { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; }
.error-content i { font-size: 3rem; color: #DC2626; }
.empty-content i { font-size: 3rem; color: #9CA3AF; margin-bottom: 1rem; }

/* Establishment details */
.establishment-details { max-width: none; }
.establishment-header { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.establishment-image { width: 200px; height: 150px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.establishment-info { flex: 1; }
.establishment-category { display: inline-flex; align-items: center; gap: 0.5rem; color: white; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; margin-bottom: 1rem; }
.establishment-description { margin-top: 1rem; line-height: 1.6; color: #6B7280; }
.establishment-contacts h3 { margin-bottom: 1rem; color: #1F2937; }
.contact-grid { display: grid; gap: 1rem; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; background: #F9FAFB; border-radius: 8px; }
.contact-item i { color: #2563EB; font-size: 1.25rem; margin-top: 0.25rem; }
.contact-item strong { display: block; margin-bottom: 0.25rem; color: #1F2937; }
.contact-item p { margin: 0; color: #6B7280; }
.contact-item a { color: #2563EB; text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }
.business-location { margin-top: 2rem; }
.business-location h3 { margin-bottom: 1rem; color: #1F2937; }
.detail-map { height: 300px; border-radius: 8px; overflow: hidden; }
@media (max-width: 768px) { .business-header { flex-direction: column; } .business-image { width: 100%; height: 200px; } }

/* Modal baseline (used by Components.createModal) */
.modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); z-index: 20000; }
.modal-overlay.active { display: flex; }
.modal-content { background: #fff; border-radius: 8px; max-width: 900px; width: 100%; max-height: 90vh; overflow: auto; padding: 1.25rem; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; }
.modal-actions { display:flex; gap:1rem; justify-content:flex-end; margin-top:1.5rem; padding-top:1rem; border-top:1px solid #E5E7EB; }

/* Notifications */
.notification { position: fixed; top: 20px; right: 20px; background: white; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 10001; transform: translateX(400px); transition: transform 0.3s ease-in-out; min-width: 300px; max-width: 500px; }
.notification.show { transform: translateX(0); }
.notification-content { display: flex; align-items: center; gap: 12px; padding: 16px; }
.notification-icon { font-size: 20px; }
.notification-success .notification-icon { color: #16A34A; }
.notification-error .notification-icon { color: #DC2626; }
.notification-warning .notification-icon { color: #EAB308; }
.notification-info .notification-icon { color: #2563EB; }
.notification-message { flex: 1; color: #1F2937; }
.notification-close { background: none; border: none; color: #6B7280; cursor: pointer; padding: 4px; }
.notification-close:hover { color: #1F2937; }

/* Card image styling */
.card-image {
  position: relative;
  overflow: hidden;
}
.card-image-content {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Category badge styling */
.card-category {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: var(--category-color, #ccc);
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modal content styling */
.modal-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  max-width: 600px;
  margin: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Custom style for test-virustotal.html */
.custom-style {
  margin-top: 30px;
  padding: 15px;
  background: #e9ecef;
  border-radius: 4px;
}

/* Styles pour iframe et fallback */
.iframe-style {
  background: transparent;
  border: 1px solid #ccc;
  display: none;
}

.iframe-fallback-style {
  display: none;
}

/* ===== PRICING SECTION ===== */
.establishment-pricing {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

.establishment-pricing h3 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  color: #1F2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pricing-group {
  border-left: 3px solid #3B82F6;
  padding-left: 1rem;
  background: white;
  padding: 0.75rem;
  padding-left: 1rem;
  border-radius: 4px;
}

.pricing-level {
  font-size: 0.95rem;
  color: #1F2937;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.pricing-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pricing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #E5E7EB;
}

.pricing-item:last-child {
  border-bottom: none;
}

.pricing-type {
  color: #6B7280;
  font-weight: 500;
  flex: 1;
}

.pricing-amount {
  color: #059669;
  font-weight: 600;
  margin: 0 0.5rem;
  text-align: right;
  min-width: 120px;
}

.pricing-frequency {
  color: #9CA3AF;
  font-size: 0.75rem;
  text-align: right;
  min-width: 60px;
}

.pricing-disclaimer {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #EFF6FF;
  border-left: 3px solid #3B82F6;
  color: #1E40AF;
  font-size: 0.8rem;
  border-radius: 4px;
  display: flex;
  gap: 0.5rem;
}

.pricing-disclaimer i {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 768px) {
  .establishment-pricing {
    margin: 1rem 0;
    padding: 0.75rem;
  }

  .establishment-pricing h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .pricing-content {
    gap: 0.75rem;
  }

  .pricing-group {
    padding: 0.5rem;
    padding-left: 0.75rem;
  }

  .pricing-level {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }

  .pricing-item {
    font-size: 0.8rem;
    padding: 0.4rem 0;
  }

  .pricing-amount {
    min-width: 100px;
    font-size: 0.9rem;
  }

  .pricing-frequency {
    font-size: 0.7rem;
    min-width: 50px;
  }

  .pricing-disclaimer {
    font-size: 0.75rem;
    padding: 0.5rem;
  }
}

/* ===== RESPONSIVE: SMALL MOBILE ===== */
@media (max-width: 480px) {
  .pricing-item {
    flex-wrap: wrap;
  }

  .pricing-type {
    width: 100%;
    margin-bottom: 0.3rem;
  }

  .pricing-amount,
  .pricing-frequency {
    flex: 1;
  }
}