/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* === ROOT VARIABLES === */
:root {
    --color-primary: #FC4D02;
    --color-primary-hover: #FF6B35;
    --color-secondary: #004C1E;
    --color-secondary-hover: #006B35;
    --color-tertiary: #FFA066;
    --color-accent: #3B8E5A;
    --color-natural-light: #F7F7F7;
    --color-natural-dark: #2B2B2B;
    --color-bg-orange: #FFEFE6;
    --font-inter: 'Inter', sans-serif;
    --font-open-sans: 'Open Sans', sans-serif;
}

/* === GLOBAL BASE STYLES === */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-natural-light);
    color: var(--color-natural-dark);
    font-family: var(--font-open-sans);
    margin: 0;
    padding: 0;
}

/* === CONTAINER STYLES === */
.container,
.container-fluid {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* === CUSTOM TAILWIND COLOR CLASSES === */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-primary-hover:hover {
    background-color: var(--color-primary-hover) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-secondary-hover:hover {
    background-color: var(--color-secondary-hover) !important;
}

.bg-natural-light {
    background-color: var(--color-natural-light) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-natural-light {
    color: var(--color-natural-light) !important;
}

.text-natural-dark {
    color: var(--color-natural-dark) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-natural-dark {
    border-color: var(--color-natural-dark) !important;
}

.font-inter {
    font-family: var(--font-inter) !important;
}

.font-open-sans {
    font-family: var(--font-open-sans) !important;
}

.from-natural-light {
    --tw-gradient-from: var(--color-natural-light);
}

.to-secondary {
    --tw-gradient-to: var(--color-secondary);
}

/* === HEADER SPECIFIC STYLES === */
/* Mobile menu animations */
.mobile-menu-open {
    max-height: 24rem !important;
    opacity: 1 !important;
}

.mobile-menu-closed {
    max-height: 0 !important;
    opacity: 0 !important;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === PROFIL SPECIFIC STYLES === */
/* Animations and transitions */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.fade-out {
    animation: fadeOut 0.3s ease-in-out;
}

.slide-down {
    animation: slideDown 0.4s ease-out;
    transform-origin: top;
}

.slide-up {
    animation: slideUp 0.3s ease-in;
    transform-origin: top;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
}

/* === BANTUAN/POPUP ANIMATIONS === */
/* PERBAIKAN: Popup slide animations dengan z-index yang tepat */
#bantuanPopup {
    z-index: 9999 !important; /* Pastikan popup di atas semua element */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(100%);
    opacity: 0;
}

#bantuanPopup.popup-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

#bantuanPopup.popup-hidden {
    transform: translateY(100%) !important;
    opacity: 0 !important;
}

/* PERBAIKAN: Styling untuk tombol bantuan */
#helpBtnDesktop, #helpBtnMobile {
    z-index: 1000;
    position: fixed;
    cursor: pointer;
    user-select: none;
}

#helpBtnDesktop:hover, #helpBtnMobile:hover {
    transform: scale(1.05);
    background-color: var(--color-primary-hover) !important;
}

/* Loading spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Transition styles for expanded content */
.expanded-content {
    overflow: hidden;
    transition: all 0.4s ease-out;
}

.expanded-content.show {
    max-height: 1000px;
    opacity: 1;
}

.expanded-content.hide {
    max-height: 0;
    opacity: 0;
}

/* Hover effects for detail items */
.detail-item:hover {
    background-color: #f9fafb;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Button hover animations */
.btn-animate {
    transition: all 0.2s ease;
}

.btn-animate:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Icon rotation animation */
.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

/* Disabled button styles */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

button:disabled:hover {
    background-color: var(--color-natural-light) !important;
    color: var(--color-natural-dark) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Button hover effects */
button:not(:disabled):hover {
    transform: translateY(-1px);
}

/* === CUSTOM SCROLLBAR STYLES === */
/* Scrollbar untuk area form bantuan */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Scrollbar untuk overflow-x-auto (horizontal) */
.overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-hover);
}

/* === FOOTER SPECIFIC STYLES === */
.hover\:text-primary:hover {
    color: var(--color-primary);
}

.hover\:bg-primary\/10:hover {
    background-color: rgba(252, 77, 2, 0.1);
}

/* === FILE UPLOAD STYLES === */
/* File upload hover effect */
#uploadBtn:hover {
    border-color: var(--color-primary);
    background-color: #f9fafb;
}

/* === ERROR AND VALIDATION STYLES === */
/* Error state untuk input fields */
.border-red-500 {
    border-color: #ef4444 !important;
}

/* === RESPONSIVE UTILITIES === */
/* Additional hover effects */
.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* Transition effects */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* === FOCUS STYLES FOR ACCESSIBILITY === */
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.focus\:ring-primary:focus {
    --tw-ring-color: var(--color-primary);
}

.focus\:ring-opacity-50:focus {
    --tw-ring-opacity: 0.5;
}

.focus\:border-primary:focus {
    border-color: var(--color-primary);
}

.focus\:shadow-sm:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Enhanced focus styles for accessibility */
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* === UTILITY CLASSES === */
.whitespace-nowrap {
    white-space: nowrap;
}

.break-all {
    word-break: break-all;
}

.break-normal {
    word-break: normal;
    overflow-wrap: normal;
}

.leading-tight {
    line-height: 1.25;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-none {
    line-height: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.object-cover {
    object-fit: cover;
}

/* === ASPECT RATIO UTILITIES === */
.aspect-5\/6 {
    aspect-ratio: 5 / 6;
}

/* === RESPONSIVE BREAKPOINT ADJUSTMENTS === */
@media (min-width: 640px) {
    .break-all.sm\:break-normal {
        word-break: normal;
        overflow-wrap: normal;
    }
}

/* === MOBILE RESPONSIVE STYLES === */
/* PERBAIKAN: Responsive adjustments untuk bantuan popup */
@media (max-width: 640px) {
    #bantuanPopup {
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 80vh !important;
        border-radius: 1rem 1rem 0 0 !important;
        transform: translateY(100%);
    }
    
    #bantuanPopup.popup-visible {
        transform: translateY(0) !important;
    }
}

@media (min-width: 641px) {
    #bantuanPopup {
        position: fixed !important;
        bottom: 1rem !important;
        right: 1rem !important;
        width: 100% !important;
        max-width: 24rem !important;
        height: 66.666667% !important;
        border-radius: 1rem !important;
        transform: translateY(100%);
    }
    
    #bantuanPopup.popup-visible {
        transform: translateY(0) !important;
    }
}

/* === PRINT STYLES === */
@media print {
    .shadow-lg,
    .shadow-md,
    .hover\:shadow-xl:hover {
        box-shadow: none !important;
    }
    
    .bg-primary,
    .bg-secondary {
        background-color: transparent !important;
        color: var(--color-natural-dark) !important;
    }
    
    #bantuanPopup,
    #helpBtnDesktop,
    #helpBtnMobile {
        display: none !important;
    }
}