* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #e8f5e9;
  
  margin: 0 auto;
  font-family: Arial, sans-serif; 
  opacity: 0;
  transition: opacity 0.4s ease-in-out; /* adjust to change speed */
}
body.loaded {
  opacity: 1;
}

.bbh-bartle-regular {
  font-family: "BBH Bartle", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

.jost {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

p {
  text-align: center;
  line-height: 1.6;
  font-size: 16px;
}

/* Mint & Measure video also home page */

#videoSection {
  grid-column: 1 / -1;
  padding: 80px 40px;
  text-align: center;
  height: 1000px;
  margin-bottom: 100px;
  height: auto;
  margin-top: 50px;
  background: #143c3226;
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 20px 40px #00000040;
}

#videoSection h1 {
  font-size: 3em;
  color: #1f6f5b;
  margin-bottom: 30px;
  font-family: 'indie flower';
  text-decoration: none;
  text-shadow: 1px 1px 3px #1bb830f9;
}

.videoBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 75px;
  margin-bottom: 0;
}

#homepageVideo {
  width: 100%;
  max-width: 880px;
  border-radius: 18px;
  background-color: #000000;
  box-shadow: 20px 20px 40px #00000040;
  outline: none;
}

/* NAV MENU */

#hamburgerBox {
  width: 120px;
  height: 45px;
  position: fixed;
  top: 450px;
  right: 25px;
  z-index: 500;
  border-radius: 50px;
}

#hamburgerBox img {
  width: 120px;
  height: auto;
  position: fixed;
  right: 27px;
  top: 440px;
  cursor: pointer;
}

#hamburgerBox img:hover {
  transform: scale(1);
  transition: all 0.3s ease;
  opacity: .8;
  filter: drop-shadow(0px 1px 2px rgb(0, 0, 0)); 
}

/* This class rotates the mint leaf counter-clockwise */
.leaf-rotate {
  transform: rotate(-45deg) scale(1.1) !important;
  opacity: 1 !important; /* Keeps it fully visible when open */
}

.navMenu {
  position: fixed;
  top: -400px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2000;
  transition: all 0.25s ease;
}

.navMenu a {
  font-family: "dancing script", serif;
  font-size: 2em;
  text-decoration: none;
  color: #fff;
  padding: 8px 14px;
  transition: all 0.25s ease;
  font-weight: 900;
  background-color: #099b6d34;
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 20px 40px #00000040;
 
}

.navMenu a:hover {
  background: #0f3a2fc0;
  transform: translateX(-4px);
}

/* GRID LAYOUT */
#grid {
  height: auto;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-template-areas:
    "hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
    "mai mai mai mai mai mai mai mai mai mai mai mai"
    "abt abt abt abt abt abt abt abt abt abt abt abt"
    "rec rec rec rec rec rec rec rec rec rec rec rec"
    "con con con con con con con con con con con con"
    "ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";
  gap: 20px;
  background-color: #143c3226;
}

