Enhance customization form with input for box selection and update styles for better usability

pricing.css

@@ -19,8 +19,10 @@
 .customize-section>div>p:last-child{color:var(--muted);font-size:16px;line-height:1.6;max-width:430px}
 .customize-form{display:grid;gap:10px;align-content:start}
 .customize-form label{font:500 11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
-.customize-form select,.customize-form textarea{width:100%;border:1px solid var(--line);border-radius:0;background:rgba(241,240,234,.04);color:var(--paper);font:14px "Space Grotesk",sans-serif;padding:14px;outline:none}
+.customize-form select,.customize-form input,.customize-form textarea{width:100%;border:1px solid var(--line);border-radius:0;background:rgba(241,240,234,.04);color:var(--paper);font:14px "Space Grotesk",sans-serif;padding:14px;outline:none}
-.customize-form select:focus,.customize-form textarea:focus{border-color:var(--lime)}
+.customize-form select:focus,.customize-form input:focus,.customize-form textarea:focus{border-color:var(--lime)}
+.customize-form input::placeholder,.customize-form textarea::placeholder{color:var(--muted)}
+.customize-form input[readonly]{border-color:rgba(213,243,75,.5);color:var(--lime);cursor:default}
 .customize-form select option{background:var(--ink);color:var(--paper)}
 .customize-form textarea{resize:vertical}
 .customize-form .button{margin-top:12px;justify-self:start;border:0;cursor:pointer}

pricing.html

@@ -53,6 +53,8 @@
             <option>4:00 PM – 5:30 PM</option>
             <option>Custom timing (tell us below)</option>
           </select>
+          <label for="box">Your box</label>
+          <input id="box" name="box" type="text" placeholder="Choose a box above" readonly required />
           <label for="preferences">Meal preferences</label>
           <textarea id="preferences" name="preferences" rows="3" placeholder="Less spicy, no onion, add extra protein..."></textarea>
           <button class="button button-primary" type="submit">Send my preferences <span>↗</span></button>

pricing.js

@@ -44,11 +44,19 @@ document.querySelector("#pricing-options").innerHTML = options
         <p>${option.detail}</p>
       </div>
       <strong>₹${selected.prices[index].toLocaleString("en-IN")}<span>/ month</span></strong>
-      <a class="button button-primary" href="mailto:hello@thetiffinfood.com?subject=${encodeURIComponent(`${selected.name} mode — ${option.label}`)}">Choose this box <span>↗</span></a>
+      <a class="button button-primary choose-box" href="#box" data-box="${option.label} — ₹${selected.prices[index].toLocaleString("en-IN")} / month">Choose this box <span>↗</span></a>
     </article>
   `)
   .join("");
 
+document.querySelectorAll(".choose-box").forEach((button) => {
+  button.addEventListener("click", () => {
+    const box = document.querySelector("#box");
+    box.value = button.dataset.box;
+    box.focus();
+  });
+});
+
 document.querySelector("#customize-form").addEventListener("submit", (event) => {
   event.preventDefault();
   const form = new FormData(event.currentTarget);
@@ -56,6 +64,7 @@ document.querySelector("#customize-form").addEventListener("submit", (event) =>
     "Hi The Tiffin Food! I would like to customize my tiffin.",
     "",
     `Plan: ${selected.name} mode`,
+    `Your box: ${form.get("box")}`,
     `Destination: ${form.get("destination")}`,
     `Preferred delivery window: ${form.get("timing")}`,
     `Meal preferences: ${form.get("preferences") || "None specified"}`,

styles.css

@@ -10,5 +10,8 @@
 .meal-card:hover .food-orb img,.meal-card:focus .food-orb img{transform:scale(1.08);filter:saturate(1.3) contrast(1.12)}
 .food-orb span{position:relative;z-index:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);font-weight:500}
 .food-orb:after{z-index:2}.food-orb:before{z-index:2}
-
 .schedule-callout{margin:0 5.3vw;padding:54px clamp(24px,5vw,72px);display:grid;grid-template-columns:minmax(280px,.9fr) 1.1fr;gap:clamp(40px,8vw,130px);align-items:center;background:linear-gradient(115deg,rgba(213,243,75,.13),rgba(213,243,75,.035));border:1px solid rgba(213,243,75,.45);position:relative;overflow:hidden}.schedule-callout:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(213,243,75,.2);border-radius:50%;right:-100px;top:-160px}.schedule-callout-copy{position:relative;z-index:1}.schedule-callout-copy .eyebrow{color:var(--lime);margin-bottom:22px}.schedule-callout-copy h2{font-size:clamp(43px,5vw,72px);line-height:.88;letter-spacing:-.08em;font-weight:500;margin:0 0 22px}.schedule-callout-copy>p:not(.eyebrow){color:var(--paper);font-size:15px;line-height:1.55;max-width:390px;margin-bottom:28px}.schedule-flow{display:flex;align-items:center;gap:clamp(10px,2vw,28px);position:relative;z-index:1}.schedule-step{display:flex;flex-direction:column;gap:7px;min-width:100px}.schedule-step span{color:var(--lime);font:11px "DM Mono",monospace}.schedule-step strong{font-size:17px;font-weight:500}.schedule-step small{color:var(--muted);font:10px/1.4 "DM Mono",monospace;text-transform:uppercase;letter-spacing:.04em}.schedule-arrow{color:var(--lime);font-size:22px}@media(max-width:760px){.schedule-callout{margin:0 20px;padding:38px 25px;grid-template-columns:1fr;gap:38px}.schedule-flow{align-items:flex-start;gap:12px}.schedule-step{min-width:0;flex:1}.schedule-arrow{padding-top:19px;font-size:16px}.schedule-step strong{font-size:14px}.schedule-step small{font-size:9px}}
+.marquee-track{transform:translateX(100%);animation:marquee 24s linear infinite}
+@keyframes marquee{from{transform:translateX(100%)}to{transform:translateX(-50%)}}
+.schedule-callout{margin-top:70px}
+@media(max-width:760px){.schedule-callout{margin-top:90px}}