Prep work for mass selection actions

index.html

@@ -28,6 +28,15 @@
           <button class="mix-button" id="mix-button" disabled="true">
               ¡A Mezclar!
           </button>
+          <!-- TODO: select all/none -->
+          <!--<div class="selection-options" id="selection-options">
+              <button class="selection-button" id="select-all-button" disabled="true">
+                  Select all
+              </button>
+              <button class="selection-button" id="select-none-button" disabled="true">
+                  Reset selection
+              </button>
+          </div>-->
       </div>
 
       <div class="section">

src/main.js

@@ -101,6 +101,15 @@ function findRecipes() {
   });
 }
 
+// TODO: select all/none spirits
+// function selectAll() {
+//   return;
+// }
+
+// function selectNone() {
+//   return;
+// }
+
 function renderRecipes(recipes) {
   const container = document.getElementById("recipesContainer");
 
@@ -122,6 +131,7 @@ function renderRecipes(recipes) {
       return `
             <div class="recipe-card">
                 <div class="recipe-name">${recipe.name}</div>
+                <div class="non-alcohol-title">Licores:</div>
                 <div class="recipe-ingredients">
                     ${alcoholIngredients
                       .map(

src/styles.css

@@ -382,6 +382,42 @@ h2 {
   }
 }
 
+.selection-options {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 0.5rem;
+
+  .selection-button {
+    width: 120px;
+    padding: 0.2rem 0.3rem;
+    font-family: "Fredoka", sans-serif;
+    font-size: 0.5rem;
+    background: linear-gradient(135deg, var(--deep-red) 0%, var(--cognac) 100%);
+    color: white;
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .selection-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 30px rgba(139, 21, 56, 0.5);
+  }
+
+  .selection-button:active {
+    transform: translateY(-1px);
+  }
+
+  .selection-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
 .warning-msg {
   font-family: "Fredoka", sans-serif;
   font-size: 1.1rem;