.service-options, .options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.form-card, .option-card {
    display: block;
    width: 250px;
    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.form-card:hover, .option-card:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
}

/* Hide default input elements */
.form-card-wrapper input {
    display: none;
}

/* Add custom styles for selected inputs */
.form-card-wrapper input:checked + .form-card {
    border: 2px solid #007BFF;
    background-color: #f8f9fa;
}

/* Service/Option Content Styling */
.service-content, .option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-content img, .option-content img {
    max-width: 100px;
    margin-bottom: 15px;
}

.service-content h4, .option-content h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.service-content .description, .option-content .description {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.service-content .price, .option-content .price {
    font-size: 16px;
    font-weight: bold;
    color: #007BFF;
}

.multi-step-form {
    margin: 0 auto;
    padding: 6em 0;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.total-cost {
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
}

.form-card, .option-card {
    display: block;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 22px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: left;
}

.form-card input, .option-card input {
    display: none;
}

.form-card-description {
    font-size: .6rem;
}
.form-card-description ul {
    margin-bottom: 0;
    list-style: none;
    padding-left: 0;
}
.form-card-description ul li {
    margin-bottom: .25rem;
    position: relative;
    padding-left: 26px;
}
.form-card-description ul li:before {
    content: "\f26e";
    font-family: "BootstrapIcons";
    font-weight: normal;
    position: absolute;
    left: 0;
    background-color: #007bff;
    color: white;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
}
#configuration-form .accordion-button {
    align-items: baseline;
    flex-direction: column;
    padding-left: 0;
}
#configuration-form .accordion-button:not(.collapsed) {
    color: inherit;
    background-color: inherit;
    box-shadow: none;
}
#configuration-form .accordion-button:focus {
    border: 0;
    box-shadow: none;
}
#configuration-form .accordion-button .film-name-and-price {
    display: block;
    margin-bottom: 4px;
}
#configuration-form .accordion-item {
    border: 0;
}
.timelapse-summary {
    margin-top: 1em;
}
.timelapse-options {
    display: none;
    border: 1px solid #efefef;
    border-radius: 22px;
    padding: 1em;
    position: relative;
    margin-top: 4em;
}
.timelapse-options .row {
    margin: 2em 0 0 0;
}
.timelapse-options h3 {
    font-size: 1.25rem;
    text-wrap: balance;
    margin-bottom: 1rem;
}
.timelapse-options.shown {
    display: block;
}
.summary-block {
    background-color: #efefef;
    border-radius: 22px;
    padding: 2em;
    position: sticky;
    top: 150px;
    transition: all .3s ease-in-out;
    z-index: 1;
}
#total-cost-container {
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}
#selection-summary {
    display: table;
    width: 100%;
}
.timelapse-details-config {
    display: table;
    margin-top: .5em;
    width: 100%;
}
.sum-item {
    display: table-row;
}
.sum-item.camera-rental-value {
    font-weight: 600;
}
.sum-item.monthly-camera-value {
    font-style: italic;
    font-size: .8rem;
}
.sum-item-name {
    display: table-cell;
}
.sum-item-cost {
    display: table-cell;
    text-align: end;
}
.timelapse-main-config {
    font-style: italic;
    font-weight: 600;
}
.sum-location-mat, .sum-install-nacelle, .sum-desinstall-nacelle, .sum-montage-timelapse {
    display: none;
}
.chosen-option {
    display: table-row;
}
.total-cost-wrapper {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}
#communiquer-header {
    display: none;
    margin-top: 1em;
}
.page-template-tests .modal-backdrop.show, .page-template-configurateur-page .modal-backdrop.show {
    display: none;
}
.modal-configurateur .modal-dialog {
    margin-top: 200px;
}
.modal-configurateur .modal-content {
    background-color: orange;
    border: 0;
    border-radius: 22px;
}
.modal-configurateur .modal-header {
    border-bottom: 0;
}
.modal-configurateur .modal-footer {
    border-top: 0;
}
.form-breadcrumb {
    display: none;
}
.form-intro .btn-group .btn {
    border-radius: 22px;
}
.form-intro .btn-group button {
    border: 0;
    padding: 20px;
    text-align: left;
}
.form-intro .btn-group button img {
    display: block;
    margin-bottom: 1em;
    max-height: 100px;
}
.form-intro .btn-group button .btn-entry-title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}
.form-intro .btn-group button .btn-entry-desc {
    font-size: .8rem;
    font-weight: 400;
    margin-bottom: .8rem;
}
.form-breadcrumb .breadcrumb {
    background-color: #efefef;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 500;
    padding: 8px 16px;
}
.breadcrumb-item+.breadcrumb-item.go-to-last-step::before {
    content: var(--bs-breadcrumb-divider, ">");
}
.form-breadcrumb .breadcrumb .breadcrumb-item {
    cursor: pointer;
}
.form-breadcrumb h3 {
    margin-bottom: 1rem;
}
.multi-step-form .type-film-name {
    font-size: 1.5rem;
    font-weight: 600;
}
.multi-step-form .type-film-starter-price {
    border-left: 1px solid orange;
    color: orange;
    font-weight: 300;
    margin-left: 1rem;
    padding-left: 1rem;
}
.multi-step-form .type-film-starter-price span {
    font-weight: 600;
}
.multi-step-form .type-film-desc {
    font-style: italic;
    font-weight: 300;
}
.multi-step-form .type-film-desc .sub-desc {
    font-size: .8rem;
}
#configuration-form .accordion-item {
    border-bottom: 1px solid var(--clc-orange-4);
}
#configuration-form .accordion-item .accordion-body {
    padding: 1rem 0rem;
}
#configuration-form .accordion-body .form-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
#configuration-form .accordion-body .form-card h4 {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    min-height: 40px;
}
.form-card .price {
    font-weight: 600;
    margin-top: auto;
    margin-bottom: 0;
}
.form-card-wrapper {
    padding-right: calc(var(--bs-gutter-x)* .25);
    padding-left: calc(var(--bs-gutter-x)* .25);
}
.deselect-row {
    display: block;
    position: relative;
}
.deselect-row .deselect-btn {
    font-size: .6rem;
    padding: 6px 12px;
}
.camera-rental {
    margin: 2em 0;
}
.camera-rental .form-group {
    margin-bottom: 2em;
}
.camera-rental .form-group span {
    background-color: grey;
    border-radius: 22px;
    color: #fff;
    margin-left: 10px;
    padding: 6px 16px;
}
.camera-rental label {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
/* Base styles for the range input */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 66%; /* Full width */
  height: 12px; /* Height of the track */
  background: #ddd; /* Track background */
  border-radius: 22px; /* Rounded corners for track */
  outline: none; /* Remove focus outline */
  transition: background 0.3s; /* Smooth transition */
}

