.main-container {
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* Animated underline for navigation */
.nav-underline {
    position: relative;
    text-decoration: none;
}

.nav-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--color-primary, #ffb300);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-underline:hover::after,
.nav-underline:focus::after {
    width: 100%;
}

.nav-underline.active {
    color: var(--color-primary, #ffb300);
}

.nav-underline.active::after {
    width: 100%;
    background: var(--color-primary, #ffb300);
}

/* Sembunyikan scrollbar untuk Tailwind utility */
.scrollbar-hide {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* css detail image */
/* Gallery hover effects */
.gallery-image {
    transition:
        transform 0.4s ease,
        filter 0.3s ease;
}

.gallery-image:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

/* Modal animations */
.modal-backdrop {
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    animation: slideUp 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* picker style */
.flatpickr-calendar {
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
.flatpickr-day.selected {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}
.flatpickr-day:hover {
    background: #fef3c7 !important;
}
.custom-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

/* css untuk menampilkan hasil check avaible */
.slide-up {
    animation: slideUp 0.3s ease-out forwards;
}
.slide-down {
    animation: slideDown 0.3s ease-out forwards;
}
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}
.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.bounce-in {
    animation: bounceIn 0.5s ease-out forwards;
}
@keyframes bounceIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* styling penting bagian maps atau itenenary */

.leaflet-container {
    border-radius: 0px;
}
.timeline-dot {
    background: #f59e0b;
    border: 3px solid white;
    box-shadow: 0 0 0 3px #f59e0b;
}
.timeline-line {
    background: linear-gradient(
        to bottom,
        #f59e0b 0%,
        #f59e0b 50%,
        #d1d5db 50%,
        #d1d5db 100%
    );
    background-size: 4px 20px;
}
.custom-icon {
    background-color: #f59e0b;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.dotted-line {
    background-image: repeating-linear-gradient(
        to bottom,
        #f59e0b,
        #f59e0b 4px,
        transparent 4px,
        transparent 8px
    );
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* coment section (belum fiks sih) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
.modal-backdrop {
    backdrop-filter: blur(4px);
}
.modal-content {
    animation: modalSlideUp 0.3s ease-out;
}
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.progress-bar {
    background: linear-gradient(
        to right,
        #374151 var(--progress),
        #e5e7eb var(--progress)
    );
}