body {
  font-family: 'Roboto', sans-serif;
}

.option-card {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-width: 2px;
  border-color: transparent;
}

.option-card.border-green-500 {
  border-color: #10B981;
}

.form-radio:checked {
  border-color: #341B93;
  background-color: #341B93;
}

.form-radio {
  border-radius: 50%;
  border-width: 2px;
  width: 1rem;
  height: 1rem;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s, border-color 0.2s;
}

/* .form-radio:checked {
  background-color: #10B981;
  border-color: #10B981;
} */

.form-radio:checked::before {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  border-radius: 50%;
  margin: auto;
  position: relative;
  top: 0.15rem;
}

.form-radio:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(241, 74, 22, 0.5);
  /* Changed from green to orange glow */
}


/* Style for the speed options */
.speed-option {
  cursor: pointer;
  /* Add a pointer cursor to indicate it's clickable */
  transition: border 0.3s ease, background-color 0.3s ease;
}

/* Hover effect to give a slight background color change */
.speed-option:hover {
  background-color: #f0f0f0;
}

/* When an option is selected, add green border */
.speed-option.selected {
  border-color: #69a0ff;
  background-color: #f7e2dc;
}






/* Match the container to a typical Tailwind input */
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #d1d5db;
  /* border-gray-300 */
  border-radius: 0.375rem;
  /* Tailwind's .rounded-md */
  padding: 0.5rem 0.75rem;
  /* p-2 or p-3 from Tailwind spacing scale */
  min-height: 2.5rem;
  /* h-10 in Tailwind */
  display: flex;
  align-items: center;
  line-height: 1.25;
  /* leading-5 */
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  /* ensure padding doesn't overflow */
}



/* Placeholder text color and styling */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #9ca3af;
  /* text-gray-400 or gray-500 */
  margin-left: 0;
  padding-left: 0;
}

/* Rendered text inside the selection */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #4b5563;
  /* text-gray-700 */
  padding-left: 0;
  margin-left: 0;
  line-height: 1.25;
  /* leading-5 */
}

/* Align the dropdown arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: 0.75rem;
  /* arrow near the right edge */
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
}

/* Hover state border */
.select2-container--default .select2-selection--single:hover {
  border-color: #cbd5e1;
  /* a bit darker than #d1d5db */
}

/* Focus/active state outline (like Tailwind's ring) */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:focus-within {
  outline: none;
  border-color: #a5b4fc;
  /* e.g. ring-indigo-200 or ring-blue-200 shade */
  box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.5);
  /* ring offset color */
}

/* The dropdown menu itself */
.select2-container .select2-dropdown {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* The search box inside the dropdown */
.select2-container .select2-search--dropdown .select2-search__field {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem;
  width: calc(100% - 1rem);
  /* so it doesn’t overflow the container */
  margin: 0.5rem;
  box-sizing: border-box;
}

/* Hover/focus states for the dropdown items */
.select2-results__option--highlighted[aria-selected] {
  background-color: #e5e7eb;
  /* bg-gray-200 */
  color: #1f2937;
  /* text-gray-800 */
}

/* Force Select2 container to occupy full width */
.select2-container {
  width: 100%;
  min-width: 0 !important;
  /* helps if there's any min-width set */
}


/* If you have multiple selects, you can specifically target #country's container */
#country+.select2-container {
  width: 100% !important;
  min-width: 0 !important;
}


/* popup styles */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  /* This centers the popup vertically */
  z-index: 9999;
  /* Make sure it's on top */
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  max-width: 700px;
  width: 100%;
  /* Ensure it is responsive */
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

.popup-text {
  cursor: pointer;
}



.option-card {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-width: 2px;
  border-color: transparent;
  cursor: pointer;
  /* Add cursor pointer to indicate clickability */
  transition: border-color 0.3s ease;
  /* Smooth transition for border color */
}

.option-card.border-green-500 {
  border-color: #10B981;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

/* Styles for when the accordion is open */
.accordion-content.open {
  max-height: 500px;
  /* Adjust as needed for content length */
  transition: max-height 0.5s ease-in;
}


/* Multi-step form CSS */
.form-step {
  display: none;
}

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

/* Highlight invalid fields */
.invalid {
  border-color: #f56565 !important;
}

.info-btn .tooltip-text {
  display: none;
  /* Hidden by default */
}

.info-btn:hover .tooltip-text {
  display: block;
  /* Show on hover */
}

.invalid {
  border-color: red !important;
  background-color: #ffe6e6;
}


.invalid {
  border: 2px solid red !important;
}

#file-upload.invalid {
  border: 2px solid red !important;
  background-color: #ffe6e6;
}

.elfsight-app-19fe55d2-df40-4287-89ed-7ee8833d2977 {
  height: 450px;
}

@media only screen and (max-width: 600px) {
  .popup-content {
    width: 90%;
    height: 90%;
    overflow-y: scroll;
  }

  .select2-container--default .select2-selection--single {

    padding: 0.5rem 0.2rem;

  }
}








/* A little custom style to ensure smooth transitions */
#slider-track {
  transition: transform 0.5s ease-in-out;
}

/* Ensure slides don't wrap and stay in a single line */
#slider-track {
  display: flex;
  flex-wrap: nowrap;
}

/* Give each slide a basis, but allow shrinking */
.slide {
  flex-shrink: 0;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-sizing: border-box;
}