body,
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

/* Reduced font sizes by 25% for modern look */
a,
li,
option,
p,
label,
select.form-control,
#submit.dropdown-btn,
tr,
td {
  font-size: 15px; /* Reduced from 20px */
}

h1 {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 1.875rem; /* Reduced from default 2.5rem */
}

h2 {
  font-size: 1.5rem; /* Reduced from default 2rem */
}

h3 {
  font-size: 1.25rem; /* Reduced from default 1.75rem */
}

h4 {
  font-size: 1.125rem; /* Reduced from default 1.5rem */
}

h5 {
  font-size: 1rem; /* Reduced from default 1.25rem */
}

/* Modern container widths - narrower for better readability */
.container {
  max-width: 900px; /* Reduced from Bootstrap's default 1140px */
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 800px; /* Reduced from 960px */
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 900px; /* Reduced from 1140px */
  }
}

/* Even narrower content columns for better readability */
.col-lg-8 {
  max-width: 600px; /* Override Bootstrap's default */
  margin: 0 auto;
}

.col-lg-10 {
  max-width: 700px; /* Override Bootstrap's default */
  margin: 0 auto;
}

/* Calculator form responsive adjustments */
.col-lg-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

@media (max-width: 991.98px) {
  .col-lg-4 {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* Adjust card and form padding for smaller text */
.card-body {
  padding: 1.25rem; /* Slightly reduced from default 1.5rem */
}

.form-control {
  padding: 0.5rem 0.75rem; /* Slightly reduced padding */
  font-size: 15px; /* Match our reduced font size */
}

.btn {
  padding: 0.5rem 1rem; /* Slightly reduced button padding */
  font-size: 15px; /* Match our reduced font size */
}

.btn-lg {
  padding: 0.75rem 1.5rem; /* Reduced from default large button padding */
  font-size: 1.125rem; /* 25% smaller than default 1.5rem */
}

.content {
  flex: 1;
}

/* Ensures the navbar-brand doesn't take more space than necessary */
.navbar-brand {
  flex-grow: 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Correct vertical alignment for desktop */
@media (min-width: 992px) {
  .navbar .navbar-toggler {
    display: none;
    /* Hide toggler button on desktop */
  }

  .navbar-collapse {
    flex-basis: 15%;
    /* Manage the space occupied by the navbar menu */
  }
}

/* Adjustments specifically for devices below 992px width */
@media (max-width: 991px) {
  .navbar {
    position: relative;
    /* Allow relative positioning within navbar */
    padding-top: 75px;
    /* Provide padding to accommodate the absolute navbar-brand */
  }

  .navbar-collapse {
    position: static;
    /* Default static position for proper toggle behavior */
    width: 100%;
    /* Ensure the collapse takes the full width */
    clear: both;
    /* Clear floats to ensure no overlap */
  }

  .navbar-toggler {
    position: absolute;
    left: 10px;
    /* Adjust position from left side */
    top: 15px;
    /* Adjust distance from the top */
  }
}

/* Reset any padding for mobile and smaller devices */
#navbarNavDropdown {
  padding-left: 0;
}

/* Media query for desktop screens - typically starts at 992px for Bootstrap */
@media (min-width: 992px) {
  #navbarNavDropdown {
    padding-left: 22rem;
    /* Apply 18rem padding on desktop */
    padding-top: 4rem;
  }

  .navbar-brand {
    padding-top: 3rem;
  }
}

.navbar .navbar-nav .nav-item {
  font-size: 0.675rem; /* Reduced by 25% from 0.9rem */
}
.dropdown-item {
  font-size: 0.675rem; /* Reduced by 25% from 0.9rem */
}

.btn-large-text {
  font-size: 1.125rem; /* Reduced by 25% from 1.5rem */
}

.breadcrumb {
  background-color: #fff;
}

.border-top-bottom {
  border-top: 1px solid #dee2e6;
  /* Bootstrap's default border color */
  border-bottom: 1px solid #dee2e6;
  border-left: none;
  border-right: none;
  padding-top: 45px;
  padding-bottom: 45px;
}

.footer .footer-top .border-top-bottom h2 {
  font-size: 0.9rem; /* Reduced by 25% from 1.2rem */
  margin-bottom: 25px;
}

.footer .footer-top .border-top-bottom p {
  font-size: 0.825rem; /* Reduced by 25% from 1.1rem */
}

/* set system wide font */
body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Link Formatting */
a {
  color: black;
  /* Sets the color of all links to black */
  text-decoration: none;
  /* Removes underline from links */
}

a:hover {
  text-decoration: underline;
  /* Adds underline to links on hover */
}

/* Increase specificity or use !important to ensure it applies */
.text-extra-small,
.list-inline-item .text-extra-small a {
  font-size: 0.75rem !important;
}

/* General rule for anchors to avoid overriding inside specific areas like your list */
a {
  font-size: inherit;
  /* This makes <a> tags inherit font size from parent elements unless specified otherwise */
}

/* Default state for .btn-primary */
.btn-primary {
  color: #212529;  /* Dark gray/black for contrast */
  background-color: rgb(252, 228, 119);  /* Bright yellow background */
  border-color: rgb(252, 228, 119);  /* Matching border color */
  transition: background-color 0.2s, border-color 0.2s; /* Smooth transition for hover effects */
}

/* Hover state for .btn-primary */
.btn-primary:hover {
  color: #212529;  /* Text color remains the same for readability */
  background-color: rgb(237, 214, 108);  /* Slightly darker yellow on hover */
  border-color: rgb(227, 204, 98);  /* Even darker border to add depth */
}

/* Disabled state for .btn-primary */
.btn-primary.disabled, .btn-primary:disabled {
  color: #ccc;  /* Lighter text color indicates non-interactivity */
  background-color: #e9ecef;  /* Light grey background */
  border-color: #dee2e6;  /* Matching lighter border */
  cursor: not-allowed;  /* Cursor indicates the button is not clickable */
  opacity: 0.65;  /* Slightly transparent to further indicate it's disabled */
  pointer-events: none;  /* Disables pointer events to avoid hover effects */
}

#product-component-1714157666587 {
  margin: auto; /* Ensures it centers itself within its parent if it has a defined width */
  width: fit-content; /* Ensures the div only takes as much width as needed */
}

.border-top-bottom {
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 0;
}

.text-extra-small {
    font-size: 0.75rem;
}

.footer-top h2 {
    font-size: 1.125rem; /* Reduced by 25% from 1.5rem */
    margin-bottom: 1rem;
}

.footer-top p {
    font-size: 0.75rem; /* Reduced by 25% from 1rem */
    color: #6c757d;
}

.footer-bottom a {
    color: #6c757d;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #000;
    text-decoration: underline;
}

.list-inline-item:not(:last-child) {
    margin-right: 1rem;
}