html {
  font-size: 1em;
}


/* Body: Ensure the content stays horizontally centered */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Ubuntu Mono", monospace;
  background-color: #f5f5f5; /* Light gray background */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

p {
  margin-bottom: 2em; /* or try 2em for more space */
}

::selection {
  background-color: #ff603b; /* your brand orange */
  color: white; /* text color when selected */
}




/* Full-width header background */
header {
  width: 100%; /* Full width spans the viewport */
  background-color: white; /* Full-width background */
  padding: 30px 0px;
  position: relative;
  z-index: 1000;
}

/* Centered content inside the header */
header .container {
  width: 95%; /* Match main content width */
  max-width: 1200px; /* Restrict content width to 1200px */
  margin: 0 auto; /* Center horizontally */
  display: flex;
  justify-content: space-between;
  align-items: center; /* Align vertically */
}

#logo {
 width: 160px;
}

.container {
  flex: 1;
}


/* MENU */
.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: fixed;
  top: 30px;
  right: 20px;
  z-index: 2000; /* Place it above the overlay */
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #000;
  border-radius: 3px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}



/* Hamburger icon on dark overlay (menu active) */
.hamburger.active span {
  background-color: white; /* Change to white for visibility */
}

/* Optional: Hamburger icon transitions to 'X' when menu is active */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0; /* Hide the middle bar */
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* Menu overlay */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center; /* Align menu at the top */
  overflow-y: auto; /* Enable vertical scrolling for additional options */
  z-index: 1000;
}

.menu.active {
  transform: translateX(0);
}

.menu-content {
  width: 100%;
  max-width: 400px; /* Limit width of the menu */
  margin: 0 auto; /* Center horizontally */
  max-height: 80vh; /* Prevent overflow and keep the menu scrollable */
  overflow-y: auto; /* Enable scrolling within the menu */
  padding: 10px; /* Add padding for visual separation */
  box-sizing: border-box; /* Ensure padding is included in the width/height */
}


/* Menu list - consolidated */
.menu-section ul,
.menu ul {
  list-style: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

/* Menu list items */
.menu-section ul li {
  margin: 10px 0; /* Space between items */
  display: flex; /* Align icon and text */
  align-items: center; /* Center vertically */
  gap: 15px; /* Space between icon and text */
  transition: background-color 0.3s ease;
}

/* Links inside menu items */
.menu-section ul li a {
  text-decoration: none; /* Remove underline */
  color: #fff; /* White text for links */
  font-size: 1em; /* Normal text size */
  display: flex; /* Align icon and text */
  align-items: center; /* Center icon and text */
  gap: 10px; /* Space between icon and text */
  background-color: #121212; /* Dark gray background for items */
  padding: 15px;
  border-radius: 10px; /* Rounded corners */
  width: 100%;
  box-sizing: border-box;
}

.menu-section ul li a:hover {
  background-color: #1e1e1e; /* Slightly lighter gray on hover */
}

/* Icons inside menu items */
.menu-section ul li a img {
  width: 24px; /* Icon size */
  height: 24px;
  border-radius: 5px; /* Optional: add rounded corners for icons */
  object-fit: contain; /* Ensure icons fit */
}

/* Custom dropdown container */
.custom-dropdown {
  position: relative;
  background-color: #121212; /* Same as other menu items */
  border-radius: 10px;
  padding: 15px; /* Match padding of the menu items */
  color: white;
  cursor: pointer;
  width: 100%; /* Full width like menu items */
  max-width: 400px; /* Match list item size */
  display: flex;
  align-items: center; /* Align items vertically */
  gap: 10px; /* Space between flag and text */
  box-sizing: border-box; /* Include padding in the width */
}

/* Dropdown label styling with flag */
.dropdown-label {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px; /* Space between flag and text */
  font-size: 1em;
  color: white;
}

.dropdown-label img {
  width: 20px; /* Set icon size */
  height: 15px; /* Match size with other icons */
  object-fit: contain; /* Ensure the image fits within the bounds */
  border-radius: 5px; /* Optional: match other icons' rounded corners */
}

/* Flag styling - consolidated */
.flag-icon {
  width: 20px;
  height: 15px;
  border-radius: 3px; /* Consistent rounded corners for flags */
}

/* Flag inside the dropdown label */
.dropdown-label .flag-icon {
  display: inline-block;
}

/* Dropdown list styling */
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #121212;
  border-radius: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  z-index: 1000;
}

