/* CSS Desktop Version*/


.container {
	display: flex;
	flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
	justify-content: center;
	margin: 20px;
}
/* Style for 40% width column */
.column-40 {
  flex: 0 0 calc(40% - 0px); /* Column 1 takes 40% of the space */
  padding: 30px; 
  box-sizing: border-box; /* Consider padding and border within the defined width */
  overflow: hidden;
  text-align: center;
}

/* Style for 50% width column */
.column-50 {
  flex: 0 0 calc(50% - 0px); /* Column 2 takes 50% of the space */
  padding: 20px;
  
  box-sizing: border-box; /* Consider padding and border within the defined width */
}


/* Style for 60% width column */
.column-60 {
  flex: 0 0 calc(60% - 0px); /* Column 2 takes 60% of the space */
  padding: 20px;
  text-align: center;
  box-sizing: border-box; /* Consider padding and border within the defined width */
}

/* Style for 100% width column */
.column-100 {
  flex: 0 0 calc(100% - 0px); /* Column takes 100% of the space */
  padding: 20px;
  box-sizing: border-box; /* Consider padding and border within the defined width */
}

.filter-container {
    display: flex;
    justify-content: center;
    padding: 10px;
}

/* Form layout */
#filterForm {
    display: flex;
    flex-wrap: wrap;          /* ✅ allows wrapping */
    gap: 10px;
    background: #fff;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    align-items: flex-end;
    max-width: 900px;
    width: 100%;
}

/* Each field */
.form-group {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    flex: 1;
}

/* Inputs */
select,
input[type="text"] {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* Labels */
label {
    font-size: 13px;
    margin-bottom: 4px;
    color: #555;
}