/* Add hover effect on the track */
input[type="range"]:hover {
  background: #ccc;
}

/* Style the thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  background: #007bff; /* Thumb color */
  border-radius: 50%; /* Circular thumb */
  cursor: pointer; /* Change cursor to pointer */
  transition: transform 0.2s ease-in-out, background 0.2s; /* Smooth transition */
}

/* Add hover effect to the thumb */
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2); /* Enlarge thumb slightly */
  background: #0056b3; /* Darker thumb color */
}

/* Style for Firefox thumb */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, background 0.2s;
}

/* Hover effect for Firefox thumb */
input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
  background: #0056b3;
}

/* Adjust track for Firefox */
input[type="range"]::-moz-range-track {
  background: #ddd;
  border-radius: 5px;
  height: 8px;
}

/* Style for IE thumb */
input[type="range"]::-ms-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, background 0.2s;
}

/* Adjust track for IE */
input[type="range"]::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
  height: 8px;
}

/* Adjust fill color for progress */
input[type="range"]::-ms-fill-lower {
  background: #ddd;
  border-radius: 5px;
}

input[type="range"]::-ms-fill-upper {
  background: #ddd;
  border-radius: 5px;
}
.options-heading {
    background-color: grey;
    border-radius: 22px;
    color: #fff;
    padding: 6px 16px;
    position: absolute;
    top: -19px;
    left: 2em;
}
.camera-rental .timelapse-options label {
    font-size: .8rem;
    margin-bottom: .1rem;
}
.camera-rental .timelapse-options h4 {
    font-size: 1rem;
}
.camera-rental .timelapse-options .form-card p {
    font-style: oblique;
    font-weight: 200;
    margin-bottom: 0;
}
.camera-rental .timelapse-options .form-card .price {
    font-style: normal;
    font-weight: 400;
}

