#searchModal {
  background: rgba(0, 0, 0, 0.5);
}

.search-box-wrapper {
  margin-right: 3.2rem;
}
@media screen and (max-width: 991px) {
  .search-box-wrapper {
    margin-right: 6rem;
  }
}
.search-box-wrapper .btn-search {
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
}
.search-box-wrapper .btn-search[aria-expanded=true] svg path {
  stroke: #e5332f;
  stroke-width: 4px;
}

.searchForm-wrapper .clear-search {
  border: none;
  background: transparent;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 1px;
  padding: 10px;
  z-index: 9;
}
.searchForm-wrapper .search-group-text {
  margin-right: 0.8rem;
  width: 100%;
}
.searchForm-wrapper .search-card-body {
  border-radius: 8px;
  border: 1px solid #efefef;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03), 0 4px 8px 0 rgba(10, 13, 18, 0.03);
  padding: 2.4rem;
}
.searchForm-wrapper input.form-control {
  border-radius: 12px;
  border: 1px solid #555;
  padding: 12px 20px;
  font-size: 1.6rem;
  outline: none;
  box-shadow: none;
}
.searchForm-wrapper input.form-control:focus {
  outline: none;
  box-shadow: unset;
}
.searchForm-wrapper input.form-control::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}
.searchForm-wrapper input.form-control::-ms-clear {
  display: none;
}
.searchForm-wrapper .btn-submit {
  background-color: #1d1b20;
  border: none;
  outline: none;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 4.8rem;
  min-width: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-popular-topics {
  padding: 2rem 2rem 4rem 2rem;
}
.search-popular-topics h5 {
  margin-bottom: 1.6rem;
}
.search-popular-topics ul {
  padding: 0;
  margin: 0;
}
.search-popular-topics ul li {
  margin-bottom: 0.8rem;
  position: relative;
  display: flex;
  flex-direction: nowrap;
  gap: 0.8rem;
}
.search-popular-topics ul li a {
  color: rgba(0, 0, 0, 0.75);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.search-popular-topics ul li a:hover {
  color: var(--Primary-Primary-500, #E5332F);
  font-weight: 600;
}
.search-popular-topics ul li::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E5332F' d='M4 12H16.25L11 6.75L11.66 6L18.16 12.5L11.66 19L11 18.25L16.25 13H4V12Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

h5.search-group-title-listing {
  margin-bottom: 4rem;
  font-weight: 400;
}

/* Live Search Results Styling - Content Area */
.live-search-results {
  width: 100%;
  z-index: 1055;
  pointer-events: auto;
  position: relative;
  padding-bottom: 6rem;
}

#live-search-results .search-loop-box > .row {
  position: relative;
}
#live-search-results .search-loop-box > .row .--image > a::before {
  content: "";
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}

/* Hide default content when searching */
.---results.searching .default-content {
  display: none;
}

/* Show results when searching */
.---results.searching .live-search-results {
  display: block;
}

/* Ensure search input remains clickable and editable */
.search-group-text {
  position: relative;
  z-index: 10; /* Higher than dropdown */
  pointer-events: auto; /* Allow interaction */
}

.search-group-text > * {
  pointer-events: auto; /* Children are clickable */
}

.btn-submit {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

/* Fix backdrop z-index issue - this is the main problem */
.modal-backdrop {
  z-index: 104; /* Ensure backdrop is below modal content */
  pointer-events: none; /* Backdrop shouldn't block clicks */
}

.modal-content {
  z-index: 1051; /* Above backdrop */
  pointer-events: auto; /* Ensure modal content is clickable */
}

.modal-dialog {
  z-index: 1052; /* Above backdrop */
  pointer-events: auto;
}

.modal {
  z-index: 1050; /* Base modal z-index */
}

/* Ensure all interactive elements in modal are above backdrop */
.modal * {
  z-index: inherit;
}

.modal .form-control,
.modal .btn,
.modal input,
.modal button {
  z-index: 1053; /* Above backdrop and modal content */
  position: relative;
  pointer-events: auto;
}

/* Specific fix for search input */
/* Fix modal body to allow interaction */
.modal-body {
  pointer-events: auto;
  position: relative;
  z-index: 1052;
}

/* Ensure no pseudo-elements are blocking the input */
.search-group-text::before,
.search-group-text::after,
#rotating-search-input::before,
#rotating-search-input::after {
  display: none;
}

/* Force input to be above everything */
.modal-body {
  position: relative;
  z-index: auto;
}

.modal-body .search-input-group {
  position: relative;
  z-index: 100;
}

/* Hide dropdown when not interacting with it */
/* Ensure input is always accessible */
#rotating-search-input:focus {
  z-index: 1001;
  position: relative;
}

