/**
 * META
 * @file: code/styles/host/widget-container.css
 * @role: style
 * @does: Style dla kontenera widgetu na stronie hostującej (poza Shadow DOM)
 * @depends_on: styles/host/global-styles.css (CSS Variables)
 * @used_by: widget-container.html
 * @api: brak
 * @notes: Te style NIE są wstrzykiwane do Shadow DOM - dotyczą tylko strony zewnętrznej
 */

/* ============================================
   Widget Container Styles
   ============================================ */

/* Main container for the entire widget */
.medfile-widget-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: var(--color-white, #ffffff);
  font-family: var(--font-family);
  color: var(--color-secondary, #3b3f73);

  /* Ensure proper isolation in Shadow DOM */
  display: block;
  position: relative;
  box-sizing: border-box;
}

/* Responsive container adjustments */
@media (min-width: 768px) {
  .medfile-widget-container {
    /* Desktop styles will be added here */
  }
}

@media (max-width: 767px) {
  .medfile-widget-container {
    /* Mobile styles will be added here */
  }
}

/* Price widget root – pełna szerokość od początku (przed załadowaniem JS) */
.medfile-price-widget-root {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 350px !important;
  min-height: 140px;
  box-sizing: border-box;
}