/*
Theme Name: Cocktail
Theme URI:  http://example.com
Author:     Dein Name
Author URI: http://example.com
Description: Dieses Theme / Child-Theme fügt Cocktails-Funktionen hinzu
Version:    1.0
Template:   twentytwentyfive
*/

/* Optional: Hier kannst du CSS-Regeln für dein Child-Theme angeben */

.my-cocktail-select,
.my-cocktail-input {
    font-family: inherit;
    font-size: 1rem;
    color: var(--wp--preset--color--foreground);
    background-color: var(--wp--preset--color--background);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.my-cocktail-input {
    border: 1px solid #ccc;
}

  .my-cocktail-row {
    /* Pro Cocktail-Eintrag ein flex-Container */
    display: flex;
    align-items: flex-start;  /* Sorgt dafür, dass jeder Block oben ausgerichtet ist */
    margin-bottom: 20px;
  }
  
  .my-cocktail-col-check {
    /* Checkbox-Spalte mit fester Breite für gleichmäßige Ausrichtung */
    width: 40px;    /* oder 2.5rem, je nach Geschmack */
    margin-right: 10px;
    display: flex;
    align-items: center; /* vertikale Zentrierung der Checkbox, optional */
  }
  
  .my-cocktail-image-wrapper {
    width: 120px; /* Feste Breite */
    height: 120px; /* Feste Höhe */
    overflow: hidden; /* Kein Überlauf */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white; /* Falls Bilder mit transparentem Rand */
}

.my-cocktail-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Statt contain => gleichmäßige Größe */
    display: block;
}


.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}  


.my-cocktail-col-text {
  max-width: 400px; /* oder eine andere feste Breite, die zu deinem Design passt */
  flex: 1; /* Ermöglicht, dass der Text den verfügbaren Platz nutzt, aber nicht über max-width hinaus */
  padding-left: 10px; /* Optional: Abstand zwischen Bild und Text */
}

@media (max-width: 600px) {
  .my-cocktail-col-text {
      max-width: 150px; /* Kleinere Breite auf mobilen Geräten */
  }
}

/* Schaltfläche für Rezept anzeigen */
.show-recipe-btn {
  background-color: var(--wp--preset--color--primary); /* oder eine andere Farbe */
  color: rgb(0, 0, 0);
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-left: 10px;
}

.show-recipe-btn:hover {
  background-color: var(--wp--preset--color--primary-dark); /* Dunklere Farbe beim Hover */
}

/* Modal-Styles */
.recipe-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001; /* Höher als das Overlay */
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 500px; /* Passe die Breite nach Bedarf an */
  width: 90%; /* Responsiv für kleinere Bildschirme */
}

.recipe-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%!important;
  height: 100%!important;
  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter grauer Hintergrund */
  z-index: 1000; /* Niedriger als das Modal, aber über dem restlichen Inhalt */
}

.recipe-modal-content {
  background-color: white;
  margin: 15% auto; /* Zentriert das Modal vertikal */
  padding: 20px;
  border-radius: 5px;
  width: 80%; /* Anpassbar für Desktop */
  max-width: 500px; /* Maximale Breite */
  position: relative;
}

.close-modal {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  color: #aaa;
  cursor: pointer;
}

.close-modal:hover {
  color: #000;
}

/* Responsivität für Mobile */
@media (max-width: 600px) {
  .recipe-modal-content {
      width: 90%;
      margin: 20% auto;
  }
}


html, body {
  overflow: auto !important;
}