/* Common Styles */
.show-more {
    text-align: center;
    margin-bottom: -28px;
}

.show-more a, .show-more-details a {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 18px;
    background-color: #007BFF;
    color: white; /* Ensures text color consistency */
    text-decoration: none !important; /* Removes underline from links */
    font-weight: bold;
    border-radius: 20px;
    transition: all 0.3s ease;
    vertical-align: middle;
    pointer-events: auto; /* Ensures the links are clickable */
}

/* Arrow Styles */
.show-more a::after, .show-more-details a::after {
    content: '';
    display: inline-flex;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    margin-left: 5px;
    align-items: center;
    justify-content: center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23007BFF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    transition: transform 0.3s ease;
    vertical-align: middle;
}

/* Hover and Focus States */
.show-more a:hover, .show-more a:focus,
.show-more-details a:hover, .show-more-details a:focus {
    background-color: #0056b3;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* Arrow Rotation for Active State */
.show-more a.arrow-up::after, .show-more-details a.arrow-up::after {
    transform: rotate(180deg);
}



#loan-filter-form {
	margin-bottom: 30px;
	margin-top: 25px;
	background:white;
	border-radius:25px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 12px;


}

.loan-amount-slider {

}

input[type="range"] {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 15px;
  background: #b3b3b3;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  height: 25px;
  width: 25px;
  background-color: #00008B;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 25px;
  width: 25px;
  background-color: #00008B;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}

/* Hover, active & focus Thumb: Webkit */

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(255,85,0, .1)
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)
}

/* Hover, active & focus Thumb: Firfox */

input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px rgba(255,85,0, .1)
}
input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)
}
input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)   
}



.filter-container-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Allows containers to wrap to the next line when necessary */
    margin-top: 20px; /* Adjust as needed */
}

.filter-container {
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-right: 10px; /* Creates space between each filter container */
    margin-bottom: 10px; /* Creates space below each row of filters */
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition for hover effects */
}

.filter-container label {
    display: block; /* Makes the label fill the container */
    padding: 15px; /* Applies padding for clickable area */
    cursor: pointer; /* Changes cursor to pointer */
    user-select: none; /* Prevents text selection */
}

.filter-container:hover {
    background-color: #e6e6e6; /* Slightly darker shade on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Style adjustments for the checkbox */
.filter-container input[type="checkbox"] {
    margin-right: 10px;
}

.additional-filters {
    display: flex;
    flex-direction: row; /* Arrange children in a row */
    flex-wrap: wrap; /* Allow children to wrap to the next line if not enough space */
    justify-content: space-around; /* Distribute space around items */
    align-items: flex-start; /* Align items at the top of the container */
    background-color: #ffffff;
    margin-top: 7px; /* Adjust top margin for spacing from preceding elements */
    padding: 20px; /* Adjusted padding for better spacing inside the container */
}

.filter-group {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally within the group */
    justify-content: center; /* Center items vertically within the group */
    margin: 10px; /* Adds margin around each group for spacing */
    min-width: 150px; /* Set a minimum width for each group */
}

.additional-filters label {
    margin-bottom: 10px; /* Increase space between label and select for clarity */
    font-weight: bold; /* Make labels slightly bolder for better readability */
    text-align: center; /* Ensure labels are centered above selects */
}

.additional-filters select {
    width: 100%; /* Adjust width to fill the parent container */
    padding: 8px; /* Add padding inside select for a better click area and appearance */
    border: 1px solid #ccc; /* Slight border for definition */
    border-radius: 4px; /* Rounded corners for aesthetics */
    background-color: #f8f8f8; /* Slightly off-white background for contrast */
}




.show-more-toggle {
    margin-top: 5px; /* Adjust top margin as needed */
    text-align: center; /* Center the link */
}

.loan-amount-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px; /* Space above the slider */
	
}

.circle-up, .circle-down {
	width: 40px;
	height: 40px;
	font-size: 20px;
	font-weight: bold;
	color: #ffffff !important;
	background-color: #007bff; /* Thumb color for consistency */
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
	transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for button press and hover */
}

.circle-up:hover, .circle-down:hover {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* Slightly larger shadow on hover for a gentle pop effect */
	transform: translateY(-1px); /* Gently raise the button on hover */
}

.circle-up:active, .circle-down:active {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* Smaller shadow when button is pressed */
	transform: translateY(0.5px); /* Subtly press the button down */
}



#loan-sum-display {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-top: 12px;
}


.loans-container {
    display: flex;
    flex-direction: column;
	margin-top: 45px;
}

.loan-features-row-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0;
}

.loan-feature-centered {
    display: inline-flex;
    align-items: center;
    margin: 0 5px;
    font-size: 16px;
    color: #00008B;
	font-weight: bold;
}

.loan-detail {
    display: relative;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 30px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: box-shadow 0.3s ease; /* Add transition for smoother effect */
}

.loan-detail:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 16px; /* Adjust the values for lift effect */
}


.loan-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Adjust spacing between flex items */
}


.more-info-row {
    display: none;
	margin-top:20px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* Added gap between columns */
    padding: 0 10px; /* Add some padding to prevent edge touch */
    max-width: 1200px;
    margin: 0 auto; /* Center the container */
}





.loan-col2 {
    background-color: #f9fafc;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 25px;
    flex: 1;
    min-width: calc(100% - 20px); /* Adjusted for smaller screens */
    margin-bottom: 20px; /* Ensures space between rows */
    box-sizing: border-box; /* Include padding and border in the element's total width */

}

.loan-col2 span {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    display: block; /* Ensure margin-bottom works */
    margin-bottom: 15px;
}

.loan-col-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100px; /* Added min-height to prevent layout shift */
}