.custom-dropdown.active .dropdown-list {
  display: block; /* Show the list */
}

/* Individual dropdown list items */
.dropdown-list li {
  padding: 15px; /* Match padding of menu items */
  display: flex;
  align-items: center; /* Align flag and text */
  gap: 10px; /* Space between flag and text */
  cursor: pointer;
}

.dropdown-list li:hover {
  background-color: #1e1e1e; /* Hover effect */
}


.menu h3 {
	color: white;
	font-size: 1.6em;
}

/* Search bar container */
.search-bar {
  display: flex;
  flex-direction: column;
  width: 100%; /* Match width of menu content */
  gap: 10px; /* Space between input and button */
  margin-bottom: 5px; /* Space below the search bar */
}

/* Search input styling */
.search-bar input {
  width: 100%;
  padding: 10px 15px;
  border: none;
  border-radius: 8px; /* Rounded corners */
  font-size: 1em; /* Text size */
  background-color: #121212; /* Match item background */
  color: white; /* White text */
  outline: none; /* Remove default outline */
  box-sizing: border-box; /* Ensure padding is included in width */
}

/* Placeholder color */
.search-bar input::placeholder {
  color: #fff; /* Light gray for placeholder text */
}

.search-wrapper {
  position: relative;
  width: 100%;
}

.search-suggestions {
  position: absolute;
  top: 100%; /* show directly under the input */
  left: 0;
  background: #121212;
  color: white;
  width: 100%;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  display: none;
  overflow-x: hidden; /* prevent scroll */
  max-height: 200px;
  overflow-y: auto;
}

.search-suggestions div {
  padding: 10px;
  cursor: pointer;
}

.search-suggestions div:hover {
  background: #1e1e1e;
}


.menu li {
  margin: 10px 0;
}

.menu a {
  color: white;
  text-decoration: none;
  font-size: 1em;
}

.no-scroll {
  overflow: hidden; /* Disable scrolling */
  touch-action: none; /* Disable touch scrolling */
  -webkit-overflow-scrolling: none; /* Disable momentum scrolling on iOS */
}

.hero-headline {
  text-align: center;
  padding: 60px 24px 40px; /* Tighter padding for mobile */
  max-width: 900px;
  margin: 0 auto;
}

.hero-headline h1 {
  font-size: 2.5em; /* Smaller base size for mobile */
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #000;
  margin: 0 0 12px 0; /* Tighter margin for mobile */
  line-height: 1.15; /* Slightly tighter line height */
}

.hero-subheadline {
  font-size: 1.1em; /* Slightly smaller for mobile */
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #666;
  margin: 0;
  line-height: 1.4; /* Slightly tighter line height */
  padding: 0 12px; /* Add some padding to control line length */
}

/* Main Search Section */
.main-search {
  max-width: 900px;
  margin: 0 auto 100px; /* Further reduce bottom margin */
  padding: 0 24px;
}

.search-wrapper-main {
  position: relative;
  width: 100%;
  background: white;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


.search-wrapper-main input {
  width: 100%;
  padding: 20px 56px 20px 24px;
  font-size: 1.1em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: transparent;
  font-family: "Inter", sans-serif;
  color: #1a1a1a;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.search-wrapper-main input:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.1);
}


#main-search-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

#main-search-btn:hover {
  color: #ff603b;
}

#main-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

#main-search-suggestions div {
  padding: 12px 24px;
  font-family: "Inter", sans-serif;
  color: #1a1a1a;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#main-search-suggestions div:hover {
  background: #f5f5f5;
}


