:root {
  --primary: #ebadb8;
  --primary-dark: #d48f9b;
  --primary-light: #f5d3d9;
  --primary-soft: #ffe9ec;
  --primary-transparent: rgba(235, 173, 184, 0.25);
  --star-color: #ffc800;
  --star-hover: #f62;
  --dark: #333333;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: smaller;
  font-style: italic;
}

.truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.modal-dialog.large {
  width: 80% !important;
  max-width: unset;
}

.modal-dialog.mid-large {
  width: 50% !important;
  max-width: unset;
}

@media (max-width: 900px) {
  .modal-dialog.large {
    width: 100% !important;
    max-width: unset;
  }
  .modal-dialog.mid-large {
    width: 100% !important;
    max-width: unset;
  }
  .modal-dialog {
    margin: unset !important;
  }
}

#viewer_modal .btn-close {
  position: absolute;
  z-index: 999999;
  background: unset;
  color: white;
  border: unset;
  font-size: 27px;
  top: 0;
  right: 10px;
  transition: color 0.3s ease;
}

#viewer_modal .btn-close:hover {
  color: var(--primary);
}

#viewer_modal .modal-dialog {
  width: 80%;
  max-width: unset;
  height: calc(90%);
  max-height: unset;
}

#viewer_modal .modal-content {
  background: black;
  border: unset;
  height: calc(100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#viewer_modal img,
#viewer_modal video {
  max-height: calc(100%);
  max-width: calc(100%);
}

table.dataTable th,
table.dataTable td {
  padding: 5px !important;
}

.card.d-flex {
  flex-direction: row !important;
}

.card.d-flex > img {
  width: 20% !important;
}

.card.d-flex > .card-body {
  width: 80% !important;
}

span.btn {
  cursor: unset;
}

span.btn:hover {
  background: inherit;
}

#tourCarousel {
  height: 50vh !important;
}

#tourCarousel img {
  object-fit: fill;
}

div.stars {
  width: auto;
  display: inline-block;
}

.mt-200 {
  margin-top: 200px;
}

input.star {
  display: none;
}

label.star {
  float: right;
  font-size: 30px;
  color: var(--dark);
  transition: all 0.2s;
}

input.star:checked ~ label.star:before {
  content: "\2605";
  color: var(--star-color);
  transition: all 0.25s;
}

input.star-5:checked ~ label.star:before {
  color: var(--star-color);
}

input.star-1:checked ~ label.star:before {
  color: var(--star-hover);
}

label.star:hover {
  transform: rotate(-15deg) scale(1.3);
}

label.star:before {
  content: "\2605";
  font-family: FontAwesome;
}

/* Additional primary color utility classes for this section */
.viewer-primary-hover:hover {
  color: var(--primary);
}

.btn-viewer-close {
  color: white;
}

.btn-viewer-close:hover {
  color: var(--primary);
}

/* Star rating customization with primary color option (if needed) */
.star-rating-primary label.star {
  color: var(--dark);
}

.star-rating-primary input.star:checked ~ label.star:before {
  color: var(--primary);
}

/* Modal enhancements with primary color */
.modal-header.bg-primary {
  background-color: var(--primary) !important;
}

.modal-header.bg-primary .btn-close {
  color: white;
}

.modal-header.bg-primary .btn-close:hover {
  color: var(--primary-dark);
}

/* Table row hover with primary soft color */
.table-hover tbody tr:hover {
  background-color: var(--primary-soft) !important;
}

/* Card hover effects with primary border */
.card:hover {
  border-color: var(--primary-light) !important;
}

/* Primary color for active/focused elements */
.table .active-row {
  background-color: var(--primary-soft) !important;
  border-left: 3px solid var(--primary);
}

/* Focus states for interactive elements */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Custom scrollbar with primary color (optional) */
::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}