/*Every rule that now hard-codes swaps to this*/

/* =========================
   NutraLabel Global Styles
   =========================
   A lightweight, DRY stylesheet that consolidates shared rules,
   centralises colour tokens, and bakes‑in dark‑mode support.
   Component‑specific rules (navigation, footer, etc.) now live in
   their own files – keeping this one focused on layout, type & forms.
   -------------------------------------------------------------- */

body {
  border: red 2px solid;
}
main.container {
  border: rgb(70, 238, 140) 2px solid;
}
.pricing-cards {
  border: blue 2px solid;
}
.container {
  border: purple 2px solid;
}

/* --------------
   1.  Design Tokens
   -------------------------*/
:root {
  /* Brand colors */
  --nl-green-dark: #14410b; /* primary */
  --nl-green-light: #73af7e; /* accent  */
  --nl-white: #ffffff;
  /* Greyscale (for subtle tints/lines) */
  --grey-100: #f6f6f6;
  --grey-200: #e0e0e0;
  --grey-700: #4d4d4d;
  /* Typography */
  --font-base: "Segoe UI", system-ui, Arial, sans-serif;
  --fs-100: 0.875rem; /* 14px */
  --fs-200: 1rem; /* 16px */
  --fs-300: 1.25rem; /* 20px */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --shadow-md: 0 0 0.75rem rgba(0, 0, 0, 0.1);
  --navbar-height: 110px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nl-green-dark: #14410b; /* flip for dark bg */
    --nl-green-light: #73af7e;
    --nl-white: #121212;
    --grey-100: #1a1a1a;
    --grey-200: #222;
    --grey-700: #c2c2c2;
  }
}

/* Flexbox Compatibility to cover all major search engine implementations:*/
.foo {
  display: -webkit-box; /* OLD - Safari, iOS */
  display: -moz-box; /* OLD - Firefox */
  display: -ms-flexbox; /* IE10             */
  display: -webkit-flex; /* Newer WebKit     */
  display: flex; /* Standard         */
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

/* -------------------------
   Customer Service Chat Modal
   -------------------------*/
.open-button {
  /* from W3Schools model */
  background: #555;
  color: #fff;
  position: fixed;
  bottom: 23px;
  right: 28px;
  padding: 16px 20px;
  cursor: pointer;
}
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}
.form-container {
  max-width: 300px;
  background: #fff;
  padding: 10px;
}
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  background: #f1f1f1;
}
/*
.btn {
  background: #04aa6d;
  color: #fff;
  padding: 16px 20px;
  border: none;
  width: 100%;
  opacity: 0.8;
}*/
.cancel {
  background: red;
}

/* -------------------------
   2.  CSS Reset / Base
   -------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  scroll-behavior: smooth;
  height: 100%; /* Changed from 100vh to 100% */
  min-height: 100vh; /* NEW: Ensure minimum viewport height */
  line-height: 1.5; /* custom reset */
  font-family: Arial, sans-serif; /* custom reset */
  margin: 0;
  padding: 0;
}

/* ===== PROPER FLEXBOX LAYOUT FOR STICKY FOOTER ===== */
/* Let .flex-container control layout */
.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure full viewport height */
  /* Remove height: 100%; and width: 100vw; */
  height: 100%; /* NEW: Allow growth beyond viewport */
  width: 100vw;
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-100);
  background: linear-gradient(135deg, #14410b 0%, #73af7e 100%);
  color: white; /* Add a white overlay for logo transparency */
  position: relative;
  justify-content: flex-start;
  align-content: stretch;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  z-index: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/images/logos/NutraLabel-logo.svg"); /* Set background image */
  background-size: 100px;
  background-repeat: repeat;
  background-attachment: fixed;
  opacity: 0.15; /* Adjust for more/less transparency */
  z-index: 0;
}

.container {
  max-width: 1200px;
  margin: 0;
  padding: 0;
  background: #fff; /* White background for content */
  padding-top: 0; /* Remove top padding if not needed */
  display: block; /* Flexbox Fallback Compatibility across browsers */
  flex-direction: column;
  align-content: center;
}