@media (max-width: 768px) {
  .main-search {
    margin-bottom: 40px; /* Even smaller on mobile */
    padding: 0 16px;
  }

  .search-wrapper-main input {
    padding: 16px 48px 16px 20px;
    font-size: 1em;
  }
}


@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Donate Widget */
#donate-widget-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#donate-widget-overlay.show {
  display: flex;
}

#donate-widget {
  position: relative;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 350px;
}

.close-widget {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 1.5rem;
}

.lightning-address {
  font-weight: bold;
  margin: 10px 0;
  word-break: break-all;
}

/* Mobile donate button styling */
.mobile-donate-btn {
  display: inline-block;
  background: #ff603b;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.mobile-donate-btn:hover {
  background: #e55532;
}

/* Main container: Horizontally center content */
main {
  width: 95%;
  max-width: 1200px; /* Restrict max width on larger screens */
  margin: 0 auto; /* Horizontally center */
  padding: 10px;
}

/* Categories */
.category {
  margin-bottom: 20px;
}

/* Headings (serif for elegance) */
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", sans-serif;
  font-weight: 600; /* Bold for emphasis */
  color: #000; /* Strong black for emphasis */
}

h2 {
  font-size: 1.6em;
  margin-bottom: 10px;
  text-align: left; /* Center category titles */
}

.space h2 {
  margin-top: 50px; /* Space above main headings */
}


/* Default link styling for h2 links */
.category h2 a {
  font-family: "Inter", sans-serif;
  font-weight: 600; /* Bold for emphasis */
  color: #000; /* Default text color */
  transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Hover effect for better interactivity */
.category h2 a:hover {
  color: #ff603b; /* Highlight color on hover */
}

/* Optional: Focus effect for accessibility */
.category h2 a:focus {
  outline: 2px solid #f39c12; /* Highlight link when focused */
  outline-offset: 2px;
}

/* Default link styling for h2 links */
.category-header h2 a {
  font-family: "Inter", sans-serif;
  font-weight: 600; /* Bold for emphasis */
  color: #000; /* Default text color */
}

/* Category headers */
.category-header h2 {
  font-size: 1.4em; /* Smaller on mobile */
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .category-header h2 {
    font-size: 1.6em; /* Larger on desktop */
  }
}


/* Footer-specific heading styles */
footer {
  background-color: #000; /* Black background */
  color: white; /* White text */
  padding: 40px 0; /* Space around the footer */
  margin-top: 60px; /* Space above the footer */
}

footer h3 {
  color: white; /* Override to white for dark footer background */
}

 .footer-column {
	  text-align: left; /* Align text to the left */
    width: 100%; /* Full width on smaller screens */
    margin-bottom: 20px; /* Add spacing between columns */
  }

.footer-column h3 {
  font-family: "Inter", sans-serif;
  font-size: 1em; 
  margin-bottom: 10px; /* Space below the heading */
}

.footer-column ul {
  list-style: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

.footer-column ul li a {
  text-decoration: none; /* Remove underline */
  font-size: 0.8em; /* Slightly smaller */
  color: #f5f5f5; /* Light gray links */
  transition: color 0.3s ease; /* Smooth hover effect */
}

.footer-column ul li a:hover {
  color: white; /* White on hover */
}

.footer-container {
  width: 95%; /* Match the width of the main content */
  max-width: 1200px; /* Restrict max width to align with .container */
  margin: 0 auto; /* Center horizontally */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ✅ Default: Two columns on mobile */
  gap: 10px; /* Space between columns */
}

/* Paragraphs and other text */
p, li, a {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400; /* Regular weight */
  line-height: 1.5; /* Improve readability */
}




/* Scrollable container */
.scrollable-container {
  display: flex;
  gap: 20px; /* Space between cards */
  overflow-x: auto; /* Enable horizontal scrolling */
  padding: 10px 0; /* Add consistent padding */
  scroll-behavior: smooth; /* Smooth scrolling */
   -webkit-overflow-scrolling: touch; /* Enables momentum scroll on iOS */
   overflow-y: hidden;
  overscroll-behavior-x: contain; /* Prevent scroll chaining */
  margin: 0; /* Remove margin for alignment with header */
}

.scrollable-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}

.scrollable-container:active {
  cursor: grabbing; /* Show grabbing state when active */
}

/* Grid container replacing scrollable-container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Defaults to 2 columns on small screens */
  gap: 20px; /* Space between cards */
  padding: 10px 0;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}


