.feature-divider {
     width: 1px;
     height: 24px;
     opacity: 0.2;
 }

 .feature-icon {
     width: 36px;
     height: 36px;
     transition: all 0.2s ease;
 }

 .feature-item:hover .feature-icon {
     background: var(--bs-danger) !important;
     transform: scale(1.1);
 }

 .feature-item:hover .feature-icon i {
     color: white !important;
 }

 /* Favorite Button */
 .favourite-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(8px);
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.3);
     width: 34px;
     height: 34px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .favourite-btn:hover {
     background: rgba(220, 53, 69, 0.9);
     border-color: rgba(220, 53, 69, 0.1);
     transform: scale(1.1);
 }

 .favourite-btn:hover .favorite-icon {
     color: white !important;
 }

 .favourite-btn[data-is-favorited="true"] {
     background: rgba(220, 53, 69, 0.9);
     border-color: rgba(220, 53, 69, 0.1);
 }

 .favourite-btn[data-is-favorited="true"] .favorite-icon {
     color: red !important;
 }

 .favourite-btn.loading .favorite-icon {
     opacity: 0;
 }

 .favourite-btn.loading .favorite-loader {
     display: block !important;
 }

 .favorite-icon {
     transition: all 0.3s ease;
     font-size: 22px;
 }

 /* Animation for the heart icon when favorited */
 @keyframes heartPulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.3);
     }

     100% {
         transform: scale(1);
     }
 }

 .favorite-icon.pulse {
     animation: heartPulse 0.5s ease-in-out;
 }

 /* --- FIX: MODAL STYLING & BACKDROP --- */
 /* The modal backdrop persistence is a JS issue, now fixed. This CSS ensures it looks right. */
 .modal-backdrop.show {
     opacity: 0.5 !important;
     /* For a nice blur effect, uncomment the next line */
     /* backdrop-filter: blur(4px); */
 }

 .modal-content {
     border-radius: 20px;
     border: none;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 .modal-icon-wrapper {
     width: 80px;
     height: 80px;
 }

 .modal-icon {
     font-size: 40px;
 }

 .btn-lg {
     padding: 12px 24px;
 }

 /* --- FIX: SMOOTH TOAST ANIMATION --- */
 .toast {
     border-radius: 12px;
     border: none;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     /* 1. Define the 'out' state */
     opacity: 0;
     transform: translateY(-20px);
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 }

 .toast.show {
     /* 2. Define the 'in' state */
     opacity: 1;
     transform: translateY(0);
 }