main.container {
  display: flex; /* NEW: Make main a flex container */
  flex: 1 0 auto; /* Grow to fill available space */
  max-width: 900px; /* Narrowed from 1400px */
  margin: 0;
  margin-bottom: 0;
  margin-top: 0; /* Remove any top margin that might add space */
  position: relative;
  align-items: center;
  text-align: center;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  z-index: 1;
  min-height: auto;
  color: var(--nl-green-dark);
}
/*Flexbox fallback*/
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}
@supports (display: grid) {
  .gallery {
    display: grid;
  }
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Center the demo image */
.img-responsive {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  /* Optional: add some spacing */
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Blog images: make all blog images responsive and max 100% width */

.entry-featured-image-url img,
.post-content img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1em auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  background: #f6f6f6;
}

Accessible skip‑link */ .skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  padding: 0.5em 1em;
  background: var(--nl-green-dark);
  color: var(--nl-white);
  border-radius: var(--radius-sm);
  z-index: 1000;
}

.skip-link:focus {
  top: 1rem;
}

a:focus,
button:focus,
input:focus,
.btn:focus {
  outline: none;
  outline-offset: 2px;
}

/* Unified Button Styles */
.btn,
.login-trigger,
.register-trigger,
a.btn,
a.login-trigger,
a.register-trigger,
button.btn,
button.login-trigger,
button.register-trigger {
  display: inline-block;
  padding: 0.75em 1.5em;
  box-sizing: border-box;
  border-color: #b4f8c0;
  border: 2px solid var(--nl-green-dark);
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, #14410b 0%, #73af7e 100%);
  color: #fff;
  cursor: pointer;
  background-color: var(--nl-green-dark);
  background-size: 200% 200%;
  font-weight: 600;
  text-decoration: none;
  font-size: 17px;
  font-family: Raleway, var(--font-base), sans-serif;
  position: relative;
  transition: background-position 0.25s ease-out, box-shadow 0.25s ease-out;
  min-width: 120px;
  text-align: center;
  overflow: hidden; /*Ensures the shine stays inside the button */
}

/* glossy “shine” that sweeps across on hover */
.btn::before,
a.btn::before,
.login-trigger::before,
a.login-trigger::before,
.register-trigger::before,
.register-trigger:hover::before,
a.login-trigger:hover::before,
.btn:focus-visible::before,
a.btn:focus-visible::before,
a.register-trigger::before,
.register-trigger:focus-visible::before,
a.login-trigger:focus-visible::before,
a.register-trigger:focus-visible::before,
.form-box .btn::before,
body.dark-mode .btn::before,
body.dark-mode .login-trigger::before,
body.dark-mode .register-trigger::before,
body.dark-mode a.btn::before,
body.dark-mode a.login-trigger::before,
body.dark-mode a.register-trigger::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -40%;
  width: 30%;
  height: 220%;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(25deg);
  transition: left 0.6s ease-out, top 0.6s ease-out;
  pointer-events: none;
}

/* Hover/focus styles */
.btn:hover,
.login-trigger:hover,
.register-trigger:hover,
a.btn:hover,
a.login-trigger:hover,
a.register-trigger:hover,
button.btn:hover,
button.login-trigger:hover,
.form-box .btn:hover,
a.form-box .btn:hover,
button.register-trigger:hover,
.form-box .btn:focus-visible,
.btn:focus-visible,
.login-trigger:focus-visible,
.register-trigger:focus-visible {
  background: var(--nl-green-dark);
  background-position: 100% 0; /* slides the gradient */
  transform: translateY(-2px) scale(1.03); /* tiny lift */
  color: var(--nl-white);
  box-shadow: 0 0 4px #97e4a5, /* soft glow core */ 0 0 10px #238a45;
  outline: none;
}

.btn:hover::before,
.btn:focus-visible::before {
  left: 150%;
  top: 80%;
}

/* -------------------------
   2.  Typography
   -------------------------*/
h1,
h2,
h3,
h4,
h5,
h6,
title {
  font-weight: 600;
  line-height: 1.2;
  margin: 1rem 0 0.75em 0;
  text-align: center;
  background: transparent;
  color: var(--nl-green-dark) !important;
  text-decoration: bold;
  transition: 100ms;
  font-size: medium;
}