/* Hide the default checkbox */
.multi-step-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0;
  border: 2px solid #007bff;
  border-radius: 22px;
  background-color: #fff; /* Background color */
  cursor: pointer; /* Pointer cursor */
  transition: all 0.3s ease; /* Smooth transitions */
}

/* Checked state */
.multi-step-form input[type="checkbox"]:checked {
  background-color: #007bff; /* Fill the box with primary color */
  border-color: #0056b3; /* Change border color */
}

/* Add a checkmark when checked */
.multi-step-form input[type="checkbox"]:checked::before {
  content: '✔'; /* Checkmark symbol */
  color: white; /* Checkmark color */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px; /* Adjust size of checkmark */
}

/* Hover effect */
.multi-step-form input[type="checkbox"]:hover {
  background-color: #e6f2ff; /* Light blue background on hover */
  border-color: #0056b3; /* Darker border on hover */
}

/* Focus effect */
.multi-step-form input[type="checkbox"]:focus {
  outline: none; /* Remove outline */
}

/* Style the label */
.multi-step-form .option-montage-timelapse .form-check {
    border-radius: 22px;
    width: 100%;
}
.multi-step-form .option-montage-timelapse .form-check label.form-check-label {
    padding: 4em 0;
    width: 100%;
}
.multi-step-form label.form-check-label {
  margin: 0 10px 0 0;
  font-size: 1rem;
  color: #333; /* Text color */
  cursor: pointer; /* Pointer cursor on the label */
  user-select: none; /* Disable text selection */
  transition: all 0.3s;
}
label .montage-timelapse-desc {
    display: block;
    max-width: 50%;
    font-size: .8rem;
    font-style: oblique;
    font-weight: 200;
}

/* Optional: Style the container for alignment */
.multi-step-form .form-check {
    background-color: #efefef;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: max-content;
    padding: 12px 12px;
    transition: all 0.3s;
}

/* Add a 'selected' state for the container if needed */
.multi-step-form .form-check.selected {
  background-color: #f8f9fa; /* Light gray background for selected state */
}

.summary-block h4 {
    background-color: grey;
    border: 2px solid;
    border-radius: 50px;
    color: #fff;
    padding: 10px 20px;
    position: absolute;
    top: -25px;
    left: 1em;
}

.infos-contact label {
    display: block;
    font-size: 1.25rem;
    text-wrap: balance;
    margin-bottom: .5rem;
}
.infos-contact input, .infos-contact textarea {
    border: 2px solid grey;
    color: var(--clc-blue-1);
    border-radius: 4px;
    margin-bottom: 1em;
    padding: 6px 16px;
    width: 100%;
    transition: all .3s ease-in-out;
}
.infos-contact input::placeholder, .infos-contact textarea::placeholder {
    color: gray;
    font-style: italic;
}
.infos-contact input:focus, .infos-contact textarea:focus {
    outline: none;
}
.privacy-policy-notice {
    border-radius: 4px;
    font-size: .7rem;
    margin-bottom: 2em;
    padding: 2em;
}

@media only screen and (max-width: 991px) {
    .left-panel .form-intro .btn-group {
        flex-direction: column;
    }
}