.sup-modal, .save-error-bg {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
     padding-top: 30px;
}

.sup-modal-content {
     position: relative;
}

.sup-modal-content, .save-error {
     margin: auto;
     width: 400px;
     padding: 25px;
     background-color: #f3eaeae8;
     border-radius: 3px;
     box-shadow: 0 0 20px 0 #ab6d8d;
}

.sup-outer {
  padding: 20px 20px;
  width: 100%;
}

.sup-search {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
}

.sup-search label {
  margin-bottom: 5px;
}

.sup-results {
     display: grid;
     justify-items: center;
     grid-template-columns: 1fr;
     gap: 10px;
}

.sup-card {
     max-width: 320px;
     position: relative;
     border-radius: 8px;
     background: white;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInUp 0.4s ease forwards;
   }

 @keyframes fadeInUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeOut {
     from {
         opacity: 1;
         transform: translateY(0);
     }
     to {
         opacity: 0;
         transform: translateY(-20px);
     }
 }

   .featured-badge {
     position: absolute;
     top: 0;
     left: 0;
     background: var(--dr);
     background-image: linear-gradient(to right, rgb(129 13 60), rgb(243 72 119));
     color: white;
     padding: 5px 60px;
     transform: rotate(-45deg) translate(-30%, -70%);
     font-size: 16px;
     font-weight: 600;
     z-index: 10;
   }

   .sup-card-content {
     padding: 6px;
   }

   .image-container {
     max-width: 308px;
     height: 192px;
     border-radius: 8px 8px 0 0;
     overflow: hidden;
     margin-bottom: 8px;
   }

   .image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .sup-bottom-content {
     padding: 0 8px 2px 8px;
   }

   .title {
     color: var(--lr);
     font-size: 20px;
     letter-spacing: -1px;
     font-weight: 700;
     margin: 0 0 8px 0;
   }

   .description {
     color: #666;
     font-style: italic;
     margin: 12px 0;
     font-size: 0.8rem !important;
     min-height: 75px;
   }

   .view-button, .view-button-sec, .view-button-prim {
     display: inline-block;
     padding: 7px 14px;
     border: 2px solid var(--or);
     background-color: var(--or);
     color: white;
     border-radius: 6px;
     text-decoration: none;
     font-weight: 500;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.1s ease;
   }

    .view-button-sec {
      background-color: transparent;
      color: var(--or);
      transition: all 0.1s ease;
    }

   .view-button-sec i, .view-button-prim i {
      margin-right: 6px;
      font-size: 14px;
      text-shadow: none;
   }

   .view-button:hover, .view-button-prim:hover {
     scale: 1.01;
   }

   .view-button-sec:hover {
     background-color: var(--or);
     color: white;
   }

   .view-button-cont {
     display: flex;
     justify-content: space-between;
   }

   .star-card {
     display: inline-flex;
     direction: ltr;
     width: 100%;
     border-bottom: 1px #e5e5e5 dashed;
     padding-bottom: 12px;
   }
   
   .star-rating .fa-star {
     color: #e5e5e5;
   }

   .top-reviews .star-rating .fa-star {
     color: #afafaf;
   }
   
   .star-rating .star-orange {
     color: var(--ora) !important;
   }

   .sup-search input {
    margin-bottom: 0;
   }

   .sup-search-bar {
    position: relative;
   }

   .sup-search-bar input {
    padding-right: 3ch;
   }

   .sup-search-bar i.fa-search {
    position: absolute;
    top: 42px;
    right: 10px;
    font-size: 1.2rem;
    color: #b1b1b1;
   }

.selected-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    grid-column: 1 / span 3;
}

.selected-category {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px 0px #f1588426;
    font-size: 12px;
    border-radius: 4px;
}

.selected-category button {
    margin-left: 10px;
    background: none;
    border: none;
    color: red;
    font-weight: bold;
    cursor: pointer;
}

.selected-category button:hover {
    text-decoration: underline;
}