/* Default card styling */
.card {
  flex: 0 0 auto; /* Prevent cards from shrinking */
  aspect-ratio: 1 / 1; /* Maintain a square shape */
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  box-sizing: border-box; /* Include padding in the card size */
  transition: transform 0.2s ease;
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.card span {
  display: block;
  font-size: 0.8em;
}

.select-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid lightgrey;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border 0.3s ease;
}

.card .select-circle {
  position: absolute;
  top: 10px;
  right: 10px;
}

.card.selected .select-circle,
.select-circle.selected {
  background: #ff603b;
  border-color: #ff603b;
}

.select-circle::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
}

.card .category-divider {
  width: 100%;
  height: 2px;
  background-color: #f5f5f5; /* Light grey line */
  margin: 8px 0; /* Adds spacing before and after the divider */
}


.svg-icon {
  width: 110px; /* Adjust size */
  height: auto; /* Maintain aspect ratio */
  margin-top: 5px;
  margin-bottom: 15px;
}

.checkmark-icon {
  vertical-align: middle; /* Align with text baseline */
  margin-right: 5px; /* Space between the checkmark and text */
  width: 14px; /* Adjust size as needed */
  height: 14px; /* Adjust size as needed */
}

.cross {
  vertical-align: middle;
  margin-right: 5px;
  fill: red; /* Negative indication */
}

/* Services per company homepage */
.feature-item {
    display: block; /* Ensures icon and text align properly */
    align-items: center; /* Align icon and text vertically */
    gap: 5px; /* Reduce space between icon and text */
    font-size: 1em;
    color: #000;
    margin-top: 3px; /* Reduce space between feature lines */
}

.feature-item:first-child {
    margin-top: 0px; /* No margin for the first feature */
}

.feature-item.negative-group-start {
  margin-top: 24px;
}


/* Compare button */
.category-header {
  display: flex;
  justify-content: space-between; /* Ensures space between h2 and button */
  align-items: center; /* Aligns vertically */
  margin-bottom: 15px; /* Keeps spacing consistent */
}

/* Adjust Compare Button to match h2 alignment */
.compare-btn {
  padding: 8px 16px;
  font-size: 1em;
  border: 1px solid #ddd; /* Light border to show disabled state */
  border-radius: 20px;
  color: #b0b0b0; /* Lighter grey text */
  cursor: not-allowed;
  text-align: center;
  height: 40px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease; /* Smooth transition for all changes */
}

.compare-btn.active {
  color: white;
  background: #ff603b;
  border-color: #ff603b;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(255, 96, 59, 0.1); /* Subtle shadow for depth */
}

.compare-btn.active:hover {
  background: #e55532; /* Slightly darker on hover */
  border-color: #e55532;
}


#comparison-container {
  width: 100%;
  max-width: 1200px;
  line-height: 1.3;
  margin: 0 auto;
  padding: 10px 0;
}


#comparison-container .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 220px; /* Ensure equal width */
  max-width: 220px;
}

/* Remove hover enlarging */
#comparison-container .card:hover {
  transform: none;
}

/* Ensure logos are centered and properly spaced */
#comparison-container .card .svg-icon {
  width: 100px;
  height: auto;
  margin-bottom: 15px;
}

.logo-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
}

.service-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cta-button {
  background-color: #f5f5f5;
  font-family: "Inter", sans-serif;
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cta-button:hover {
  background-color: #e5e5e5;
}


.service-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Ensure full left alignment */
  text-align: left;
  gap: 6px;
  min-height: 40px;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 2em;
  width: 100%;
}

.service-info strong {
  font-weight: bold;
}