/* HEADER */
header {
  display: grid;
  grid-area: hdr;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-column: 1 / -1;
  width: 100%;
  height: 620px;
  background-image: url("../assets/images/headerBkg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  justify-items: center;
  z-index: 1;
}

.headerContent {
  text-align: center;
  color: #e3e3e3;
  z-index: 100;
}

.headerContent h1 {
  font-size: 6.5em;
  font-family: "Dancing Script", serif;
  margin-bottom: 10px;
  text-shadow: 2px 2px 8px #fff;
  color: #09231c;
  z-index: 100;
}

.headerContent .slogan {
  font-size: 2em;
  color: #4caf50;
  background-color: #00000099;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: "jost";
  font-weight: 400;
  z-index: 1000;
  text-shadow: 1px 1px 1px #ccc;
  box-shadow: .5px .5px 2px #333;
}

/* LOGO & SOCIALS */
.logoDiv {
  position: fixed;
  top: 65px;
  left: 10px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #099b6d34;
  backdrop-filter: blur(8px);
  border-radius: 50px;
  box-shadow: 0 20px 40px #00000040;
  width: 100px;
  height: 100px;
}

.logoDiv img {
  width: 160px;
  height: auto;
  transition: opacity 0.3s ease;
  top: auto;
  filter: drop-shadow(5px 5px 10px #00000099);
  position: relative;
}

.logoDiv img:hover {
  opacity: 0.75;
}

.cookbookIconDiv {
  position: fixed;
  top: 480px;
  left: 10px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #099b6d34;
  backdrop-filter: blur(8px);
  border-radius: 25px;
  box-shadow: 
    0 15px 35px #00000033, /* Deep shadow */
    0 5px 15px #0000001a;  /* Soft ambient shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;           
  width: 100px;
  height: 100px;
}

.cookbookIcon {
  width: 250px;
  height: auto;
  transition: opacity 0.3s ease;
  bottom: 20px;
  filter: drop-shadow(5px 5px 10px #00000099);
  position: relative;
  /* The Realistic Shadow */
  filter: drop-shadow(0 10px 10px #00000066);
  /* The Magic Float Animation */
  animation: floatBook 4s ease-in-out infinite;
  transition: filter 0.3s ease;
}

.cookbookIconDiv:hover {
  transform: translateY(-1px); /* Lifts up slightly */
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.25),
    0 0 20px #3ff3c360; /* Minty glow on hover */
  background-color: #099b6d50; /* Slightly more visible on hover */
}

/* Keyframes for the Floating Magic Effect */
@keyframes floatBook {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); } /* Floats up and tilts */
  100% { transform: translateY(0px) rotate(0deg); }
}

.socialDiv {
  position: fixed;
  top: 170px;
  left: -150px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #099b6d34;
  width: 100px;
  height: 200px;
  padding-top: 20px;
  transition: left 0.5s ease;
  backdrop-filter: blur(10px);
  border-radius: 25px;
  box-shadow: 0 20px 40px #00000040;
}
.social-rotate {
  transform: rotate(45deg);
}

.socialDiv img {
  width: 30px;
  transition: opacity 0.5s ease;
  cursor: pointer;
  filter: drop-shadow(0px 2px 5px #00000099);
}

.socialDiv img:hover {
  filter: drop-shadow(0px 4px 8px #002e23d5);
  opacity: .75;
}

.socialHamburgerBox {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 375px;
  left: 10px;
  z-index: 500;
  background-color: #099b6d34;
  backdrop-filter: blur(8px);
  border-radius: 25px;
  box-shadow: 0 20px 40px #00000040;
  cursor: pointer;
}

.socialHamburgerImgBox {
  width: 200px;
  height: auto;
  left: -50px;
  position: relative;
  bottom: 5px;
}

.socialHamburgerImgBox img {
  width: 200px;
  height: auto;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0px 2px 5px #00000099);
}
.socialHamburgerImgBox img:hover {
  opacity: 0.75;
}

/* MAIN CONTENT = RESULTS PREVIEW */
main { 
  display: grid;
  grid-area: mai;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(150px, auto);
  width: 100%;
  padding-left: 50px;
  padding-right: 25px;
  height: auto;
  margin: 25px auto;
  padding-top: 100px;

}

.searchBox {
  margin: 30px auto;
  max-width: 600px;
  padding: 20px;
  background: #aaa;
  margin-top: 15px;
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 20px 40px #00000040;
}

select {
  padding: 10px;
  width: 30%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
  background-color: white;
  cursor: pointer;
  margin-top: 15px;
}

input {
  padding: 10px;
  width: 50%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Makes buttons click, instead of feeling flat */
button:active {
  transform: scale(0.97);
}

#cookbookButton {
  background-color: #4caf50;
  margin-left: 185px;
  margin-top: 50px;
  transition: background-color 0.3s;
  padding: 10px 20px;
}

#cookbookButton:hover {
  background-color: #1e4102;
}

.resultsPreview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 30px 60px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  margin-right: 50px;
}

.resultsPreview h3 {
  background-color: #e3e3e3;
  color: #333;
  padding: 20px 40px;
  border-radius: 8px;
  border-left: 5px solid #4caf50;
  box-shadow: 0 2px 5px #0000001a;
  text-align: center;
  width: 80%;
}

#browseButton {
  background-color: #008cba;
  margin-right: 125px;
  transition: background-color 0.3s;
  margin-top: 10px;
  box-shadow: .5px .5px 2px #666;
}

#browseButton:hover {
  background-color: #007399;
}

/* CARDS */
.mealCard {
  background-color: #d5d5d5;
  width: 300px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 6px #ddd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mealCard img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.mealCard h3 {
  font-size: 1.2em;
  margin: 10px 0;
  color: #333;
}

.viewRecipeBtn {
  background-color: #2c3e50;
  color: #fefefe;
  border: none;
  padding: 10px 20px;
  font-size: 1em;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: .5px .5px 2px #333;
}