#rotating-search-input:focus ~ .live-search-results:hover {
  pointer-events: auto;
  opacity: 1;
}

/* Loading indicator */
.live-search-loading {
  padding: 20px;
  text-align: center;
  color: #666;
}

.live-search-loading .spinner-border {
  color: #000;
  --bs-spinner-width: 3rem;
  --bs-spinner-height: 3rem;
}

/* Results container - inherits styling from original search templates */
.live-search-content {
  padding: 0 1rem;
}
.live-search-content .search-loop-box {
  margin-bottom: 16px;
}

/* Style the original search loop items for dropdown context */
.live-search-content .search-result-item,
.live-search-content .module-item,
.live-search-content .resource-item,
.live-search-content .page-item {
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 15px;
  transition: background-color 0.2s ease;
}

.live-search-content .search-result-item:hover,
.live-search-content .module-item:hover,
.live-search-content .resource-item:hover,
.live-search-content .page-item:hover {
  background-color: #f8f9fa;
}

.live-search-content .search-result-item:last-child,
.live-search-content .module-item:last-child,
.live-search-content .resource-item:last-child,
.live-search-content .page-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* No results message */
.no-results-found {
  padding: 20px 16px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

/* Error message */
.live-search-error {
  padding: 20px 16px;
  text-align: center;
  color: #dc3545;
  font-size: 14px;
}

/* View all results link */
.live-search-view-all {
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa;
  text-align: center;
}

.view-all-link {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* Scrollbar styling for webkit browsers */
.live-search-content::-webkit-scrollbar {
  width: 6px;
}

.live-search-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.live-search-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.live-search-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Modal-specific adjustments */
.modal .search-group-text {
  position: relative;
  z-index: 1;
}

.modal .search-group-text .live-search-results {
  z-index: 1055;
}

/* Ensure modal content doesn't interfere with search */
.modal-body {
  position: relative;
  z-index: auto;
}

.modal-content {
  position: relative;
  z-index: 1051; /* Above backdrop but below dropdown */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .live-search-content .search-result-item,
  .live-search-content .module-item,
  .live-search-content .resource-item,
  .live-search-content .page-item {
    padding: 8px 12px;
  }
  .modal-dialog {
    margin: 10px;
  }
}
/* Animation for results appearing */
.live-search-results {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 992px) {
  #searchModal .modal-lg,
  #searchModal .modal-xl {
    --bs-modal-width: 600px;
  }
}
#searchModal .modal-content {
  border-radius: 1rem;
}
#searchModal .modal-content .modal-body {
  padding: 0;
  min-height: 25rem;
}
#searchModal .modal-content .---results {
  padding: 2rem;
}
#searchModal .modal-content .---results svg {
  margin-bottom: 1rem;
}
#searchModal .modal-content .---results h3 {
  margin-bottom: 0.6rem;
}
#searchModal .modal-content .---results p {
  margin: 0;
}
#searchModal .modal-content .---results .page-excerpt p {
  color: rgba(0, 0, 0, 0.75);
  font-size: 12px;
  line-height: 16px;
}
#searchModal .modal-content .---results p.--title {
  margin-bottom: 8px;
  font-weight: 600;
}
#searchModal .modal-content .---results p.--title a {
  color: black;
}
#searchModal .modal-content .---results p.--title a:hover {
  color: #E5332F;
}
#searchModal .modal-content #rotating-search-input {
  border: 0;
  position: relative;
  z-index: 1060;
  pointer-events: auto;
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="%236c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.0002 21.0002L16.7002 16.7002" stroke="%236c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat 20px center;
  background-size: 24px 24px;
  color: #000;
  border-bottom: 1px solid #A1A1A1;
  padding: 2rem 2rem 2rem 6rem;
  font-size: 1.6rem;
  font-weight: 400;
  border-radius: 1rem 1rem 0 0;
  line-height: 2.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #searchModal .modal-content #rotating-search-input {
    padding: 2rem 6rem;
  }
}
#searchModal .modal-content #rotating-search-input:focus {
  outline: none;
  box-shadow: unset;
}
#searchModal .modal-content #rotating-search-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}
#searchModal .modal-content #rotating-search-input::-ms-clear {
  display: none;
}
#searchModal .search-loop-box .course-actions {
  display: none;
}
@media screen and (min-width: 992px) {
  #searchModal .search-loop-box .--image {
    max-width: 13rem;
  }
}
#searchModal .search-loop-box .--image img {
  border-radius: 1.2px;
}
@media screen and (min-width: 991px) {
  #searchModal .search-loop-box .--content {
    width: 75%;
  }
}
#searchModal .search-loop-box .--content .course-actions {
  display: none;
}
#searchModal h6.search-group-title {
  font-size: 12px;
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 8px;
}
#searchModal .view-all-results-wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
}
#searchModal .view-all-results-wrapper .btn.btn-outline.view-all-results-btn {
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
#searchModal .view-all-results-wrapper .btn.btn-outline.view-all-results-btn svg {
  margin: -2px 0 0px 8px;
}
#searchModal .close-modal-button {
  border: none;
  background: transparent;
  outline: none;
  padding: 5px;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1060;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: none;
}
@media screen and (max-width: 767px) {
  #searchModal .close-modal-button {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  #searchModal .close-modal-button svg rect {
    fill: #fff;
  }
}