/* Fix layout when comparing 3 services */
#comparison-container.three-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Ensure the third card follows the same layout */
#comparison-container.three-cards .card {
  flex: 0 1 220px;
  max-width: 220px;
}

#comparison-container.three-cards .logo-row {
  grid-template-columns: repeat(3, 1fr);
}


#comparison-container .card .website-name {
  font-size: 1em;
  margin-bottom: 8px;
}

#comparison-container .card .website-name a {
  color: black;
  font-weight: bold;
}


.availability-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.country-flag {
    width: 24px;  /* Adjust flag size */
    height: auto;
    margin-bottom: 3px;  /* Space between flag and text */
}

#country-search {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: none;
  outline: none;
  background-color: #222;
  color: white;
  margin-top: 5px;
}



.availability-icon {
    width: 16px;  /* Increase size */
    height: auto;  /* Maintain aspect ratio */
    vertical-align: middle;
    margin-right: 5px;
	margin-bottom: 3px;  /* Space between icon and text */
}

.platform-icon {
    width: 100px;  /* Larger size for platform icons */
    height: auto;
    vertical-align: middle;
}


.fee-structure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}


.fee-structure strong {
  display: block; /* Ensure "Fees" is on its own line */
  font-weight: bold;
  margin-bottom: 5px;
}

.fee-tier + .fee-tier {
  margin-top: 10px;
}

.fee-subtext, .fee-range, .fee-note {
  display: block; /* Forces it onto a new line */
}

.fee-percentage, .fee-value {
  font-weight: bold;
  color: #000;
}

.fee-intro {
  margin-bottom: 20px;
}

.platform-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.platform-icon-row {
  display: flex;
  align-items: center;
  gap: 5px;
}



/* Rating */
/* Add overlay when modal is active */
.rating-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 320px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* When the modal is shown */
.rating-modal.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.rating-modal .star-rating span {
  font-size: 2rem;
  color: #ccc;
  transition: color 0.2s;
}

.rating-modal .star-rating span:hover,
.rating-modal .star-rating span:hover ~ span {
  color: #ff603b; /* brand accent */
}


.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}



.rating-count {
  font-size: 0.8em;
  color: #666;
  margin-left: 2px;
}



.review-link {
  display: block;
  margin-top: 4px; /* Small margin for spacing */
  font-size: 0.9em;
  color: #000000; /* Black link color */
  text-decoration: underline;
}

.review-link:hover {
  color: #333333; /* Darker shade for hover */
}

/* Media query for larger screens if needed */
@media (min-width: 768px) {
  .review-link {
    font-size: 1em;
  }
}

/* END Rating */



.rating-line {
  margin-bottom: 4px;
}

.spacer {
  margin-bottom: 8px; /* extra space between iOS and Android */
}


.comparison-table {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-bottom: 40px;
  margin-top: 50px;
}

#comparison-table-wrapper {
  width: 100%;
}


.feature-label { /* titels op compare.html en service.html*/
  font-family: "Inter", sans-serif;
  font-weight: 600; /* Bold for emphasis */
  font-size: 1.4em;
  margin-bottom: 10px;
}

.feature-label.sublabel {
  font-size: 0.8em; /* Smaller than main labels */
  color: #666; /* Gray color */
  font-weight: 600; /* Less bold to differentiate */
  margin-top: -30px; /* Decreased top margin to bring it closer to the row above */
}

.label-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.feature-values, .logo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.feature-value {
  font-size: 1em;
  font-family: "Ubuntu Mono", monospace;
  font-weight: 300;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  text-align: left;
}

.feature-value p:first-of-type {
  margin-top: 0;
}

.feature-row.profile .feature-value {
  text-align: center;
}


/* User Experience Rating Styles */
.ux-rating {
  font-family: "Inter", sans-serif;
  font-size: 3em;
  font-weight: 700;
  line-height: 1;
}

.ux-outof {
  font-size: 0.8em;
  vertical-align: super;
  margin-left: 0.2em;
}

.feature-row.user_experience .feature-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  padding: 20px;
}


