/*
   CSS styling examples for the Vaadin app.

   Visit https://vaadin.com/docs/styling/application-theme/ for more information.
*/

/* Example: CSS class name to center align the content . */
.centered-content {
  margin: 0 auto;
  max-width: 250px;
}

/* Example: the style is applied only to the textfields which have the `bordered` class name. */
vaadin-text-field.bordered::part(input-field) {
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
  background-color: var(--lumo-base-color);
}

.text-input::part(input-field) {
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  color: #333;
}

.carousel-image {
  cursor: zoom-in;
  transition: transform 0.3s ease;
  max-height: 400px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.expanded-image {
  cursor: zoom-out;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}