.remove-category {
  margin-left: 10px;
}

.more-filters-btn {
  margin-top: 10px;
  border: 0;
  cursor: pointer;
  background: none;
  font-size: 0.9rem;
  color: #8d8d8d;
  display: none;
  align-items: center;
  gap: 3px;
}

.more-filters-btn span {
  margin-top: -2px;
  font-weight: 500;
}

.more-filters-btn i {
  color: #9d9d9d;
}

.icon-container {
  position: relative; /* Stack icons on top of each other */
  display: inline-block; /* Keep it inline if needed */
  width: 12.5px;
  height: 15px;
}

.icon {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.icon.active {
  opacity: 1; /* Show the active icon */
}

/* Your page styles */

.btn-container-img {
  margin-block: 24px;
  width: 100%;
  display: flex;
  align-items: start;
}

.yourpage-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-cont {
  width: 100%;
  background-color: rgb(219, 219, 209);
  background-image: linear-gradient(to top right, rgb(229,229,219), rgb(253,253,251));
  padding: 56px 12px 48px 12px;
  display: flex;
  justify-content: center;
}

.top-inner-cont {
  max-width: 550px;
}

.logo-cont {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}

.main-title {
  color: var(--lr);
  font-size: 32px;
  font-weight: 600;
  margin-block: 10px;
}

.addr-review-cont {
  display: grid  ;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 24px;
  justify-items: center;
}

.top-addr, .top-reviews {
  display: flex;
  align-items: center;
}

.top-addr i {
  color: var(--lr);
  padding-right: 8px;
}

.addr-review-cont div {
  text-align: start;
}

.review-count {
  cursor: pointer;
  border-bottom: 1px dashed #bfbda7;
  margin-left: 8px;
}

.desc-cont {
  font-style: italic;
  margin-bottom: 32px;
}

.content-back-cont {
  width: 100%;
  background-image: url(../../img/faded_flowers.jpg);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: center top;
  display: flex;
  justify-content: center;
}

.content-cont {
  width: 95%;
}

.dotted-banner {
  border-top: 4px dotted #f1f1f1;
  border-bottom: 4px dotted #f1f1f1;
  padding: 12px 0;
  margin-block: 56px 32px;
  display: flex;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: var(--lr);
}

.content-grid-cont {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8%;
  padding: 12px 12px 12px 12px;
  margin-bottom: 150px;
}

.content-title {
  color: var(--lr);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 32px;
  border-bottom: 4px dotted #f1f1f1;
  padding-bottom: 3px;
}

.contact-grid {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 18px;
  padding-bottom: 24px;
  border-bottom: 4px dotted #f1f1f1;
  margin-bottom: 32px;
}

.contact-grid div {
  font-weight: 600;
}

.contact-grid i {
  color: var(--lr);
  text-align: end;
}

.review-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content) 1fr;
  column-gap: 24px;
}

.overview-type {
  padding-right: 20px;
  font-weight: 600;
}

.overview-spacer {
  grid-column: 1 / span 3;
  border-bottom: 4px dotted #f1f1f1;
  margin-bottom: 8px;
  padding-top: 5px;
}

.overview-total {
  color: var(--lr);
}

.review-list {
  margin-top: 32px;
}

.review-card-top {
  cursor: pointer;
}

.review-request {
  background-color: rgb(254,251,246);;
}

.review-request .profile-pic {
  border: none;
}

.review-card {
  border-bottom: 4px dotted #f1f1f1;
}

.card-inner {
  display: flex;
  align-items: flex-start;
  padding: 18px 18px 0 18px;
  margin-bottom: 10px;
}

.review-profile {
  text-align: center;
  margin-right: 16px;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    border: 2px dotted var(--ora);
    overflow: hidden;
}

.profile-div2 .profile-no-pic {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(23px at 50% 50%);
  font-size: 26px;
  color: rgb(255 225 234);
}

.profile-pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px dotted var(--ora);
  object-fit: cover;
}