.logo-row-sticky {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f5f5f5; /* Match page bg */
  padding: 10px 0;
  transition: all 0.3s ease;
}

/* Collapsible Description Styles */
.collapsible-description {
  position: relative;
}

.description-preview {
  margin-bottom: 0;
}

/* Desktop-first styles for collapsible descriptions */
.mobile-preview {
  display: none;
}

.desktop-preview {
  display: block;
}

.description-full {
  margin-bottom: 1em;
}

.expand-btn {
  background: none;
  border: none;
  color: #ff603b;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 0.8em;
  padding: 0.5em 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  transition: color 0.2s ease, background-color 0.2s ease;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
}

.expand-btn:hover {
  color: #e55a35;
}

.expand-btn:focus {
  outline: none;
  background-color: rgba(255, 96, 59, 0.1);
  color: #e55a35;
}

.expand-btn:focus:not(:focus-visible) {
  background-color: transparent;
}

.expand-btn:focus-visible {
  background-color: rgba(255, 96, 59, 0.1);
  color: #e55a35;
}

.expand-icon {
  font-size: 1em;
  transition: transform 0.2s ease;
}

.expand-btn[aria-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}


/* Ensure proper spacing in feature rows */
.feature-value .collapsible-description {
  width: 100%;
}

.feature-value .collapsible-description p {
  margin-top: 0;
  margin-bottom: 1em;
}

.feature-value .collapsible-description p:last-child {
  margin-bottom: 0;
}


/* Larger sizes for desktop */
@media (min-width: 768px) {
  .hero-headline {
    padding: 100px 20px 80px;
  }

  .hero-headline h1 {
    font-size: 3.5em;
    margin: 0 0 20px 0;
  }

  .hero-subheadline {
    font-size: 1.2em;
    padding: 0;
  }

}


/* Responsive layout for smaller screens */
@media (max-width: 768px) {

	  header {
    padding: 10px 0; /* Reduce vertical padding */
  }
	
	.menu {
     align-items: flex-start; /* Align closer to the top for smaller screens */
     padding-top: 40px; /* Add some space above the content */
  }
	
	.menu-content {
     max-width: 90%; /* Reduce width on smaller screens */
	 padding: 15px; /* Add more padding for smaller screens */
  }

  .scrollable-container {
    gap: 10px; /* Reduce gap for smaller screens */
	display: flex !important;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

.grid-container {
  gap: 10px; /* Space between cards */
}
	
	
  .card {
    flex: 0 0 calc((100% - 10px) / 2); /* Adjust card width for mobile */
    width: 100%; /* Full width for smaller screens */
    max-width: 100%; /* Ensure it doesn't exceed container width */
    display: flex; /* Flex layout to control alignment */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Remove unnecessary space above/below */
  }

  .svg-icon {
    width: 90px; /* Adjust size */
    height: auto; /* Maintain aspect ratio */
  }
	 #comparison-container {
    grid-template-columns: repeat(2, 1fr);
	 gap: 10px;
  }
  
  #comparison-container .card {
    flex: 0 0 calc((100% - 20px) / 2); /* 2 cards per row on mobile */
  }

  .expand-btn {
    font-size: 1em;
    padding: 0.75em 0;
  }
  
  .description-preview p {
    margin-bottom: 0.5em;
  }
  
  .description-full p {
    margin-bottom: 1em;
  }

  /* Mobile preview visibility */
  .mobile-preview {
    display: block;
  }
  
  .desktop-preview {
    display: none;
  }



}


/* Force grid layout: 3 columns on desktop */
@media (min-width: 1024px) {
	
	.scrollable-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Limit to 5 cards per row */
    gap: 20px;
    overflow-x: auto; /* Disable horizontal scrolling */
    margin: 0; /* Align with header */
  }
	
	  .grid-container {
    grid-template-columns: repeat(5, 1fr); /* 5 columns on wide screens */
  }
	
	 #comparison-container {
    flex-wrap: wrap; /* Cards wrap on smaller screens */
	 grid-template-columns: repeat(3, 1fr);
  }
	
	.footer-container {
  grid-template-columns: repeat(5, 1fr);
}
	