h1 {
  font-size: clamp(2rem, 5vw+1rem, 3rem);
  color: #fff;
  font-family: "ITCErasStd-Bold";
  font-size: large;
  text-decoration: bold;
  /* Reduce top margin to shrink space above heading */
  margin-top: 0.5rem; /* was 2rem in h1, now much smaller */
}

/* -------------------------
  3.  Forms
  -------------------------*/
form label {
  color: #fff !important;
  text-align: left;
  margin-left: 0;
}

form input,
form textarea,
form select {
  margin-left: 0 !important;
}

.form-inner {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  max-width: 500px;
  margin: auto;
  text-align: left;
  transform: translateX(2rem); /* Pos value shifts right */
}

#regForm {
  margin: 100px auto;
  padding: 40px;
  width: 70%;
  min-width: 300px;
  align-items: center;
}

/* input[type="submit"],*/
input,
textarea,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
form input[type="text"],
form input[type="password"] {
  border: 2px solid var(--nl-green-dark) !important;
  padding: 8px;
  width: 100%;
  max-width: 550px;
  border-radius: 8px; /* This sets the rounded corners*/
  box-sizing: border-box;

  font-size: var(--fs-100);
  margin-left: 0.5em;
  flex: 1 1 auto;
  color: #222;
  margin-bottom: 1em;
  padding-right: 2.5rem;
}

form label,
form .password-field {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1em;
  tab-size: 4;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  min-width: 90px;
}

.form-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

/*Simple form‑error state */
.invalid {
  background: #ffecec;
  border-color: #e44d4d;
}

/* Simple form‑success state */
.valid {
  background: #e6ffec;
  border-color: #4caf50;
}

.login-row button[type="submit"],
.modal-content .btn[type="submit"],
.form-box .btn[type="submit"] {
  width: auto;
  display: block;
  margin: 1.5em auto 0 auto; /*center the button */
  /*transform: translateX(2rem);  Pos value shifts right */
  border-radius: 10px;
  padding: 0.75em 2em;
  border: 2px solid var(--nl-green-dark);
  background: linear-gradient(135deg, #73af7e, #14410b);
  color: #fff;
  font-weight: bold;
}

/* Registration form navigation buttons */
.form-navigation .btn {
  display: flex;
  gap: 10px;
}

.form-navigation .btn.visible {
  display: inline-block; /* Show when needed */
}

.submit .btn {
  display: none; /* Default hidden */
}

.submit .btn.visible {
  display: inline-block; /* Show when needed */
}

/* Wizard step circles */
.step {
  height: 20px;
  width: 20px;
  margin: 0 4px;
  background-color: #bbbbbb;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
  transition: background-color 0.3s, opacity 0.3s;
}
.step.active {
  background-color: #014d0b;
  opacity: 1;
}

.tab {
  display: none;
}

.company-website-row {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

.qr-preview {
  min-width: 100px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #014d0b;
  border-radius: 8px;
  padding: 0.5em;
  margin-left: 1em;
}
/* -------------------------
    Tabels
   -------------------------*/

@media (max-width: 48rem) {
  table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em auto;
    font-size: var(--fs-100);
    font-family: var(--font-base);
    background-color: var(--grey-100);
    color: black;
  }
  th,
  td {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: left;
  }
  th {
    background-color: #f4f4f4;
  }
  tr:nth-child(even) {
    background-color: #fafafa;
  }
}

#complianceResults ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1em;
}

#complianceResults li {
  margin-bottom: 0.5em;
  color: #014d0b;
}

#complianceResults a {
  color: #014d0b;
  text-decoration: underline;
  font-size: 1em;
}

.fda-results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  color: #000;
  background: #fff;
}

.fda-results-table th,
.fda-results-table td {
  border: 1px solid #000;
  padding: 0.5em 1em;
  text-align: left;
  vertical-align: top;
}

.fda-results-table th {
  background: #f4f4f4;
}

.fda-results-table tr:nth-child(even) {
  background: #fafafa;
}

.fda-results-table a {
  color: #014d0b;
  text-decoration: underline;
}

/*FAQ*/
#faqList {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 2em;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 2em auto;
  max-width: 800px;
  font-family: var(--font-base);
  font-size: var(--fs-100);
  line-height: 1.2;
  text-align: left;
  color: #222;
  background-color: var(--nl-green-light);
}