.viewRecipeBtn:hover {
  background-color: #000;
}

.cardActions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}

.iconBtn {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}

.iconBtn:hover {
  background-color: #f0f0f0;
  transform: scale(1.1);
  border-color: #bbb;
}

.heartActive {
  color: #e91e63 !important;
  border-color: #e91e63 !important;
  font-weight: bold;
  box-shadow: .5px .5px 2px #333;
}

/* ABOUT */
#about {
  display: grid;
  grid-area: abt;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  background-color: #e8f5e9;
  width: 100%;
  padding: 100px 100px;
  align-items: center;
  gap: 40px;
  text-align: center;
  justify-items: auto;
  border-radius: 18px;
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 20px 40px #00000040;
}

.aboutInfo {
  max-width: 900px;
  margin: 4rem auto;
  padding: 3rem;
  background: #143c3226;
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 20px 40px #00000040;
  color: #e8fff8;
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.7;
}

/* Headings */
.aboutInfo h1 {
  font-size: 3.5em;
  color: #279578;
  margin-bottom: 0.5rem;
  font-family: 'dancing script';
  font-weight: 900;
}

.aboutInfo h4 {
  font-family: "Inter", system-ui, sans-serif;
  color: #333;
  font-size: 1.8em;
  font-weight: 300;
}

.aboutInfo h2 {
  font-size: 2.2em;
  font-weight: 600;
  color: #6a9185;
  margin-bottom: 1.5rem;
  font-family: "Indie Flower";
}

.aboutInfo h3 {
  font-size: 2.5em;
  margin: 3rem 0 1rem;
  color: #31bb96;
  font-family: "Indie Flower";
  font-weight: 600;
}

.aboutInfo h3 + p {
  font-size: 1.25em;
  line-height: 2;
  letter-spacing: 0.03em;
  color: #f7fffc;
  margin-top: 32px;
  margin-bottom: 40px;
  max-width: 700px; 
}

.aboutInfo p {
  font-size: 1.25em;
  line-height: 2;
  letter-spacing: 0.03em;
  color: #f7fffc;
  margin-bottom: 32px;
  padding: 24px 28px;
  max-width: 680px;
  background-color: #1c564953;
  border-radius: 14px;
}

.aboutInfo p strong {
  display: block;
  font-size: 1.35em;
  color: #3ff3c3;
  margin-top: 36px;
  margin-bottom: 16px;
}

.aboutInfo p em {
  display: block;
  font-size: 1.15em;
  color: #dffef5;
  margin-left: 16px;
  margin-bottom: 12px;
}

.aboutInfo p:last-of-type {
  font-size: 1.3em;
  line-height: 2;
  color: #ffffff;
  background-color: #31968055;
  padding: 28px 32px;
  border-radius: 16px;
  max-width: 720px;
}

/* Accent dividers */
.aboutInfo p::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, #3ff3c3, transparent);
  margin: 2rem 0;
}

/* Call-to-action highlight */
.aboutInfo p:last-child {
  background: rgba(22, 138, 107, 0.367);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(63, 243, 195, 0.35);
}

@media (max-width: 600px) {
  .aboutInfo {
    padding: 2rem;
  }

  .aboutInfo h1 {
    font-size: 2rem;
  }
}

/* media query for tablet and mobile, single column layout */
@media (max-width: 768px) {
  #about {
    grid-template-columns: 1fr;
    padding: 30px;
  }
}

.features {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.features li {
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border-left: 4px solid #3ff3c3;
}

.aboutImg {
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  margin: 100px 0;
  background: #143c3226;
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 20px 40px #00000040;
}

/* FOOTER */
footer {
  display: grid;
  grid-area: ftr;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  width: 100%;
  background-color: #1a1a1a;
  color: #fff;
  padding-top: 10px;
  position: relative;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 0px;
}

.footer-content h3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 600;
  font-family: 'Indie Flower';
}

.footer-content p {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 20px;
  max-width: 400px;
}

.footer-links {
  list-style: none;
  display: flex;
  gap: 25px;
  padding: 0 25px;
  margin: 0;
}

.footer-links a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #4caf50;
}

.footer-copy {
  background-color: #000;
  padding: 15px;
  margin-top: 20px;
  text-align: center;
  font-size: 1.5em;
  color: #888;
}

.studio {
  margin-top: 10px;
  text-align: center;
}

.studio > img {
  width: 66px;
}

/* MODAL */

body.model-open {
  overflow: hidden;
}

#recipeModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