.card:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}


  #donate-widget {
    padding: 30px;
  }
  
  #donate-widget img {
    max-width: 250px;
    height: auto;
    margin: 20px 0;
  }
	
}

/* Thank you notification */
.thank-you-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9998;
}

.thank-you-notification.show {
  opacity: 1;
  transform: translateY(0);
}

/* Action Grid Styles */
.action-grid {
  max-width: 900px;
  margin: 0 auto 80px;
  padding: 0 24px;
}

.action-grid h2 {
  font-size: 2.4em;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  color: #1a1a1a;
  line-height: 1.2;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  perspective: 1000px;
}

.action-button {
  background: white;
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 28px 32px;
  font-size: 1.15em;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: "Inter", sans-serif;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 
              0 4px 6px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}

.action-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-button:hover {
  border-color: #ff603b;
  background: rgba(255, 96, 59, 0.02);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 96, 59, 0.1),
              0 2px 4px rgba(0, 0, 0, 0.05);
}

.action-button:hover::after {
  transform: translateX(100%);
}

@media (max-width: 768px) {
  .action-grid h2 {
    font-size: 2em;
    margin-bottom: 32px;
  }
  
  .action-button {
    padding: 24px 28px;
    font-size: 1.1em;
  }
}

/* Desktop layout */
@media (min-width: 768px) {
  .action-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .action-grid {
    margin: 0 auto 80px;
  }
}

/* Feedback Bubble Styles */
.feedback-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #ff603b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.feedback-bubble:hover {
  transform: scale(1.1);
}

.feedback-bubble img {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .feedback-bubble {
    bottom: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
  }

  .feedback-bubble img {
    width: 20px;
    height: 20px;
  }

  #main-selected-services {
    min-height: 30px; /* Reduce reserved space on mobile */
    margin-top: 0;
    margin-bottom: 0;
  }

  #main-compare-btn {
    margin-top: 0; /* Eliminate space above button for closer positioning */
  }
}

.selected-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.selected-chip {
  background: #eee; /* Light for main */
  color: #000; /* Dark text for main */
  padding: 4px 8px; /* Consistent padding */
  border-radius: 16px;
  display: flex;
  align-items: center;
  font-size: 0.9em;
}

.selected-chip .remove {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
  color: #000; /* Dark for main */
}

.menu .selected-services {
  margin-top: 5px;
  margin-bottom: 5px;
  min-height: 40px; /* Reserve space for selected chips to prevent menu shift */
}

.menu .selected-chip {
  background: #333; /* Restore dark for menu */
  color: white; /* White text for menu */
  padding: 4px 8px; /* Consistent padding */
}

.menu .selected-chip .remove {
  color: white; /* White remove for menu */
}

.menu .compare-btn {
  margin-top: 10px;
  width: 100%;
}

#main-selected-services {
  margin-top: 5px;
  margin-bottom: 0;
  min-height: 10px; /* Minimal height to prevent layout jumps */
  align-content: flex-start;
}

#main-compare-btn {
  margin: 5px auto 0;
  margin-bottom: 20px; /* Add a bit of space below the button */
  width: fit-content;
  background: none;
  display: block;
  color: #b0b0b0; /* Light gray text for inactive state */
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 1em;
  cursor: not-allowed;
  text-align: center;
  height: 40px;
  align-items: center;
  transition: all 0.2s ease;
}

#main-compare-btn.active {
  color: white;
  background: #ff603b;
  border-color: #ff603b;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(255, 96, 59, 0.1);
}

#main-compare-btn.active:hover {
  background: #e55532;
  border-color: #e55532;
}

.suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.suggestion-name {
  flex: 1;
}

.suggestion-item .select-circle {
  cursor: pointer;
  margin-left: 10px;
  flex-shrink: 0;
}

.suggestion-item .select-circle.selected circle {
  fill: #ff603b;
  stroke: #ff603b;
  stroke-width: 0;
}

