/* Project Modal Component */

.project-modal-container {
     position: fixed;
     inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow-y: auto;
     /* Keep above navbar/overlays (navbar-slot: 100, scroll-progress: 150) */
     z-index: 180;
     pointer-events: none;
     visibility: hidden;
     padding: 20px;
}

.project-modal-container::-webkit-scrollbar {
     display: none;
}

.project-modal-container.active {
     pointer-events: all;
     visibility: visible;
}

.project-overlay {
     position: fixed;
     inset: 0;
     background: hsl(0, 0%, 5%);
     opacity: 0;
     visibility: hidden;
     z-index: 0;
     transition: var(--transition-1);
}

.project-overlay.active {
     opacity: 0.9;
     visibility: visible;
}

.project-modal {
     background: var(--eerie-black-2);
     position: relative;
     padding: 30px;
     margin: auto;
     border: 1px solid var(--jet);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-5);
     transform: scale(0.9);
     opacity: 0;
     transition: var(--transition-1);
     z-index: 1;
     max-width: 900px;
     width: 100%;
}

.project-modal-container.active .project-modal {
     transform: scale(1);
     opacity: 1;
     animation: modalSlideUp 0.4s ease-out forwards;
}

@keyframes modalSlideUp {
     0% {
          transform: translateY(50px) scale(0.95);
          opacity: 0;
     }
     100% {
          transform: translateY(0) scale(1);
          opacity: 1;
     }
}

.project-modal-close-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     background: var(--onyx);
     border-radius: var(--radius-sm);
     width: 40px;
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--white-2);
     font-size: 22px;
     opacity: 0.7;
     transition: all var(--transition-1);
     z-index: 10;
}

.project-modal-close-btn:hover {
     opacity: 1;
     background: var(--orange-yellow-crayola);
     color: var(--smoky-black);
     transform: rotate(90deg);
}

.project-modal-close-btn ion-icon {
     --ionicon-stroke-width: 50px;
}

.project-modal-header {
     margin-bottom: 25px;
     padding-bottom: 15px;
     border-bottom: 1px solid var(--jet);
}

.project-modal-title {
     color: var(--white-2);
     font-size: var(--fs-1);
     font-weight: var(--fw-600);
     margin-bottom: 8px;
     background: var(--text-gradient-yellow);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.project-modal-category {
     color: var(--light-gray-70);
     font-size: var(--fs-6);
     text-transform: capitalize;
}

/* Image Gallery */
.project-gallery {
     position: relative;
     margin-bottom: 25px;
     border-radius: var(--radius-lg);
     overflow: hidden;
}

.gallery-main {
     position: relative;
     width: 100%;
     height: 400px;
     background: var(--jet);
     border-radius: var(--radius-lg);
     overflow: hidden;
}

.gallery-main img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-1);
}

.gallery-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
     display: flex;
     justify-content: space-between;
     padding: 0 15px;
     z-index: 5;
}

.gallery-btn {
     background: hsla(0, 0%, 0%, 0.5);
     backdrop-filter: blur(10px);
     border: 1px solid var(--jet);
     border-radius: 50%;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white-2);
     font-size: 20px;
     transition: all var(--transition-1);
}

.gallery-btn:hover {
     background: var(--orange-yellow-crayola);
     color: var(--smoky-black);
     transform: scale(1.1);
}

.gallery-indicators {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 15px;
}

.gallery-indicator {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--jet);
     border: none;
     cursor: pointer;
     transition: all var(--transition-1);
}

.gallery-indicator.active {
     background: var(--orange-yellow-crayola);
     width: 30px;
     border-radius: 5px;
}

/* Description */
.project-modal-description {
     margin-bottom: 25px;
}

.project-modal-description h4 {
     color: var(--white-2);
     font-size: var(--fs-4);
     margin-bottom: 12px;
}

.project-modal-description p {
     color: var(--light-gray);
     font-size: var(--fs-6);
     line-height: 1.8;
     text-align: justify;
}

/* Technologies */
.project-technologies {
     margin-bottom: 25px;
}

.project-technologies h4 {
     color: var(--white-2);
     font-size: var(--fs-4);
     margin-bottom: 12px;
}

.tech-list {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
}

.tech-tag {
     background: var(--onyx);
     color: var(--orange-yellow-crayola);
     padding: 6px 14px;
     border-radius: var(--radius-sm);
     font-size: var(--fs-7);
     border: 1px solid var(--jet);
     transition: all var(--transition-1);
}

.tech-tag:hover {
     background: var(--orange-yellow-crayola);
     color: var(--smoky-black);
     transform: translateY(-2px);
}

/* Action Button */
.project-modal-actions {
     display: flex;
     justify-content: center;
     gap: 15px;
     flex-wrap: wrap;
}

.live-demo-btn {
     position: relative;
     background: var(--border-gradient-onyx);
     color: var(--orange-yellow-crayola);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 14px 32px;
     border-radius: var(--radius-md);
     font-size: var(--fs-5);
     font-weight: var(--fw-500);
     box-shadow: var(--shadow-3);
     z-index: 1;
     transition: var(--transition-1);
}

.live-demo-btn::before {
     content: "";
     position: absolute;
     inset: 1px;
     background: var(--bg-gradient-jet);
     border-radius: inherit;
     z-index: -1;
     transition: var(--transition-1);
}

.live-demo-btn:hover {
     background: var(--bg-gradient-yellow-1);
     transform: translateY(-3px);
     box-shadow: 0 8px 20px hsla(45, 100%, 72%, 0.4);
}

.live-demo-btn:hover::before {
     background: var(--bg-gradient-yellow-2);
}

.live-demo-btn ion-icon {
     font-size: 20px;
}

.details-btn {
     color: var(--white-2);
}

.details-btn::before {
     background: hsla(0, 0%, 100%, 0.04);
}

/* Responsive */
@media (max-width: 580px) {
     .project-modal {
          padding: 20px;
     }

     .gallery-main {
          height: 250px;
     }

     .project-modal-title {
          font-size: var(--fs-2);
     }

     .gallery-btn {
          width: 35px;
          height: 35px;
          font-size: 18px;
     }

     .live-demo-btn {
          padding: 12px 24px;
          font-size: var(--fs-6);
     }
}

@media (min-width: 768px) {
     .gallery-main {
          height: 450px;
     }
}