.faq-item {
  width: 100%;
  max-width: 600px;
  margin-bottom: 1em;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  font-size: 1.1em;
  font-weight: bold;
  color: #222;
  cursor: pointer;
  padding: 0.75em 0;
  transition: background 0.2s;
}

.faq-arrow {
  margin-left: 0.5em;
  transition: transform 0.2s;
}

.faq-question[aria-expanded="true"] .faq-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0.5em 1em;
  border-left: 2px solid #73af7e;
  color: #222;
  background: transparent;
}

/* ----------------
     Footer
   ----------------*/
.footer,
.custom-footer-grid {
  flex: 0 0 auto; /*Don't grow or shrink */
  margin-top: auto; /*Push to bottom if content is short */
  margin-bottom: 0 !important; /* Remove any bottom margin */
}

.footer {
  margin-left: 0 !important; /* Remove any left margin */
  padding-left: 0 !important; /* Add left padding for footer content */
  margin-bottom: 0 !important; /* Remove any bottom margin */
}

.custom-footer-grid {
  width: 100vw !important;
  max-width: none !important;
  grid-template-columns: 1fr auto 1fr;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  padding: 10px 30px !important;
  min-height: 110px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(135deg, #73af7e, #14410b);
  bottom: 0;
  left: 0;
  box-sizing: border-box !important;
  margin-bottom: 0 !important; /* Remove any bottom margin */
}

/* Footer Text*/
.footer-text {
  flex: 1 1 auto;
  text-align: center;
  color: #f9f9f9;
  order: 2;
  font-size: 12px !important;
  transform: translateX(-1rem); /* Negative value shifts left*/
  min-width: 200px; /* Prevent collapse */
  margin: 0 1rem; /* Add spacing from edges */
}

.footer-actions {
  flex: 1 1 0;
  display: flex;
  order: 3 !important;
  justify-content: center !important;
}

/* Fixed logo sizing for navbar and footer */
.footer-logo img,
.navbar-logo img,
#NutraLabelLogo img {
  width: 100px !important;
  height: auto !important;
  max-width: 100px !important;
  min-width: 80px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Navbar logo container */
.navbar-logo {
  flex: 0 1 auto !important;
  margin-left: 0 !important; /* Remove any conflicting margin */
  margin-right: 0 !important; /* Remove any conflicting margin */
}

/* Footer logo container */
.footer-logo {
  flex: 0 0 auto !important;
  order: 1 !important;
}

/* Prevent flexbox from shrinking the logo container*/
.navbar-logo,
.footer-logo {
  width: 100px !important;
  min-width: 80px; /* Prevents shrinking */
  padding-left: 10px !important; /* Move padding to logo element */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 10px !important;
}
.footer-logo {
  flex: 0 0 auto !important;
}

@media (max-width: 480px) {
  .custom-footer-grid {
    padding: 15px 10px !important;
    min-height: 120px !important;
  }

  .footer-text {
    font-size: 11px !important;
  }

  .footer-logo img,
  .navbar-logo img,
  #NutraLabelLogo img {
    width: 80px !important;
    min-width: 60px !important;
    max-width: 80px !important;
  }
  .navbar-logo,
  .footer-logo {
    width: 80px !important;
    padding-left: 10px !important;
  }
}

