/* style.css - Full Updated Version */
html { 
  scroll-behavior: smooth; 
}
body { 
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden; 
  background-color: #f7f9fc; 
}

/* Brand Colors */
.bg-custom-mint { background-color: #c3e3a3; } /* Lightest */
.text-custom-green { color: #079108; } /* Primary Green */
.bg-custom-green { background-color: #079108; }
.text-custom-sage { color: #b8dfd8; } /* Secondary Light Green */

/* Custom shadows and hover effects */
.card-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.member-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Custom Pulse Animation for Download Button */
@keyframes pulse-custom {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(7, 145, 8, 0.6);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(7, 145, 8, 0);
  }
}

.animate-pulse-custom {
  animation: pulse-custom 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Fade-In Animation Classes */
.member-card-fade {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    opacity: 0;
    transform: translateY(20px);
}
.member-card-fade.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   NEW PROFILE MODAL STYLES (Modern & Mobile First)
   ========================================= */

#profileModal {
  z-index: 9999;
}

/* Backdrop Blur Transition */
.profile-backdrop {
    transition: opacity 0.3s ease-in-out;
}

/* Modal Content Animation */
.profile-content {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    will-change: transform, opacity;
}

/* Custom Scrollbar untuk Modal Content */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 20px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
}

/* Fix untuk Safari Mobile height */
@supports (-webkit-touch-callout: none) {
    .h-screen {
        height: -webkit-fill-available;
    }
}

/* Thumbnail Gallery Styles di dalam Modal */
.modal-thumbnail-img {
    cursor: pointer;
    transition: all 0.2s ease;
    object-fit: cover;
}
.modal-thumbnail-img:hover {
    transform: scale(1.05);
}

/* =========================================
   Cart Modal Styles
   ========================================= */
#cartModal {
    z-index: 10000;
}

/* =========================================
   Docs Modal Styles
   ========================================= */
#docsModal {
    z-index: 10000;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  /* Pastikan tombol close mudah diakses di mobile */
  #closeProfileModal {
    z-index: 60;
  }
}
/* FIX: Agar SweetAlert muncul di atas Full Screen Modal */
.swal2-container {
    z-index: 100000 !important;
}

/* Tambahan untuk Mobile Card Polish */

/* Pastikan aspek rasio gambar konsisten */
.aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
}

/* Efek Active pada tombol di HP supaya berasa "klik"-nya */
.btn-cart:active {
    transform: scale(0.96);
    background-color: #079108; /* custom-green */
    color: white;
}

/* Shadow yang lebih lembut */
.shadow-soft {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}