/* Small helper CSS for missing shadow utilities (kept separate so it isn't overwritten by build) */
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

/* Ensure the main CTA heading uses the requested brand color and
   is strong enough to override Tailwind utility classes. */
#cta-container h1 {
  color: #184c35;
}

/* Page background color override (matches requested #eff4ed) */
body {
  background-color: #eff4ed;
}

/* Fallback styles to ensure CTA is visible when Tailwind utilities are missing */
#cta-container {
  display: block;
  max-width: 56rem; /* approx Tailwind max-w-4xl */
  margin: 2rem auto;
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem; /* approx rounded-xl */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);

}

#cta-container .flex { display: flex; }
#cta-container .text-left { text-align: left; }
#cta-container .text-center { text-align: center; }

/* Restore default text colors: ensure body text is black by default */
body {
  color: #000000;
}

/* Make CTA buttons match the H1 brand color and raise them slightly */
#cta-container button#open-dialog-btn,
#cta-container button#submit-btn {
  background-color: #184c35 !important;
  border-color: #184c35 !important;
  color: #ffffff !important;
  margin-top: -8px; /* raise the button slightly */
  /* prevent full-width (override Tailwind's w-full) */
  display: inline-block !important;
  width: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  /* make the button twice as high by increasing vertical padding */
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  border-radius: 0.75rem !important; /* rounded */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
  /* increase button text size */
  font-size: 1.25rem !important; /* ~20px */
  line-height: 1.25 !important;
}

#cta-container button#open-dialog-btn:hover,
#cta-container button#submit-btn:hover {
  background-color: #13392a !important; /* slightly darker on hover */
  border-color: #13392a !important;
}

/* Ensure the CTA layout keeps the icon to the left and the SVG is visible
   even if Tailwind utilities are missing. This forces a left/right layout
   and sizes/fills the SVG so it shows up inside the green circle. */
#cta-container .flex {
  display: flex;
  flex-direction: row !important; /* force left/right layout */
  align-items: center;
  gap: 1rem;
}

/* Left column (icon) approx 1/3 width; right column takes remainder */
#cta-container .flex > div:first-child {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cta-container .flex > div:last-child {
  flex: 1 1 66.666% !important;
  max-width: 66.666% !important;
}

/* Make the circle predictable if Tailwind utilities are missing */
#cta-container .w-32 {
  width: 8rem; /* 32 */
  height: 8rem; /* 32 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #184c35; /* match H1 color */
}

/* Ensure the icon inside the circle is visible and sized */
#cta-container .w-32 svg,
#cta-container .w-32 svg path {
  width: 4rem !important; /* 16 */
  height: 4rem !important;
  display: block !important;
  fill: #ffffff !important; /* force white fill */
  color: #ffffff !important;
}

/* Ensure the download modal overlay and content behave like a modal
   even if Tailwind utilities were purged. Makes the overlay opaque,
   centers the dialog, and forces it above other content. */
#download-modal {
  position: fixed;
  inset: 0;
  display: none; /* hidden by default; JS toggles 'hidden' class */
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(17,24,39,0.75); /* approx bg-gray-900 bg-opacity-75 */
  z-index: 9999; /* ensure it's on top */
}

/* When not hidden, show as flex (JS removes the .hidden class) */
#download-modal:not(.hidden) {
  display: flex;
}

/* Fallback for the modal content container in case Tailwind 'bg-white'
   or padding utilities are missing. Keep it centered and opaque. */
#download-modal > div {
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  position: relative;
  max-width: 32rem; /* ~max-w-md */
  width: 100%;
}

/* Ensure labels and modal heading use brand color to match the H1 */
#download-modal label,
#download-modal h2 {
  color: #184c35 !important;
}

/* Style the close button: ensure it appears at the top-right and clearly
   shows an 'X' even if Tailwind utilities were missing. */
#close-dialog-btn {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0.25rem !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #184c35 !important;
}

#close-dialog-btn svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  stroke: #184c35 !important;
  fill: none !important;
}

/* Make the modal submit button match the CTA button style */
#download-modal button#submit-btn {
  background-color: #184c35 !important;
  border-color: #184c35 !important;
  color: #ffffff !important;
  display: block !important;
  width: auto !important;
  margin: 10px auto 0 !important; /* 10px top margin and center horizontally */
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
}

#download-modal button#submit-btn:hover {
  background-color: #13392a !important;
  border-color: #13392a !important;
}

/* Modal input controls: 10px vertical margin, 5px padding, larger text,
   and a min-height to keep them visually tall (approx twice default). */
#download-modal input[type="text"],
#download-modal input[type="email"],
#download-modal textarea {
  margin: 10px 0 !important; /* 10px top and bottom */
  padding: 5px !important; /* 5px padding as requested */
  font-size: 1.125rem !important; /* larger input text (~18px) */
  min-height: 3rem !important; /* keep inputs tall (~48px) */
  border-radius: 0.75rem !important; /* rounded corners */
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #d1d5db !important; /* fallback border color */
}

/* Give the marketing consent checkbox some vertical spacing so it isn't
   cramped in the form */
#download-modal input[type="checkbox"] {
  margin: 10px 0 !important;
}