/* ================================
   RESET & BASE STYLES
================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================
   KEYFRAME ANIMATIONS
================================ */

/* Floating Animation for Orbs */
@keyframes float {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    }
    25% { 
        transform: translate(40px, -40px) scale(1.1); 
    }
    50% { 
        transform: translate(-30px, 30px) scale(0.9); 
    }
    75% { 
        transform: translate(30px, 40px) scale(1.05); 
    }
}

/* Background Breathing Animation */
@keyframes bgBreath {
    0%, 100% { 
        opacity: 0.6; 
    }
    50% { 
        opacity: 0.9; 
    }
}

/* Badge Glow Animation */
@keyframes badgeGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); 
    }
    50% { 
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); 
    }
}

/* Gradient Text Flow Animation */
@keyframes gradientFlow {
    0%, 100% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
}

/* Slide Down Animation for Alerts */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   CUSTOM SCROLLBAR
================================ */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(20, 20, 25, 0.6);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6, #a855f7, #ec4899);
    border-radius: 6px;
    border: 2px solid rgba(20, 20, 25, 0.6);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7c3aed, #9333ea, #db2777);
}

    /* ================================
       PHONE INPUT - COMPLETE THEME
    ================================ */
    
    /* Container */
    .iti {
        width: 100% !important;
        display: block !important;
    }
    
    .iti__flag-container {
        background: transparent !important;
    }
    
    /* Flag Button - All States */
    .iti__selected-flag {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(168, 85, 247, 0.12)) !important;
        border: 1px solid rgba(139, 92, 246, 0.3) !important;
        border-radius: 12px 0 0 12px !important;
        padding: 0 14px !important;
        height: calc(100% - 2px) !important;
        margin: 1px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .iti__selected-flag:hover {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(168, 85, 247, 0.18)) !important;
        border-color: rgba(139, 92, 246, 0.4) !important;
        transform: scale(1.02) !important;
    }
    
    /* Saat Dropdown Dibuka */
    .iti__selected-flag.iti__active {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(236, 72, 153, 0.22)) !important;
        border-color: #a855f7 !important;
        box-shadow: 
            0 0 0 4px rgba(139, 92, 246, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
    
    .iti__selected-flag:focus {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(168, 85, 247, 0.22)) !important;
        border-color: rgba(139, 92, 246, 0.5) !important;
        outline: none !important;
    }
    
    /* Arrow Icon */
    .iti__arrow {
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid #a855f7 !important;
        border-bottom: 0 !important;
        margin-left: 6px !important;
        transition: transform 0.3s ease !important;
    }
    
    .iti__selected-flag.iti__active .iti__arrow {
        border-top: 0 !important;
        border-bottom: 5px solid #ec4899 !important;
        transform: rotate(180deg) !important;
    }
    
    /* Selected Flag (flag di button) */
    .iti__selected-flag .iti__flag {
        filter: brightness(1.1) !important;
        transition: filter 0.3s ease !important;
    }
    
    .iti__selected-flag.iti__active .iti__flag {
        filter: brightness(1.2) drop-shadow(0 2px 4px rgba(139, 92, 246, 0.4)) !important;
    }
    
    /* ================================
       DROPDOWN
    ================================ */
    .iti__country-list {
        background: linear-gradient(135deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 25, 1)) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        border: 1px solid rgba(139, 92, 246, 0.4) !important;
        border-radius: 16px !important;
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.9),
            0 0 0 1px rgba(139, 92, 246, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        margin-top: 8px !important;
        padding: 8px !important;
        max-height: 260px !important;
        z-index: 99999 !important;
    }
    
    /* Country Items */
    .iti__country {
        padding: 12px 16px !important;
        background: transparent !important;
        border-radius: 10px !important;
        margin: 2px 0 !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
    }
    
    .iti__country-name {
        color: #ffffff !important;
        font-weight: 500 !important;
        font-size: 14px !important;
    }
    
    .iti__dial-code {
        color: #a855f7 !important;
        font-weight: 700 !important;
        font-size: 13px !important;
    }
    
    .iti__country:hover {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.18)) !important;
        transform: translateX(4px) !important;
    }
    
    .iti__country:hover .iti__dial-code {
        color: #c084fc !important;
    }
    
    .iti__country.iti__highlight {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(168, 85, 247, 0.22)) !important;
    }
    
    .iti__country.iti__active {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.28)) !important;
        border: 1px solid rgba(139, 92, 246, 0.6) !important;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
    }
    
    .iti__country.iti__active .iti__dial-code {
        color: #ec4899 !important;
    }
    
    /* Search Input */
    .iti__search-input {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1.5px solid rgba(139, 92, 246, 0.35) !important;
        border-radius: 12px !important;
        color: #ffffff !important;
        padding: 12px 16px !important;
        margin: 6px !important;
        width: calc(100% - 12px) !important;
        font-size: 14px !important;
        transition: all 0.3s ease !important;
    }
    
    .iti__search-input::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
    }
    
    .iti__search-input:focus {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: #a855f7 !important;
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15) !important;
    }
    
    /* Divider */
    .iti__divider {
        background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent) !important;
        margin: 8px 8px !important;
        height: 1px !important;
    }
    
    /* Scrollbar */
    .iti__country-list::-webkit-scrollbar {
        width: 8px !important;
    }
    
    .iti__country-list::-webkit-scrollbar-track {
        background: rgba(20, 20, 25, 0.6) !important;
        border-radius: 4px !important;
    }
    
    .iti__country-list::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #8b5cf6, #a855f7, #ec4899) !important;
        border-radius: 4px !important;
        border: 2px solid rgba(30, 30, 35, 0.8) !important;
    }
    
    .iti__country-list::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #7c3aed, #9333ea, #db2777) !important;
    }
    
    /* Input Adjustment */
    #phone {
        padding-left: 100px !important;
    }
    
    /* Flags */
    .iti__flag {
        background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/img/flags.png") !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
        border-radius: 2px !important;
    }
    
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .iti__flag {
            background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/img/flags@2x.png") !important;
        }
    }
    
    /* Animation */
    @keyframes dropdownSlideIn {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    .iti__country-list {
        animation: dropdownSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .iti__country-list {
            max-height: 220px !important;
        }
        
        #phone {
            padding-left: 95px !important;
        }
    }