.modalContent {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 40px 30px;
  border: 1px solid #888;
  width: 90%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 15px;
}

.closeBtn {
  position: absolute;
  top: 15px;
  right: 20px;
  color: #aaa;
  font-size: 2em;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.closeBtn:hover {
  color: #000;
}

#modalTitle {
  font-family: "Georgia", serif;
  font-size: 2rem;
  color: #333;
  text-align: center;
}

#modalImage {
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.modalContent h3 {
  margin-top: 20px;
  border-bottom: 2px solid #4caf50;
  display: inline-block;
}

#modalIngredients {
  justify-self: start;
  width: 100%;
  padding-left: 40px;
  list-style-type: square;
  line-height: 1.8;
}

#modalInstructions {
  justify-self: start;
  width: 100%;
  line-height: 1.8;
  font-size: 1.05rem;
  color: #444;
  margin-bottom: 20px;
}

.modalControls {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  justify-content: center;
}

.actionBtn {
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
  border: 2px solid #ccc;
  background: white;
  color: #333;
}

.actionBtn:hover {
  background-color: #f0f0f0;
  transform: scale(1.05);
}

.saveBtnActive {
  background-color: #4caf50 !important;
  color: white !important;
  border-color: #4caf50 !important;
}

/* CHAT WIDGET */
#chatWidget {
  position: fixed;
  top: 535px;
  right: 25px;
  z-index: 500;
  font-family: Arial, sans-serif;
}

#chatToggle {
  background-color: #099b6d;
  color: #fff;
  border: 0;
  padding: 10px 18px;
  border-radius: 50px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 40px #00000040;
}

#chatBox {
  width: 300px;
  height: 400px;
  background: #fff;
  border: 3px solid #21f4d1;
  border-radius: 8px;
  box-shadow: 2px 2px 8px #666;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

@media (max-width: 600px) {
  #chatBox {
    width: 90%;       /* Fits the screen width instead of fixed 300px */
    height: 30vh;     /* Uses 30% of screen height */
    margin: 10px auto; /* Centers the box horizontally */
    right: auto;      /* Resets positioning if it was fixed to the side */
    left: 5%;         /* Helps with centering if position is absolute/fixed */
    top:auto; 
  }
}

#chatMessages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  height: 300px;
  overflow-y: auto;
  background-color: #ffffff;
  border-bottom: 1px solid #ccc;
}

.message-bubble {
  max-width: 80%;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.user-message {
  align-self: flex-end;
  background-color: #4caf50;
  color: white;
  border-bottom-right-radius: 2px;
}

.ai-message {
  align-self: flex-start;
  background-color: #f1f1f1;
  color: #333;
  border-bottom-left-radius: 2px;
}

.loading-message {
  font-style: italic;
  color: #888;
  background: none;
  padding-left: 0;
}

/* === iPHONE CHAT STYLES === */

#chatMessages {
  display: flex;
  flex-direction: column; /* Stack vertically */
  gap: 10px; /* Space between bubbles */
  padding: 15px;
  background: #fff;
}

#chatInput {
  width: auto;
  margin-bottom: 5px;
}

/* Common Bubble Shape */
.message-bubble {
  max-width: 80%;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

/* USER (Right, Green) */
.user-message {
  align-self: flex-end;
  background-color: #4CAF50;
  color: white;
  border-bottom-right-radius: 5px; /* Little tail */
}

/* AI (Left, Grey) */
.ai-message {
  align-self: flex-start;
  background-color: #E5E5EA;
  color: black;
  border-bottom-left-radius: 5px; /* Little tail */
}

/* ============> Chef Converter (iPhone Style) <=========== */

.mainConverter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}

.mainConverter h1 {
  width: 100%;
  text-align: center;
}

#unitConversionSection {
  order: 1;
}

.instructionsDiv {
  order: 2;
  flex: 1;
  max-width: 400px;
  position: relative;
  right: 666px;
  height: 500px;
  background-color: #fff;
  border-left: 6px solid #4caf50;
  border-radius: 18px;
  box-shadow: 0 20px 40px #000;
  margin-top: 50px;
  padding: 25px 25px;
  
}

.stepTitle {
  font-family: "Indie Flower", cursive;
  color: #1f6f5b;
  font-size: 2.5em;
  margin: 20px 20px;
  text-align: center;
  font-weight: 600;
}

.stepText {
  font-family: "Jost", sans-serif;
  font-size: 1.4em;
  line-height: 1.8;
  color: #333;
  text-align: left;
  margin: 25px 25px;
}