/* Breadcrumbs */
nav[aria-label="breadcrumb"] {
  flex: 0 0 auto; /* Don't grow or shrink */
  max-width: 95vw;
  width: 100%;
  position: sticky;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0.3em;
  background: #f6f6f6;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5em;
  background: transparent;
  gap: 0.7em;
  justify-content: flex-start; /* Left justify breadcrumbs */
  text-align: left; /* Ensure text is left-aligned */
  margin-left: 0; /* Align to left of viewport */
  margin-right: auto; /* Prevent centering */
  width: auto; /* Remove any max-width constraints */
}
.breadcrumb-item + .breadcrumb-item:before {
  content: ">";
  margin: 0 0.5em;
  color: ar(--grey-200, #e0e0e0);
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--grey-200, #e0e0e0);
  text-decoration: none;
  transition: color 0.2s;
  text-decoration: none;
  font-size: 10px;
}
.breadcrumb-item.active {
  color: var(--grey-700, #4d4d4d);
  font-weight: bold;
  pointer-events: none;
  text-decoration: underline;
}

.breadcrumb-item a:hover {
  color: #8ef3b3; /*Hover color */
}

/* -------------------------
   Hero Section
   -------------------------*/

.hero h1 {
  margin-bottom: 1rem;
}

.hero p {
  margin-bottom: 2rem;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero .btn {
  display: inline-block;
  margin: 0 auto;
}

/* -------------------------
   Intro Section
   -------------------------*/
.intro {
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
}

.intro iframe {
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  display: block;
}

/* Video Container Styles */
.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.video-container iframe {
  width: 100%;
  height: 450px;
  border: none;
}

.demo-caption {
  text-align: center;
  margin-top: 16px;
  color: #666;
}

@media (max-width: 768px) {
  .video-container iframe {
    height: 250px;
  }
}

/* -------------------------
   Pricing
   -------------------------*/

/* ===== PRICING SECTION STANDARDIZATION ===== */
.pricing-section {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 3rem 1rem !important;
  text-align: center !important;
}

.pricing-section h1,
.pricing-section h2 {
  color: white !important;
  margin-bottom: 1rem !important;
  text-align: center !important;
}

.pricing-section p {
  color: #e0e0e0 !important;
  margin-bottom: 3rem !important;
  text-align: center !important;
  font-size: 1.1rem !important;
}

/* ===== UNIFIED PRICING GRID - 3 CARDS ACROSS ===== */
.pricing-cards,
.pricing {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  justify-content: center !important;
  align-items: stretch !important;
  max-width: 1200px !important;
  margin: 2rem auto !important;
  padding: 0 1rem !important;
}
/* ===== UNIFIED CARD STYLING ===== */
.pricing-cards .pricing-card,
.pricing .card {
  color: #333 !important;
  border: 2px solid var(--nl-green-light) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  padding: 2.5rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  min-height: 500px !important;
}

/* ===== FEATURED CARD STYLING ===== */
.pricing-cards .pricing-card.featured,
.pricing .card.featured {
  border-color: red !important;
  border-width: 3px !important;
  transform: scale(1.05) !important;
  gap: 0 !important;
  flex-grow: 0 !important;
  margin-top: auto; /* Push to bottom if content is short */
  padding: 20px 15px !important;
  min-height: 140px !important;
  text-align: center !important;
  transform: scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(20, 65, 11, 0.2) !important;
}

.pricing-cards .pricing-card.featured::before,
.pricing .card.featured::before {
  content: "MOST POPULAR" !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--nl-green-dark) !important;
  color: white !important;
  padding: 6px 20px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
}

/* ===== CARD HOVER EFFECTS ===== */
.pricing-cards .pricing-card:hover,
.pricing .card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--nl-green-dark) !important;
  transform: translateY(-8px) scale(1.04) !important;
}

/* ===== PLAN NAMES ===== */
.pricing-cards .plan-name,
.pricing .card h3 {
  font-size: 1.8rem !important;
  font-weight: bold !important;
  color: var(--nl-green-dark) !important;
  margin: 0 0 1rem 0 !important;
  text-align: center !important;
}

/* ===== PRICING DISPLAY ===== */
.pricing-cards .plan-price,
.pricing .card .price {
  font-size: 2.5rem !important;
  font-weight: bold !important;
  color: var(--nl-green-dark) !important;
  margin: 0 0 1rem 0 !important;
  text-align: center !important;
}

.pricing-cards .plan-price span,
.pricing .card .price span {
  font-size: 1rem !important;
  color: #666 !important;
  font-weight: normal !important;
}

/* ===== PLAN DESCRIPTIONS ===== */
.pricing-cards .plan-description,
.pricing .card p {
  color: #666 !important;
  margin: 0 0 2rem 0 !important;
  text-align: center !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* ===== FEATURES LISTS ===== */
.pricing-cards .plan-features,
.pricing .card .features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2rem 0 !important;
  flex-grow: 1 !important;
}

.pricing-cards .plan-features li,
.pricing .card .features li {
  padding: 0.5rem 0 !important;
  color: #333 !important;
  position: relative !important;
  text-align: left !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}