.menu #menu-compare-btn {
  display: block;
  margin: 5px auto 0;
  width: 100%;
}

/* Newsletter Signup */
.newsletter-signup {
  padding: 40px 20px 80px;
  text-align: center;
  color: white;
}

.newsletter-signup h3 {
  font-size: 2em;
  max-width: 600px;
  margin: 0 auto 20px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

.newsletter-signup form {
  display: flex;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  gap: 20px;
}

.newsletter-signup input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #666;
  color: white;
  font-size: 1em;
  padding: 10px 0;
  flex: 1;
  outline: none;
}

.newsletter-signup input::placeholder {
  color: #aaa;
}

.newsletter-signup button {
  background: transparent;
  color: #ff603b;
  border: none;
  font-size: 1em;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .newsletter-signup form {
    flex-direction: column;
    align-items: center;
  }

  .newsletter-signup button {
    margin-top: 10px;
  }
}

/* Autofill overrides */
.newsletter-signup input:-webkit-autofill,
.newsletter-signup input:-webkit-autofill:hover,
.newsletter-signup input:-webkit-autofill:focus,
.newsletter-signup input:-webkit-autofill:active {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
  background: transparent !important;
  border-bottom: 1px solid #666;
  caret-color: white;
}

@media (min-width: 1240px) { /* Assuming some padding */
  .hamburger {
    right: calc((100% - 1200px) / 2);
  }
}

@media (max-width: 1239px) {
  .hamburger {
    right: calc(5% / 2);
  }
}

/* Inline Questionnaire - Mobile-first */
.questionnaire {
  display: block;
  width: 100%;
  margin: 20px 0;
}

.question {
  background: white;
  border-radius: 8px;
  padding: 16px;
  padding-left: 32px;
  padding-bottom: 55px; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  position: relative; /* For absolute positioning of back */
}

.back {
  position: absolute;
  left: 16px;
  top: 16px;
  font-size: 1.5em;
  cursor: pointer;
  color: #666;
}

.question label {
  display: block;
  margin-bottom: 32px;
}

.question .option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 16px 0;
}

.question .option:last-child {
  margin-bottom: 85px; /* Mobile-first: increased to match new padding */
}

.question .option label {
  display: flex;
  align-items: center;
  line-height: 1;
  margin: 0;
}

/* Questionnaire Navigation Arrows */
.left-arrow,
.right-arrow {
  font-size: 24px;
  position: absolute;
  bottom: 5px;
  cursor: pointer;
  color: lightgrey;
}

.left-arrow {
  left: 10px;
}

.right-arrow {
  right: 10px;
}

/* See More Services Link */
.see-more-services {
  text-align: center;
  margin: 40px 0 0px 0;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.see-more-services.show {
  opacity: 1;
  transform: translateY(0);
}

.see-more-services a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000;
  text-decoration: none;
  font-size: 0.8em;
  font-family: "Inter", sans-serif;
  transition: color 0.2s ease;
}

.see-more-services a:hover {
  color: #ff603b;
}

.see-more-services .arrow-down {
  font-size: 1.2em;
  transition: transform 0.2s ease;
}

.see-more-services a:hover .arrow-down {
  transform: translateY(2px);
}

/* Questionnaire Reset Link */
.questionnaire-reset {
  text-align: center;
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 16px;
  width: 60px;
  margin-left: auto;
  margin-right: auto;
  transition: background-color 0.2s ease;
  cursor: pointer;
  color: #000;
  font-family: "Inter", sans-serif;
}

.questionnaire-reset a {
  text-decoration: none;
  color: #000;
  font-size: 0.8em;
  font-family: "Inter", sans-serif;
  transition: color 0.2s ease;
  cursor: pointer;
}

.questionnaire-reset:hover {
  background-color: white;
}

/* Questionnaire Explanatory Text */
.questionnaire-explanation {
  text-align: center;
  margin-top: 20px;
  color: #adadad;
  font-size: 0.8em;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  max-width: 100%;
}