.loan-col2 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.loan-col2 li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px; /* Adjust this value as needed to control space between list items */
    background-image: url('data:image/svg+xml;utf8,<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="4" fill="%234CAF50"/></svg>');
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 8px 8px;
}

/* Remove margin from the last item to avoid extra space at the bottom */
.loan-col2 li:last-child {
    margin-bottom: 0;
}

@media (min-width: 1025px) {
    .loan-col2 {
        min-width: 280px; /* Original min-width for larger screens */
    }
}

@media (max-width: 1024px) {
    .flex-container {
        flex-direction: column;
        gap: 0; /* Remove gap for single column layout */
    }

    .loan-col2, .loan-col-container {
        flex-basis: auto;
        margin-bottom: 20px; /* Ensure space between items */
    }
}



.loan-col {
    display: flex;
    flex-direction: column;
    margin-right: 7px;
    justify-content: center;
    align-items: center;
    padding: 5px;
    flex: 0 0 17%; /* Adjusted for 4 columns layout */
    max-width: 17%; /* Ensures consistency in width */
    margin-bottom: 3px; /* Spacing between rows */
    font-size: 17px;
    font-weight: bold;
}

/* Ensure the last column has no right margin */
.loan-col:not(.loan-logo-promo):not(.loan-cta):last-child {
    margin-right: 0;
}

/* Adjustments for the content within loan columns excluding logo and CTA */
.loan-col-content {
    background-color: #f2f2f2;
    border-radius: 8px;
    padding: 10px; /* Adjusted padding for more space around the content */
    box-sizing: border-box;
    display: flex; /* Keeps flex display for alignment features */
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    margin: 5px 0; /* Adds vertical space for visual separation */
    width: 100%; /* Ensures uniform width */
    min-height: 90px; /* Adjust as necessary to ensure uniform height */
    text-align: center; /* Centers text, primarily for inline elements or text nodes */
}



.loan-col.loan-logo-promo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loan-col span {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: normal;
}

.loan-col.loan-cta {
    flex-grow: 1;
    flex: 0 0 25%; /* Ensures CTA button columns are flexible */
    max-width: 25%; /* Adjusted to prevent duplication */
}


.loan-logo {
    width: 200px; /* width of the logo */
    margin-bottom: 10px; /* Space below the logo */
    max-height: 75px; /* Maximum height of the logo */
    width: auto; /* Makes the width adjust to maintain aspect ratio */
    height: auto; /* Makes the height adjust to maintain aspect ratio */
    display: block; /* Ensures the logo is treated as a block-level element, which can help with centering and layout */
    object-fit: contain; /* Ensures the image is scaled to maintain its aspect ratio while fitting within the element's box */
    overflow: hidden; /* Hides parts of the logo that might overflow */
}

.loan-features ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 10px;
}

.loan-features ul li:before {
    content: '•';
    margin-right: 5px;
    color: #0073aa;
    font-size: 1.2em;
}

.loan-button {
    padding: 12px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 17px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    display: block;
    text-align: center;
    background-color: #4CAF50;
    color: white;
    text-decoration: none !important;
}

.loan-button:hover {
    background-color: #388E3C;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    color: white;
}

.loan-button::after {
    content: '\2713';
    display: inline-block;
    margin-left: 10px;
}

.loan-button-details {
    padding: 5px 25px; /* Adjusted to be slightly larger */
    font-size: 16px; /* Slightly larger font size for better readability */
    border-radius: 5px; /* Keeps the rounded corners consistent */
    font-weight: bold; /* Keeps the text bold */
    margin-top: 10px; /* Adds space above the button */
    margin-left: 10px; /* Space from the primary button if side by side */
    display: inline-block; /* Allows for side-by-side positioning if there's space */
    text-align: center;
    background-color: transparent; /* No fill color */
    color: #4CAF50; /* Text color to match the primary button's background */
    border: 2px solid #4CAF50; /* Green border to complement the primary button */
    text-decoration: none !important;
    box-shadow: none; /* No box shadow for a cleaner look */
    transition: color 0.3s ease, border-color 0.3s ease;
}

.loan-button-details:hover {
    color: #388E3C; /* Darker green text on hover for contrast */
    border-color: #388E3C; /* Darker border to match the hover text color */
}



.loan-example-row {
    display: block;
    padding-top: 25px;
    border-top: 1px solid #eee;
    margin-top: 10px;
}

.loan-example {
    font-style: italic;
    color: #666;
    font-size: 12px;
}

@media (max-width: 768px) {
    .loan-row {
        flex-direction: row; /* Ensure row direction for flex items */
        flex-wrap: wrap; /* Allow items to wrap */
    }

    .loan-col {
        flex: 0 0 48%; /* Adjust the flex-basis to 48% to fit two items per row, leaving some space for margins */
        max-width: 48%; /* Max-width matches flex-basis */
        margin-bottom: 2px; /* Space between rows */
    }

    .loan-col:not(.loan-logo-promo):not(.loan-cta) {
        margin-right: 2%; /* Add right margin to only the non-CTA columns to maintain spacing */
		font-size: 17px;
		padding:2px;
    }

    /* This targets every 2nd non-CTA column to remove the right margin, fixing uneven spacing issues */
    .loan-col:not(.loan-logo-promo):not(.loan-cta):nth-of-type(2n) {
        margin-right: 0;
    }

    .loan-col.loan-cta {
        flex: 0 0 100%; /* CTA button takes full width */
        max-width: 100%; /* Ensure CTA button is full width */
        order: 3; /* Position the CTA button at the end */
		padding: 6px;
    }

    .loan-features-row-centered, .loan-feature-centered {
        justify-content: center;
        text-align: center;
    }
	#loan-sum-display {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 12px;
}
}