/* ===== CALL-TO-ACTION BUTTONS ===== */
.pricing-cards .plan-cta,
.pricing .card .plan-cta {
  background: var(--nl-green-dark) !important;
  color: white !important;
  border: 2px solid var(--nl-green-dark) !important;
  border-radius: 8px !important;
  padding: 1rem 2rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
  margin-top: auto !important;
  display: inline-block !important;
  min-width: 140px !important;
  text-align: center !important;
}

.blog-card p,
.blog-card .post-content {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.blog-card .post-content {
  font-size: 1em;
  color: #222;
  text-align: center;
  margin-top: 0.5em;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}

/* Responsive: 2 columns on tablets, 1 on mobile */
@media (max-width: 900px) {
  .blog-grid,
  .pricing {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  .pricing-cards .pricing-card,
  .pricing .card {
    padding: 2rem 1.5rem !important;
    min-height: 450px !important;
  }
  .pricing-cards .pricing-card.featured,
  .pricing .card.featured {
    transform: scale(1.02) !important;
  }

  .pricing-cards .pricing-card.featured:hover,
  .pricing .card.featured:hover {
    transform: translateY(-8px) scale(1.04) !important;
  }
  .pricing-section {
    padding: 2rem 0.5rem !important;
  }
}

@media (max-width: 600px) {
  .blog-card,
  .pricing-cards,
  .pricing {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0 0.5rem !important;
  }

  .pricing-cards .pricing-card,
  .pricing .card {
    padding: 2rem 1.5rem !important;
    min-height: 450px !important;
  }

  .pricing-cards .pricing-card.featured,
  .pricing .card.featured {
    transform: scale(1) !important;
  }

  .pricing-cards .pricing-card.featured:hover,
  .pricing .card.featured:hover {
    transform: translateY(-8px) scale(1.02) !important;
  }

  .pricing-section {
    padding: 2rem 0.5rem !important;
  }
}

/* ===== CUSTOM FONT: ITCErasStd-Bold ===== */
@font-face {
  font-family: "ITCErasStd-Bold";
  src: url("/assets/fonts/ITCErasStd-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* -------------------------
   Search Box Layout
   -------------------------*/
.search-box {
  margin: 2rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: inline-block;
}

.search-box label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #14410b;
}

.search-box input {
  padding-left: 2em; /* space for the icon */
  padding-right: 2em; /* space for clear X */
  height: 2.5em;
  line-height: 2.5em;
  vertical-align: middle;
  width: 100%;
  max-width: 400px;
  border: 2px solid var(--nl-green-dark);
  border-radius: 8px; /* This sets the rounded corners */
  box-sizing: border-box;
  font-size: var(--fs-100);
  color: #222;
  background: white;
}

.search-box input[type="text"]:focus {
  outline: none;
  border-color: #014d0b;
  box-shadow: 0 0 5px rgba(1, 77, 11, 0.5);
}

.search-box #clearSearch,
.faq-search-box #clearSearch,
.case-studies-search-box #clearSearch {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2em;
  color: #888;
  background: none;
  border: none;
  padding: 0;
  z-index: 2;
  transition: color 0.2s;
  pointer-events: auto;
  line-height: 1;
}

.search-box #clearSearch:hover,
.faq-search-box #clearSearch:hover,
.case-studies-search-box #clearSearch:hover {
  color: #14410b;
}

.search-icon {
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #000;
  filter: grayscale(100%) brightness(2);
  font-size: 1.1em;
  line-height: 1;
}

/* Unified search input wrapper for other layouts */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 2px solid #73af7e;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.search-input-wrapper input[type="text"],
.search-input-wrapper input {
  flex: 1 1 auto; /* Grows to fill space */
  border: none;
  outline: none;
  padding: 12px 15px;
  font-size: 16px;
  background: white;
  color: #333;
}

.search-input-wrapper input::placeholder {
  color: #999;
  font-style: italic;
}

.search-input-wrapper .search-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  font-size: 16px;
  color: #73af7e;
  order: 1;
  position: static;
  pointer-events: none;
}

