// // ------------------------------------
// // Modal Styles
// // ------------------------------------

// .modal {
//   position: fixed;
//   top: 0;
//   left: 0;
//   width: 100vw;
//   height: 100vh;
//   background-color: rgba(0, 0, 0, 0.6);
//   display: none;
//   align-items: center;
//   justify-content: center;
//   z-index: 1000;

//   &.is-active {
//     display: flex;
//   }

//   &__content {
//     background-color: $color-white;
//     border-radius: $border-radius;
//     max-width: 600px;
//     width: 90%;
//     max-height: 80vh;
//     overflow-y: auto;
//     padding: spacer(4);
//     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
//     position: relative;
//     animation: modalFadeIn 0.3s ease forwards;
//   }

//   &__close {
//     position: absolute;
//     top: spacer(2);
//     right: spacer(2);
//     background: none;
//     border: none;
//     font-size: 1.5rem;
//     cursor: pointer;
//     color: $color-muted;
//     transition: color 0.2s ease;

//     &:hover,
//     &:focus {
//       color: theme-color("primary");
//       outline: none;
//     }
//   }
// }

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