.search-loop-box {
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #E8E8E8;
  padding-bottom: 0.8rem;
}

.modules-loop .--content {
  text-align: left;
}

.live-search-content .course-actions a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #000;
  margin-top: 1.6rem;
  padding: 0.8rem 2rem;
  font-size: 1.4rem;
  line-height: 100%;
}

.modules-loop .--content .course-actions a svg {
  margin-bottom: 0;
}

.modules-loop .--content .course-actions a:hover svg rect {
  stroke: #fff;
}

body.search-results .search-box-wrapper {
  display: none;
}
body.search-results .search-main-wrapper .search-loop-box {
  border-radius: 16px;
  padding-bottom: 0;
}
body.search-results .search-main-wrapper .search-loop-box .--image img {
  border-radius: 4px;
}
@media screen and (min-width: 1200px) {
  body.search-results .search-main-wrapper .search-loop-box .--image img {
    height: 100%;
    -o-object-fit: fill;
       object-fit: fill;
  }
}

@media screen and (max-width: 768px) {
  #searchModal .modal-dialog {
    margin: auto;
  }
}
@media screen and (max-width: 767px) {
  #searchModal {
    background: transparent;
  }
  #searchModal .modal-dialog {
    margin: 0;
    align-items: flex-start;
    max-width: 100%;
  }
  #searchModal .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  #searchModal .modal-content #rotating-search-input {
    border-radius: 0;
    border: none;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1) !important;
  }
  #searchModal #search-popular-topics h5 {
    font-weight: 700;
  }
  #searchModal .live-search-content {
    max-height: calc(100vh - 18rem);
    padding: 0;
  }
  #searchModal .live-search-results {
    max-height: inherit;
  }
  #searchModal .---results p.--title {
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #searchModal .---results p.--title .lock-icon-inline {
    display: none;
  }
  #searchModal .---results .course-excerpt p {
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 16px;
  }
  #searchModal .search-loop-box .--image {
    padding-left: 0;
  }
  #searchModal .search-loop-box .--content {
    padding-left: 0;
  }
  #searchModal .search-loop-box > .row {
    margin: 0;
  }
}/*# sourceMappingURL=live-search.css.map */