main h1 {
  font-size: 3em;
  color: #1f6f5b;
  margin-bottom: 30px;
  font-family: 'indie flower';
  text-decoration: none;
  text-shadow: 1px 1px 3px #1bb830f9;
  text-align: center;
  justify-content: space-between;
}

/* 1. The Phone Container */
#unitConversionSection {
    order: 1;
    width: 380px;
    height: 700px;
    background-color: #000;
    border-radius: 45px;
    box-shadow: 0px 30px 60px #00000080;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 20px auto;
    padding: 40px 30px;
    justify-self: center;
    font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
    color: #fff;
    text-align: center;
}

/* Header Text */
#unitConversionSection h2 {
    font-size: 1.5em;
    font-weight: 500;
    color: #fff;
    margin: 0;
    padding-top: 10px;
    letter-spacing: 0.5px;
    font-family: inherit; 
    text-shadow: none;
}

/* 2. Middle Section (Inputs & Buttons) */
/* flex-grow: 1 is the magic fix. It forces this box to fill all empty space */
.converterBox {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* Vertically centers the inputs/buttons */
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    gap: 40px;
}

/* Labels (From/To) */
.converterBox label {
    font-size: 0.8rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    margin-left: 10px;
    text-align: left;
    display: block;
    padding-bottom: 10px;
}

/* The Big Number Input */
.converterBox input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 4.5rem; /* Large Display Text */
    text-align: right;
    width: 100%;
    margin-bottom: 40px;
    outline: none;
    font-weight: 200;
}

/* Grouping for Button Clusters */
.unitGroup {
    margin-bottom: 30px;
    margin-top: 25px;
    gap: 35px;
}

/* The Button Grid */
.buttonContainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns */
    gap: 12px;
    justify-items: center;
}

/* Circular Buttons */
.unitButton {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    
    /* Center text inside button */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.unitButton:hover {
    background-color: #555;
}

.unitButton.active {
    background-color: #f90; /* Apple Orange */
    color: #fff;
    font-weight: 600;
}

/* 3. Bottom Section (Result) */
.resultText {
    font-size: 1.2rem;
    color: #888;
    text-align: right;
    margin-bottom: 20px;
    font-weight: 400;
}

#resultOutput {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 300;
    display: block;
    margin-top: 5px;
}

/* ----------------- MEDIA QUERY Chef's iConverter ------------------- */
@media screen and (max-width: 1960px) {
  .mainConverter {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .instructionsDiv {
    position: static;
    right: auto;
    width: 40%;
    max-width: 50%;
    height: auto;
    margin-top: 0;
    margin-bottom: 30px;
    order: 2;
  }
  #unitConversionSection {
    width: 95%;
    max-width: 360px; /* Prevents the phone from being cut off on small screens */
    height: auto;
    min-height: 700px;
  }

  .converterBox input {
    font-size: 3.5rem; /* Slightly smaller text for mobile screens */
  }

  .buttonContainer {
    gap: 8px;
  }

  .unitButton {
    width: 58px;
    height: 58px;
  }
}  

/* =====================> MINT SCALER & INSTRUCTIONS <=========================== */

.scalerVideoContainer {
  border-radius: 18px;
  background-color: #000000;
  box-shadow: 20px 20px 40px #00000040;
  overflow: hidden;
  width: 100%;
  height: 500px;
}
.scalerVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* --- Parent Layout Container --- */
.mintScaler {
  /* Use Flexbox to put items side-by-side */
  display: flex;
  flex-wrap: wrap; /* Allows stacking on small screens */
  justify-content: center; /* Centers content */
  align-items: flex-start; /* Aligns tops of boxes */
  gap: 50px; /* Space between instructions and phone */
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
}