.search-input-wrapper .clear-search,
.search-input-wrapper #clearComplianceSearch {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-left: 1px solid #e9ecef;
  font-size: 14px;
  color: #dc3545;
  cursor: pointer;
  transition: background-color 0.2s;
  order: 3;
  padding: 0;
}

.search-input-wrapper .clear-search:hover,
.search-input-wrapper #clearComplianceSearch:hover {
  background: #e9ecef;
  color: #014d0b;
}

.search-input-wrapper:focus-within {
  border-color: #14410b;
  box-shadow: 0 0 0 3px rgba(115, 175, 126, 0.2);
}

.search-input-wrapper:focus-within .search-icon {
  background: #73af7e;
  color: white;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .search-box {
    margin: 1rem 0;
    max-width: 100%;
  }
  .search-icon,
  .clear-search,
  .search-input-wrapper .search-icon,
  .search-input-wrapper .clear-search {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  .search-input-wrapper input,
  .search-box input {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* -------------------------
   Features Section
   -------------------------*/
.features-section {
  background: transparent;
  padding: 2rem 1rem;
  margin: 2rem 0;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
  color: #333;
}

.features-section h1 {
  color: #14410b;
  text-align: center;
  margin-bottom: 2rem;
}

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

.features-section li {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
  color: #333;
  position: relative;
  padding-left: 2rem;
}

.features-section li:before {
  content: "?";
  position: absolute;
  left: 0;
  color: #73af7e;
  font-weight: bold;
  font-size: 1.2em;
}

.features-section li:last-child {
  border-bottom: none;
}

/* Recall table styling */
#recall-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#recall-table th {
  background: #73af7e;
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: bold;
}

#recall-table td {
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
  color: #333;
}

#recall-table tr:hover {
  background: #f8f9fa;
}
/* This ensures older browsers still get a usable layout. lets you apply styles only if the browser supports a specific CSS feature—great for graceful degradation. */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@supports not (display: grid) {
  .layout {
    float: left;
    width: 50%;
  }
}
.test {
  display: flex;
}

/* Dark mode overrides */
body.dark-mode .btn,
body.dark-mode .login-trigger,
body.dark-mode .register-trigger,
body.dark-mode a.btn,
body.dark-mode a.login-trigger,
body.dark-mode a.register-trigger,
body.dark-mode button.btn,
body.dark-mode button.login-trigger,
body.dark-mode button.register-trigger,
body.dark-mode .form-box .btn,
body.dark-mode a.form-box .btn {
  color: #121212;
  background: linear-gradient(135deg, #73af7e 0%, #14410b 100%);
  border-color: #121212;
}

body.dark-mode .btn:hover,
body.dark-mode .login-trigger:hover,
body.dark-mode .register-trigger:hover,
body.dark-mode a.btn:hover,
body.dark-mode a.login-trigger:hover,
body.dark-mode a.register-trigger:hover,
body.dark-mode button.btn:hover,
body.dark-mode button.login-trigger:hover,
body.dark-mode button.register-trigger:hover,
.navbar .dropdown-content a:hover {
  color: #121212;
  background: var(--nl-green-dark);
  background-position: 100% 0; /* slides the gradient */
  transform: translateY(-2px) scale(1.03); /* tiny lift */
  box-shadow: 0 0 20px #3b664b, /* soft glow core */ 0 0 10px #14410b;
  outline: none;
}

body.dark-mode .navbar,
body.dark-mode .custom-footer-grid {
  background: linear-gradient(135deg, #3b664b, #1a1a1a) !important;
  color: #121212;
  opacity: 1 !important;
}

body.dark-mode .dropdown-content,
body.dark-mode {
  background: linear-gradient(135deg, #1a1a1a, #3b664b);
  color: #b4f8c0;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode title {
  color: var(--nl-green-light);
}

body.dark-mode .breadcrumb {
  color: var(--nl-green-light);
}

body.dark-mode .breadcrumb-item {
  color: var(--nl-green-light);
}

body.dark-mode .breadcrumb-item a {
  color: var(--nl-green-light);
  text-decoration: none;
}

body.dark-mode .breadcrumb-item a:hover {
  color: var(--nl-white, #ffffff); /* Fixed: was '--nl-white-ffffff' */
}

body.dark-mode .breadcrumb-item.active a {
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
}