/* Popup Form No Labels - CSS untuk form tanpa label dengan placeholder yang jelas */

/* Styling untuk form input tanpa label */
#diskonPopup .form-control,
#modalLokasiPopup .form-control {
    font-size: 0.95rem !important;
    padding: 0.85rem 1rem !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background-color: #fff !important;
    color: #495057 !important;
    line-height: 1.5 !important;
    min-height: 48px !important;
}

/* Placeholder styling yang lebih jelas */
#diskonPopup .form-control::placeholder,
#modalLokasiPopup .form-control::placeholder {
    color: #6c757d !important;
    opacity: 0.8 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

/* Focus state untuk input */
#diskonPopup .form-control:focus,
#modalLokasiPopup .form-control:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    outline: none !important;
    background-color: #fff !important;
}

/* Hover state untuk input */
#diskonPopup .form-control:hover,
#modalLokasiPopup .form-control:hover {
    border-color: #dc3545 !important;
    transition: border-color 0.2s ease !important;
}

/* Valid state styling */
#diskonPopup .form-control.is-valid,
#modalLokasiPopup .form-control.is-valid {
    border-color: #28a745 !important;
    background-image: none !important;
    padding-right: 1rem !important;
}

/* Invalid state styling */
#diskonPopup .form-control.is-invalid,
#modalLokasiPopup .form-control.is-invalid {
    border-color: #dc3545 !important;
    background-image: none !important;
    padding-right: 1rem !important;
}

/* Location selector styling (tanpa label) */
#diskonPopup .location-selector-popup,
#modalLokasiPopup .location-selector-popup {
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 0.85rem 1rem !important;
    background: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}

/* Location selector hover state */
#diskonPopup .location-selector-popup:hover,
#modalLokasiPopup .location-selector-popup:hover {
    border-color: #dc3545 !important;
    background-color: #f8f9fa !important;
}

/* Location selector active/selected state */
#diskonPopup .location-selector-popup.selected,
#modalLokasiPopup .location-selector-popup.selected {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
    color: #495057 !important;
}

/* Icon styling dalam location selector */
#diskonPopup .location-selector-popup .fa-map-marker,
#modalLokasiPopup .location-selector-popup .fa-map-marker {
    color: #dc3545 !important;
    font-size: 1rem !important;
    margin-right: 0.5rem !important;
}

#diskonPopup .location-selector-popup .fa-chevron-down,
#modalLokasiPopup .location-selector-popup .fa-chevron-down {
    color: #6c757d !important;
    font-size: 0.8rem !important;
    transition: transform 0.3s ease !important;
}

/* Rotate chevron saat hover */
#diskonPopup .location-selector-popup:hover .fa-chevron-down,
#modalLokasiPopup .location-selector-popup:hover .fa-chevron-down {
    transform: rotate(180deg) !important;
}

/* Form group spacing */
#diskonPopup .mb-3,
#modalLokasiPopup .mb-3 {
    margin-bottom: 1.25rem !important;
}

/* Small text styling */
#diskonPopup .text-muted,
#modalLokasiPopup .text-muted {
    font-size: 0.8rem !important;
    color: #6c757d !important;
    margin-top: 0.25rem !important;
    font-style: italic !important;
}

/* Button styling */
#diskonPopup .btn,
#modalLokasiPopup .btn {
    padding: 0.85rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    min-height: 48px !important;
    border: none !important;
}

#diskonPopup .btn-danger {
    background: linear-gradient(45deg, #dc3545, #e74c3c) !important;
    color: white !important;
}

#diskonPopup .btn-danger:hover {
    background: linear-gradient(45deg, #c82333, #dc3545) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3) !important;
}

/* Checkbox styling */
#diskonPopup .form-check-input,
#modalLokasiPopup .form-check-input {
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin-top: 0.1rem !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 4px !important;
}

#diskonPopup .form-check-input:checked,
#modalLokasiPopup .form-check-input:checked {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

#diskonPopup .form-check-label,
#modalLokasiPopup .form-check-label {
    font-size: 0.9rem !important;
    color: #495057 !important;
    margin-left: 0.5rem !important;
    line-height: 1.4 !important;
}

/* Feedback messages */
#diskonPopup .invalid-feedback,
#modalLokasiPopup .invalid-feedback {
    display: none !important;
    width: 100% !important;
    margin-top: 0.25rem !important;
    font-size: 0.85rem !important;
    color: #dc3545 !important;
    font-weight: 500 !important;
}

#diskonPopup .form-control.is-invalid ~ .invalid-feedback,
#modalLokasiPopup .form-control.is-invalid ~ .invalid-feedback {
    display: block !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #diskonPopup .form-control,
    #modalLokasiPopup .form-control {
        font-size: 0.9rem !important;
        padding: 0.75rem 0.9rem !important;
        min-height: 44px !important;
    }
    
    #diskonPopup .form-control::placeholder,
    #modalLokasiPopup .form-control::placeholder {
        font-size: 0.9rem !important;
    }
    
    #diskonPopup .location-selector-popup,
    #modalLokasiPopup .location-selector-popup {
        padding: 0.75rem 0.9rem !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
    }
    
    #diskonPopup .btn,
    #modalLokasiPopup .btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.95rem !important;
        min-height: 44px !important;
    }
    
    #diskonPopup .mb-3,
    #modalLokasiPopup .mb-3 {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    #diskonPopup .form-control,
    #modalLokasiPopup .form-control {
        font-size: 0.85rem !important;
        padding: 0.7rem 0.8rem !important;
        min-height: 42px !important;
    }
    
    #diskonPopup .form-control::placeholder,
    #modalLokasiPopup .form-control::placeholder {
        font-size: 0.85rem !important;
    }
    
    #diskonPopup .location-selector-popup,
    #modalLokasiPopup .location-selector-popup {
        padding: 0.7rem 0.8rem !important;
        font-size: 0.85rem !important;
        min-height: 42px !important;
    }
    
    #diskonPopup .btn,
    #modalLokasiPopup .btn {
        padding: 0.7rem 1rem !important;
        font-size: 0.9rem !important;
        min-height: 42px !important;
    }
    
    #diskonPopup .text-muted,
    #modalLokasiPopup .text-muted {
        font-size: 0.75rem !important;
    }
    
    #diskonPopup .form-check-label,
    #modalLokasiPopup .form-check-label {
        font-size: 0.85rem !important;
    }
}

/* Animation untuk smooth transitions */
#diskonPopup .form-control,
#diskonPopup .location-selector-popup,
#diskonPopup .btn,
#modalLokasiPopup .form-control,
#modalLokasiPopup .location-selector-popup,
#modalLokasiPopup .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Focus ring untuk accessibility */
#diskonPopup .form-control:focus-visible,
#diskonPopup .location-selector-popup:focus-visible,
#diskonPopup .btn:focus-visible,
#modalLokasiPopup .form-control:focus-visible,
#modalLokasiPopup .location-selector-popup:focus-visible,
#modalLokasiPopup .btn:focus-visible {
    outline: 2px solid #dc3545 !important;
    outline-offset: 2px !important;
}

/* Prevent zoom on iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #diskonPopup .form-control,
    #modalLokasiPopup .form-control {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    @supports (-webkit-touch-callout: none) {
        #diskonPopup .form-control,
        #modalLokasiPopup .form-control {
            font-size: 16px !important;
        }
    }
}