/* Force the H1 to take full width so it stays on top */
.mintScaler h1 {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

/* --- Instructions Section (Left Side) --- */
.scalerInstructionsBox {
  flex: 1; /* Takes up available space */
  min-width: 300px; /* Don't get too narrow */
  max-width: 500px; /* Don't get too wide */
  height: 700px;
  padding: 30px;
  background-color: #ffffffcc; /* White with transparency */
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 20px 40px #00000040;
  color: #333;
  border-left: 6px solid #4caf50;
  margin-top: 20px; /* Align visually with the phone */
}

.scalerInstructionsBox h2 {
  font-family: "Indie Flower", cursive;
  color: #1f6f5b;
  font-size: 2.2em;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

.instructionList {
  padding-left: 20px;
  font-family: "Jost", sans-serif;
  font-size: 1.4em;
  color: #222;
}

.instructionList li {
  margin-bottom: 12px;
  line-height: 1.6;
}

.subList {
  margin-top: 8px;
  margin-bottom: 15px;
  padding-left: 25px;
  color: #555;
  list-style-type: disc;
  font-size: 0.95em;
}

/* --- The Mint Scaler (Right Side - iPhone Container) --- */

.scalerWrapper {
  flex: 0 0 380px; /* Fix the width to look like a phone */
  min-height: 750px;
  background-color: #000;
  border-radius: 45px;
  box-shadow: 0 30px 60px #00000080;
  padding: 40px 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 25px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 1. Input Section */
.scalerCard h3 {
  font-size: 0.9rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-weight: 400;
  text-align: left;
}

.inputGroup {
  position: relative;
  margin-bottom: 15px;
}

.inputGroup input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #333;
  color: #fff;
  font-size: 3rem;
  text-align: right;
  padding-right: 10px;
  outline: none;
  font-weight: 200;
  border-radius: 0;
}

.unitLabel {
  position: absolute;
  bottom: 15px;
  left: 0;
  color: #666;
  font-size: 0.9rem;
}

/* 2. Tabs (Segmented Control) */
.scalerTabs {
  display: flex;
  background: #1c1c1e;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.modeBtn {
  flex: 1;
  background: transparent;
  border: none;
  color: #888;
  padding: 10px 0;
  font-size: 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  margin: 0;
}

.modeBtn.active {
  background: #4caf50;
  color: #fff;
  box-shadow: 0 2px 4px #0000004d;
}

/* 3. Dynamic UI Body */
.scalerBody {
  flex-grow: 1;
}

.scalerUi {
  display: none;
}

.scalerUiActive {
  display: block;
  animation: fadeIn 0.4s ease-in-out;
}

.scalerUi p {
  color: #888;
  font-size: 0.9rem;
  text-align: left;
  margin-bottom: 15px;
}

/* Yield & Ingredient Mode Grid */
.yieldGrid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1c1c1e;
  padding: 20px;
  border-radius: 18px;
  margin-top: 15px;
}

.yieldBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.yieldBox label {
  font-size: 0.8rem;
  color: #aaa;
  text-transform: uppercase;
  margin-bottom: 0;
}

.yieldBox input {
  width: 80px;
  background: #333;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  border-radius: 8px;
  padding: 10px;
  outline: none;
  margin: 0;
}

.arrowBox {
  font-size: 1.5rem;
  color: #4caf50;
  padding-top: 15px;
}

/* Multiplier Mode Buttons */
.multGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.multBtn {
  background: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.multBtn:hover {
  background: #444;
}

.multBtn.active {
  background: #4caf50;
  color: #fff;
  font-weight: bold;
}

/* 4. Result Section */
.scalerResultBox {
  margin-top: auto;
  text-align: right;
  border-top: 1px solid #333;
  padding-top: 20px;
}

.scalerResultBox h3 {
  font-size: 1rem;
  color: #888;
  margin-bottom: 5px;
  font-weight: 400;
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  width: 100%;
  text-align: right;
}

#scaledResult {
  font-size: 3.5rem;
  color: #4caf50;
  font-weight: 300;
  display: block;
}

.scalerNote {
  text-align: center;
  font-size: 0.75rem;
  color: #555;
  margin-top: 10px;
}

.scalerNote p {
  color: #555;
  font-size: 0.8rem;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================> MEDIA QUERIES <=========================== */

@media (max-width: 900px) {
  /* On tablets/mobile, stack them vertically */
  .mintScaler {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  
  .scalerInstructionsBox {
    width: 100%;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  /* Mobile Phone Adjustments */
  .mintScaler {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .scalerInstructionsBox {
      padding: 20px;
  }
  
  /* Make iPhone container fluid */
  .scalerWrapper {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    border-radius: 30px;
    padding: 25px 20px;
  }

  .inputGroup input {
    font-size: 2.5rem;
  }

  #scaledResult {
    font-size: 3rem;
  }

  .multGrid {
    gap: 8px;
  }

  .multBtn {
    width: 50px;
    height: 50px;
    font-size: 0.9rem;
  }
  
  .yieldGrid {
    flex-direction: column;
    gap: 15px;
  }

  .arrowBox {
    transform: rotate(90deg);
  }
}