/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
}

/* Language Accordion - Style the buttons that are used to open and close the accordion panel with languages */
.accordion_language {
  background-color: #89CFF0;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 16px;
    border-top: 2px solid white;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion_language:hover {
  background-color: #0096FF;
  color: #000;
  font-weight: bold;
  font-size: 18px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion_language:active 
.active, .accordion_language:hover {
  background-color: #0096FF;
  color: #000;
  font-weight: bold;
  font-size: 18px;
}
/* General Accordion Styles */
button[class^="accordion_"] {
    display: flex;
    align-items: center; /* Vertically centers text */
    justify-content: space-between; /* Aligns text/icons properly */
    cursor: pointer;
    padding: 12px 16px;
    width: 100%;
    text-align: left;
    border: 1px solid rgb(229, 231, 235);
    border-radius: 8px;
    outline: none;
    background: white;
    color: #000; /* Dark gray */
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    height: 48px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	margin-bottom: 10px;
}

/* Hover & Active States */
button[class^="accordion_"]:hover, 
button[class^="accordion_"].active {
    color: #4f46e5;
    border: 1px solid #4f46e5;
    background-color: #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Special Active State for Clicked Accordion */
button[class^="accordion_"]:active {
    color: rgb(59, 130, 246);
}

/* Unique Styles for Construction Work & Household Work */
.accordion_Construct, .accordion_Household {
    background-color: #9FE2BF;
    color: #444;
    border: none;
    border-top: 2px solid white;
}

.accordion_Construct:hover, .accordion_Household:hover,
.accordion_Construct.active, .accordion_Household.active {
    background-color: #50C878;
    color: #000;
    font-weight: bold;
}

/* Household work: Ensure font consistency */
.accordion_Household:hover {
    font-size: 18px;
}