.review-card .profile-div {
  margin-bottom: 0;
}

.review-name {
  color: var(--lr);
  font-weight: 600;
  margin-top: 6px;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 15px;
}

.review-content {
  flex: 1;
}

.review-title {
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}

.stars {
  margin: 4px 0 10px 0;
}

.review-request .stars .star-rating i {
  color: #d5d5d5;
}

.stars .empty {
  color: #ccc;
}

.review-text {
  font-style: italic;
  font-size: 0.9rem;
  margin: 4px 0;
  color: #555;
}

.read-more {
  color: #999;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.disp-outer{
  width: 100%;
  max-width: 1120px;
}

.add-rev-outer {
  cursor: pointer;
}

.add-rev-outer .profile-no-pic {
  background: transparent;
  color: #e3e3e3;
}

.add-rev-outer .profile-div2 {
  border: 2px dotted #e3e3e3;
}

.add-rev-outer .card-inner {
  padding: 18px 18px 18px 18px;
  margin-block: 10px;
}

.add-rev-outer .card-inner:hover {
  background-color: rgb(254, 251, 246);

}

.add-rev-stars-outer {
  margin-bottom: 28px;
}

.add-rev-stars-outer .overview-spacer {
  grid-column: 1 / span 2;
  border-bottom: 2px dotted #c7c7c7;
}

.add-rev-stars-outer .overview-type {
  font-weight: 400;
}

.add-rev-stars-outer .rating-interactive i {
  cursor: pointer;
  color: #afafaf;
  font-size: 20px !important;
}

.review-overview-grid.add-rev-stars-outer {
  display: grid;
  grid-template-columns: min-content 1fr;
  column-gap: 20px;
} 

.add-rev-stars-outer .rating-interactive i.filled-int {
  color: var(--ora);
}

.add-rev-stars-outer .rating-interactive i {
  transition: text-shadow 0.3s linear;
}

.add-rev-stars-outer .rating-interactive.missing-rating i {
  color: rgb(155 31 81 / 64%);
  text-shadow: 4px 3px 8px rgb(200 53 94 / 52%);
}

.anon-choice-lab-cont {
  display: grid;
  grid-template-columns: 1fr auto;
}

.anon-choice-text {
  padding-left: 35px;
}

.rev-prof-modal {
  width: 95px;
  margin-right: 0;
}

label.rad-rev {
  padding: 5px;
}

.rad-rev-check {
  top: 5px;
  left: 5px;
}

.rad-rev:hover {
  background-color: rgb(221 221 221);
}

.supp-reply-cont {
  margin: 15px 0  5px 20px;
  padding: 8px 0 10px 14px;
  background-color: rgb(254,251,246);
  font-size: 14px;
}

.supp-reply-title {
  font-weight: 600;
  margin-bottom: 3px;
}

.supp-reply-text {
  font-style: italic;
}

.pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 25px;
}

.pagination-container button, .pagination-container select {
  outline-color: var(--lr) !important;
}

.pagination-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  margin-top: 12px;
  padding-top: 8px;
}

.pagination-btn {
  padding: 5px 12px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: 50%;
  color: rgba(200, 53, 94, 0.67); 
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-btn i {
  text-shadow: none;
}

.pagination-btn.active {
  background-color: var(--lr);
  color: white;
  font-weight: 700;
}
.move-page {
  color: var(--lr);
  font-weight: 700 !important;
  border-radius: 0;
}

.pagination-btn.disabled {
  opacity: 0.5;
  cursor: default;
}

.pagination-options {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--lr);
}

.pagination-info {
  font-size: 14px;
  color: rgba(200, 53, 94, 0.67);
  margin-bottom: 15px;
}
.pag-label {
  width: max-content;
}

#items-per-page {
  margin-bottom: 0;
  padding-inline: 5px;
  height: 35px;
  width: max-content;
  color: var(--lr);
  border: 1px solid rgba(200,53,94,0.52);
}